/* ============ ATELIER — light, dimensional, alive ============
   porcelain ground + drifting color atmosphere + real product floating in space.
   References: Ben's saved Orbix (floating UI, soft deep shadows, pill tags) +
   Fora-style layered parallax + our own brand tokens. */
:root{
  --paper:#F8F7F4;            /* porcelain ground */
  --paper-2:#EFEEE9;          /* raised paper */
  --white:#FFFFFF;
  --ink:#131311;              /* text */
  --ink-70:#4B4A45;          /* secondary text */
  --ink-45:#8B8A82;          /* tertiary text, labels */
  --cobalt:#2440E0;           /* THE accent, once per screen */
  --sky:#BFD3FF;              /* atmosphere orb */
  --mint:#C4E8D2;             /* atmosphere orb */
  --champagne:#F4E3BE;        /* atmosphere orb */
  --line:rgba(19,19,17,.09);
  --line-strong:rgba(19,19,17,.2);
  --shadow-float:0 60px 120px -40px rgba(19,19,17,.28), 0 24px 48px -24px rgba(19,19,17,.18);
  --display:'Clash Display',sans-serif;
  --body:'General Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--paper)}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--cobalt);color:var(--paper)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
em{font-style:normal;color:var(--cobalt)}

/* ============ the atmosphere: big soft orbs drifting behind everything ============ */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.orb-a{width:58vw;height:58vw;background:var(--sky);top:-18vw;right:-12vw;animation:drift-a 26s ease-in-out infinite alternate}
.orb-b{width:44vw;height:44vw;background:var(--mint);bottom:-16vw;left:-10vw;animation:drift-b 32s ease-in-out infinite alternate}
.orb-c{width:34vw;height:34vw;background:var(--champagne);top:38vh;left:34vw;opacity:.4;animation:drift-c 38s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-9vw,12vh) scale(1.14)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(10vw,-9vh) scale(1.1)}}
@keyframes drift-c{from{transform:translate(0,0)}to{transform:translate(12vw,10vh)}}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.head-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
nav,header,main,section,footer{position:relative;z-index:3}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,52px);transition:background .4s,box-shadow .4s,transform .4s}
.nav.scrolled{background:rgba(248,247,244,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:17px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink);text-decoration:none}
.logo .node{width:9px;height:9px;border-radius:50%;background:var(--cobalt)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,34px)}
.nav-links a{font-size:13.5px;color:var(--ink-70);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.logo,.nav-toggle{position:relative;z-index:60} /* stay above the mobile sheet, which stacks inside .nav */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:100px;
  background:rgba(255,255,255,.55);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
body.menu-open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:820px){
  .nav-toggle{display:flex}
  .nav .btn{display:none}
  .nav-links{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:6px;padding:0 clamp(24px,8vw,52px);background:var(--paper);
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav-links a{font-family:var(--display);font-weight:600;font-size:clamp(34px,10vw,54px);letter-spacing:-.03em;
    color:var(--ink);padding:10px 0;opacity:0;transform:translateY(14px);
    transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
  .nav-links a[aria-current="page"]{color:var(--ink-45)}
  /* backdrop-filter on .nav would make it the containing block for the fixed sheet,
     collapsing it to bar height. Drop it while the sheet is open. */
  body.menu-open .nav,body.menu-open .nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;box-shadow:none}
  body.menu-open{overflow:hidden}
  body.menu-open .nav-links{opacity:1;visibility:visible;z-index:40}
  body.menu-open .nav-links a{opacity:1;transform:none}
  body.menu-open .nav-links a:nth-child(1){transition-delay:.06s}
  body.menu-open .nav-links a:nth-child(2){transition-delay:.11s}
  body.menu-open .nav-links a:nth-child(3){transition-delay:.16s}
  body.menu-open .nav-links a:nth-child(4){transition-delay:.21s}
}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:14.5px;
  padding:14px 26px;border-radius:100px;text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,border-color .25s,box-shadow .25s;will-change:transform}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn-ink:hover{box-shadow:0 14px 34px -12px rgba(19,19,17,.45)}
.btn-line{background:rgba(255,255,255,.55);color:var(--ink);border:1px solid var(--line-strong);backdrop-filter:blur(6px)}
.btn-line:hover{border-color:var(--ink)}
.btn-big{font-size:16.5px;padding:18px 34px}

/* ============ shared type ============ */
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--cobalt);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.sec-title{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,54px);letter-spacing:-.025em;
  line-height:1.04;text-wrap:balance;margin-top:14px}

/* section lede: the paragraph under a .sec-title. Measure-capped for reading. */
.sec-lede{margin-top:20px;font-size:clamp(15px,1.55vw,18px);font-weight:400;line-height:1.7;
  color:var(--ink-70);max-width:64ch}

/* ============ ACT I: hero with floating product stage ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(96px,14vh,150px) clamp(20px,4vw,52px) 30px;max-width:1560px;margin:0 auto;width:100%;position:relative}
.hero-copy{max-width:820px;position:relative;z-index:4}
.hero-h{font-family:var(--display);font-weight:600;font-size:clamp(44px,7.4vw,110px);line-height:1;
  letter-spacing:-.03em;margin-top:24px;text-wrap:balance}
.hero-sub{margin-top:26px;font-size:clamp(16px,1.7vw,19px);font-weight:400;line-height:1.65;color:var(--ink-70);max-width:50ch}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-head-poster{display:none}
@media(max-width:900px){
  .hero-head-poster{display:block;margin:34px auto 0;width:min(78vw,420px);position:relative}
  .hero-head-poster img,.hero-head-poster video{display:block;width:100%;height:auto;border-radius:24px;
    mask-image:radial-gradient(ellipse 70% 62% at 50% 46%, #000 55%, transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 46%, #000 55%, transparent 100%)}
  .head-canvas{display:none}
}

/* the stage: real screens floating at angles, Orbix-style */
.stage{position:relative;height:clamp(320px,52vh,560px);margin-top:clamp(28px,5vh,60px);perspective:1400px}
.shot{position:absolute;border-radius:14px;overflow:visible;will-change:transform}
.shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:var(--shadow-float);background:var(--white)}
.shot-tag{position:absolute;top:-14px;left:18px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--white);border:1px solid var(--line-strong);border-radius:100px;
  padding:7px 13px;color:var(--ink-70);box-shadow:0 8px 20px -10px rgba(19,19,17,.3);white-space:nowrap}
.shot-desktop{width:min(56vw,760px);left:2%;top:4%;transform:rotateX(6deg) rotateY(7deg) rotateZ(-1.5deg)}
.shot-launcher{width:min(42vw,560px);right:6%;top:16%;transform:rotateX(5deg) rotateY(-9deg) rotateZ(1.4deg)}
.shot-mobile{width:min(17vw,220px);right:30%;top:2%;transform:rotateZ(3deg)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:44px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-line{width:1px;height:44px;background:linear-gradient(var(--ink-45),transparent);display:block;
  animation:scrollhint 2.2s ease-in-out infinite}
@keyframes scrollhint{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.55);opacity:.4}}
@media(max-width:900px){
  .stage{height:auto;perspective:none;display:grid;gap:22px;padding-top:10px}
  .shot{position:static;transform:none !important;width:100% !important}
  .shot-mobile{width:60% !important;margin:0 auto}
}

/* ============ ACT II: manifesto ============ */
.manifesto{padding:clamp(110px,20vh,240px) clamp(20px,4vw,52px);max-width:1560px;margin:0 auto}
.mani-line{font-family:var(--display);font-weight:600;font-size:clamp(28px,5vw,74px);line-height:1.1;
  letter-spacing:-.025em;color:var(--ink-45);opacity:.35;transition:opacity .5s,color .5s;text-wrap:balance;max-width:24ch}
.mani-line.lit{opacity:1;color:var(--ink)}
@media(min-width:901px){.mani-line{max-width:min(24ch,54vw)}}
.mani-line+.mani-line{margin-top:clamp(16px,3vh,30px)}
.mani-em.lit{color:var(--cobalt)}

/* ============ shared pane ============ */
.pane{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-float)}
.pane-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.pane-url{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.pane-live{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  display:inline-flex;align-items:center;gap:7px}
.pane-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt)}
.pane-media{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.pane-media video{width:100%;height:100%;object-fit:cover;display:block}
.pane-body{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 20px 20px}
.pane-body h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,26px)}
.pane-metric{text-align:right}
.pane-metric b{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block}
.pane-metric span{font-size:11.5px;color:var(--ink-45);display:block;margin-top:3px;max-width:24ch}

/* ============ ACT III: floor ============ */
.floor{padding:clamp(90px,14vh,180px) 0}
.floor-head{padding:0 clamp(20px,4vw,52px);max-width:1560px;margin:0 auto 40px}
.floor-track{display:flex;gap:clamp(16px,2vw,30px);width:max-content;padding:0 clamp(20px,4vw,52px);will-change:transform}
.floor.pinned{height:420vh}
.floor.pinned .floor-inner{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.floor .pane{width:clamp(300px,40vw,600px);flex-shrink:0}
.floor:not(.pinned) .floor-track{width:auto;flex-direction:column;max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.floor:not(.pinned) .floor-track .pane{width:100%}
.floor-more{display:inline-flex;align-items:center;gap:10px;margin:40px clamp(20px,4vw,52px) 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);text-decoration:none}
.floor-more:hover{color:var(--ink)}
.floor-more .arr{transition:transform .25s}
.floor-more:hover .arr{transform:translateX(4px)}

/* ============ ACT IV: stacking offer cards ============ */
.offers{padding:clamp(90px,14vh,180px) clamp(20px,4vw,52px);max-width:1280px;margin:0 auto}
.offers-head{margin-bottom:clamp(30px,6vh,60px)}
.stack{display:grid;gap:22px}
.scard{position:sticky;top:calc(76px + var(--si,0) * 26px);will-change:transform}
.scard-in{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-float);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,44px);
  padding:clamp(24px,3.4vw,44px);align-items:center}
.scard-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.scard h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;margin-top:12px}
.scard p{margin-top:14px;font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-70);max-width:46ch}
.scard-side{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.scard-band{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:100px;padding:8px 16px;background:var(--paper)}
.scard-side video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
@media(max-width:900px){.scard-in{grid-template-columns:1fr}.scard-side{align-items:flex-start}}

/* ============ ACT V: morph ============ */
.morph{padding:clamp(60px,10vh,120px) clamp(20px,4vw,52px);max-width:1560px;margin:0 auto}
.morph-card{background:var(--white);border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,4vw,56px);box-shadow:var(--shadow-float)}
.morph-label{display:block;font-family:var(--display);font-weight:600;font-size:clamp(28px,3.8vw,54px);
  letter-spacing:-.025em;line-height:1.06;margin-top:12px;text-wrap:balance}
.morph-row{margin-top:26px;max-width:640px}
.morph-row input{width:100%;font-family:var(--body);font-weight:400;font-size:clamp(16px,1.8vw,20px);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;padding:17px 22px;
  transition:border-color .2s,box-shadow .2s}
.morph-row input::placeholder{color:var(--ink-45)}
.morph-row input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(36,64,224,.14)}
.morph-out{margin-top:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,48px);align-items:center}
.morph-out[hidden]{display:none}
.morph-media{box-shadow:none}
.morph-media video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper-2)}
.morph-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,42px);
  letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.morph-copy p{margin-top:14px;font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-70);max-width:48ch}
.morph-copy .btn{margin-top:26px}
.morph-out.morphing{animation:morphIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes morphIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:900px){.morph-out{grid-template-columns:1fr}}

/* ============ ACT VI: stats ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:clamp(40px,8vh,90px) 0}
.stat{background:var(--paper);padding:clamp(30px,4vw,56px) clamp(20px,3vw,44px)}
.stat b{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,76px);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block}
.stat span{display:block;margin-top:10px;font-size:13px;font-weight:400;color:var(--ink-45)}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}


/* ============ ACT VI.b: how an engagement runs ============ */
.how{padding:clamp(90px,14vh,180px) clamp(20px,4vw,52px);max-width:1560px;margin:0 auto}
.how-head{margin-bottom:clamp(30px,6vh,60px);max-width:900px}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-steps li{background:var(--paper);padding:clamp(26px,3vw,44px) clamp(18px,2vw,30px) clamp(30px,3vw,48px);display:grid;gap:12px;align-content:start;position:relative}
.how-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.how-steps h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.025em;margin-top:8px}
.how-steps p{font-size:14.5px;font-weight:400;line-height:1.65;color:var(--ink-70)}
.how-steps li:first-child h3{color:var(--cobalt)}
@media(max-width:900px){.how-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.how-steps{grid-template-columns:1fr}}

/* ============ ACT VI.c: where we work ============ */
.where{padding:clamp(90px,14vh,180px) clamp(20px,4vw,52px);max-width:1560px;margin:0 auto}
.where-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.where-copy p{margin-top:22px;font-size:15.5px;font-weight:400;line-height:1.68;color:var(--ink-70);max-width:48ch}
.where-list{margin-top:30px;display:grid;gap:18px;border-top:1px solid var(--line);padding-top:24px}
.where-list dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.where-list dd{margin-top:6px;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--ink-70);max-width:52ch}
.where-map canvas{display:block;width:100%;height:auto;background:var(--white)}
@media(max-width:900px){.where-grid{grid-template-columns:1fr}}

/* ============ ACT VI.d: who ============ */
.who{padding:clamp(90px,14vh,180px) clamp(20px,4vw,52px);max-width:1280px;margin:0 auto}
.who-head{margin-bottom:clamp(30px,6vh,56px);max-width:900px}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.who-body{padding:clamp(26px,3.4vw,48px)}
.who-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.who-card h3{font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,42px);letter-spacing:-.025em;margin-top:12px}
.who-card p{margin-top:16px;font-size:15px;font-weight:400;line-height:1.66;color:var(--ink-70)}
.who-facts{list-style:none;margin-top:22px;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:18px}
.who-facts li{font-size:13.5px;color:var(--ink-70);padding-left:18px;position:relative}
.who-facts li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--ink-45)}
.who-note{margin-top:clamp(24px,4vh,40px);font-family:var(--display);font-weight:500;font-size:clamp(19px,2.2vw,28px);line-height:1.3;letter-spacing:-.02em;max-width:36ch;text-wrap:balance}
@media(max-width:820px){.who-grid{grid-template-columns:1fr}}

/* ============ ACT VI.e: faq ============ */
.faq{padding:clamp(90px,14vh,180px) clamp(20px,4vw,52px);max-width:1100px;margin:0 auto}
.faq-head{margin-bottom:clamp(26px,5vh,48px)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,25px);letter-spacing:-.015em;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--body);font-weight:400;font-size:26px;color:var(--ink-45);transition:transform .25s;flex-shrink:0}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--ink)}
.faq-list p{padding:0 0 26px;font-size:15px;font-weight:400;line-height:1.68;color:var(--ink-70);max-width:66ch}

/* ============ ACT VII: cta ============ */
.cta{padding:clamp(100px,18vh,220px) clamp(20px,4vw,52px);text-align:center}
.cta-inner{max-width:940px;margin:0 auto}
.cta h2{font-family:var(--display);font-weight:600;font-size:clamp(36px,6vw,92px);line-height:1.02;
  letter-spacing:-.03em;text-wrap:balance}
.cta p{margin:26px auto 0;font-size:clamp(15px,1.6vw,19px);font-weight:400;line-height:1.65;
  color:var(--ink-70);max-width:52ch}
.cta .btn{margin-top:40px}

/* ============ footer ============ */
footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:26px clamp(20px,4vw,52px);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.f-links{display:flex;flex-wrap:wrap;gap:12px 22px;max-width:100%;min-width:0}
.f-links a{color:var(--ink-70);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--ink)}

/* ============ reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .mani-line{opacity:1;color:var(--ink)}
  .mani-em{color:var(--cobalt)}
  .orb{animation:none}
  .morph-out.morphing{animation:none}
}

/* Skip link: hidden until a keyboard user tabs to it, then it is the first stop
   on every page. Without it, reaching the content means tabbing the whole nav. */
.skip-link{
  position:fixed;top:0;left:0;z-index:9999;
  transform:translateY(-120%);
  padding:14px 22px;border-radius:0 0 12px 0;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;box-shadow:var(--shadow-float);
  transition:transform .18s cubic-bezier(.2,.9,.3,1);
}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--cobalt);outline-offset:-4px}
[id="main"]:focus{outline:none}

/* Respect a request for more contrast: firm up the hairlines and mute nothing. */
@media (prefers-contrast:more){
  :root{--line:rgba(20,26,43,.28);--line-strong:rgba(20,26,43,.5);--ink-70:#2C3446;--ink-45:#454C5E}
  .band{--line:rgba(243,237,227,.3);--line-strong:rgba(243,237,227,.55);--ink-70:#E4DED2;--ink-45:#C2C4CE}
  .grain,.sky{display:none}
  .btn,.pane,.play,.receipt{border-width:1.5px}
}

/* Touch: standalone links need a real hit area. The footer alone is 20 links at
   14px tall, wrapped into adjacent rows - the mis-tap is the default outcome.
   The padding is invisible; only the target grows. (WCAG 2.5.8 wants 24px; 32
   is comfortable for a thumb.) */
@media (pointer:coarse){
  .f-links a,.qstrip-alt,.svc-index a,.lib-filter button,
  .practice-go,a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:32px;
  }
  /* A touch iPad in landscape gets the DESKTOP nav, whose links are 18px tall.
     Grow the target, not the type. */
  .nav-links a{display:inline-flex;align-items:center;min-height:34px}
  footer .f-links{gap:4px 22px}
}