/* ==========================================================================
   DEFY STUDIOS — home.css
   The sections. Each one has its own composition; the tokens in base.css are
   what make them one system.
   ========================================================================== */

/* =========================================================== HERO ========
   Default: a calm, static composition — what you get without JS, with
   reduced motion, or if WebGL never starts. `.motion` switches it to the
   pinned, layered stage the scroll sequence plays on. */
.hero {
  position: relative;
  background: var(--black);
  padding: calc(var(--nav-h) + 24px) var(--pad) 64px;
  display: grid; gap: 28px;
}
.hero__canvas { width: 100%; height: 52vh; min-height: 300px; }
.hero__still { display: none; place-items: center; height: 52vh; min-height: 260px; }
.hero__still img { width: min(62vw, 620px); height: auto;
  filter: drop-shadow(0 0 60px rgba(255, 180, 0, .25)); }
.no-webgl .hero__canvas { display: none; }
.no-webgl .hero__still { display: grid; }

/* the stage wrapper only matters on phones (below); elsewhere its children lay out as before */
.hero__pin { display: contents; }
.hero__frame { display: grid; gap: 22px; }
.beat--1 h1 { font-size: clamp(32px, 1rem + 3.4vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.beat__kick { font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .16em; color: var(--amber); margin-bottom: 14px; }
.beat__line { font-size: clamp(30px, .8rem + 2.9vw, 68px); font-weight: 700; line-height: .96; letter-spacing: -.045em; }
.beat__soft { color: var(--muted); font-weight: 500; }
.beat__line em { font-style: normal; color: var(--amber); }

.tagline { text-transform: uppercase; }
.tagline__row { display: block; overflow: hidden; }
.tagline__defy { display: inline-block; }
.tagline__amber { color: var(--amber); }
/* "the world" and its other languages share one cell; without motion only the English shows */
.tagline__say { display: grid; justify-items: center; }
.tagline__langs { display: none; }
.tagline__w[lang] { font-size: var(--k, 1em); line-height: calc(1 / var(--k, 1)); }
.tagline__w:is([lang="ar"], [lang="hi"], [lang="zh"]) { letter-spacing: normal; }
.tagline__w[lang="ar"] { font-family: "Readex Pro", sans-serif; --k: .92; }
.tagline__w[lang="hi"] { font-family: "Poppins", sans-serif; --k: .9; }
.tagline__w[lang="zh"] { font-family: "Noto Sans SC", sans-serif; --k: .86; }
.tagline__w[lang="ru"] { font-family: "Onest", sans-serif; --k: .92; }
.hero__rail, .hero__cue { display: none; }

/* ---- the cinematic stage ---- */
/* from the first paint (the head script sets .motion) until main.js has built the
   pinned hero, only the hero shows: the sections below would otherwise peek in under
   it for a moment on a slow phone. The nav logo waits for the 3D mark to land on it
   (main.js drives its opacity); if there's no WebGL it shows as normal */
.motion:not([data-booted]) main > section:not(.hero), .motion:not([data-booted]) .footer,
.motion:not([data-booted]) .hero__frame, .motion:not([data-booted]) .hero__rail { visibility: hidden; }
.motion:not(.no-webgl) .nav__emblem { opacity: 0; }
.motion .hero { height: 100svh; padding: 0; display: block; overflow: hidden; }
.motion .hero__canvas { position: absolute; inset: 0; height: 100%; min-height: 0; }
.motion .hero__still { position: absolute; inset: 0; height: auto; }
.motion .hero__frame {
  position: absolute; inset: 0; display: block; pointer-events: none;
  padding: calc(var(--nav-h) + 6px) var(--pad) 30px;
}
.motion .hero__frame a { pointer-events: auto; }

/* ---- phones: the same sequence, held by the browser ----
   A script pin fights the phone's own scrolling (it jumps at the start and end, and
   lags behind a flick). Here the hero is simply tall and its stage is position: sticky,
   so the phone keeps it on screen itself; the script only reads how far through it the
   visitor is. Lengths are in svh/lvh, which don't change as the address bar comes and
   goes, so nothing re-measures mid-scroll. The stage is as tall as the screen gets (lvh),
   so no strip shows under it when the bar slides away; the type keeps to the part that's
   always visible (svh). */
.motion.phone .hero { height: 340svh; overflow: visible; }
.motion.phone .hero__pin { display: block; position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.motion.phone .hero__frame { bottom: calc(100lvh - 100svh); }

.motion .beat { position: absolute; }
.motion .beat--1 { left: var(--pad); bottom: clamp(96px, 15vh, 170px); }
.motion .beat--2 { left: var(--pad); top: 50%; translate: 0 -50%; }
.motion .beat--3 { right: var(--pad); top: 50%; translate: 0 -50%; text-align: right; }
/* measured in the type's own em, so the column holds at every size */
.motion .beat--1 h1 { width: 9.2em; }
.motion .beat__line { width: 6em; }
.motion .beat--2, .motion .beat--3 { opacity: 0; }

.motion .tagline {
  position: absolute; left: 0; right: 0; bottom: clamp(84px, 13vh, 150px);
  text-align: center;
}
/* DEFY stays put and phases in; under it "the world" runs through its languages, each word
   rising into place as the last leaves (js/scroll.js), so everything waits hidden until then */
.motion .tagline__defy { opacity: 0; }
.motion .tagline__lane { opacity: 0; }
.motion .tagline__langs { display: contents; }
.motion .tagline__say > *, .motion .tagline__langs > * { grid-area: 1 / 1; align-self: center; opacity: 0; }

.motion .hero__rail {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 26px;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
}
.hero__chapters { display: flex; gap: clamp(14px, 2vw, 28px);
  font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.hero__chapters li { display: flex; align-items: center; gap: 8px; transition: color .5s var(--ease); white-space: nowrap; }
.hero__chapters li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: background .5s; }
.hero__chapters li.is-on { color: var(--white); }
.hero__chapters li.is-on::before { background: var(--amber); }
.hero__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.hero__bar i { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* the scroll cue waits off stage and only comes up once the visitor has stopped (js/scroll.js) */
.motion .hero__cue {
  position: absolute; right: var(--pad); bottom: 70px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.motion .hero__cue.is-shown, .motion .hero__cue:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
/* the mark, in two halves split along the line in the logo */
.hero__cue-mark { position: relative; width: 46px; aspect-ratio: 1200 / 444; margin-bottom: 4px; }
.hero__cue-mark i { position: absolute; inset: 0; background: url("../assets/logo/defy-emblem.png") center / 100% 100% no-repeat; }
.hero__cue-mark i:first-child { clip-path: inset(0 0 50% 0); }
.hero__cue-mark i:last-child { clip-path: inset(50% 0 0 0); }
/* light from inside the split */
.hero__cue-mark::after {
  content: ""; position: absolute; left: 20%; right: 22%; top: 50%; height: 2px; margin-top: 1px;
  background: var(--amber); border-radius: 2px; box-shadow: 0 0 8px 2px rgba(255, 180, 0, .75); opacity: 0;
}
/* under the word: the light that slipped out falls as a drop, and a chevron catches it */
.hero__cue-drop { position: relative; width: 14px; height: 44px; }
.hero__cue-drop::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px 2px rgba(255, 180, 0, .7); opacity: 0;
}
.hero__cue-drop::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 8px; height: 8px; margin-left: -4px;
  border: solid var(--faint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
/* one breath: the mark opens, the light slips out and falls, the chevron lights as it lands, the mark closes */
.hero__cue.is-shown .hero__cue-mark i:last-child { animation: cue-open 2.8s var(--ease-io) infinite; }
.hero__cue.is-shown .hero__cue-mark::after { animation: cue-glow 2.8s var(--ease-io) infinite; }
.hero__cue.is-shown .hero__cue-drop::before { animation: cue-fall 2.8s infinite; }
.hero__cue.is-shown .hero__cue-drop::after { animation: cue-catch 2.8s infinite; }
@keyframes cue-open { 0%, 8% { transform: none; } 28%, 52% { transform: translateY(5px); } 72%, 100% { transform: none; } }
@keyframes cue-glow { 0%, 10% { opacity: 0; } 28% { opacity: 1; } 52% { opacity: .5; } 70%, 100% { opacity: 0; } }
@keyframes cue-fall {
  0%, 28% { opacity: 0; transform: translateY(0) scale(.5); }
  34% { opacity: 1; transform: translateY(1px) scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  62% { opacity: 1; transform: translateY(27px) scale(.85); }
  70%, 100% { opacity: 0; transform: translateY(30px) scale(.3); }
}
@keyframes cue-catch {
  0%, 58% { border-color: var(--faint); }
  64% { border-color: var(--amber); }
  88%, 100% { border-color: var(--faint); }
}

/* ======================================================= MANIFESTO ====== */
.manifesto { padding-block: var(--sec) clamp(40px, 5vw, 90px); position: relative; }
/* stage 5: the statement rises over the hero while the mark leaves */
.motion .manifesto { margin-top: -40svh; z-index: 2; }
@media (max-width: 900px) { .motion .manifesto { margin-top: -28svh; } }
.manifesto__text {
  margin-top: clamp(36px, 5vw, 72px);
  font-size: clamp(42px, .8rem + 7.4vw, 168px);
  font-weight: 800; line-height: .88; letter-spacing: -.055em; text-transform: uppercase;
}
.manifesto__a, .manifesto__b { display: block; }
.manifesto__b { margin-top: .42em; padding-left: 1.6em; }
.manifesto__text em { font-style: normal; color: var(--amber); }
/* on amber, "defy." is set in reverse: amber type on a black block */
[data-theme="amber"] .manifesto__text em { color: var(--amber); }
[data-theme="amber"] .manifesto__text em .mw, html:not(.motion) [data-theme="amber"] .manifesto__text em {
  background: var(--black); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
[data-theme="amber"] .manifesto__aside { border-left-color: var(--black); }
/* on white, amber can't carry the word itself — it becomes a marker under it */
[data-theme="light"] .manifesto__text em { color: var(--fg); }
html:not(.motion) [data-theme="light"] .manifesto__text em,
.motion [data-theme="light"] .manifesto__text em .mw {
  background: linear-gradient(var(--amber), var(--amber)) 0 88% / 100% .26em no-repeat;
}
.mw { transition: opacity .2s linear; }
.motion .mw { opacity: .13; }
.manifesto__aside {
  margin: clamp(48px, 7vw, 110px) 0 0 auto; width: max-content; max-width: 100%;
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  padding-left: 22px; border-left: 2px solid var(--amber);
}

/* =========================================================== WORK ======= */
.work { padding-top: clamp(30px, 4vw, 70px); }
.work__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.work__head .eyebrow { grid-column: 1 / -1; }
.work__head h2 { grid-column: 1 / span 8; margin-top: 18px; }
.work__intro { grid-column: 9 / span 4; color: var(--muted); max-width: 34ch; }

.case { position: relative; margin-top: clamp(120px, 15vw, 260px); }
.case__index { font: 600 expanded var(--fs-micro)/1 var(--ff); letter-spacing: .14em; color: var(--amber); }
.case__title { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 22px); }
.case__title h3 {
  font-size: clamp(48px, 1rem + 8.2vw, 184px); font-weight: 800;
  line-height: .84; letter-spacing: -.06em; text-transform: uppercase;
}
.case__media { position: relative; overflow: hidden; background: var(--ink-2); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
[data-parallax] img, [data-parallax] video { scale: 1.16; will-change: transform; }
.case__media:focus-visible { outline-offset: -4px; }

.case__meta { display: grid; gap: 16px; align-content: start; }
.case__meta div { display: grid; gap: 6px; }
.case__meta dt { font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.case__meta dd { font-size: var(--fs-small); font-weight: 500; }
.case__desc { font-size: clamp(17px, .9rem + .5vw, 23px); line-height: 1.45; max-width: 44ch; }
.case__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.case__stats li { padding: 22px 20px 0 0; display: grid; gap: 10px; }
.case__stats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.case__stats b { font-size: clamp(34px, 1rem + 3.2vw, 74px); font-weight: 700; line-height: .9; letter-spacing: -.05em; }
.case__stats span { font: 600 expanded var(--fs-micro)/1.3 var(--ff); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* 01 — cinema: the frame bleeds edge to edge, the name sits in it */
.case--cinema .case__media { width: 100%; height: clamp(420px, 88vh, 980px); }
.case--cinema .case__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .9) 100%);
}
.case--cinema .case__title { position: relative; z-index: 2; margin-top: -.62em; font-size: clamp(48px, 1rem + 8.2vw, 184px); }
.case--cinema .case__title h3 { font-size: 1em; }
.case--cinema .case__body {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(32px, 4vw, 64px);
}
.case--cinema .case__meta { grid-column: 1 / span 3; }
.case--cinema .case__desc { grid-column: 4 / span 5; }
.case--cinema .case__stats { grid-column: 1 / -1; margin-top: 24px; }
.case__strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(48px, 6vw, 96px); }
.case__strip > * { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.case__strip > .film { aspect-ratio: 9 / 16; }
.case__strip > :nth-child(1) { grid-column: 4 / span 3; margin-top: -18%; }
.case__strip > :nth-child(2) { grid-column: 8 / span 2; margin-top: 18%; }
.case__strip > :nth-child(3) { grid-column: 10 / span 3; margin-top: -4%; }

/* 02 — split: the name breaks out over the image edge */
.case__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.case--split .case__media { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.case--split .case__side { grid-column: 7 / span 6; display: grid; gap: clamp(26px, 3vw, 44px); padding-top: clamp(40px, 8vw, 140px); }
.case--split .case__title { margin-left: 0; font-size: clamp(48px, 1rem + 8.2vw, 184px); position: relative; z-index: 2; }
.case--split .case__title h3 { font-size: 1em; text-shadow: 0 0 40px rgba(0, 0, 0, .5); }
.case--split .case__meta { grid-template-columns: 1fr 1fr; }

/* 03 — press: a white page, laid out like the coverage */
.case--press { padding-block: clamp(80px, 10vw, 160px); }
.press__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.press__head .case__title { grid-column: 1 / -1; }
.case--press .case__index { color: var(--black); }
.press__lede { grid-column: 7 / span 6; margin-top: 22px; font-size: var(--fs-body); color: var(--muted); }
.press__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(48px, 6vw, 100px); align-items: start; }
.press__clip { background: var(--white); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease); cursor: zoom-in; }
.press__clip img { width: 100%; }
.press__clip.film { aspect-ratio: 4 / 5; background: var(--black); }
.press__clip--a { grid-column: 1 / span 4; rotate: -1.2deg; }
.press__clip--b { grid-column: 5 / span 4; margin-top: 18%; rotate: .8deg; }
.press__clip--c { grid-column: 9 / span 4; rotate: -.5deg; }
.press__clip:hover { transform: translateY(-8px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .1); }
.press__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line-2); }
.press__list li { position: relative; padding: 26px 20px 0 0; display: grid; gap: 10px; align-content: start; }
.press__list li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.press__list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 3px; background: var(--amber); }
.press__list li + li::before { left: 20px; }
.press__k { font: 600 expanded var(--fs-micro)/1.3 var(--ff); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.press__list b { font-size: clamp(38px, 1rem + 3.4vw, 80px); font-weight: 700; line-height: .9; letter-spacing: -.05em; }
.press__list span:last-child { font-size: var(--fs-small); color: var(--muted); }

/* 04 — centre: the product held between the two words of its name */
.centre__stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2vw, 34px); }
.centre__word { font-size: clamp(44px, 1rem + 7vw, 180px); font-weight: 800; line-height: .8; letter-spacing: -.06em; text-transform: uppercase; }
.centre__word--l { text-align: right; }
.case--centre .case__media { width: clamp(220px, 30vw, 520px); aspect-ratio: 4 / 5; }
.centre__body { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.centre__body .case__title { grid-column: 1 / -1; display: none; }
.centre__body .case__desc { grid-column: 1 / span 5; }
.centre__body .case__meta { grid-column: 7 / span 2; }
.centre__body .case__stats { grid-column: 1 / -1; margin-top: 18px; }

/* 05 — numbers: performance work, so the results are the picture */
.numbers__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.numbers__head .case__title { grid-column: 1 / -1; flex-direction: column; gap: 14px; }
.numbers__head .case__index { text-transform: uppercase; letter-spacing: .16em; }
.numbers__head .case__meta { grid-column: 1 / span 5; margin-top: 18px; align-self: start; }
.numbers__head .case__desc { grid-column: 7 / span 6; margin-top: 18px; font-size: var(--fs-body); color: var(--muted); }
.numbers__films { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(40px, 5vw, 80px); }
.numbers__films .film { aspect-ratio: 9 / 16; }
.numbers__films .film:nth-child(2) { translate: 0 12%; }
.numbers__big { margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--line); }
.numbers__big li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-block: clamp(14px, 2vw, 28px); border-bottom: 1px solid var(--line);
}
.numbers__big b { font-size: clamp(76px, 2rem + 13vw, 300px); font-weight: 800; line-height: .8; letter-spacing: -.065em; }
.numbers__big li:nth-child(2) { padding-left: 16%; }
.numbers__big li:nth-child(3) { padding-left: 32%; }
.numbers__big li:nth-child(3) b { color: var(--amber); }
.numbers__big span { font: 600 expanded var(--fs-micro)/1.3 var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: right; }


/* ======================================================= SERVICES ====== */
.services { padding-block: clamp(36px, 5vw, 90px); }
/* the tunnel opens straight onto About: no gap after it */
.motion .services { padding-bottom: 0; }
/* About arrives at the very top of the screen (it opens out of the services tunnel), so its
   heading starts below the nav */
.motion .about { padding-top: calc(var(--nav-h) + clamp(40px, 4vw, 64px)); }   /* a little air under the nav as the tunnel opens onto it */
.services__head h2 { margin-top: 18px; }
/* ---- the vortex ---------------------------------------------------------
   Default (no JS / reduced motion): the six services as a plain grid.
   With motion: a pinned, full-screen tunnel (js/vortex.js). */
.vx { margin-top: clamp(48px, 6vw, 96px); }
.vx__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gap); padding-inline: var(--pad); max-width: 1840px; margin-inline: auto; }
/* the services are 3D objects with no frame: a still of each by default,
   replaced by the live, slowly turning object in the tunnel */
.vx__pic { position: relative; aspect-ratio: 4 / 5; }
.vx__pic img { width: 100%; height: 100%; object-fit: contain; }
.vx__obj { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.vx__pic.is-live img { visibility: hidden; }
.vx__pic.is-live .vx__obj { display: block; }
.vx__code { display: grid; place-items: center; width: 100%; height: 100%; background: var(--amber); color: var(--black); font: 800 expanded clamp(32px, 4vw, 52px)/1 var(--ff); }
.vx__text { margin-top: 16px; display: grid; gap: 8px; }
.vx__num { font: 600 expanded var(--fs-micro)/1 var(--ff); letter-spacing: .14em; color: var(--amber); }
.vx__name { font-size: clamp(18px, .7rem + 1.05vw, 28px); overflow-wrap: anywhere; font-weight: 800; font-stretch: 125%; letter-spacing: -.03em; line-height: .95; text-transform: uppercase; }
.vx__desc { color: var(--muted); font-size: var(--fs-body); max-width: 34ch; }
.vx__lines, .vx__tunnel, .vx__hud { display: none; }

/* the first ring sits about 46svh minus its radius (--ring) below the stage
   top, so pull the stage up until that ring is ~40px under the title */
.motion .vx { --ring: 330px; margin-top: min(48px, calc(40px + var(--ring) - 46svh)); }
/* the tunnel fills the tallest the screen gets (lvh: with the phone's address bar
   tucked away), so no strip of About shows under it when the bar slides off */
.motion .vx__stage { position: relative; z-index: 2; height: 100vh; height: 100lvh; overflow: hidden; perspective: 1100px; perspective-origin: 50% 46%; }
/* About slides up one screen, under the pinned tunnel, so the tunnel's far end opens
   straight onto it (js/vortex.js) and there's no empty screen between the two */
.motion .about { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100lvh; }   /* one tunnel-height up */
/* the tunnel's pin spacer stays over that lifted screen of About after the tunnel lets go, so
   only the tunnel itself takes the pointer; once it's hidden, About gets it */
.motion .vx, .motion .vx .pin-spacer { pointer-events: none; }
.motion .vx__stage { pointer-events: auto; }
/* phones: the tunnel is held by sticky too, for the length of the flight (5.6 services
   at 0.7 of a screen each, as js/vortex.js reads it) */
.motion.phone .vx { height: calc(100lvh + 392svh); }
.motion.phone .vx__stage { position: sticky; top: 0; }
.motion .vx__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motion .vx__tunnel { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.motion .vx__world { position: absolute; left: 50%; top: 46%; transform-style: preserve-3d; }
.vx__ring { position: absolute; overflow: visible; max-width: none; will-change: transform, opacity; backface-visibility: hidden; }   /* the tunnel's centre has no width */
.vx__ring text { font: 700 15px var(--ff); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; fill: rgba(255, 255, 255, .2); }
.vx__ring.is-on text { fill: var(--amber); }
.motion .vx__list {
  display: block; position: absolute; left: 50%; top: 46%; width: 0; height: 0; padding: 0; margin: 0; max-width: none;
  transform-style: preserve-3d; pointer-events: none;
}
.motion .vx__item {
  position: absolute; left: 0; top: 0; width: 720px; margin: -220px 0 0 -360px; text-align: center;
  /* drawn once, then only moved: the GPU scales the finished layer instead
     of re-drawing photo and type at every new size */
  will-change: transform, opacity; visibility: hidden; backface-visibility: hidden;
}
.motion .vx__pic { width: 300px; margin: 0 auto; }
.motion .vx__text { justify-items: center; margin-top: 18px; will-change: opacity; }
.motion .vx__name { font-size: 48px; line-height: .92; }
.motion .vx__desc { display: none; }
.motion .vx__hud { display: flex; position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: clamp(28px, 5vh, 56px); justify-content: space-between; align-items: flex-end; gap: 24px; pointer-events: none; }
/* the description sits on its own dark ground, above the rings and the
   speed lines, so the type never has a ring running through it */
.vx__hud-desc {
  max-width: 38ch; padding: 16px 20px 17px; border-left: 2px solid var(--amber);
  background: rgba(6, 6, 6, .84); box-shadow: 0 0 40px 18px rgba(6, 6, 6, .55);
  color: rgba(255, 255, 255, .86); font-size: clamp(14px, .78rem + .2vw, 16px); line-height: 1.5;
  transition: opacity .4s var(--ease);
}
/* wide screens: halfway up the left side, clear of the title at the bottom */
@media (min-width: 1100px) {
  .motion .vx__hud { top: 0; }
  .motion .vx__hud-desc { align-self: center; max-width: min(36ch, calc(50vw - 330px)); }
}
.vx__count { font: 600 expanded var(--fs-micro)/1 var(--ff); letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.vx__count b { color: var(--fg); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; }

@media (max-width: 900px) {
  .vx__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion .vx { --ring: 237px; }
  .motion .vx__item { width: 440px; margin: -170px 0 0 -220px; }
  .motion .vx__pic { width: 220px; }
  .motion .vx__name { font-size: 30px; }
  .vx__ring text { font-size: 12px; }
}
@media (max-width: 600px) {
  .vx__list { grid-template-columns: minmax(0, 1fr); }
  .motion .vx { --ring: 221px; }
  /* the service in front fits the screen: names wrap rather than run off the edges */
  .motion .vx__item { width: calc(100vw - 2 * var(--pad)); margin-left: calc(var(--pad) - 50vw); }
  .motion .vx__name { font-size: min(24px, 6vw); }
  /* the object scales with the screen's height, so a shorter phone still has room for
     the description under it; the description takes the full width (fewer lines), with
     the count above it */
  .motion .vx__pic { width: min(220px, 26svh); }
  .motion .vx__hud { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .motion .vx__count { align-self: flex-end; }
  .motion .vx__hud-desc { max-width: none; }
  .vx__hud-desc { font-size: 13.5px; padding: 12px 14px 13px; line-height: 1.45; }
}

/* ========================================================== ABOUT ====== */
.about { padding-block: clamp(50px, 6vw, 110px) clamp(16px, 2.5vw, 40px); overflow-x: clip; }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.about__copy { grid-column: 1 / span 7; }
.about__copy h2 { margin-top: 18px; }
.about__text { margin-top: clamp(32px, 4vw, 60px); display: grid; gap: 1em; }
.about__text p { font-size: clamp(16px, .8rem + .45vw, 21px); line-height: 1.45; letter-spacing: -.01em; max-width: 44ch; }
.about__text p:first-child { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; max-width: 28ch; }
.about__mark { grid-column: 8 / span 5; align-self: end; display: grid; gap: 14px; }
.about__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
/* the emblem in particles (js/particle-mark.js); the image is the fallback.
   The canvas runs past the frame so a burst isn't cut off at a hard edge */
.about__frame canvas { display: none; position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; }
.about__frame.is-live { overflow: visible; }
.about__frame.is-live img { display: none; }
.about__frame.is-live canvas { display: block; }
.about__frame img { width: 100%; height: 100%; object-fit: contain; }

/* ======================================================== CONTACT ====== */
.contact { padding-block: var(--sec) clamp(90px, 10vw, 170px); }
/* white, like About above it — a hairline marks where one ends */
.contact[data-theme="light"] { border-top: 1px solid var(--line); }
.contact__title { margin-top: 26px; font-size: clamp(40px, 1rem + 9.4vw, 208px); font-weight: 800; line-height: .84; letter-spacing: -.06em; text-transform: uppercase; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(64px, 8vw, 130px); }
.contact__aside { grid-column: 1 / span 4; display: grid; gap: 48px; align-content: start; }
.contact__lead { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.015em; }
.form { grid-column: 6 / span 7; }

/* ====================================================== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .work__head h2 { grid-column: 1 / -1; }
  .work__intro { grid-column: 1 / span 8; margin-top: 12px; }
  .case--cinema .case__meta { grid-column: 1 / span 4; }
  .case--cinema .case__desc { grid-column: 5 / span 8; }
  .press__head .case__title { grid-column: 1 / -1; }
  .press__lede { grid-column: 1 / span 9; margin-top: 18px; }
  .press__list { grid-template-columns: repeat(2, 1fr); }
  .press__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .press__list li:nth-child(3)::before { left: 0; }
  .press__list li:nth-child(n+3) { margin-top: 32px; }
  .numbers__head .case__title { grid-column: 1 / -1; }
  .numbers__head .case__meta { grid-column: 1 / span 4; margin-top: 18px; }
  .numbers__head .case__desc { grid-column: 5 / span 8; margin-top: 18px; }
}

@media (max-width: 900px) {
  /* hero stage: portrait framing, type pulled to the edges of the scene */
  .motion .beat--1 { bottom: 110px; }
  .motion .beat--2, .motion .beat--3 { top: auto; bottom: 110px; translate: none; }
  .motion .beat--1 h1, .motion .beat__line { width: auto; max-width: 11em; }
  .motion .beat--3 { right: var(--pad); left: var(--pad); text-align: left; }
  .motion .tagline { bottom: 92px; }
  .hero__chapters li:not(.is-on) { display: none; }
  .motion .hero__cue { display: none; }

  .manifesto__b { padding-left: 0; }

  .case__strip > :nth-child(1) { grid-column: 1 / span 5; margin-top: 0; }
  .case__strip > :nth-child(2) { grid-column: 6 / span 3; margin-top: 30%; }
  .case__strip > :nth-child(3) { grid-column: 9 / span 4; margin-top: 8%; }

  .case--split .case__media { grid-column: 1 / -1; aspect-ratio: 4 / 4.4; }
  .case--split .case__side { grid-column: 1 / -1; padding-top: 0; margin-top: -.5em; }
  .case--split .case__title { margin-left: 0; }

  .press__clip--a { grid-column: 1 / span 7; }
  .press__clip--b { grid-column: 7 / span 6; margin-top: 40%; }
  .press__clip--c { grid-column: 2 / span 9; margin-top: -8%; }

  .centre__stage { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .centre__word--l, .centre__word--r { text-align: center; }
  .case--centre .case__media { width: min(76vw, 420px); order: 1; }
  .centre__word--l { order: 0; }
  .centre__word--r { order: 2; }
  .centre__body .case__desc { grid-column: 1 / -1; }
  .centre__body .case__meta { grid-column: 1 / -1; }

  .numbers__big li:nth-child(2) { padding-left: 8%; }
  .numbers__big li:nth-child(3) { padding-left: 16%; }


  .about__copy, .about__mark { grid-column: 1 / -1; }
  .about__mark { margin-top: 48px; max-width: 520px; }

  .contact__aside, .form { grid-column: 1 / -1; }
  .form { margin-top: 56px; }
}

@media (max-width: 600px) {
  .case__stats { grid-template-columns: 1fr; }
  .case__stats li { padding: 18px 0 0; }
  .case__stats li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }
  .case--cinema .case__meta, .case--cinema .case__desc { grid-column: 1 / -1; }
  .case--split .case__meta { grid-template-columns: 1fr; }
  .press__list { grid-template-columns: 1fr; }
  .press__list li, .press__list li + li { padding-left: 0; border-left: 0; }
  .press__list li::before, .press__list li + li::before { left: 0; }
  .press__list li + li { margin-top: 32px; }
  .press__lede { grid-column: 1 / -1; }
  .numbers__head .case__meta, .numbers__head .case__desc { grid-column: 1 / -1; }
  .numbers__big li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .numbers__big li:nth-child(n) { padding-left: 0; }
  .numbers__big span { text-align: left; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* the longest word on the page has to fit a phone */
@media (max-width: 600px) { .contact__title { font-size: 11.2vw; } }

/* the parting words are allowed past the frame, never past the page */
.case--centre { overflow-x: clip; }

/* ============================================================ TYPE =======
   Archivo carries everything. The uppercase statements run expanded — the
   same wide stance as the DEFY STUDIOS wordmark — and the sentence-case
   headlines stay at normal width so they read as voice, not signage. */
.manifesto__text, .contact__title,
.case__title h3, .centre__word, .numbers__big b { font-stretch: 125%; }
.tagline__row { white-space: nowrap; }
/* the tagline is set like the manifesto: Archivo, expanded, extra bold, tight */
.tagline {
  font-family: var(--ff); font-weight: 800; font-stretch: 125%;
  font-size: clamp(32px, .5rem + 6vw, 144px); line-height: 1; letter-spacing: -.035em;
}
.tagline__row { padding: .05em 0; }
.manifesto__text { letter-spacing: -.035em; font-size: clamp(34px, .6rem + 5.6vw, 132px); }
.contact__title { letter-spacing: -.035em; font-size: clamp(34px, .8rem + 7vw, 168px); }
.case__title h3 { letter-spacing: -.035em; }
.numbers__big b { letter-spacing: -.04em; }
.display-2, .beat__line, .beat--1 h1 { letter-spacing: -.03em; }
@media (max-width: 600px) { .contact__title { font-size: 8.4vw; } }

/* ========================================================== CLIENTS ======
   A dark wall of amber neon signs, a little taller than one screen: each logo is
   a glowing outline. The glow is baked into pictures (assets/clients/neon, see the
   README); drawn live with SVG filters it made the page stutter on the way in. Without motion
   they all simply stay lit; with motion js/neon-wall.js puts a dead tube behind
   each and flickers them on. Only hovering brings colour in: the logo goes
   solid in its brand colour (--brand, or its own file for data-own), halo-lit
   from behind so even near-black brand colours read on the black wall. Brands
   with no colour on file blaze solid amber. The halo is baked too (neon/*-glow.webp,
   see the README): drawn live it made the first hovers stutter. */
/* a little taller than the window, with room at the foot, so the wall takes a moment to scroll past */
/* overflow-x: the glows of the outer logos reach past the screen edge */
.clients { overflow-x: clip; display: flex; flex-direction: column; height: 112vh; height: 112svh; padding-block: clamp(76px, 10svh, 96px) clamp(48px, 10svh, 120px); }
.clients .wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.clients__title { flex: none; font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .16em; color: var(--amber); }
.clients__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: clamp(10px, 2svh, 22px); }
/* every picture of a logo is sized off the logo itself: its width and height when it's fitted
   into the cell's logo box (74% x 76%, as object-fit: contain would), from its shape --ar. So
   the neon, the glow and the coloured logo all land on the same spot at any window size */
.clients__grid li {
  position: relative; min-width: 0; min-height: 0; container-type: size;
  --lw: min(74cqw, 76cqh * var(--ar, 1)); --lh: calc(var(--lw) / var(--ar, 1));
}
/* the pictures never take the pointer: a baked sign and its glow are bigger than the logo and
   reach into the cells round it, so the cell itself (the li) is what you hover */
.clients__grid img { position: absolute; inset: 12% 13%; width: 74%; height: 76%; object-fit: contain; pointer-events: none; }
/* a baked sign or glow is the logo plus room round it for the light, so its box is that much
   bigger (--gx/--gy for the neon, --hx/--hy for the glow, worked out when they were baked)
   about the same centre */
.clients__grid :is(.clients__neon, .clients__glow) {
  inset: auto; left: 50%; top: 50%; translate: -50% -50%; max-width: none;
}
.clients__grid .clients__neon { width: calc(var(--lw) * var(--gx)); height: calc(var(--lh) * var(--gy)); }
.clients__grid .clients__glow { width: calc(var(--lw) * var(--hx)); height: calc(var(--lh) * var(--hy)); }
.clients__grid .is-tube { opacity: 0; will-change: opacity; }
.clients__grid li.is-lit .is-tube { opacity: 1; }
.clients__ink { position: absolute; inset: 12% 13%; }
.clients__ink i {
  position: absolute; inset: 0; background: var(--brand, var(--amber));
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.clients__ink, .clients__grid .clients__own, .clients__grid .clients__glow { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.clients__grid li:hover .clients__neon { opacity: 0; }
/* colour comes in quickly, so the swap from the neon reads as instant */
.clients__grid li:hover :is(.clients__ink, .clients__own, .clients__glow) { opacity: 1; transition-duration: .08s; }

@media (max-width: 900px) {
  .numbers__films { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .numbers__films .film:nth-child(2) { translate: 0 8%; }
  .clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .film__cap { padding: 10px; }
  .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }
}
/* phones on their side: one long, low wall */
@media (max-height: 520px) and (min-width: 600px) {
  .clients__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* expanded caps: size the longest single words (SOURDOUGH, AUTOWERKS) to the screen */
  .case__title h3, .case--cinema .case__title, .case--split .case__title { font-size: 9.6vw; }
  .case--cinema .case__title h3, .case--split .case__title h3 { font-size: 1em; }
}
@media (max-width: 600px) { .numbers__films .film__cap span { display: none; } }

/* ===================================================== ARCHIVE WINDOW ====
   Default (no JS, reduced motion): a plain contact sheet with the title
   above it. With motion: the sheet is laid on a table in perspective,
   the type sits over it, and js/vault.js moves it. */
.vault { position: relative; margin-top: clamp(56px, 7vw, 110px); }
.vault__stage { position: relative; }
.vault__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-inline: var(--pad); }
.vault__tile { position: relative; transition: opacity .6s var(--ease), filter .6s var(--ease); }
.vault__btn { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.vault__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vault__tile--doc .vault__btn { background: var(--white); }
.vault__tile--doc .vault__btn img { object-fit: contain; padding: 8%; }
.vault__tile--film .vault__btn::after {          /* the film mark: a small amber play disc */
  content: ""; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l6 4-6 4z' fill='%23000'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.vault__cap { margin-top: 8px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.vault__cap b { color: var(--fg); font-weight: 600; }
.vault__shade { display: none; }
/* the loop's copies of the sheet only exist for the moving table */
.vault__tile--clone { display: none; }
.motion .vault__tile--clone { display: block; }

.vault__ui { margin-top: 40px; display: grid; gap: 22px; }
.vault__kick { font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .16em; color: var(--amber); }
.vault__title { font-size: clamp(40px, 1rem + 5.4vw, 120px); font-weight: 800; font-stretch: 125%; line-height: .88; letter-spacing: -.04em; text-transform: uppercase; }
.vault__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.vault__cta {
  display: inline-flex; align-items: center; gap: .6em; padding: 20px 30px; border-radius: 999px;
  background: var(--white); color: var(--black); font-size: var(--fs-body); font-weight: 700; letter-spacing: -.01em;
  transition: background .3s, transform .5s var(--ease);
}
.vault__cta span { transition: transform .5s var(--ease); }
.vault__cta:hover { background: var(--amber); transform: translateY(-3px); }
.vault__cta:hover span { transform: translateX(6px); }

/* ---- the table ---------------------------------------------------- */
.motion .vault__stage {
  overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 30%;
}
.motion .vault__plane {
  position: absolute; left: 50%; top: 50%; width: 168vw;
  /* js/vault.js writes this transform every frame while the loop runs */
  transform: translate(-50%, -50%) rotateX(50deg) rotateZ(-24deg);
  will-change: transform;
}
.motion .vault__grid { grid-template-columns: repeat(7, 1fr); gap: 1.6vw; padding: 0; }
.motion .vault__cap { display: none; }
.motion .vault__shade {
  /* its own layer above the tilted table: the table is a 3D-transformed
     layer, which the browser otherwise draws over this flat one */
  z-index: 2; transform: translateZ(0);
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%),
    /* a short fade at the foot, just enough that the table never ends on a hard edge */
    linear-gradient(to top, var(--bg) 0%, transparent 9%),
    linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 45%);
}
.motion .vault__ui {
  position: absolute; left: 0; right: 0; bottom: clamp(36px, 6vh, 80px); margin: 0; z-index: 3;
  pointer-events: none;
}
.motion .vault__ui > * { pointer-events: auto; }
.motion .vault__title { pointer-events: none; }

/* ---- with motion the section is a little taller than the window, but arriving at it shows
   the heading, the table and the button together: the title and button sit inside the first
   screen and the table runs on below them. The table takes whatever room the heading
   leaves; the headings are smaller than the site's other display type. */
.motion .work {
  height: 130svh; min-height: 700px; display: flex; flex-direction: column;
  padding-top: clamp(84px, 12vh, 130px);
}
.motion .work__head { flex: none; }
.motion .work__head h2 { font-size: clamp(34px, .6rem + 3.3vw, 78px); margin-top: 12px; }
.motion .vault { flex: 1; min-height: 0; margin-top: clamp(16px, 3vh, 36px); display: flex; flex-direction: column; }
.motion .vault__stage { flex: 1; height: auto; min-height: 0; }
.motion .vault__title { font-size: clamp(30px, .6rem + 3vw, 72px); }
.motion .vault__ui { gap: 16px; bottom: calc(30svh + clamp(36px, 6vh, 80px)); }   /* still inside the first screen; the table runs on below it */

@media (max-width: 900px) {
  .vault__grid { grid-template-columns: repeat(3, 1fr); }
  .motion .vault__plane { width: 300vw; transform: translate(-50%, -58%) rotateX(46deg) rotateZ(-20deg); }
  .motion .vault__grid { gap: 2.6vw; }
  .vault__cta { padding: 16px 24px; }
}
@media (max-width: 600px) {
  .vault__grid { grid-template-columns: repeat(2, 1fr); }
  .vault__grid > :nth-child(n + 13) { display: none; }   /* flat fallback: a dozen is enough */
  .motion .vault__grid > :nth-child(n + 13) { display: block; }
}
/* phones: one "THE WORLD" sized to the screen */
@media (max-width: 600px) { .tagline { font-size: 10.5vw; } }

/* ======================================================= CONTACT FIT =====
   The whole enquiry fits one screen. Desktop/tablet: title and details on
   the left, the form on the right, its fields paired two-up. Phones: one
   column, but the form itself (first field to Send) fits a screen. Sizes
   lean on the viewport height so short laptop screens fit too. */
.contact { padding-block: clamp(48px, 8vh, 110px) clamp(56px, 9vh, 120px); }
.contact__grid { margin-top: 0; align-items: start; row-gap: clamp(28px, 4vh, 48px); }
.contact__head { display: grid; gap: clamp(14px, 2.4vh, 26px); }
/* sized to its column: "EXPECTATIONS?" is about 11.5em wide in expanded caps */
.contact__title { margin-top: 0; font-size: min(3.15vw, 10vh); }
.contact__aside { gap: clamp(20px, 3.4vh, 40px); }
.contact__lead { font-size: clamp(17px, .7rem + .8vw, 24px); }

/* align-content: fields in a row share a height, but not all have an error
   line; without this the shorter one stretches and its underline drops */
#enquiry .field { margin-bottom: clamp(12px, 2.2vh, 22px); gap: 6px; align-content: start; }
#enquiry .field input, #enquiry .field textarea, #enquiry .select select {
  font-size: clamp(16px, .55rem + .7vw, 20px); padding: 6px 0 9px;
}
#enquiry .select select { padding-right: 40px; }
#enquiry .field textarea { min-height: clamp(64px, 11vh, 120px); }
#enquiry .field__err { min-height: 12px; font-size: 11.5px; }
#enquiry .submit { padding: clamp(14px, 2.2vh, 22px) 24px; font-size: clamp(17px, .7rem + .6vw, 22px); }
#enquiry .form__status { margin-top: 10px; }

@media (min-width: 901px) {
  /* a full screen, so the footer's fade starts below it; the content sits
     at the top and the spare room falls beneath the form */
  .contact { min-height: 100svh; display: flex; align-items: flex-start; }
  .contact > .wrap { width: 100%; }
  .contact__aside { grid-column: 1 / span 5; }
  .form { grid-column: 7 / span 6; }
}
@media (min-width: 601px) {
  /* pairs: name + email, company + service; message and send full width */
  #enquiry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  #enquiry > .field:nth-of-type(5), #enquiry .submit, #enquiry .form__status { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .contact__title { font-size: min(7.4vw, 9vh); }
}
@media (max-width: 600px) {
  .contact__title { font-size: 7.3vw; }
}
@media (max-width: 600px) {
}