/* NEWPOINT — reskin of Airview. Serif display + mono slate, hairline rules, red as the only accent. */
:root{
  --black:#000; --near:#070707; --ink:#0b0b0b;
  --g1:#3a3a3a; --g2:#6f6f6f; --g3:#9a9a9a; --e6:#E6E6E6;
  --red:#9E2828;
  --blue:#275F9F;
  --green:#2FA75A;
  --line:rgba(255,255,255,.13);
  --display:"Archivo",system-ui,sans-serif;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(18px,4vw,60px);
  --maxw:1720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--e6);font-family:var(--sans);font-weight:350;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* Native <button> carries its own background and chrome in many engines —
   WebKit in-app browsers (Facebook's, Instagram's) especially, where an
   unset background renders as white-on-white. Every button in this file
   defines its own treatment, so normalise them all to a clean baseline;
   variants that want a background (.btn--fill, .lb__opt) set it below. */
button{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}

.slate{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--g3)}
.display{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.03em}
.it{font-style:normal;font-weight:350;letter-spacing:-.02em;color:var(--e6)}
.mark{display:inline-block;width:1em;height:1em;vertical-align:middle;fill:var(--red)}
.mark--r{transform:rotate(90deg)}

/* ── nav ───────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:baseline;justify-content:space-between;padding:20px var(--pad);transition:background .4s,padding .35s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,7,7,.9);backdrop-filter:blur(12px);padding:13px var(--pad);border-bottom:1px solid var(--line)}
.nav__logo{display:block}
.nav__logo img{height:clamp(36px,3.4vw,44px);width:auto;display:block;transform:translateY(5.5%)}
.nav__links{display:flex;gap:30px;align-items:baseline;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.nav__links a{color:var(--g3);transition:color .25s}
.nav__links a:hover{color:var(--e6)}
.nav__cta{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--e6)}
.nav__cta .mark{width:8px;height:10px;transition:transform .3s;align-self:center}
.nav__cta:hover .mark{transform:rotate(90deg) translateY(-4px)}
@media(max-width:820px){.nav__links{display:none}}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;height:100vh;min-height:520px;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media image-slot{width:100%;height:100%}
.hero__media .kb{position:absolute;inset:0}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 20%,rgba(0,0,0,.06) 40%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.72) 100%)}
.hero__dim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none;will-change:opacity}
.hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:screen}
.hero__inner{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--pad) clamp(30px,6vh,64px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:36px}
.hero__h1{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5.6vw,5.75rem);line-height:1.09;letter-spacing:-.035em;max-width:18ch;text-wrap:nowrap}
.hero__aside{display:flex;flex-direction:column;gap:16px;align-items:flex-end;text-align:right}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,38px)}
.btn{appearance:none;-webkit-appearance:none;background:transparent;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:14px 24px;transition:background .3s,border-color .3s,color .3s}
.btn .mark{width:9px;height:11px;fill:currentColor}
.btn--fill{background:var(--red);color:#fff;border:1px solid var(--red)}
.btn--fill:hover{background:#b83030;border-color:#b83030;color:#fff}
.btn--ghost{border:1px solid rgba(255,255,255,.34);color:var(--e6)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.hero__view{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .3s}
.hero__view:hover{border-color:var(--red)}
.hero__view .mark{width:9px;height:11px}
@media(max-width:760px){.hero__inner{grid-template-columns:1fr}.hero__aside{align-items:flex-start;text-align:left}}
@media(max-height:640px){.hero__h1{font-size:clamp(2.2rem,6vw,3.4rem)}.hero__acts{margin-top:16px}.hero__inner{padding-bottom:24px}}

/* ── section frame ─────────────────────────────────────── */
.sec{position:relative;padding:clamp(70px,11vh,136px) var(--pad) clamp(40px,7vh,88px);max-width:var(--maxw);margin:0 auto}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(30px,5vh,56px)}
.sec__head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,4.2rem);line-height:.94;letter-spacing:-.03em}
.sec__idx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--g2);text-transform:uppercase;padding-bottom:8px;white-space:nowrap}
/* The section head is a flex row of <h2> + a nowrap index label. On phone
   widths their combined min-content width exceeds the viewport, which is
   the actual source of the horizontal overflow — body{overflow-x:hidden}
   was hiding the scrollbar without removing the cause. Let the row wrap
   and the label break; the side-by-side layout is kept above 600px. */
@media(max-width:600px){
  .sec__head{flex-wrap:wrap;align-items:flex-start;gap:8px}
  .sec__idx{white-space:normal;padding-bottom:0}
}

/* ── intro ─────────────────────────────────────────────── */
.intro{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,11vh,132px) var(--pad);border-bottom:1px solid var(--line);display:flex;justify-content:center}
.intro p{font-family:var(--sans);font-weight:350;font-size:clamp(1.15rem,1.75vw,1.65rem);line-height:1.5;letter-spacing:-.015em;color:var(--e6);max-width:44ch;text-align:center;text-wrap:pretty}
.intro p em{font-style:normal;font-weight:600;color:var(--e6)}

/* ── capabilities ──────────────────────────────────────── */
.caps{border-top:1px solid transparent}
.cap{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,54px);padding:clamp(26px,3.6vh,44px) 0;border-bottom:1px solid var(--line);align-items:start}
.caps .cap:first-child{border-top:0}
.cap__no{font-family:var(--mono);font-size:12px;color:var(--g2);letter-spacing:.08em;padding-top:.5em}
.cap__body h3{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2.6vw,2.3rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:13px}
.cap__body p{color:var(--g3);font-size:clamp(14px,1.1vw,16.5px);line-height:1.7;max-width:62ch}

/* ── work grid ─────────────────────────────────────────── */
.reels{display:grid;grid-template-columns:1fr;gap:clamp(9px,1.1vw,16px)}
@media(min-width:760px){.reels{grid-template-columns:1fr 1fr}}
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(9px,1.1vw,16px);grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;background:var(--ink);cursor:pointer}
.tile image-slot{width:100%;height:100%}
.tile .kb{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover .kb{transform:scale(1.045)}
.tile__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,.84) 100%)}
.tile__meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(13px,1.3vw,22px);z-index:2}
.tile__meta .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.tile__meta .ttl{font-family:var(--display);font-size:clamp(1rem,1.4vw,1.4rem);line-height:1.06;font-weight:700;letter-spacing:-.02em;color:var(--e6)}
.tile__meta .cl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g2);margin-top:7px;opacity:0;transform:translateY(4px);transition:.4s}
.tile:hover .tile__meta .cl{opacity:1;transform:none}
.tile__dart{position:absolute;top:clamp(13px,1.3vw,22px);right:clamp(13px,1.3vw,22px);z-index:2;opacity:0;transition:.35s}
.tile:hover .tile__dart{opacity:1}
.tile__dart .mark{width:14px;height:17px}
.tile--reel{aspect-ratio:16/9}
.tile--a7{grid-column:span 7;aspect-ratio:1.88}
.tile--a5{grid-column:span 5;aspect-ratio:4/3}
.tile--a4{grid-column:span 4;aspect-ratio:4/3}
.tile--a6{grid-column:span 6;aspect-ratio:16/9}
@media(max-width:900px){.tile:not(.tile--reel){grid-column:span 12 !important;aspect-ratio:16/9 !important}}

/* ── sectors index ─────────────────────────────────────── */
.sectors-idx{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(56px,9vh,110px)}
.srow{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:clamp(16px,3vw,54px);padding:clamp(24px,3.4vh,42px) 0;border-top:1px solid var(--line);overflow:hidden}
.sectors-idx .srow:first-child{border-top:0}
.sectors-idx .srow:last-child{border-bottom:1px solid var(--line)}
.srow__no{font-family:var(--mono);font-size:12px;color:var(--g2);letter-spacing:.08em;padding-top:.55em}
.srow__ttl{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2.9rem);line-height:1;letter-spacing:-.03em;margin-bottom:15px;transition:color .4s}
.srow__body p{color:var(--g3);font-size:clamp(14px,1.1vw,16.5px);line-height:1.7;max-width:62ch;margin-bottom:12px}
.srow__built{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g2);max-width:60ch}
.srow__peek{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s}
.srow__peek image-slot{width:100%;height:100%}
.srow__peek::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.86)}
.srow:hover .srow__peek{opacity:1}
.srow:hover .srow__ttl{color:#fff}

/* ── credits ───────────────────────────────────────────── */
.credits{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,18px)}
/* 7 credits = a full 4-up row + a full 3-up row — equal widths within each row, so no card is ever stretched */
.credits > *{grid-column:span 3}
.credits > :nth-child(n+5){grid-column:span 4}
.credit__poster{width:100%;aspect-ratio:2/3;object-fit:cover;background:#0e0e0e;margin-bottom:4px}
.credit{position:relative;background:var(--ink);border:1px solid var(--line);padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;gap:10px;transition:border-color .35s,background .35s}
.credit__poster{display:block}
.credit:hover{border-color:rgba(255,255,255,.28);background:#0e0e0e}
.credit__body{display:contents}
.credit__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.credit__ttl{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.credit__ttl .yr{font-family:var(--mono);font-size:11px;color:var(--g2);letter-spacing:.06em}
.credit__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g2);line-height:1.5;margin-top:auto}
.credit__imdb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g3);border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:3px;transition:color .3s,border-color .3s}
.credit:hover .credit__imdb{color:var(--e6);border-color:var(--red)}
/* narrow: full-width card, compact horizontal layout — must follow the base .credit rules to win the cascade */
@media(max-width:680px){
  .credits > *,.credits > :nth-child(n+5){grid-column:span 12}
  .credit{flex-direction:row;align-items:flex-start;gap:16px}
  .credit__poster{width:86px;flex:0 0 auto;margin-bottom:0}
  .credit__body{display:flex;flex-direction:column;gap:9px;min-width:0}
  .credit__meta{margin-top:0}
}

/* ── cta band ──────────────────────────────────────────── */
.cta{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,13vh,170px) var(--pad)}
.cta h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.8vw,5rem);line-height:.96;letter-spacing:-.035em}
.cta__btn{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.15rem,2vw,1.75rem);border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .3s}
.cta__btn:hover{border-color:var(--red)}
.cta__btn .mark{width:.42em;height:.52em}

/* ── showreel lightbox ─────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,4,4,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);opacity:0;transition:opacity .26s}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__close{position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);background:none;border:0;color:var(--g3);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:8px;transition:color .25s}
.lb__close:hover{color:var(--e6)}
.lb__inner{width:100%;max-width:1180px}
.lb__picklab{display:block;margin-bottom:clamp(14px,2vh,22px);color:var(--g2)}
.lb__opts{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px)}
@media(min-width:720px){.lb__opts{grid-template-columns:1fr 1fr}}
.lb__opt{position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--line);padding:0;cursor:pointer;aspect-ratio:16/9;transition:border-color .3s}
.lb__opt:hover{border-color:rgba(255,255,255,.4)}
.lb__opt img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lb__opt:hover img{transform:scale(1.04)}
.lb__opt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.84) 100%)}
.lb__optmeta{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(14px,1.5vw,22px);display:flex;flex-direction:column;gap:7px;text-align:left}
.lb__optmeta .r{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.lb__optmeta .t{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1;letter-spacing:-.03em;color:var(--e6)}
.lb__optdart{position:absolute;top:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);z-index:2;opacity:0;transition:opacity .3s}
.lb__opt:hover .lb__optdart{opacity:1}
.lb__optdart .mark{width:15px;height:18px}
.lb__stage{width:100%;position:relative}
/* max-width guards against the aspect-ratio/max-height pair ever resolving
   to a box wider than the viewport on tall, narrow screens. */
.lb__video{width:100%;max-width:100%;max-height:78vh;aspect-ratio:16/9;background:#000;display:block}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px}
.lb__back{background:none;border:0;color:var(--g3);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:6px 0;border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.lb__back:hover{color:var(--e6);border-color:var(--red)}

/* ── fullscreen playback ────────────────────────────────────────────
   Native fullscreen is requested in JS and is what makes landscape
   rotation behave. This CSS state is the fallback for engines that
   refuse or lack the Fullscreen API (iOS in-app webviews especially):
   it drops the framing padding and the 78vh / 16:9 caps so the video
   fills the viewport in whatever shape the device actually is. */
.lb.is-playing{padding:0}
.lb.is-playing .lb__inner{max-width:none;width:100%;height:100%;display:flex;flex-direction:column}
.lb.is-playing .lb__stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.lb.is-playing .lb__video{flex:1 1 auto;min-height:0;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.lb.is-playing .lb__bar{flex:0 0 auto;margin:0;padding:10px clamp(12px,3vw,22px);background:rgba(0,0,0,.55)}
.lb.is-playing .lb__close{z-index:3;background:rgba(0,0,0,.5);border-radius:2px}

/* When the browser does grant native fullscreen, the stage is the root
   element — it must paint black edge to edge and let the video fill it. */
.lb__stage:fullscreen{background:#000;padding:0}
.lb__stage:fullscreen .lb__video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.lb__stage:fullscreen .lb__bar{display:none}
.lb__stage:-webkit-full-screen{background:#000;padding:0}
.lb__stage:-webkit-full-screen .lb__video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.lb__stage:-webkit-full-screen .lb__bar{display:none}

/* ── end card (shown when a showreel finishes) ─────────────────────── */
.lb__end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3vh,26px);background:rgba(4,4,4,.9);backdrop-filter:blur(6px);padding:clamp(16px,4vw,40px);text-align:center}
.lb__end[hidden]{display:none}
.lb__endlab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g3)}
.lb__endttl{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.02;letter-spacing:-.03em;color:var(--e6);max-width:22ch}
.lb__endacts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,16px)}

/* ── enquiry lightbox + form ───────────────────────────── */
.cb{align-items:center;overflow:hidden}
/* Two separate problems, two fixes — both are needed.
   1. Classic scrollbars (Windows, Linux, macOS with "always show") take
      layout space: scrollbar-gutter:stable reserves the track up front so
      the text is never pushed under it when content passes 88vh.
   2. OVERLAY scrollbars (iOS, macOS default) are drawn ON TOP of content
      and occupy no layout space at all — scrollbar-gutter reserves nothing
      for them, so it cannot fix this case. That was the reported symptom
      on the founder's phone. The inline padding is what clears the text
      there, and it doubles as the fallback for engines with no gutter
      support. Keep the padding even though the gutter is declared. */
.cb__panel{width:100%;max-width:1240px;margin:auto;padding:clamp(20px,2.6vw,34px) clamp(14px,1.6vw,20px);max-height:88vh;overflow-y:auto;scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){.cb__panel{padding-right:calc(clamp(14px,1.6vw,20px) + 16px)}}
.ct__head{border-bottom:1px solid var(--line);padding-bottom:clamp(20px,3vh,32px);margin-bottom:clamp(24px,3.6vh,40px)}
.ct__head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:.96;letter-spacing:-.035em;margin-bottom:18px}
.ct__lede{color:var(--g3);font-size:clamp(13.5px,1.05vw,16px);line-height:1.65;max-width:60ch}
.ct__grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px)}
@media(min-width:960px){.ct__grid{grid-template-columns:1.25fr .75fr}}
.ct__side{display:flex;flex-direction:column;gap:clamp(24px,3.4vh,36px)}
.ct__block .slate{display:block;margin-bottom:15px;color:#fff}
.ct__steps{list-style:none;display:flex;flex-direction:column;gap:12px}
.ct__steps li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.ct__steps .n{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.08em}
.ct__steps .t{color:var(--g3);font-size:14px;line-height:1.55}
.ct__note{color:var(--g3);font-size:14px;line-height:1.7;max-width:46ch}
.ct__facts{display:flex;flex-direction:column;gap:11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g2)}
.ct__facts .row{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ct__facts .row b{color:var(--e6);font-weight:400;text-align:right}
.footer__link{background:none;border:0;padding:0;font:inherit;font-family:var(--mono);letter-spacing:inherit;text-transform:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.footer__link:hover{color:var(--e6)}.nav__cta{background:none;border:0;cursor:pointer}
.cta__btn{background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}


.ct__form{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
@media(min-width:640px){.ct__form{grid-template-columns:1fr 1fr}.fld--wide{grid-column:1/-1}}
.fld{display:flex;flex-direction:column;gap:9px;min-width:0}
.fld label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.fld label .opt{color:var(--g3);letter-spacing:.08em}
.fld input,.fld select,.fld textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--e6);font-family:var(--sans);font-weight:350;font-size:15px;padding:14px 15px;border-radius:0;transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none}
.fld textarea{resize:vertical;line-height:1.6;min-height:150px}
.fld select{background-image:linear-gradient(45deg,transparent 49%,var(--g2) 50%),linear-gradient(-45deg,transparent 49%,var(--g2) 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.fld select option{background:#0e0e0e;color:var(--e6)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(255,255,255,.26)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);background:#0e0e0e}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--red);background:rgba(158,40,40,.09)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--g2)}
.fld .hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--g3)}
.fld--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct__submit{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.ct__submit .btn{border:1px solid var(--red);cursor:pointer;font-family:var(--mono)}
.ct__submit .btn[disabled]{opacity:.55;cursor:default}
.ct__status{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;line-height:1.5;max-width:42ch}
.ct__status.is-ok{color:var(--g3)}
.ct__status.is-err{color:#d8666f}


/* ── footer ────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:32px var(--pad);max-width:var(--maxw);margin:0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g2)}
.footer__logo{display:block}
.footer__logo img{height:34px;width:auto;display:block;transform:translateY(5.5%)}
.footer__meta{display:flex;gap:26px;align-items:baseline}
.footer__meta a,.footer__meta .footer__link{color:var(--g2);transition:color .25s}
.footer__meta a:hover,.footer__meta .footer__link:hover{color:var(--e6)}

/* reveal */
.rise{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}