/* ══ Home page only ═══════════════════════════════════════════════════ */

/* ── hero: the airlock (scroll-scrubbed video) ────────────────────── */
.airlock{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden;background:var(--deep);color:var(--cloud)}
.airlock video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform-origin:center;
  will-change:transform;transition:opacity .8s var(--ease)}
.airlock.ready video{opacity:1}
/* top/bottom falloff so type never fights the sky, and the seam into navy is soft */
.al-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,16,25,.45),rgba(16,16,25,0) 28%,rgba(16,16,25,.12) 70%,rgba(28,28,40,.75))}
/* centre scrim — only there while there is type to protect (driven by JS) */
.al-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 44% at 50% 50%,rgba(16,16,25,.7),rgba(16,16,25,0) 72%)}
.al-title,.al-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6%;pointer-events:none;will-change:transform,filter,opacity}
/* opening line: raised metal lettering that sits inside the round hatch plate.
   --D is the rendered video height (object-fit:cover), so the plate is always D*.5 wide,
   centred D*.0098 right and D*.01 up of the viewport centre (measured from frame 0). */
.airlock{--D:max(100vh,56.25vw)}
@supports (height:100dvh){.airlock{--D:max(100dvh,56.25vw)}}
.al-title::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--D)*.5);height:calc(var(--D)*.5);z-index:-1;
  border-radius:50%;transform:translate(calc(-50% + var(--D)*.0098),calc(-50% - var(--D)*.01));
  background:radial-gradient(circle,rgba(12,14,22,.5) 0,rgba(12,14,22,.38) 55%,rgba(12,14,22,.12) 68%,rgba(12,14,22,0) 71%)}
.al-open{position:relative;left:calc(var(--D)*.0098);top:calc(var(--D)*-.01);
  font:800 min(calc(var(--D)*.066),calc((88vw - 8px)/6.5))/.96 var(--font);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#ffffff 0%,#f1f4f7 45%,#c9cfd6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .1em .08em;   /* room so the gradient never cuts a line's first/last letter */
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.45)) drop-shadow(0 2px 0 #8a929c) drop-shadow(0 2px 0 #5d646d)
    drop-shadow(0 6px 8px rgba(0,0,0,.5)) drop-shadow(0 16px 26px rgba(0,0,0,.35))}
.al-end{opacity:1}
.al-cta{margin-top:clamp(22px,3vw,34px);opacity:0;pointer-events:none;transition:background .25s var(--ease)}
.al-cta.live{pointer-events:auto}
/* the hero's "Start a project" in the same raised-metal finish as the WEBSPACE lettering above it: the same white → silver
   gradient, a bright top edge and a darker stamped bottom edge, navy type (the nav's button stays cyan).
   On hover the metal brightens and the arrow disc turns cyan. */
.btn.al-cta{color:var(--navy);
  background:linear-gradient(180deg,#ffffff 0%,#f1f4f7 45%,#c9cfd6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(93,100,109,.45),
    0 2px 0 #8a929c,0 3px 0 #5d646d,0 10px 16px rgba(0,0,0,.45),0 22px 40px -12px rgba(0,0,0,.5)}
.btn.al-cta .arr{background:var(--navy);color:var(--white);transition:transform .35s var(--ease-out),background .25s var(--ease),color .25s var(--ease)}
.btn.al-cta:hover{background:linear-gradient(180deg,#ffffff 0%,#f7f9fb 50%,#dde2e8 100%)}
.btn.al-cta:hover .arr{background:var(--cyan);color:var(--navy)}
/* same raised-metal lettering as the opening line, all white. The shadows live on .al-logo-in (JS drives .al-logo's
   filter for the blur-in); the metal fill is on each letter, because each letter floats on its own once landed. */
.al-logo{font:800 clamp(48px,11vw,190px)/1 var(--font);letter-spacing:-.05em;opacity:0;white-space:nowrap}
.al-logo-in{display:inline-block;padding:0 .1em .08em;
  filter:drop-shadow(0 -.006em 0 rgba(255,255,255,.45)) drop-shadow(0 .012em 0 #8a929c) drop-shadow(0 .012em 0 #5d646d)
    drop-shadow(0 .035em .045em rgba(0,0,0,.5)) drop-shadow(0 .09em .14em rgba(0,0,0,.4))}
.al-logo-in i{display:inline-block;font-style:normal;will-change:transform;
  background:linear-gradient(180deg,#ffffff 0%,#f1f4f7 45%,#c9cfd6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .08em .08em;margin:0 -.08em -.08em}   /* room for each letter's ink so the fill never clips it */
.al-sub{margin-top:clamp(14px,2vw,24px);font:600 clamp(11px,1.1vw,13px)/1.4 var(--font);letter-spacing:.24em;text-transform:uppercase;
  color:var(--cloud);opacity:0}
.al-hint{position:absolute;left:50%;bottom:clamp(24px,6vh,52px);transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;font:600 11px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--cloud);
  padding:12px 18px 10px;border-radius:999px;background:rgba(16,16,25,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;transition:opacity .4s var(--ease);pointer-events:none}
.al-hint svg{animation:al-bounce 1.6s ease-in-out infinite}
@keyframes al-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
/* never trap anyone: a visible, keyboard-reachable way straight to the page */
.al-skip{position:absolute;right:var(--gutter);bottom:clamp(20px,5vh,44px);z-index:3;font:600 12px/1 var(--font);letter-spacing:.1em;
  color:var(--cloud);background:rgba(16,16,25,.55);border:1px solid var(--line-strong);border-radius:999px;padding:11px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,opacity .3s}
.al-skip:hover{border-color:var(--cyan)}
body:not(.airlock-on) .al-skip,body.airlock-landed .al-skip{opacity:0;pointer-events:none}   /* gone once the doors are open */
.al-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1)}
.al-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,rgba(30,193,203,.5),var(--aurora))}
.al-loader{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--deep);transition:opacity .7s var(--ease),visibility .7s}
.al-loader span{font:600 11px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
.al-loader b{font:700 clamp(40px,6vw,72px)/1 var(--font);letter-spacing:-.04em;color:var(--cloud)}
.al-loader b::after{content:"%";color:var(--cyan)}
.al-loader.done{opacity:0;visibility:hidden}
/* the nav stays out of the way until the logo has landed */
.nav{transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .6s var(--ease),transform .6s var(--ease-out)}
body.airlock-on:not(.airlock-nav) .nav{opacity:0;transform:translateY(-12px);pointer-events:none}
/* one "Start a project" at a time: the nav's button steps aside while the hero (with its own big button) is on screen */
.nav-right .btn{transition:opacity .45s var(--ease),transform .55s var(--ease-out),visibility .45s,background .25s var(--ease)}
body.hero-on .nav-right .btn{opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none}
@media (max-width:700px){.al-skip{right:50%;transform:translateX(50%);bottom:auto;top:20px}}
@media (prefers-reduced-motion:reduce){.al-hint,.al-skip,.al-bar{display:none}}

/* ── services: wide numbered rows ─────────────────────────────────── */
/* the hero's space carries on: a faint aurora glow behind the list */
#services{overflow:hidden;background:
  radial-gradient(55% 45% at 92% 4%,rgba(30,193,203,.11),rgba(30,193,203,0) 70%),
  radial-gradient(45% 35% at 0% 96%,rgba(111,232,240,.06),rgba(111,232,240,0) 70%),var(--navy)}

.svc-list{border-top:1px solid var(--line)}
.svc{position:relative;display:grid;grid-template-columns:clamp(70px,7vw,112px) minmax(0,1.15fr) minmax(0,1fr) 150px 56px;
  gap:clamp(16px,2.4vw,36px);align-items:center;padding:clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line);isolation:isolate}
/* soft light that follows the cursor (--mx/--my set in main.js) */
.svc::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;border-radius:var(--r-md);
  background:radial-gradient(460px circle at var(--mx,30%) var(--my,50%),rgba(30,193,203,.14),rgba(30,193,203,0) 65%),
    linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,0) 80%);
  opacity:0;transition:opacity .5s var(--ease)}
.svc:hover::before{opacity:1}
/* a cyan hairline sweeps along the bottom edge */
.svc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(30,193,203,0),var(--cyan) 25%,var(--aurora) 60%,rgba(111,232,240,0));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.svc:hover::after{transform:scaleX(1)}
.svc-num{font:700 clamp(36px,4.2vw,64px)/1 var(--font);letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.24);transition:color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease)}
.svc:hover .svc-num{color:var(--cyan);-webkit-text-stroke-color:var(--cyan)}
.svc-title{transition:transform .6s var(--ease-out)}
.svc:hover .svc-title{transform:translateX(12px)}
.svc-title h3{font:600 clamp(28px,3.5vw,52px)/1.04 var(--font);letter-spacing:-.04em}
.svc-title p{font:600 11px/1.3 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tags li{font:500 13px/1 var(--font);color:var(--slate);border:1px solid var(--line-strong);border-radius:999px;padding:8px 13px;
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.svc:hover .tags li{border-color:rgba(30,193,203,.4);color:var(--cloud)}
.price{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right;white-space:nowrap}
.price span{font:600 10px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
.price b{font:700 clamp(20px,1.8vw,26px)/1 var(--font);letter-spacing:-.03em;color:var(--white)}
.price small{font:500 12px/1 var(--font);color:var(--slate)}
.svc-go{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .5s var(--ease-out),color .3s}
.svc-go svg{width:18px;height:18px}
.svc:hover .svc-go{background:var(--cyan);border-color:var(--cyan);color:var(--navy);transform:rotate(45deg)}

.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px)}
.svc-foot p{color:var(--slate);max-width:52ch}
.svc-foot p b{color:var(--cloud);font-weight:600}

@media (max-width:1100px){
  .svc{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t g" "m m m" "p p p";row-gap:20px}
  .svc-num{grid-area:n;font-size:clamp(32px,6vw,44px)}
  .svc-title{grid-area:t}
  .svc-go{grid-area:g;width:48px;height:48px}
  .tags{grid-area:m}
  .price{grid-area:p;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}
  .svc:hover .svc-title{transform:none}
}
@media (max-width:600px){.svc-title p{letter-spacing:.12em;margin-top:10px}}

/* ── featured work (white) ────────────────────────────────────────── */
/* fraxbit-style stagger: wide + narrow, then swapped */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:clamp(56px,7vw,110px);align-items:start}
.w1{grid-column:1/8}
.w2{grid-column:9/13;margin-top:clamp(80px,11vw,170px)}
.w3{grid-column:1/6}
.w4{grid-column:7/13;margin-top:clamp(60px,8vw,130px)}
.work-card{display:block;cursor:pointer}
.cover{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:16/11;isolation:isolate}
.w2 .cover,.w3 .cover{aspect-ratio:4/5}
.cover > *{transition:transform 1s var(--ease-out)}
.work-card:hover .cover > *{transform:translateY(-10px) scale(1.025)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-card:hover .cover img{transform:scale(1.04)}
.cover-dark{background:radial-gradient(70% 60% at 80% 0%,rgba(30,193,203,.35),rgba(30,193,203,0) 70%),linear-gradient(160deg,#1C1C28,#101019)}
.cover-light{background:radial-gradient(60% 50% at 20% 10%,#fff,rgba(255,255,255,0) 70%),linear-gradient(160deg,#EEF1F5,#DCE2E9)}
.cover-aurora{background:radial-gradient(60% 45% at 50% 100%,rgba(111,232,240,.45),rgba(111,232,240,0) 70%),linear-gradient(180deg,#15151F,#0C2A2D)}
.cover-mint{background:radial-gradient(60% 55% at 85% 90%,rgba(30,193,203,.28),rgba(30,193,203,0) 70%),linear-gradient(160deg,#E6F7F8,#CDEEF0)}

/* 01 · browser */
.mock-browser{position:absolute;left:9%;right:9%;top:13%;bottom:-8%;border-radius:14px 14px 0 0;background:#F5F7F9;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.mb-bar{display:flex;align-items:center;height:30px;padding:0 14px;border-bottom:1px solid rgba(28,28,40,.08)}
.mb-bar span{width:34%;height:10px;border-radius:6px;background:rgba(28,28,40,.08);margin:0 auto}
.mb-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 6%;padding:8% 7%;align-content:start}
.sk{display:block;border-radius:6px;background:rgba(28,28,40,.12);grid-column:1}
.sk-eyebrow{width:40%;height:8px;background:var(--cyan)}
.sk-h1{width:95%;height:clamp(14px,1.6vw,22px);background:var(--navy)}
.sk-h2{width:70%;height:clamp(14px,1.6vw,22px);background:var(--navy)}
.sk-btn{width:38%;height:clamp(18px,1.9vw,26px);border-radius:999px;background:var(--cyan);margin-top:8px}
.mb-img{grid-column:2;grid-row:1/5;border-radius:10px;min-height:100%;
  background:radial-gradient(60% 60% at 70% 30%,rgba(111,232,240,.8),rgba(30,193,203,.2) 60%,rgba(30,193,203,0)),linear-gradient(160deg,#1C1C28,#0C2A2D)}

/* 02 · brand specimen */
.mock-brand{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 12%}
.mock-brand b{font:800 clamp(90px,13vw,190px)/.9 var(--font);letter-spacing:-.06em;color:var(--navy)}
.mock-brand .sw{display:flex;gap:10px;margin-top:10%}
.mock-brand .sw i{width:clamp(28px,3.4vw,46px);aspect-ratio:1;border-radius:10px;background:var(--navy);box-shadow:0 10px 20px -8px rgba(28,28,40,.4)}
.mock-brand .sw i:nth-child(2){background:var(--cyan)}
.mock-brand .sw i:nth-child(3){background:var(--aurora)}
.mock-brand .sw i:nth-child(4){background:#fff}
.mock-brand em{font:600 10px/1 var(--font);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* 03 · phone with a vertical video */
.mock-phone{position:absolute;left:50%;top:10%;width:54%;aspect-ratio:9/18.5;margin-left:-27%;border-radius:clamp(22px,2.6vw,34px);
  border:clamp(5px,.6vw,8px) solid #0A0A10;overflow:hidden;box-shadow:0 40px 70px -24px rgba(0,0,0,.7);
  background:radial-gradient(80% 50% at 30% 20%,rgba(111,232,240,.7),rgba(111,232,240,0) 70%),radial-gradient(70% 60% at 80% 80%,rgba(30,193,203,.8),rgba(30,193,203,0) 70%),linear-gradient(180deg,#1C1C28,#0C2A2D)}
.mp-play{position:absolute;left:50%;top:42%;width:clamp(44px,5vw,64px);aspect-ratio:1;margin-left:calc(clamp(44px,5vw,64px) / -2);border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)}
.mp-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.mp-cap{position:absolute;left:10%;right:10%;bottom:16%;display:grid;gap:7px}
.mp-cap b{height:8px;border-radius:5px;background:rgba(255,255,255,.85)}
.mp-cap b + b{width:60%;background:rgba(255,255,255,.5)}
.mp-bar{position:absolute;left:10%;right:10%;bottom:8%;height:3px;border-radius:3px;background:rgba(255,255,255,.25)}
.mp-bar i{display:block;width:38%;height:100%;border-radius:3px;background:var(--aurora)}

/* 04 · bot chat */
.mock-chat{position:absolute;left:12%;right:12%;top:12%;bottom:-8%;border-radius:16px 16px 0 0;background:#fff;padding:0 6% 6%;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -24px rgba(12,42,45,.45)}
.mc-head{display:flex;align-items:center;gap:10px;height:48px;margin:0 -8%;padding:0 8%;border-bottom:1px solid rgba(28,28,40,.08)}
.mc-head span{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--aurora))}
.mc-head b{width:30%;height:9px;border-radius:5px;background:rgba(28,28,40,.2)}
.mock-chat p{height:clamp(22px,2.4vw,32px);width:58%;border-radius:14px 14px 14px 4px;background:#EEF1F4}
.mock-chat p.out{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--cyan);width:46%}
.mock-chat p.short{width:34%}
.mock-chat p.long{width:64%}

.work-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.work-cap h3{font:600 clamp(20px,2.1vw,28px)/1.15 var(--font);letter-spacing:-.03em;display:flex;gap:14px;align-items:baseline}
.work-cap h3 em{font:600 13px/1 var(--font);font-style:normal;color:var(--muted)}
.work-cap .cat{font:600 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line-dark-strong);border-radius:999px;padding:7px 11px;transition:border-color .3s,color .3s}
.work-card:hover .cat{border-color:var(--cyan);color:var(--navy)}
.work-card p{color:var(--muted);font-size:14px;margin-top:6px}

.work-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;
  margin-top:clamp(56px,7vw,100px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-dark)}
.work-foot p{color:var(--muted)}

/* round "View" label that follows the cursor over the cards (driven by main.js) */
.view-cursor{position:fixed;left:0;top:0;z-index:70;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--white);font:600 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(0);transition:transform .35s var(--ease-out)}
.view-cursor.on{transform:translate3d(var(--cx),var(--cy),0) scale(1)}
@media (hover:none){.view-cursor{display:none}}

@media (max-width:760px){
  .w1,.w2,.w3,.w4{grid-column:1/-1;margin-top:0}
  .w2 .cover{aspect-ratio:4/4.4}
  .mock-phone{width:46%;margin-left:-23%}
}

/* ── how we work: what we build / process / tools ─────────────────── */
#process{overflow:hidden;background:
  radial-gradient(50% 40% at 6% 8%,rgba(30,193,203,.09),rgba(30,193,203,0) 70%),var(--navy)}
.head-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hw-part{padding-top:clamp(40px,5vw,64px);margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.section-head + .hw-part{margin-top:0}
.hw-label{display:flex;align-items:center;gap:14px;font:600 12px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-bottom:clamp(28px,3.5vw,48px)}
.hw-label b{font-weight:700;color:var(--cyan)}

/* 01 · process: stacked tilted cards + detail panel */
/* stack on the left half, panel on the right half — so the section fills the full width on big screens */
.process{display:grid;grid-template-columns:minmax(42rem,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
.process .dcards{justify-content:center}
/* three cards: offsets 0 / 5rem / 10rem across and 0 / 3.5rem / 7rem down (set inline on each card) */
.dcards{--w:31rem;--h:12.5rem;--lift:-3.2rem;display:grid;grid-template-areas:"stack";justify-content:start;
  padding:4.5rem 0 1rem;min-height:calc(var(--h) + 7rem + 6.5rem)}
/* white cards with navy type (like the site's white sections), bold against the dark section */
.dcard{grid-area:stack;position:relative;width:var(--w);height:var(--h);display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 26px;text-align:left;color:var(--navy);border-radius:18px;border:2px solid rgba(28,28,40,.06);
  background:linear-gradient(160deg,#FFFFFF 0%,#F2F5F8 100%);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.65);
  transform:translate(var(--x),var(--y)) skewY(-8deg);filter:grayscale(1);
  transition:transform .7s var(--ease-out),filter .7s var(--ease),border-color .7s var(--ease),box-shadow .7s var(--ease)}
/* light veil on cards in the back (removed on the active / hovered one) — keeps them white-ish, just quieter */
.dcard::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:rgba(28,28,40,.14);transition:opacity .7s var(--ease);pointer-events:none}
.dcard:hover,.dcard.on{transform:translate(var(--x),calc(var(--y) + var(--lift))) skewY(-8deg);filter:none}
.dcard:hover::before,.dcard.on::before{opacity:0}
.dcard.on{border-color:var(--cyan);box-shadow:0 34px 60px -24px rgba(0,0,0,.75),0 0 44px -8px rgba(30,193,203,.55)}
.dcard:hover:not(.on){border-color:rgba(30,193,203,.4)}
.dcard > span{position:relative;z-index:1;display:flex;align-items:center;gap:10px}
.dc-ico{width:38px;height:38px;border-radius:50%;display:grid!important;place-items:center;background:rgba(30,193,203,.14);color:#0E8F97;flex:none}
.dc-ico svg{width:18px;height:18px}
.dc-top b{font:600 21px/1 var(--font);color:#0E8F97;letter-spacing:-.01em}   /* deeper teal: brand cyan is too light to read on white */
.dc-desc{font:600 25px/1.2 var(--font);letter-spacing:-.02em;white-space:nowrap;color:var(--navy)}
.dc-when{font:500 16px/1 var(--font);color:var(--muted)}

/* right side: the three steps as a clean list; the chosen one opens (grid-rows 0fr → 1fr) */
.pd-list{list-style:none;border-top:1px solid var(--line-strong);max-width:560px;width:100%}
.pd-row{position:relative;border-bottom:1px solid var(--line-strong)}
.pd-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--aurora));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.pd-row.on::before{transform:scaleY(1)}
.pd-head{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;text-align:left;
  padding:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,28px);transition:padding .5s var(--ease-out)}
.pd-row.on .pd-head{padding-left:22px}
.pd-head b{font:700 clamp(30px,2.8vw,42px)/1 var(--font);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);
  transition:color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease);min-width:2.1ch}
.pd-row.on .pd-head b{color:var(--cyan);-webkit-text-stroke-color:var(--cyan)}
.pd-title{font:600 clamp(24px,2.4vw,34px)/1.1 var(--font);letter-spacing:-.035em;color:rgba(245,247,249,.62);transition:color .4s var(--ease)}
.pd-row.on .pd-title,.pd-head:hover .pd-title{color:var(--cloud)}
.pd-when{font:600 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);white-space:nowrap;
  border:1px solid var(--line-strong);padding:7px 11px;border-radius:999px;transition:color .4s var(--ease),border-color .4s var(--ease)}
.pd-row.on .pd-when{color:var(--cyan);border-color:rgba(30,193,203,.45)}
.pd-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.pd-row.on .pd-body{grid-template-rows:1fr}
.pd-body p{overflow:hidden;min-height:0;color:var(--slate);font-size:clamp(15px,1.2vw,17px);line-height:1.6;max-width:44ch;
  padding:0 0 0 calc(22px + 2.1ch + 22px);opacity:0;transition:opacity .4s var(--ease),padding .5s var(--ease-out)}
.pd-row.on .pd-body p{opacity:1;padding-bottom:clamp(20px,2.4vw,28px)}

/* 02 · tools: endless logo strips */
.tools-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap}
.tools-note{color:var(--slate);font-size:15px;margin-bottom:clamp(28px,3.5vw,48px)}
.marquees{display:grid;gap:14px;margin:0 calc(var(--gutter) * -1)}
.marquee{overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{--gap:14px;display:flex;gap:var(--gap);width:max-content;list-style:none;will-change:transform}
.mq-track li{display:flex;align-items:center;gap:12px;white-space:nowrap;font:600 16px/1 var(--font);letter-spacing:-.01em;color:var(--slate);
  padding:16px 24px 16px 18px;border-radius:999px;border:1px solid var(--line-strong);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.mq-track li img{width:24px;height:24px;opacity:.7;transition:opacity .3s var(--ease)}
.mq-track li:hover{color:var(--cloud);border-color:rgba(30,193,203,.5);background:rgba(30,193,203,.08)}
.mq-track li:hover img{opacity:1}
/* no motion: a plain row you can swipe */
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

@media (max-width:1200px){.process{grid-template-columns:1fr}}
@media (max-width:700px){
  /* smaller stack so it fits a phone: narrower cards, tighter steps. Start-aligned so the last card's
     3rem offset ends exactly at the right gutter instead of running past the screen edge. */
  .process .dcards{justify-content:start}
  .dcards{--w:min(19rem,calc(100vw - 2 * var(--gutter) - 3rem));--h:9rem;--lift:-1.8rem;padding-top:2.8rem;min-height:calc(var(--h) + 5rem + 3.8rem)}
  .dcard:nth-child(2){--x:1.5rem!important;--y:2.5rem!important}
  .dcard:nth-child(3){--x:3rem!important;--y:5rem!important}
  .dcard{padding:16px 18px}
  .dc-ico{width:32px;height:32px}
  .dc-top b{font-size:17px}
  .dc-desc{font-size:18px}
  .dc-when{font-size:13.5px}
}
@media (max-width:600px){.mq-track li{font-size:14px;padding:13px 18px 13px 14px}.mq-track li img{width:20px;height:20px}}

/* ── why WebSpace (white) ─────────────────────────────────────────── */
/* fraxbit-style: two astronauts face each other, the reasons sit between them.
   --fig is the width of each astronaut; the images are 928 × 1152 (ratio 1.24).
   main.js drives --in (astronauts slide in), --r on each reason (appear one by one) and --tx/--ty (mouse tilt). */
#why{padding-bottom:0;overflow:clip}                /* clip, not hidden: hidden would break the sticky stage */
.why-stage{--fig:min(31vw,540px);--tagspace:84px;position:relative;min-height:calc(var(--fig) * 1.24 + var(--tagspace))}
.why-pair{position:absolute;inset:0;pointer-events:none}
/* scroll-driven entrance: each astronaut starts ~78% hidden past the screen edge and glides in with the scroll */
.why-fig{position:absolute;bottom:0;width:var(--fig);margin:0;transition:transform .15s linear}
.why-left{left:-2vw;transform:translateX(calc((1 - var(--in,1)) * -78%))}
.why-right{right:-2vw;transform:translateX(calc((1 - var(--in,1)) * 78%))}
/* the tilt lives on a wrapper so the right image can stay mirrored */
.why-img{transform:perspective(1100px) rotateY(calc(var(--tx,0) * 5deg)) rotateX(calc(var(--ty,0) * -2.5deg));transform-origin:50% 55%;will-change:transform}
/* the renders sit on an off-white (≈245) backdrop: a touch of brightness makes it pure white, and the bottom fades out */
.why-fig img{display:block;width:100%;height:auto;filter:brightness(1.045) contrast(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%)}
.why-right img{transform:scaleX(-1)}   /* both renders face right; the "with us" one turns to face the centre */
.why-tag{position:absolute;top:0;z-index:1;font:600 clamp(20px,2.1vw,30px)/1.15 var(--font);letter-spacing:-.03em;color:var(--navy);opacity:var(--in,1)}
.why-tag em{display:block;font:600 11px/1 var(--font);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.why-tag-l{left:var(--gutter)}
.why-tag-l em{color:var(--muted)}
.why-tag-r{right:var(--gutter);text-align:right}

/* sizes also follow the screen height, so the whole block fits while the stage is pinned */
.why-center{position:relative;z-index:1;width:min(540px,100%);margin:0 auto;padding:clamp(40px,5vw,72px) 0 clamp(90px,10vw,140px)}
.why-center .eyebrow{display:flex;justify-content:center}
.why-h{font:600 clamp(38px,min(4.4vw,6.6vh),64px)/1.02 var(--font);letter-spacing:-.045em;text-align:center;margin:18px 0 clamp(24px,3.4vh,40px)}
.why-list{list-style:none;border-top:1px solid var(--line-dark-strong)}
/* each reason is a row: big outlined number on the left, title + line on the right */
.why-list li{display:grid;grid-template-columns:clamp(52px,4.4vw,64px) 1fr;column-gap:18px;align-items:center;
  padding:clamp(12px,2.1vh,20px) 0;border-bottom:1px solid var(--line-dark-strong);
  opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 26px));transition:opacity .25s linear,transform .25s linear}
.why-list b{grid-row:1/3;font:700 clamp(30px,min(2.8vw,4.4vh),42px)/1 var(--font);letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.5px var(--cyan);transition:color .3s var(--ease)}
.why-list li:hover b{color:var(--cyan)}
.why-list h3{font:600 clamp(19px,min(1.8vw,2.8vh),25px)/1.2 var(--font);letter-spacing:-.025em;color:var(--navy)}
.why-list p{margin-top:5px;font-size:clamp(14.5px,min(1.2vw,1.9vh),16.5px);line-height:1.45;color:#4A4F5E}

/* pinned mode (wide screens, motion allowed — main.js adds .pin): the stage sticks for ~1.3 screens of scrolling */
#why.pin{height:230vh;padding-top:0}
#why.pin .why-stage{position:sticky;top:0;height:100vh;min-height:0;display:flex;align-items:center;justify-content:center;
  --fig:min(31vw,calc((100vh - 180px) / 1.24))}
#why.pin .why-tag{top:104px}
#why.pin .why-center{padding:84px 0 12px}

/* narrower screens: heading and reasons first, the two astronauts side by side underneath (no pinning) */
@media (max-width:1100px){
  .why-stage{min-height:0;display:flex;flex-direction:column}
  .why-center{order:1;padding:0 var(--gutter) 40px;width:min(560px,100%)}
  .why-pair{order:2;position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;padding-top:64px}
  .why-fig{position:relative;width:auto;left:auto;right:auto;transform:none}
  .why-tag{font-size:16px}
}

/* ── get started: fraxbit-style finale — the whole section in brand cyan ── */
/* navy type on cyan (white on this cyan is too low-contrast), the brief form as a solid navy card */
#contact{overflow:clip;background:var(--cyan);color:var(--navy)}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(40px,6vw,96px);align-items:start}
/* Get started keeps the original centred 1280px layout (the rest of the site runs full width) */
#contact .wrap{max-width:1280px;padding:0 clamp(16px,4vw,40px)}
/* fraxbit's rhythm: 48px rounded top, generous air */
#contact{border-radius:48px 48px 0 0;padding:clamp(100px,12vw,176px) 0}
#contact .eyebrow{color:rgba(12,42,45,.7);font-weight:500}
#contact .eyebrow::before{background:var(--navy)}
/* fraxbit's type: a giant but light headline with very tight tracking, one colour */
.cta-h{margin:24px 0 28px;font:500 clamp(48px,6.4vw,96px)/.93 var(--font);letter-spacing:-.055em;color:var(--navy);max-width:11ch}
.cta-lede{font-size:18px;line-height:1.6;color:rgba(12,42,45,.8);max-width:42ch}

/* fraxbit's pill buttons: label, then a round arrow badge on the right */
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.fx-btn{display:inline-flex;align-items:center;gap:16px;height:54px;padding:0 6px 0 26px;border-radius:999px;
  font:500 14px/1 var(--font);letter-spacing:.03em;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.fx-arr{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .45s var(--ease-out),background .3s,color .3s}
.fx-arr svg{width:16px;height:16px}
.fx-btn:hover .fx-arr{transform:rotate(45deg)}
.fx-solid{background:var(--navy);color:var(--white);box-shadow:0 14px 30px -16px rgba(12,42,45,.6)}
.fx-solid .fx-arr{background:var(--white);color:var(--navy)}
.fx-solid:hover{background:#2A2A3A}
.fx-solid:hover .fx-arr{background:var(--cyan);color:var(--navy)}
.fx-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px rgba(12,42,45,.35)}
.fx-line .fx-arr{background:var(--navy);color:var(--cyan)}
.fx-line:hover{box-shadow:inset 0 0 0 1px var(--navy);background:rgba(255,255,255,.18)}

/* fraxbit's contact details: two small blocks with caps labels, underlined links and a thin COPY pill */
.cta-meta{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:28px clamp(36px,5vw,72px);margin-top:48px;padding-top:32px;border-top:1px solid rgba(12,42,45,.22)}
.cm-label{font:500 11px/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(12,42,45,.7);margin-bottom:10px}
.cm-row{display:flex;align-items:center;gap:12px}
.cm-link{font:500 17px/1.3 var(--font);color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(12,42,45,.45);transition:text-decoration-color .2s}
.cm-link:hover{text-decoration-color:var(--navy)}
.cm-copy{font:500 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);padding:6px 11px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(12,42,45,.3);transition:background .2s,color .2s}
.cm-copy:hover{background:var(--navy);color:var(--cyan)}
.cm-avail{display:flex;align-items:center;gap:10px;margin-top:32px;font-size:14px;color:rgba(12,42,45,.78)}
.cm-avail i{width:8px;height:8px;border-radius:50%;background:#0B7A4B;flex:none;box-shadow:0 0 0 0 rgba(11,122,75,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(11,122,75,0)}100%{box-shadow:0 0 0 0 rgba(11,122,75,0)}}
@media (max-width:520px){.cta-meta{grid-template-columns:1fr}.fx-btn{width:100%;justify-content:space-between}}

/* the brief: a solid navy card floating on the cyan */
.form{position:relative;border-radius:28px;padding:clamp(26px,3vw,42px);color:var(--cloud);
  background:linear-gradient(160deg,#22222F,var(--navy) 60%,#181824);border:1px solid rgba(255,255,255,.06);
  box-shadow:0 50px 90px -40px rgba(8,40,44,.75),0 20px 40px -24px rgba(8,40,44,.5)}
.form::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(111,232,240,0),var(--aurora),rgba(111,232,240,0))}
.form-head{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
/* bigger, bolder headings and labels; what people type stays regular so the card doesn't feel heavy */
.form-kicker{font:700 12px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--aurora)}
.form h3{font:700 clamp(28px,2.4vw,34px)/1.12 var(--font);letter-spacing:-.035em;margin:14px 0 10px}
.form-head > p:last-child{color:#B4B9C9;font-size:16px}
.field{margin-bottom:26px}
fieldset.field{border:0}
.field legend,.field .fl{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#D5D9E3;margin-bottom:16px}
.field legend b,.field .fl b{font-weight:800;color:var(--cyan);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
/* normal-case, calm chips (they used to inherit the uppercase label style by accident) */
.chip span{display:inline-block;font:600 15.5px/1 var(--font);letter-spacing:-.005em;text-transform:none;color:var(--cloud);padding:12px 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip span:hover{border-color:rgba(30,193,203,.6)}
.chip input:checked + span{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--aurora);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:10px 0 12px;font-size:17px;color:var(--cloud);
  transition:border-color .25s,box-shadow .25s;border-radius:0}
.input::placeholder{color:#7A8095}
.input:focus{outline:none;border-color:var(--cyan);box-shadow:0 1px 0 var(--cyan),0 8px 18px -12px rgba(30,193,203,.8)}
textarea.input{resize:vertical;min-height:90px}
.form .btn{width:100%;justify-content:space-between;margin-top:6px;padding:10px 10px 10px 26px;font-size:17px;font-weight:700}
.form .btn .arr{width:42px;height:42px}
.form-note{font-size:14px;color:#9AA0B2;margin-top:16px;text-align:center}
.form-note a{color:var(--aurora)}
/* the hatch (class "curtain" on #contact): Get started is one padded spaceship hatch with the brief printed straight onto
   its single fabric panel — no cards. The footer cabin is parked underneath the page (style.css → .footer-reveal), so
   scrolling on simply carries the hatch up off it, like a shutter rising. Plain page scrolling: no script, no filters,
   nothing pinned, so it stays smooth on any computer.
   The print keeps the site's own type and shapes (Montserrat, tight light headline, pill buttons with a round arrow, caps
   labels, pill chips); only the colours change: dark ink on the fabric and a deep teal for the small accents. Every
   button and chip is filled with solid ink and lettered in the fabric colour, so nothing depends on a thin outline; the
   chosen chip turns brand cyan. Everything is sized in em, so the whole print scales with .cta-grid's font-size. */
#contact.curtain{--ink:#0B141A;--ink-2:rgba(11,20,26,.9);--ink-soft:#1F2D37;--ink-line:rgba(11,20,26,.55);--fabric:#D3DBE0;--teal:#06505A;
  background:linear-gradient(180deg,#B6C0C7,#939EA6);color:var(--ink);
  box-shadow:0 34px 70px -6px rgba(0,0,0,.7)}                       /* the hatch's shadow on the cabin as it lifts */
#contact.curtain{
  & .cta-grid{font-size:17px}
  & .form{background:none;border:0;border-radius:0;box-shadow:none;padding:0;color:var(--ink)}
  & .form::before{content:none}
  /* the gate number and the section label */
  & .gate-code{display:flex;align-items:baseline;gap:1em;margin-bottom:1.1em;padding-bottom:.9em;border-bottom:2px solid var(--ink-line);
    font:700 .72em/1 var(--font);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2)}
  & .gate-code span:first-child{font:800 2.2em/.8 var(--font);letter-spacing:-.02em;color:var(--ink)}
  & .eyebrow{font:700 .82em/1 var(--font);letter-spacing:.22em;color:var(--ink-2)}
  & .eyebrow::before{width:2.6em;height:2px;background:var(--teal)}
  /* headline, lede and the two buttons */
  & .cta-h{font:500 4em/.95 var(--font);letter-spacing:-.055em;color:var(--ink);max-width:7em;margin:0 0 .24em}
  & .cta-lede{font:500 1.05em/1.5 var(--font);color:var(--ink-2);max-width:30em}
  & .cta-btns{gap:.6em;margin-top:1.5em}
  & :is(.fx-btn,.form .btn){height:3.5em;margin:0;padding:0 .45em 0 1.5em;gap:1em;border-radius:999px;box-shadow:none;
    font:600 .95em/1 var(--font);letter-spacing:.01em;color:var(--fabric)}
  & :is(.fx-arr,.form .btn .arr){width:2.6em;height:2.6em;background:var(--fabric);color:var(--ink)}
  & :is(.fx-arr,.form .btn .arr) svg{width:1em;height:1em}
  /* both buttons are solid ink (the second a step lighter); on hover the ink deepens and the arrow turns */
  & :is(.fx-solid,.form .btn){background:var(--ink)}
  & .fx-line{background:var(--ink-soft)}
  & :is(.fx-btn,.form .btn):hover{background:#000;color:#fff;box-shadow:none}
  & :is(.fx-btn:hover .fx-arr,.form .btn:hover .arr){background:#fff;color:var(--ink)}
  /* contact details */
  & .cta-meta{gap:1.4em 3em;margin-top:2.2em;padding-top:1.5em;border-top:2px solid var(--ink-line)}
  & .cm-label{font:700 .72em/1.2 var(--font);letter-spacing:.14em;white-space:nowrap;color:var(--ink-2);margin-bottom:.7em}
  & .cm-row{gap:.7em}
  & .cm-link{font:600 1.08em/1.2 var(--font);color:var(--ink);text-decoration-thickness:2px;text-decoration-color:var(--ink-line)}
  & .cm-link:hover{text-decoration-color:var(--ink)}
  & .cm-copy{font:700 .64em/1 var(--font);letter-spacing:.12em;padding:.6em 1em;background:var(--ink);color:var(--fabric);box-shadow:none}
  & .cm-copy:hover{background:#000;color:#fff}
  & .cm-avail{margin-top:1.6em;gap:.7em;font:600 .88em/1.35 var(--font);color:var(--ink-2)}
  & .cm-avail i{width:.6em;height:.6em;background:var(--teal);box-shadow:none;animation:none}   /* a printed dot doesn't pulse */
  /* the brief */
  & .form-head{margin:0 0 1.4em;padding:0;border:0}
  & .form-kicker{font:800 .74em/1 var(--font);letter-spacing:.22em;color:var(--teal)}
  & .form h3{font:700 1.8em/1.1 var(--font);letter-spacing:-.035em;color:var(--ink);margin:.45em 0 .3em}
  & .form-head > p:last-child{font:500 .95em/1.4 var(--font);color:var(--ink-2)}
  & .field{margin:0 0 1.4em}
  & :is(.field legend,.field .fl){font:800 .74em/1 var(--font);letter-spacing:.14em;color:var(--ink);margin-bottom:.85em;gap:.7em}
  & :is(.field legend,.field .fl) b{color:var(--teal);font-weight:800}
  & .chips{gap:.45em}
  & .chip span{font:600 .86em/1 var(--font);letter-spacing:-.005em;color:var(--fabric);padding:.7em 1.05em;border:0;background:var(--ink-soft)}
  & .chip span:hover{background:var(--ink);color:#fff}
  & .chip input:checked + span{background:var(--cyan);color:var(--ink);font-weight:700}
  & .chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
  & .row2{gap:1.6em}
  & .input{font:600 1.02em/1.2 var(--font);color:var(--ink);padding:.35em 0 .55em;border-bottom:2px solid var(--ink-line)}
  & .input::placeholder{color:rgba(11,20,26,.62);font-weight:500}
  & .input:focus{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
  & textarea.input{min-height:4.6em}
  & .form .btn{width:100%;justify-content:space-between}
  & .form-note{margin-top:1em;font:500 .84em/1.3 var(--font);color:var(--ink-2)}
  & .form-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
}
@media (max-width:520px){#contact.curtain .cta-h{font-size:3.1em}}
/* phones and tablets: the same print on plain fabric, with the hatch's dark sill along the bottom */
#contact.curtain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(14px,1.4vw,20px);pointer-events:none;
  background:linear-gradient(180deg,#31424E,#16222B)}
/* computer screens: the photo of the hatch (2000 × 1116). --u is one pixel of the photo. The hatch has one padded panel
   (photo x 170–1830, y 120–1005, rounded corners, stitched border); the print sits inside it, clear of the stitching:
   x 240–1760, y 185–940. Left column: gate label · headline, lede, buttons · contact details. Right column: the brief.
   On narrower or taller windows the photo is scaled up and only the outer frame is cropped (never the panel). */
@media (min-width:1200px){
  /* the hatch always fills the window: --u grows with the window's height too (so no footer shows under the hatch while
     you read it), but never so far that the panel would be cropped at the sides; the photo is anchored to the bottom. */
  #contact.curtain{--u:clamp(.05vw,max(.76px,.0896vh),.05747vw);height:max(calc(1116 * var(--u)),100vh);padding:0;margin-top:0;border-radius:0;isolation:isolate;
    background:#0A161D url(../img/hatch.jpg) 50% 100% / calc(2000 * var(--u)) calc(1116 * var(--u)) no-repeat}
  /* the lift on the fabric: one soft-light sheet cut to the panel's own rounded shape (photo x 172–1828, y 123–1003) */
  #contact.curtain::before{content:"";position:absolute;left:calc(50% - 828 * var(--u));bottom:calc(113 * var(--u));width:calc(1656 * var(--u));height:calc(880 * var(--u));
    border-radius:calc(74 * var(--u));background:rgba(255,255,255,.55);mix-blend-mode:soft-light;pointer-events:none}
  #contact.curtain::after{content:none}
  #contact.curtain{
    & .cta-grid{position:absolute;left:50%;top:auto;bottom:calc(176 * var(--u));width:calc(1520 * var(--u));height:calc(755 * var(--u));margin-left:calc(-760 * var(--u));
      max-width:none;padding:0;display:grid;grid-template-columns:1fr 1.14fr;gap:0 5em;align-items:stretch;font-size:calc(19 * var(--u))}
    & :is(.cta-copy,.form){display:flex;flex-direction:column;justify-content:space-between;min-width:0}
    & .cta-h{font-size:4.5em}
    & .cta-meta{margin-top:0}
    & .cm-avail{margin-top:1.2em}
    & .form-head{margin-bottom:1.1em}
    & .field,& .row2{margin-bottom:1.1em}
    & .form-fields > .field:last-child{margin-bottom:0}
    & .row2 .field{margin-bottom:0}
    & textarea.input{height:2.15em;min-height:0;resize:none;scrollbar-width:none}
    & .form-note{text-align:left}
  }
}
/* navy version (class "is-navy" on #contact): white type, cyan main button, the form card a step lighter than the section */
#contact.is-navy{background:radial-gradient(55% 60% at 90% 0%,rgba(30,193,203,.12),rgba(30,193,203,0) 70%),var(--navy);color:var(--cloud)}
#contact.is-navy .eyebrow{color:var(--slate)}
#contact.is-navy .eyebrow::before{background:linear-gradient(90deg,var(--cyan),rgba(30,193,203,0))}
#contact.is-navy .cta-h{color:var(--white)}
#contact.is-navy .cta-lede{color:#B4B9C9}
#contact.is-navy .fx-solid{background:var(--cyan);color:var(--cyan-ink);box-shadow:0 14px 30px -14px rgba(30,193,203,.55)}
#contact.is-navy .fx-solid .fx-arr{background:var(--navy);color:var(--cyan)}
#contact.is-navy .fx-solid:hover{background:var(--aurora)}
#contact.is-navy .fx-line{color:var(--cloud);box-shadow:inset 0 0 0 1px var(--line-strong)}
#contact.is-navy .fx-line .fx-arr{background:var(--cloud);color:var(--navy)}
#contact.is-navy .fx-line:hover{box-shadow:inset 0 0 0 1px var(--cyan);background:rgba(30,193,203,.06)}
#contact.is-navy .cta-meta{border-top-color:var(--line-strong)}
#contact.is-navy .cm-label{color:var(--slate)}
#contact.is-navy .cm-link{color:var(--cloud);text-decoration-color:rgba(245,247,249,.35)}
#contact.is-navy .cm-link:hover{text-decoration-color:var(--cyan)}
#contact.is-navy .cm-copy{color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(30,193,203,.4)}
#contact.is-navy .cm-copy:hover{background:var(--cyan);color:var(--navy)}
#contact.is-navy .cm-avail{color:#B4B9C9}
#contact.is-navy .cm-avail i{background:#35D07F}
#contact.is-navy .form{background:linear-gradient(160deg,#2B2B3C,#222231 60%,#1E1E2C);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(30,193,203,.06)}
@media (max-width:980px){.cta-grid{grid-template-columns:1fr}}
@media (max-width:520px){.row2{grid-template-columns:1fr}}