/* Contact closes the page the way the hero opens it: the same dark stage
   (the spotlight follows the pointer and otherwise rests on the logo's lamp
   at the top right). When the section scrolls in (.is-visible, contact.js)
   the lamp draws and switches on, then "Get in touch" lights up. */
.contact-section {
  --lamp-height: clamp(180px, 24vw, 320px);
  --lamp-right: max(6vw, 36px);
  --lamp-top: clamp(56px, 8vw, 104px);
  --spot-x: calc(100% - var(--lamp-right) - var(--lamp-height) * 5 / 14);
  --spot-y: calc(var(--lamp-top) + var(--lamp-height) * .375);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 11vw, 144px) max(6vw, 36px, (100% - 1280px) / 2);
  background:
    radial-gradient(110% 85% at 80% 20%, #2c312f, transparent 62%),
    var(--stage);
  color: var(--paper);
}

.contact-lamp {
  position: absolute;
  top: var(--lamp-top);
  right: var(--lamp-right);
  height: var(--lamp-height);
  aspect-ratio: 200 / 280;
}

/* The lamp's light, centred on the glass. */
.contact-lamp::before {
  content: "";
  position: absolute;
  top: 37.5%;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(253 178 1 / 32%), rgb(253 178 1 / 9%) 45%, transparent);
  translate: -50% -50%;
}

.contact-lamp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* No glow here: the title's words rise out of clipping masks, which would
   cut a glow into hard-edged boxes. */
.contact-title {
  --hero-word-color: var(--paper);
  --hero-word-glow: none;
  -webkit-text-stroke-width: max(1px, .012em);
  -webkit-text-stroke-color: transparent;
}

/* Waiting to scroll in (only once contact.js has armed it, so without JS
   everything simply shows lit). */
.contact-section.is-armed:not(.is-visible) .hero-lamp-glass {
  fill-opacity: 0;
  stroke: var(--lamp-off);
  stroke-dashoffset: 1;
}

.contact-section.is-armed:not(.is-visible) .hero-lamp-base,
.contact-section.is-armed:not(.is-visible) .hero-lamp-cap,
.contact-section.is-armed:not(.is-visible) .contact-lamp::before,
.contact-section.is-armed:not(.is-visible) .stage-spot {
  opacity: 0;
}

.contact-section.is-visible .hero-lamp-glass {
  animation:
    hero-lamp-draw 1300ms cubic-bezier(.65, 0, .35, 1) 200ms both,
    hero-lamp-power 700ms step-end 1400ms both,
    hero-lamp-fill 700ms step-end 1400ms both;
}

.contact-section.is-visible .hero-lamp-base {
  animation:
    hero-enter 1000ms cubic-bezier(.22, 1, .36, 1) 700ms both,
    hero-bar-power 700ms step-end 1400ms both,
    hero-bar-glow 3200ms ease-in-out 2400ms infinite alternate;
}

.contact-section.is-visible .hero-lamp-cap {
  animation:
    hero-enter 1000ms cubic-bezier(.22, 1, .36, 1) 820ms both,
    hero-bar-power 700ms step-end 1480ms both,
    hero-bar-glow 3200ms ease-in-out 2600ms infinite alternate;
}

.contact-section.is-visible .contact-lamp::before {
  animation:
    hero-glow-power 700ms step-end 1400ms both,
    hero-glow-breathe 3200ms ease-in-out 2400ms infinite alternate;
}

.contact-section.is-visible .stage-spot {
  animation: hero-fade 1200ms ease 1800ms both;
}

.contact-section.is-visible .contact-title {
  animation: hero-word-power 700ms step-end 1500ms both;
}

.contact-section.is-visible .contact-title-accent {
  --hero-word-color: var(--yellow);
  animation: hero-word-power 700ms step-end 1610ms both;
}

.contact-heading {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.contact-eyebrow {
  margin: 0 0 12px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 9vw, 8rem);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
}

.contact-title-accent {
  color: var(--yellow);
}

.contact-lead {
  max-width: 760px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  color: var(--paper);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
}

.contact-lead span {
  display: block;
  margin-top: 6px;
  color: rgb(255 255 255 / 70%);
  font-size: .8em;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.contact-details {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px);
  border-top: 3px solid var(--yellow);
  background: var(--primary);
}

.contact-detail dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-detail dt svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.contact-detail dd {
  margin: 0;
  color: rgb(255 255 255 / 88%);
  font-size: 1.05rem;
  line-height: 1.55;
}

.contact-detail dd a {
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}

.contact-detail dd a:hover {
  color: var(--yellow);
}

.contact-whatsapp {
  display: inline-block;
  transition: translate 300ms var(--ease-out);
}

.contact-whatsapp:hover {
  translate: 0 -3px;
}

.contact-whatsapp img {
  display: block;
  width: min(100%, 220px);
  height: auto;
}

/* The forms sit in a dark panel (here and on the careers page). */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: clamp(28px, 3.5vw, 44px);
  border-top: 3px solid var(--yellow);
  background: var(--primary);
  color: var(--paper);
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-field label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0;
  background: rgb(255 255 255 / 6%);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.contact-field textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-field input:hover,
.contact-field textarea:hover {
  border-color: rgb(255 255 255 / 45%);
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--yellow);
  outline: 0;
  background: rgb(255 255 255 / 9%);
  box-shadow: 0 0 0 3px rgb(252 204 12 / 25%);
}

.contact-field input:user-invalid,
.contact-field textarea:user-invalid {
  border-color: #ff8a80;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
}

.contact-status {
  flex: 1 1 260px;
  margin: 0;
  color: rgb(255 255 255 / 80%);
}

.contact-status:empty {
  display: none;
}

.contact-form.is-sent .contact-status {
  color: var(--yellow);
}

.contact-form.has-error .contact-status {
  color: #ff8a80;
}

.contact-submit {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  gap: 14px;
  padding: 0 30px;
  border: 0;
  background: var(--yellow);
  color: var(--primary);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 200ms ease;
}

.contact-submit svg {
  width: 24px;
  height: 24px;
  transition: translate 300ms var(--ease-out);
}

.contact-submit:hover:not(:disabled) {
  background: var(--paper);
}

.contact-submit:hover:not(:disabled) svg {
  translate: 6px 0;
}

.contact-submit:disabled {
  cursor: progress;
  opacity: .65;
}

@media (max-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  /* The lamp tucks into the top-right corner behind the title, dimmed. */
  .contact-section {
    --lamp-height: 46vw;
    --lamp-right: 4vw;
    --lamp-top: 40px;
    padding: 72px 24px;
  }

  .contact-lamp {
    opacity: .3;
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
  }

  .contact-submit {
    width: 100%;
    justify-content: space-between;
  }
}

/* Project brief (js/brief.js): three steps in the form panel, with a bulb
   that fills a third per step and switches on when the brief is sent. */
.brief-form button[hidden] {
  display: none;
}

.brief-progress {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.brief-bulb {
  width: 40px;
  height: 56px;
  flex: 0 0 auto;
  overflow: visible;
}

.brief-bulb-glass {
  fill: rgb(255 255 255 / 6%);
  stroke: rgb(255 255 255 / 35%);
  stroke-width: 5;
}

.brief-bulb-fill {
  fill: var(--amber);
}

/* The level rises with --brief-level (0–1, from brief.js); the glass spans
   roughly y 30–190 of the 280 box. */
.brief-bulb-level {
  transform: translateY(calc(30px + (1 - var(--brief-level, 0)) * 165px));
  transition: transform 600ms var(--ease-out);
}

.brief-bulb-bar {
  fill: rgb(255 255 255 / 22%);
}

.brief-form.is-sent .brief-bulb-level {
  transform: translateY(0);
}

.brief-form.is-sent .brief-bulb {
  filter: drop-shadow(0 0 10px rgb(253 178 1 / 60%));
  animation: hero-glow-power 700ms step-end both;
}

.brief-form.is-sent .brief-bulb-glass {
  stroke: var(--amber);
}

.brief-form.is-sent .brief-bulb-bar {
  fill: var(--bulb-base);
}

.brief-count {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brief-current {
  color: var(--yellow);
}

.brief-steps {
  display: flex;
  gap: 8px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brief-steps li {
  padding: 6px 12px 4px;
  border: 1px solid rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 45%);
  transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease;
}

.brief-steps li.is-done {
  border-color: rgb(255 255 255 / 40%);
  color: var(--paper);
}

.brief-steps li.is-current {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--primary);
}

/* Without JS every step shows; the wizard shows one at a time. */
.brief-steps {
  display: none;
}

.brief-form.is-wizard .brief-steps {
  display: flex;
}

.brief-form:not(.is-wizard) .brief-count {
  display: none;
}

.brief-step {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brief-form.is-wizard .brief-step:not(.is-current) {
  display: none;
}

.brief-form.is-wizard .brief-step.is-current {
  animation: brief-step-in 450ms var(--ease-out) both;
}

.brief-step legend {
  margin-bottom: 14px;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.brief-hint {
  margin: 0;
  color: rgb(255 255 255 / 60%);
}

/* Services and timeline as chips (real checkboxes and radios underneath). */
.brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brief-chip {
  position: relative;
}

.brief-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.brief-chip span {
  display: inline-block;
  padding: 12px 18px 10px;
  border: 2px solid rgb(255 255 255 / 22%);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, translate 300ms var(--ease-out);
}

.brief-chip span:hover {
  border-color: var(--yellow);
  translate: 0 -2px;
}

.brief-chip input:checked + span {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--primary);
}

.brief-chip input:focus-visible + span {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.brief-error {
  margin: 0;
  color: #ff8a80;
}

.brief-error:empty {
  display: none;
}

.brief-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.brief-back {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  padding: 0 22px;
  border: 2px solid rgb(255 255 255 / 30%);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 180ms ease;
}

.brief-back svg {
  width: 22px;
  height: 22px;
}

.brief-back:hover {
  border-color: var(--paper);
}

@keyframes brief-step-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (max-width: 680px) {
  .brief-steps {
    margin-left: 0;
  }

  .brief-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .brief-back {
    width: 100%;
    justify-content: center;
  }
}