:root{
  --img-integ:url("../img/integrations.webp?v=e1a1ce85dd");
  --img-books:url("../img/books.webp?v=e1a1ce85dd");
  --img-icons:url("../img/icons.png?v=e1a1ce85dd");
  --img-flow:url("../img/flow.webp?v=e1a1ce85dd");
  --img-vision:url("../img/vision.webp?v=e1a1ce85dd");
}

body{margin:0;background:#0A0C0B;color:#F1F4F2;font-family:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#F1F4F2}a:hover{color:#FFFFFF}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:#F1F4F2;color:#0A0C0B}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400}
:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px;border-radius:10px}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:84px;margin-bottom:-84px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition:background .5s ease,box-shadow .5s ease}
.nav.scrolled{background:rgba(10,12,11,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-logo{display:block;animation:fadeIn 1s .1s ease both}
.nav-logo svg{height:24px;width:136.1px;display:block;color:#F1F4F2}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font:inherit;font-size:16px;font-weight:600;text-decoration:none;border:0;cursor:pointer;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .45s cubic-bezier(.2,.9,.25,1),background .3s ease,color .3s ease,box-shadow .3s ease}
.btn-light{background:#F1F4F2;color:#0A0C0B}
.btn-light:hover{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px #FFFFFF}

/* hero */
.hero{position:relative;height:clamp(660px,100vh,1100px);overflow:hidden;background:#0A0C0B}
.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* three.js loads async: the particles fade in when they are ready */
.js .gl{opacity:0;transition:opacity 1.2s ease}
.js .gl.on{opacity:1}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to bottom,rgba(10,12,11,0),rgba(10,12,11,.88));pointer-events:none}
.hero-intro{position:absolute;top:150px;left:48px;max-width:400px;z-index:2;display:flex;flex-direction:column;gap:18px}
.hero-intro p{margin:0}
.intro{font-size:20px;line-height:1.5;color:#F1F4F2;animation:rise 1s 1.5s cubic-bezier(.16,.9,.2,1) both}
.based{font-size:15px;color:#939D98;animation:rise 1s 1.65s cubic-bezier(.16,.9,.2,1) both}
.hero-h1{position:absolute;left:40px;right:40px;bottom:56px;margin:0;z-index:2;line-height:.8}
.w1{display:block;font-size:clamp(56px,18.5vw,320px);letter-spacing:-.035em;white-space:nowrap}
.ch{display:inline-block;animation:chIn 1.4s cubic-bezier(.16,.9,.2,1) both}
.w2{display:block;font-style:italic;font-size:clamp(40px,6.4vw,112px);letter-spacing:-.01em;margin-left:clamp(0px,38vw,640px);margin-top:.14em;animation:rise 1.2s 1.15s cubic-bezier(.16,.9,.2,1) both}
@keyframes chIn{from{opacity:0;transform:translateY(45%) rotate(7deg);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* clients */
.clients{position:relative;z-index:2;background:#0A0C0B;border-top:1px solid rgba(255,255,255,.08);padding:56px 0 72px}
.clients-lbl{margin:0 0 30px;padding:0 48px;font-size:16px;font-weight:500;color:#939D98}
.mq-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq img{height:52px;width:auto;display:block;flex-shrink:0;opacity:.55;transition:opacity .6s ease}
.mq-wrap:hover .mq{animation-play-state:paused}
.mq-wrap:hover img{opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}

/* what we do */
.what{background:#121513;color:#F1F4F2;padding:100px 48px 120px;border-radius:40px;margin:0 16px;position:relative;z-index:2}
.lbl{margin:0 0 22px;font-size:16px;font-weight:500;color:#939D98}
.h2{font-size:clamp(44px,6vw,96px);line-height:.98;letter-spacing:-.02em;margin:0}
.what-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:64px}
.lead{font-size:19px;line-height:1.6;margin:0;color:#B3BCB7;max-width:520px}
.tabs{display:flex;gap:6px;margin-bottom:44px;padding:6px;background:#1B201D;border-radius:999px;width:max-content;max-width:100%}
.tab{all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;font-size:16px;font-weight:500;color:#B3BCB7;white-space:nowrap;transition:background .4s cubic-bezier(.2,.9,.25,1),color .3s ease}
.tab:hover{color:#FFFFFF;background:rgba(255,255,255,.08)}
.tab.on{background:#F1F4F2;color:#0A0C0B}
.tab:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pimg{height:600px;border-radius:28px;overflow:hidden;background:#1B201D;animation:clipIn 1.1s cubic-bezier(.7,0,.2,1) both}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;animation:zoomOut 1.8s cubic-bezier(.16,.9,.2,1) both}
@keyframes clipIn{from{clip-path:inset(0 0 100% 0 round 28px)}to{clip-path:inset(0 0 0 0 round 28px)}}
@keyframes zoomOut{from{transform:scale(1.2)}to{transform:scale(1)}}
.ptxt>*{animation:rise .9s .25s cubic-bezier(.16,.9,.2,1) both}
.ptxt>*:nth-child(2){animation-delay:.38s}
.ptitle{font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.02em;margin:0 0 26px}
.pbody{font-size:19px;line-height:1.65;color:#B3BCB7;margin:0;max-width:520px}

/* video */
.vsec{padding:160px 0 40px}
.vwrap{margin:0 24px;aspect-ratio:16/9;overflow:hidden;background:#151917;transform:scale(calc(.7 + .3 * var(--p,1)));border-radius:calc(8px + 44px * (1 - var(--p,1)));will-change:transform}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block}

/* good hands */
.hands{padding:160px 48px 120px}
.hands-lbl{margin:0 0 24px;font-size:15px;font-weight:500;color:#939D98}
.mega{font-size:clamp(64px,11vw,200px);line-height:.9;letter-spacing:-.03em;margin:0 0 64px}
.fillp{font-size:clamp(24px,2.7vw,42px);line-height:1.35;max-width:1150px;margin:0}
.fill{background-image:linear-gradient(#F1F4F2,#F1F4F2),linear-gradient(#313834,#313834);background-repeat:no-repeat;background-size:calc(var(--fill,1) * 100%) 100%,100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* process */
.process{padding:40px 48px 160px}
.stack{display:flex;flex-direction:column;gap:36px}
.card{position:sticky;border-radius:36px;padding:56px;min-height:460px;overflow:hidden;transform:scale(var(--s,1));transform-origin:50% 0;color:#F1F4F2}
.card::after{content:"";position:absolute;inset:0;background:#000000;opacity:var(--dim,0);pointer-events:none}
.c1{top:100px;background:#151917;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.c2{top:128px;background:#1F2421;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.c3{top:156px;background:#E3EBE6;color:#0A0C0B}
.card-grid{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:56px;align-items:center;position:relative;z-index:1}
.step{margin:0 0 14px;color:#939D98;font-size:16px}
.ctitle{font-size:clamp(56px,7vw,116px);line-height:.95;margin:0 0 24px;letter-spacing:-.02em}
.cbody{font-size:19px;line-height:1.6;margin:0;color:#C4CBC7;max-width:520px}
.ico{width:170px;aspect-ratio:1;background-size:300% 100%;background-repeat:no-repeat;filter:brightness(0) invert(1);opacity:.92}
.ico1{background-position:0% 0}.ico2{background-position:50% 0}.ico3{background-position:100% 0}
.c3 .ico{filter:brightness(0);opacity:1}
.c3 .step{color:#56605B}
.c3 .cbody{color:#232A26}
.side-h{font-size:22px;font-weight:600;margin:0 0 18px}
.blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.blist li{font-size:17px;line-height:1.4;padding-left:24px;position:relative}
.blist li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:#F1F4F2}
.c3 .blist li::before{background:#0A0C0B}

/* contact */
.cta{background:#121513;color:#F1F4F2;border-radius:40px;margin:0 16px;padding:120px 48px}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.mega2{font-size:clamp(56px,8vw,140px);line-height:.92;letter-spacing:-.03em;margin:0 0 28px}
.books{margin-top:52px;width:min(100%,420px);aspect-ratio:1;border-radius:28px;overflow:hidden;transform:translateY(var(--py,0px))}
.books img{width:100%;height:100%;object-fit:cover;display:block}
.formcard{background:#181C1A;border-radius:28px;padding:40px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;flex-direction:column;gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:15px;font-weight:600;color:#F1F4F2}
.fld input,.fld textarea{font:inherit;font-size:17px;color:#F1F4F2;background:#0E110F;border:1.5px solid #2B312E;border-radius:14px;padding:14px 16px;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:#FFFFFF;background:#0A0C0B;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.done{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:48px 40px;background:#181C1A;border-radius:28px;animation:rise .7s cubic-bezier(.16,.9,.2,1) both}
.done p{margin:0;font-size:24px;line-height:1.4}
.tick{animation:pop .6s .15s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* footer */
.foot{padding:120px 48px 40px}
.bigmark{width:100%;height:auto;display:block;color:#F1F4F2}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:15px;color:#939D98}
.frow a{color:#939D98;text-decoration:none}.frow a:hover{color:#FFFFFF}
.soc{display:flex;gap:10px}
.soc a{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:background .3s ease,color .3s ease}
.soc a:hover{background:#F1F4F2;color:#0A0C0B}

/* scroll reveal (only hides once JS runs) */
.js .rv{opacity:0;transform:translateY(48px);transition:opacity 1.1s cubic-bezier(.16,.9,.2,1),transform 1.1s cubic-bezier(.16,.9,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rvc .bigmark{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.js .rvc.in .bigmark{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.mq{animation:none}
html{scroll-behavior:auto}
}

/* ═════════ Additions on top of the reference design ═════════ */

/* Smooth scroll (Lenis) */
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

.skip{position:fixed;left:16px;top:-80px;z-index:100;background:#F1F4F2;color:#0A0C0B;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* Hero entrance waits for the web fonts so letters never swap mid-animation */
.js:not(.go) .ch,.js:not(.go) .w2,.js:not(.go) .intro,.js:not(.go) .based,.js:not(.go) .nav-logo{animation-name:none;opacity:0}
.no-gl .hero{background:radial-gradient(70% 55% at 78% 30%,#161B18 0%,#0A0C0B 70%)}

/* Sliding pill behind the active tab */
.tabs{position:relative}
.tab{position:relative;z-index:1}
.tab-pill{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:999px;background:#F1F4F2;pointer-events:none}
.tab.on,.tab.on:hover{background:transparent;color:#0A0C0B}
.panel[hidden]{display:none}
.pic{display:block;width:100%;height:100%;background-size:cover;background-position:center;animation:zoomOut 1.8s cubic-bezier(.16,.9,.2,1) both}
.pic-integ{background-image:var(--img-integ)}
.pic-books{background-image:var(--img-books)}
.pic-flow{background-image:var(--img-flow)}
.pic-vision{background-image:var(--img-vision)}

/* Process icons + contact image use the shared CSS images */
.ico{background-image:var(--img-icons)}
.books .pic{animation:none}

/* Video: the headline lives inside the frame and is driven by scroll */
.vsec{position:relative;padding:0;height:250vh;height:250svh;margin-top:48px}
.vpin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vwrap{position:relative;margin:0;width:calc(100% - 48px);height:min(calc((100vw - 48px) * 9 / 16),calc(100vh - 96px));height:min(calc((100vw - 48px) * 9 / 16),calc(100svh - 96px));aspect-ratio:auto;transform:scale(calc(.72 + .28 * var(--p,1)));border-radius:calc(10px + 42px * (1 - var(--p,1)));overflow:hidden;background:#151917 var(--poster,none) center/cover no-repeat;will-change:transform}
.vwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;transform:scale(calc(1.14 - .14 * var(--p,1)));will-change:transform}
.vshade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--t,1);background:linear-gradient(to top,rgba(8,16,13,.82) 0%,rgba(8,16,13,.5) 38%,rgba(8,16,13,.14) 72%,rgba(8,16,13,0) 100%)}
.vt{position:absolute;z-index:2;left:clamp(22px,4.2vw,68px);right:clamp(22px,22%,340px);bottom:clamp(26px,4.6vw,72px);margin:0;padding:0;text-align:left;font-size:clamp(32px,5vw,84px);line-height:1.02;letter-spacing:-.02em;color:#F1F4F2;text-shadow:0 2px 30px rgba(8,16,13,.35)}
.vt .it{font-style:italic;letter-spacing:-.01em}
.vt .vw{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .06em .18em;margin:-.12em -.06em -.18em}
.vt .vwi{display:inline-block;will-change:transform}
@media (prefers-reduced-motion:reduce){ .vt .vwi{transform:none!important;opacity:1!important} .vwrap,.vwrap video{transform:none!important} }
.no-anim .vt .vwi{transform:none!important;opacity:1!important}

/* Word-mask reveal for big headlines */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .06em .2em;margin:-.12em -.06em -.2em}
.rwi{display:inline-block;will-change:transform}
.js:not(.no-anim) [data-split]:not(.is-ready){opacity:0}
.no-anim .rv{opacity:1!important;transform:none!important;transition:none!important}
.no-anim .rvc .bigmark{clip-path:none!important}

/* Form states */
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#ff9a9a}
.fstatus{margin:0;min-height:1.4em;font-size:15px;color:#B3BCB7}
.fstatus.err{color:#ffb4b4}
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.formcard{position:relative;isolation:isolate;overflow:hidden}
.formcard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.06),transparent 62%)}
.formcard:hover::before{opacity:1}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important}
  .js .rvc .bigmark{clip-path:none!important}
}
.soc svg{display:block}
.frow .legal a{text-decoration:none}

/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER
   desktop  ≥1101   · tablet 761–1100 · phone ≤760 · small phone ≤400
   stacked hero: phones, portrait tablets, short landscape phones
   ═════════════════════════════════════════════════════════════════════ */
:root{--nav-h:84px;--gx:48px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,.tab{-webkit-tap-highlight-color:transparent}
.nav{height:var(--nav-h);margin-bottom:calc(-1 * var(--nav-h));padding:0 var(--gx)}
.nav-logo{display:flex;align-items:center;min-height:44px}
.hero{height:clamp(660px,100vh,1100px);height:clamp(660px,100svh,1100px)}
.m-br{display:none}
.legal{display:inline-flex;align-items:center}
.legal a{display:inline-flex;align-items:center;min-height:44px}
.legal a + a::before{content:"•";margin:0 12px;color:#939D98}
.tabs{width:100%;max-width:max-content;flex-wrap:wrap;border-radius:30px}
.tab{justify-content:center}
.tab-pill{border-radius:24px}
.panel .ptxt{min-width:0}
.card{top:var(--stick)}
.stack{--stick:calc(var(--nav-h) + 16px)}
.stack{--peek:28px}
.c1{top:var(--stick)}.c2{top:calc(var(--stick) + var(--peek))}.c3{top:calc(var(--stick) + var(--peek) * 2)}
.rvc .bigmark{transition-duration:1.1s}
.c-text{display:block}
.stack.nostack .card{position:relative;top:auto;transform:none}
.stack.nostack .card::after{display:none}
.cta-grid{grid-template-areas:"copy form" "books form";grid-template-rows:auto 1fr;row-gap:0;align-items:start}
.cta-copy{grid-area:copy}
.formcard,.done{grid-area:form}
.books{grid-area:books}
.fld input,.fld textarea{min-height:50px}
.btn{min-height:52px}
.frow a{color:#939D98}

/* touch screens: no sticky hover states */
@media (hover:none){
  .btn-light:hover{background:#F1F4F2;color:#0A0C0B;box-shadow:none}
  .tab:hover{color:#B3BCB7;background:transparent}
  .tab.on:hover{color:#0A0C0B}
  .soc a:hover{background:transparent;color:inherit}
  .frow a:hover,.legal a:hover{color:#939D98}
}

/* ─────────── TABLET + PHONE (≤1100) ─────────── */
@media (max-width:1100px){
  :root{--nav-h:76px;--gx:32px}
  .nav-logo svg{height:22px;width:124.8px}
  .clients{padding:48px 0 64px}
  .clients-lbl{padding:0 var(--gx)}
    .what{margin:0 12px;padding:88px var(--gx) 96px;border-radius:36px}
  .what-head{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin-bottom:44px}
  .h2{font-size:clamp(40px,7vw,68px)}
  .lead{font-size:18px}
  .tabs{margin-bottom:36px}
  .tab{padding:0 20px}
  .panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  .pimg{height:auto;aspect-ratio:4 / 5;border-radius:24px}
  .ptitle{font-size:clamp(34px,5vw,50px);margin-bottom:18px}
  .pbody{font-size:18px;line-height:1.6}
  .hands{padding:128px var(--gx) 96px}
  .mega{font-size:clamp(60px,12vw,132px)}
  .fillp{font-size:clamp(24px,3.6vw,36px)}
  .process{padding:24px 20px 120px}
  .stack{gap:28px;--peek:44px}
  .card{padding:40px;min-height:0;border-radius:32px}
  .card-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"step ico" "title ico" "body list";column-gap:40px;row-gap:0;align-items:start}
  .c-text{display:contents}
  .step{grid-area:step;margin:0 0 10px}
  .ctitle{grid-area:title;font-size:clamp(52px,9vw,96px);margin:0 0 20px}
  .cbody{grid-area:body;font-size:18px;max-width:none}
  .ico{grid-area:ico;justify-self:end;width:clamp(96px,14vw,136px)}
  .c-list{grid-area:list;align-self:start}
  .side-h{font-size:20px;margin-bottom:14px}
  .cta{margin:0 12px;padding:96px var(--gx);border-radius:36px}
  .cta-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "books";grid-template-rows:auto}
  .mega2{font-size:clamp(52px,11vw,110px)}
  .formcard{margin-top:44px;padding:36px}
  .books{margin-top:28px;width:100%;max-width:none;aspect-ratio:16 / 9}
  .books .pic{background-position:center 62%}
  .foot{padding:96px var(--gx) 36px}
  .frow{margin-top:44px}
}

/* video: portrait tablets and phones use a tall frame, landscape keeps 16:9 */
@media (max-width:1100px) and (orientation:portrait){
  .vsec{height:230vh;height:230svh}
  .vwrap{width:calc(100% - 32px);height:min(calc(100vh - var(--nav-h) - 48px),calc((100vw - 32px) * 1.25));height:min(calc(100svh - var(--nav-h) - 48px),calc((100vw - 32px) * 1.25))}
  .vwrap video{object-position:70% 50%}
  .vt{right:clamp(22px,12%,120px);font-size:clamp(30px,6.4vw,64px)}
}

/* ─────────── STACKED HERO (phones, portrait tablets, short landscape phones) ─────────── */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait),(max-height:520px) and (orientation:landscape){
  .hero{display:grid;height:auto;min-height:max(100vh,560px);min-height:max(100svh,560px);padding:calc(var(--nav-h) + 20px) var(--gx) clamp(24px,4.5svh,48px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"intro" "." "h1"}
  .hero-intro{position:relative;top:auto;left:auto;right:auto;grid-area:intro;max-width:34rem}
  .intro{font-size:clamp(17px,2.4vw,22px)}
  .hero-h1{position:relative;left:auto;right:auto;bottom:auto;grid-area:h1;align-self:end}
  .w1{font-size:clamp(64px,28.5vw,232px)}
  .w2{font-size:clamp(32px,11vw,96px);margin-left:clamp(0px,17vw,200px);margin-top:.16em}
}

/* ─────────── PHONE (≤760) ─────────── */
@media (max-width:760px){
  :root{--nav-h:64px;--gx:20px}
  .nav .btn{min-height:44px;padding:0 18px;font-size:15px}
  .nav-logo svg{height:20px;width:113.4px}
  .clients{padding:40px 0 56px}
  .clients-lbl{font-size:15px;margin-bottom:22px}
    .what{margin:0 8px;padding:64px 20px 72px;border-radius:28px}
  .what-head{gap:18px;margin-bottom:32px}
  .h2{font-size:clamp(36px,10.6vw,52px);line-height:1.02}
  .lead{font-size:17px;line-height:1.55}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%;max-width:none;border-radius:26px;margin-bottom:28px}
  .tab{padding:8px 10px;min-height:54px;white-space:normal;text-align:center;line-height:1.2;font-size:15px;border-radius:20px}
  .tab-pill{border-radius:20px}
  .panel{grid-template-columns:minmax(0,1fr);gap:26px}
  .pimg{aspect-ratio:1 / 1.04;border-radius:22px}
  .ptitle{font-size:clamp(32px,9.6vw,44px);margin-bottom:14px}
  .pbody{font-size:17px}
  .hands{padding:88px 20px 72px}
  .hands-lbl{margin-bottom:18px}
  .m-br{display:inline}
  .mega{font-size:clamp(52px,17vw,88px);margin-bottom:36px}
  .fillp{font-size:clamp(22px,6.2vw,28px);line-height:1.38}
  .process{padding:8px 12px 88px}
  .stack{gap:22px;--peek:46px}
  .card{padding:24px 22px 26px;border-radius:26px}
  .card-grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"step ico" "title ico" "body body" "list list"}
  .step{font-size:15px;margin-bottom:6px}
  .ctitle{font-size:clamp(44px,13.5vw,64px);margin-bottom:14px}
  .cbody{font-size:16.5px;line-height:1.55;margin-bottom:0}
  .ico{width:60px;align-self:start}
  .c-list{margin-top:22px;padding-top:20px;border-top:1px solid rgba(140,160,150,.28)}
  .side-h{font-size:18px;margin-bottom:12px}
  .blist{gap:10px}
  .blist li{font-size:16px;padding-left:22px}
  .cta{margin:0 8px;padding:64px 20px 56px;border-radius:28px}
  .mega2{font-size:clamp(46px,14vw,72px);margin-bottom:20px}
  .formcard{margin-top:32px;padding:24px 20px;border-radius:24px;gap:18px}
  .fld input,.fld textarea{font-size:17px}
  .fbar .btn{width:100%}
  .fbar{gap:12px}
  .fstatus:empty{display:none}
  .books{aspect-ratio:16 / 11;border-radius:22px;margin-top:20px}
  .foot{padding:64px 20px calc(28px + env(safe-area-inset-bottom,0px))}
  .frow{flex-direction:column;align-items:flex-start;gap:4px;margin-top:36px;padding-top:12px}
  .legal a + a::before{display:none}
  .legal{gap:22px}
  .soc{margin-top:10px}
  .vt{right:22px;bottom:22px;left:22px;font-size:clamp(28px,8.6vw,44px)}
  .vsec{margin-top:24px}
  .vwrap{width:calc(100% - 24px);height:min(calc(100vh - var(--nav-h) - 40px),calc((100vw - 24px) * 1.7));height:min(calc(100svh - var(--nav-h) - 40px),calc((100vw - 24px) * 1.7))}
}
@media (max-width:400px){
  .tab{font-size:14px;padding:8px 6px}
  .card{padding:22px 18px 24px}
  .blist li{font-size:15.5px}
  .formcard{padding:22px 16px}
  .what,.cta{padding-left:16px;padding-right:16px}
}

/* ─────────── SHORT LANDSCAPE (phones turned sideways) ─────────── */
@media (max-height:520px) and (orientation:landscape){
  :root{--nav-h:56px}
  .nav-logo svg{height:20px;width:113.4px}
  .hero{min-height:max(100vh,330px);min-height:max(100svh,330px);grid-template-rows:auto 1fr;grid-template-areas:"intro" "h1";padding-top:calc(var(--nav-h) + 6px);padding-bottom:18px}
  .hero-intro{max-width:32rem;gap:8px}
  .intro{font-size:15px;line-height:1.4}
  .based{font-size:14px}
  .w1{font-size:clamp(46px,30vh,130px);font-size:clamp(46px,30svh,130px)}
  .w2{font-size:clamp(24px,11svh,54px);margin-left:clamp(0px,14vw,160px)}
  .vsec{height:210vh;height:210svh}
  .vwrap{width:calc(100% - 32px);height:calc(100vh - var(--nav-h) - 20px);height:calc(100svh - var(--nav-h) - 20px)}
  .vt{font-size:clamp(22px,7svh,40px);bottom:16px;left:24px;right:24px}
  .h2{font-size:clamp(32px,5.4vw,46px)}
  .hands{padding-top:72px}
}

/* balanced line breaks: no single-word last lines in headings */
.h2,.ptitle,.mega,.mega2,.ctitle,.vt,.intro{text-wrap:balance}
.lead,.pbody,.cbody,.fillp{text-wrap:pretty}
@media (min-width:761px) and (max-width:1100px){
  .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;max-width:none}
  .tab{white-space:normal;text-align:center;line-height:1.2;min-height:52px;padding:8px 12px}
}
@media (max-width:1100px) and (orientation:portrait) and (min-width:600px){ .vwrap video{object-position:78% 50%} }

@media (min-width:761px) and (max-width:1100px){
  .cta-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"copy copy" "form books";column-gap:24px}
  .books{margin-top:44px;aspect-ratio:auto;height:auto;align-self:stretch;min-height:320px}
  .books .pic{background-position:center 58%}
}

/* stacked cards: as a card is covered, everything but its "(Step N)" label fades, so the peek strip stays clean */
.card :is(.ctitle,.cbody,.ico,.c-list,.side-h,.blist){opacity:calc(1 - var(--dim,0) * 1.6)}
.stack.nostack .card :is(.ctitle,.cbody,.ico,.c-list,.side-h,.blist){opacity:1}
@media (min-width:561px) and (max-width:760px){
  .pimg{aspect-ratio:4 / 3}
  .books{aspect-ratio:16 / 9}
}

/* ═════════ NAV: CTA + menu button ═════════ */
.nav{z-index:60}
.menu-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 22px 0 20px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:#F1F4F2;background:rgba(241,244,242,.07);box-shadow:inset 0 0 0 1px rgba(241,244,242,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .35s ease,box-shadow .35s ease,color .35s ease;-webkit-tap-highlight-color:transparent}
.menu-btn:hover{background:rgba(241,244,242,.14);box-shadow:inset 0 0 0 1px rgba(241,244,242,.4)}
.menu-btn:focus-visible{outline:2px solid #F1F4F2;outline-offset:3px}
.mb-lines{position:relative;display:block;width:18px;height:10px}
.mb-lines i{position:absolute;left:0;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .55s cubic-bezier(.7,0,.2,1),top .55s cubic-bezier(.7,0,.2,1),width .4s ease}
.mb-lines i:first-child{top:0}
.mb-lines i:last-child{top:8px;width:12px}
.menu-btn:hover .mb-lines i:last-child{width:18px}
.menu-open .mb-lines i:first-child{top:4px;transform:rotate(45deg)}
.menu-open .mb-lines i:last-child{top:4px;width:18px;transform:rotate(-45deg)}
.menu-open .menu-btn{background:#F1F4F2;color:#0A0C0B;box-shadow:none}
.menu-open .nav.scrolled{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (hover:none){ .menu-btn:hover{background:rgba(241,244,242,.07);box-shadow:inset 0 0 0 1px rgba(241,244,242,.18)} .menu-open .menu-btn:hover{background:#F1F4F2} }

/* ═════════ FULL-SCREEN MENU ═════════ */
.menu{position:fixed;inset:0;z-index:55;color:#F1F4F2}
.menu[hidden]{display:none!important}
.menu-bg{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 90% 0%,rgba(255,255,255,.16),transparent 68%),
  radial-gradient(55% 55% at 0% 100%,rgba(255,255,255,.06),transparent 70%),
  linear-gradient(180deg,#131715 0%,#0B0E0C 100%);clip-path:inset(0 0 0 0)}
.menu-bg::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.menu-inner{position:relative;height:100%;overflow-y:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--nav-h) - 6px),#000 calc(var(--nav-h) + 22px),#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--nav-h) - 6px),#000 calc(var(--nav-h) + 22px),#000 calc(100% - 20px),transparent 100%);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px 64px;align-content:center;padding:calc(var(--nav-h) + 40px) var(--gx) 48px}
.menu-links{list-style:none;margin:0;padding:0;counter-reset:none}
.menu-links li{position:relative}
.menu-links li::before,.menu-links li:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(241,244,242,.12);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s cubic-bezier(.7,0,.2,1) calc(.28s + var(--i,0) * .07s)}
.menu-links li::before{top:0}
.menu-links li:last-child::after{bottom:0;--i:4}
.menu.lines-in .menu-links li::before,.menu.lines-in .menu-links li:last-child::after{transform:scaleX(1)}
.menu:not(.lines-in) .menu-links a::after{transform:scale(0)!important;transition-delay:0s}
.menu.lines-in .menu-links a[aria-current="true"]::after{transition-delay:.85s}
.menu-links a{position:relative;display:flex;align-items:flex-start;gap:clamp(14px,2vw,28px);padding:clamp(10px,1.6vh,18px) 0;text-decoration:none;color:#F1F4F2;transition:opacity .4s ease}
.ml-n{flex:none;min-width:2ch;padding-top:.9em;font-size:14px;font-weight:600;letter-spacing:.06em;color:#8A9590;font-variant-numeric:tabular-nums}
.ml-m{display:block;overflow:hidden;padding:.06em .04em .14em;margin:-.06em -.04em -.14em}
.ml-t{display:block;font-size:clamp(46px,6.6vw,104px);line-height:1;letter-spacing:-.02em;transition:transform .6s cubic-bezier(.2,.7,.2,1),letter-spacing .6s ease}
.menu-links a::after{content:"";position:absolute;right:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#F1F4F2;transform:scale(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.menu-links a[aria-current="true"]::after{transform:scale(1)}
.menu-links a[aria-current="true"] .ml-n{color:#F1F4F2}
@media (hover:hover){
  .menu-links:hover a{opacity:.32}
  .menu-links a:hover{opacity:1}
  .menu-links a:hover .ml-t{transform:translateX(clamp(8px,1.4vw,20px));font-style:italic}
  .menu-links a:hover::after{transform:scale(1)}
}
.menu-links a:focus-visible{outline:2px solid #F1F4F2;outline-offset:4px;border-radius:8px}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid rgba(241,244,242,.14)}
.menu-inner:focus{outline:none}
.menu-meta{margin:0;display:flex;align-items:center;gap:10px;font-size:15px;color:#939D98;font-variant-numeric:tabular-nums}
.menu-meta .dot{width:6px;height:6px;border-radius:50%;background:#7BE0A8;box-shadow:0 0 0 4px rgba(123,224,168,.16)}
.menu .soc a{width:44px;height:44px}
.js .menu:not(.is-open) .m-rise{opacity:0}

/* ═════════ SCROLL CUE (replaces the old round badge) ═════════ */
.scroll-cue{position:absolute;z-index:2;right:48px;bottom:44px;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#939D98;animation:fadeIn 1s 1.6s ease both}
.scroll-cue i{position:relative;display:block;width:1px;height:56px;overflow:hidden;background:rgba(241,244,242,.18)}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#F1F4F2;animation:cue 2.2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes cue{0%{top:-40%}70%,100%{top:100%}}
.js:not(.go) .scroll-cue{animation-name:none;opacity:0}
@media (max-width:1100px){ .scroll-cue{display:none} }

/* ═════════ FORM: labels float inside the fields ═════════ */
.fl{position:relative;display:block}
.fl input,.fl textarea{display:block;width:100%;min-height:58px;padding:25px 16px 9px;font-size:17px;line-height:1.35}
.fl textarea{min-height:132px;padding-top:30px;resize:vertical}
.fl label{position:absolute;left:17px;top:18px;font-size:16px;font-weight:500;color:#8A9590;pointer-events:none;transform-origin:0 0;transition:transform .28s cubic-bezier(.2,.7,.2,1),color .28s ease}
.fl input::placeholder,.fl textarea::placeholder{color:transparent}
.fl input:focus + label,.fl input:not(:placeholder-shown) + label,.fl textarea:focus + label,.fl textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.76);color:#BCC4C0}
.fl input:-webkit-autofill + label{transform:translateY(-10px) scale(.76)}
.fl input:-webkit-autofill{-webkit-text-fill-color:#F1F4F2;-webkit-box-shadow:0 0 0 1000px #0E110F inset;caret-color:#F1F4F2}
.formcard{gap:14px}
.fbar{margin-top:6px}

/* the book painting never moves over the form */
@media (max-width:1100px){ .books{transform:none!important} }
@media (max-width:760px){
  .books{display:none}
  .cta{padding-bottom:40px}
  .formcard{padding:20px 16px 20px;gap:12px;border-radius:22px}
  .fl textarea{min-height:120px}
}

/* ═════════ MENU: tablet + phone ═════════ */
@media (max-width:900px){
  .menu-inner{grid-template-columns:minmax(0,1fr);align-content:start;gap:40px;padding:calc(var(--nav-h) + 28px) var(--gx) calc(36px + env(safe-area-inset-bottom,0px))}
  .ml-t{font-size:clamp(42px,11vw,76px)}
}
@media (max-width:560px){
  .menu-btn{width:44px;height:44px;padding:0;justify-content:center}
  .menu-links a{padding:12px 0}
  .ml-n{padding-top:.7em}
}
@media (max-height:520px) and (orientation:landscape){
  .menu-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-content:start;padding-top:calc(var(--nav-h) + 16px);gap:24px 40px}
  .ml-t{font-size:clamp(30px,9svh,48px)}
  .menu-links a{padding:6px 0}
}
@media (prefers-reduced-motion:reduce){ .menu-links li::before,.menu-links li:last-child::after{transition:none} .menu-open .mb-lines i{transition:none} .js .menu .m-rise{opacity:1} .scroll-cue i::after{animation:none;top:0;height:100%} }

/* ═════════ MENU BAR (logo · hairline · Menu), minimal hairline style ═════════ */
.nav-line{position:relative;flex:1;height:1px;margin:0 clamp(18px,2.6vw,40px);background:rgba(241,244,242,.16);transform-origin:0 50%;animation:navLine 1.4s .35s cubic-bezier(.7,0,.2,1) both}
.nav-line i{position:absolute;inset:0;background:#F1F4F2;transform-origin:0 50%;transform:scaleX(var(--prog,0));will-change:transform}
@keyframes navLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js:not(.go) .nav-line{animation-name:none;transform:scaleX(0)}
.menu-btn{height:44px;padding:0;gap:14px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:999px}
.menu-btn:hover{background:none;box-shadow:none}
.mb-ico{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(241,244,242,.22);transition:background .45s ease,box-shadow .45s ease,color .45s ease}
.menu-btn:hover .mb-ico{background:rgba(241,244,242,.1);box-shadow:inset 0 0 0 1px rgba(241,244,242,.45)}
.mb-lines{width:18px;height:8px}
.mb-lines i{width:18px;height:1.5px}
.mb-lines i:first-child{top:0}
.mb-lines i:last-child{top:6.5px;width:11px;left:auto;right:0}
.menu-btn:hover .mb-lines i:last-child{width:18px}
.menu-open .menu-btn,.menu-open .menu-btn:hover{background:none;color:#F1F4F2;box-shadow:none}
.menu-open .mb-ico,.menu-open .menu-btn:hover .mb-ico{background:#F1F4F2;color:#0A0C0B;box-shadow:none}
.menu-open .mb-lines i:first-child{top:3.25px;transform:rotate(45deg)}
.menu-open .mb-lines i:last-child{top:3.25px;width:18px;transform:rotate(-45deg)}
@media (hover:none){ .menu-btn:hover .mb-ico{background:none;box-shadow:inset 0 0 0 1px rgba(241,244,242,.22)} .menu-open .menu-btn:hover .mb-ico{background:#F1F4F2} }
@media (max-width:560px){ .menu-btn{width:auto;height:44px;padding:0} .nav-line{margin:0 14px} }

/* ═════════ NEXER LOGO (vector, rebuilt from the uploaded mark) ═════════ */
.nav .nav-logo .brand-svg{display:block;width:clamp(132px,10.6vw,160px);height:auto;aspect-ratio:663.17 / 200;color:#F1F4F2;overflow:visible}
@media (max-width:1100px){ .nav .nav-logo .brand-svg{width:140px} }
@media (max-width:560px){ .nav .nav-logo .brand-svg{width:120px} }
@media (max-height:520px) and (orientation:landscape){ .nav .nav-logo .brand-svg{width:112px} }
.foot .bigmark{display:block;width:100%;height:auto;aspect-ratio:663.17 / 200;color:#F1F4F2}

/* wide-desktop hero keeps the reference proportions */
@media (min-width:1101px){ .hero-intro{top:150px} .w2{margin-top:calc(.14em + min(2.7vw, 47px))} }
@media (max-width:1100px) and (orientation:landscape) and (min-height:521px){ .w2{margin-top:calc(.14em + 2.7vw)} }
@media (max-height:520px) and (orientation:landscape){ .w2{margin-top:calc(.14em + 2vw)} }

/* tucked layout: "as a service" sits close under "Efficiency", ending just before the y's tail */
@media (min-width:1101px),(max-width:1100px) and (orientation:landscape) and (min-height:521px){ .w2{margin-left:min(23vw, 391px);margin-top:-.04em} }

/* ═════════ MENU BAR v2 — logo · a hairline that is also a track · a bare icon that a disc finds ═════════ */
/* the hairline brightens toward the button; scroll progress still fills it */
.nav-line{background:linear-gradient(90deg,rgba(241,244,242,0) 0%,rgba(241,244,242,.16) 30%,rgba(241,244,242,.55) 100%)}
.nav-line i{background:linear-gradient(90deg,rgba(241,244,242,.25),#F1F4F2)}
/* the button: no label, no ring — just the two lines; the disc arrives from the track */
.menu-btn{position:relative;z-index:2;gap:0;width:44px;height:44px;padding:0;justify-content:center}
.mb-ico,.menu-btn:hover .mb-ico,.menu-open .mb-ico,.menu-open .menu-btn:hover .mb-ico{position:relative;z-index:2;background:none!important;box-shadow:none!important;color:#F1F4F2;transition:color .35s ease}
.nav.mag .mb-ico,.nav.mag .menu-btn:hover .mb-ico,.menu-open .nav.no-track .mb-ico{color:#0A0C0B!important}
.mb-lines{width:20px;height:8px}
.mb-lines i{width:20px;height:1.5px}
.mb-lines i:last-child{top:6.5px;width:12px;left:auto;right:0}
.menu-btn:hover .mb-lines i:last-child,.nav.mag .mb-lines i:last-child{width:20px}
.menu-open .mb-lines i:first-child{top:3.25px;transform:rotate(45deg)}
.menu-open .mb-lines i:last-child{top:3.25px;width:20px;transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:1px solid #F1F4F2;outline-offset:4px;border-radius:50%}
/* the disc: a 6px dot riding the hairline that swells into a 44px disc at the button */
.nav-dot{position:absolute;left:0;top:0;z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#F1F4F2;pointer-events:none;transform:translate3d(-100px,-100px,0) scale(0);will-change:transform}
/* touch and keyboard: the disc simply sits on the button while the menu is open */
.no-track .nav-dot{left:auto;right:var(--gx);top:50%;margin:-22px 0 0;transform:scale(0);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.no-track.menu-open .nav-dot,.menu-open .no-track .nav-dot{transform:scale(1)}
@media (hover:none){ .menu-btn:active .mb-ico{opacity:.7} }

/* ═════════ MENU OVERLAY v2 — the page stays alive behind frosted black glass ═════════ */
.menu-bg{background:
  radial-gradient(70% 60% at 90% 0%,rgba(255,255,255,.16),transparent 68%),
  radial-gradient(55% 55% at 0% 100%,rgba(255,255,255,.06),transparent 70%),
  rgba(10,12,11,.86);
  -webkit-backdrop-filter:blur(26px) saturate(.85);backdrop-filter:blur(26px) saturate(.85);clip-path:circle(150% at 100% 0)}
.menu-bg::after{opacity:.05}
.menu-inner{display:flex;flex-direction:column;justify-content:space-between;gap:28px;grid-template-columns:none;align-content:normal;padding:calc(var(--nav-h) + clamp(16px,4svh,48px)) var(--gx) calc(26px + env(safe-area-inset-bottom,0px));-webkit-mask-image:none;mask-image:none}
.menu-nav{flex:1;display:flex;min-height:0}
.menu-links{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(6px,1.4svh,18px);max-height:700px}
.menu-links li{display:flex}
.menu-links li::before,.menu-links li:last-child::after{display:none}
.menu-links li.zr{justify-content:flex-end}
.menu-links a{display:inline-flex;align-items:flex-start;gap:clamp(12px,1.4vw,20px);padding:4px 0;min-height:44px}
.menu-links li.zr a{flex-direction:row-reverse;text-align:right}
.ml-n{padding-top:.55em}
.ml-t{font-size:clamp(42px,min(7.4vw,11.6svh),118px);line-height:1;letter-spacing:-.02em;transform-origin:50% 100%}
.ml-m{position:relative}
/* the rule: on hover a hairline runs from the word toward the middle of the screen */
.ml-rule{position:absolute;top:58%;width:clamp(40px,14vw,220px);height:1px;background:linear-gradient(90deg,#F1F4F2,rgba(241,244,242,0));transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.menu-links li:not(.zr) .ml-rule{left:calc(100% + 18px)}
.menu-links li.zr .ml-rule{right:calc(100% + 18px);transform-origin:100% 50%;background:linear-gradient(270deg,#F1F4F2,rgba(241,244,242,0))}
.menu-links a::after{position:absolute;right:auto;left:-14px;top:calc(.55em + 9px);width:6px;height:6px;margin:0}
.menu-links li.zr a::after{left:auto;right:-14px}
.menu-links a[aria-current="true"]::after{transform:scale(1);transition-delay:1s}
.menu:not(.is-open) .menu-links a::after{transform:scale(0)!important;transition-delay:0s}
@media (hover:hover){
  .menu-links:hover a{opacity:.3}
  .menu-links a:hover{opacity:1}
  .menu-links a:hover .ml-t{font-style:italic;transform:none}
  .menu-links li:not(.zr) a:hover .ml-m{transform:translateX(clamp(6px,1vw,16px))}
  .menu-links li.zr a:hover .ml-m{transform:translateX(calc(-1 * clamp(6px,1vw,16px)))}
  .menu-links a:hover .ml-rule{transform:scaleX(1)}
  .menu-links a:hover::after{transform:scale(1)}
}
.ml-m{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid rgba(241,244,242,.14)}
.menu-meta .dot{background:#F1F4F2;box-shadow:0 0 0 4px rgba(241,244,242,.12)}

@media (max-width:900px){
  .menu-inner{padding-top:calc(var(--nav-h) + 22px)}
  .ml-t{font-size:clamp(40px,min(11.5vw,8.6svh),80px)}
  .menu-links{max-height:none}
}
@media (max-width:560px){
  .menu-links{justify-content:flex-start;gap:clamp(4px,2.2svh,22px)}
  .menu-links a::after{left:-12px}
  .menu-links li.zr a::after{right:-12px}
  .menu-foot{flex-wrap:wrap}
}
@media (max-height:520px) and (orientation:landscape){
  .menu-inner{padding-top:calc(var(--nav-h) + 6px);gap:12px;padding-bottom:12px}
  .ml-t{font-size:clamp(26px,9.2svh,46px)}
  .menu-links{gap:0}
  .menu-links a{padding:0}
  .menu-foot{padding-top:10px}
}
@media (prefers-reduced-motion:reduce){ .ml-m,.ml-rule{transition:none} }

/* ═════════ HERO: "Talk to us" — a clear glass lens over the stream ═════════
   The lens bends and brightens what is behind it (true refraction in Chromium, frosted glass elsewhere),
   catches a specular highlight on the side facing your cursor, and leans toward you. */
.tk{position:absolute;z-index:3;right:var(--gx);top:46%;width:150px;height:150px;margin-top:-75px;display:block;border-radius:50%;color:#F1F4F2;text-decoration:none;perspective:700px;-webkit-tap-highlight-color:transparent;outline:none;
  --la:225deg;--tx:0px;--ty:0px;--rx:0deg;--ry:0deg}
.tk-mag{position:absolute;inset:0;border-radius:50%;transform:translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
/* body: almost nothing — the backdrop, gently magnified and lifted; an inner bevel; a soft shadow under the glass */
.tk-glass{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 18%,rgba(255,255,255,.10),rgba(255,255,255,.02) 42%,rgba(255,255,255,0) 60%),radial-gradient(80% 80% at 70% 92%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter:blur(1.5px) brightness(1.18) saturate(1.2);backdrop-filter:blur(1.5px) brightness(1.18) saturate(1.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -14px 28px rgba(255,255,255,.035),inset 0 10px 22px rgba(0,0,0,.18),0 24px 60px -18px rgba(0,0,0,.6)}
.tk.lens .tk-glass{-webkit-backdrop-filter:url(#tkLens) brightness(1.2) saturate(1.25);backdrop-filter:url(#tkLens) brightness(1.2) saturate(1.25)}
/* rim: a hairline of light whose brightest point faces the cursor */
.tk-rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--la),rgba(255,255,255,.95) 0deg,rgba(255,255,255,.35) 38deg,rgba(255,255,255,.08) 95deg,rgba(255,255,255,.04) 170deg,rgba(255,255,255,.3) 200deg,rgba(255,255,255,.08) 260deg,rgba(255,255,255,.35) 322deg,rgba(255,255,255,.95) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.4px),#000 calc(100% - .6px));mask:radial-gradient(closest-side,transparent calc(100% - 1.4px),#000 calc(100% - .6px))}
.tk-rim::after{content:"";position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* lettering etched into the glass */
.tk-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.tk-ring text{font-family:"Instrument Sans",system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.24em;fill:rgba(255,255,255,.78);paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:.6px}
/* the core: a bead of light that blooms into the button */
.tk-core{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;color:#0A0C0B;
  background:radial-gradient(circle at 38% 30%,#FFFFFF,#E9E9E6 60%,#CFCFCB);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 -2px 6px rgba(0,0,0,.12);
  transform:scale(.2);transition:transform .75s cubic-bezier(.34,1.56,.64,1)}
.tk-core svg{opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.tk.on .tk-core{transform:scale(1)}
.tk.on .tk-core svg{opacity:1;transform:none;transition-delay:.08s}
/* a press sends one ripple through the glass */
.tk-wave{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);opacity:0}
.tk.press .tk-wave{animation:tkWave .7s cubic-bezier(.2,.7,.2,1)}
@keyframes tkWave{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.12)}}
.tk:focus-visible .tk-rim{filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
/* arrival: the glass condenses out of a blur, the lettering turns into place, the bead appears last */
.tk{animation:tkForm 1.5s 2s cubic-bezier(.16,1,.3,1) both}
.tk-ring{animation:tkSpinIn 1.8s 2.15s cubic-bezier(.16,1,.3,1) both}
.tk-core{animation:tkBead .9s 2.9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tkForm{from{opacity:0;filter:blur(14px);scale:.72}to{opacity:1;filter:none;scale:1}}
@keyframes tkSpinIn{from{opacity:0;rotate:-140deg}to{opacity:1;rotate:0deg}}
@keyframes tkBead{from{scale:0}to{scale:1}}
.js:not(.go) .tk,.js:not(.go) .tk-ring,.js:not(.go) .tk-core{animation-name:none;opacity:0}
.menu-open .tk{opacity:0;transition:opacity .3s ease}
/* phones + portrait tablets: smaller, sitting on the stream above the headline */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .tk{width:116px;height:116px;margin-top:0;top:auto;bottom:calc(clamp(24px,4.5svh,48px) + clamp(64px,28.5vw,232px) * 1.35 + 28px)}
  .tk-ring text{font-size:15px}
  .tk-core{width:44px;height:44px;margin:-22px 0 0 -22px;transform:scale(.24)}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){ .tk{width:136px;height:136px} }
@media (max-width:380px){ .tk{width:104px;height:104px} }
@media (max-height:520px) and (orientation:landscape){ .tk{width:98px;height:98px;top:auto;bottom:18px;margin-top:0} .tk-ring text{font-size:15px} .tk-core{width:40px;height:40px;margin:-20px 0 0 -20px} }
.menu-open .tk{animation:none}
@media (prefers-reduced-motion:reduce){ .tk,.tk-ring,.tk-core{animation:none} .tk-core{transition:none} }
/* glare: a soft crescent of reflected light that slides around the glass with the highlight */
.tk-glass::before{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from calc(var(--la) - 40deg),rgba(255,255,255,.16),rgba(255,255,255,0) 70deg,rgba(255,255,255,0) 290deg,rgba(255,255,255,.16));
  -webkit-mask:radial-gradient(closest-side,transparent 74%,#000 90%,transparent 100%);mask:radial-gradient(closest-side,transparent 74%,#000 90%,transparent 100%)}
.tk-glass::after{content:"";position:absolute;left:18%;top:7%;width:46%;height:22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.12),rgba(255,255,255,0));transform:rotate(-24deg);filter:blur(1px)}

/* ═════════ CLIENTS: eight one-colour marks (inline SVG — no image to download) ═════════ */
.mq{display:flex;width:max-content;animation:mq 46s linear infinite;will-change:transform}
.mq-set{display:flex;align-items:center;gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
.mq-logo{display:block;flex:none;height:38px;width:auto;color:#F1F4F2;opacity:.5;transition:opacity .5s ease}
.mq-logo text{font-kerning:normal}
@media (hover:hover){ .mq-wrap:hover .mq{animation-play-state:paused} .mq-wrap:hover .mq-logo{opacity:.3} .mq-wrap .mq-logo:hover{opacity:1} }
.mq-wrap.off .mq{animation-play-state:paused}
@media (max-width:900px){ .mq-logo{height:32px} }
@media (max-width:560px){ .mq-logo{height:28px} .mq{animation-duration:38s} }
@media (prefers-reduced-motion:reduce){
  .mq{width:auto;animation:none;transform:none}
  .mq-set{flex-wrap:wrap;justify-content:center;row-gap:28px;padding:0 var(--gx)}
  .mq-set[aria-hidden="true"]{display:none}
}

/* ═════════ 26.10 update: form note, spam trap, touch polish ═════════ */
main:focus{outline:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote{margin:2px 0 0;font-size:14px;line-height:1.5;color:#8A9590}
.fnote a{color:#BCC4C0;text-underline-offset:3px;display:inline-block;padding:13px 0;margin:-13px 0}
.fnote a:hover{color:#FFFFFF}
.fld input[aria-invalid="true"]+label,.fld textarea[aria-invalid="true"]+label{color:#ffb4b4}
/* touch tablets in landscape (iPad 1180–1366 px) get the desktop layout; a "scroll" hint is for mouse users only */
@media (hover:none) and (pointer:coarse){ .scroll-cue{display:none} }

/* ═════════ SAGE v1 (26.10.2026) — brand = black + white + Sage #8FB3A3 ═════════ */
:root{--sage:#8FB3A3;--sage-rgb:143,179,163}
::selection{background:var(--sage);color:#0A0C0B}

/* hero: a Sage nebula under the particle stream (not pure black) */
.neb{position:absolute;inset:-4%;background:#0A0C0B url("../img/hero-nebula.webp?v=e1a1ce85dd") 50% 50%/cover no-repeat;pointer-events:none;
  animation:nebIn 2.4s .1s ease both,nebDrift 48s 2.5s ease-in-out infinite alternate;will-change:transform}
@media (max-width:1100px) and (orientation:portrait){ .neb{background-image:url("../img/hero-nebula-tall.webp?v=e1a1ce85dd")} }
@keyframes nebIn{from{opacity:0}to{opacity:1}}
@keyframes nebDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(1.6%,-1.4%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){ .neb{animation:none} }

/* hero intro (Mit, 26.10): larger on desktop, "engineering" in the serif italic — as in Mit's reference screenshot */
.intro em{font-style:italic;font-size:1.13em;line-height:1;letter-spacing:0}
@media (min-width:1101px){
  .hero-intro{top:clamp(118px,15.5vh,170px);max-width:none;gap:clamp(14px,1.2vw,22px)}
  .intro{font-size:clamp(24px,.9vw + 15px,38px);line-height:1.32;letter-spacing:-.012em;max-width:19.5em}
  .based{font-size:clamp(15px,.45vw + 10.5px,21px)}
}

/* menu: frosted glass — the section behind stays faintly visible */
.menu-bg{background:
  radial-gradient(70% 60% at 92% 0%,rgba(var(--sage-rgb),.16),transparent 66%),
  radial-gradient(55% 55% at 0% 100%,rgba(var(--sage-rgb),.08),transparent 70%),
  rgba(8,11,10,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .menu-bg{background-color:rgba(8,11,10,.93)} }

/* small Sage accents */
.menu-meta .dot{background:var(--sage);box-shadow:0 0 0 4px rgba(var(--sage-rgb),.18)}
.menu-links a::after{background:var(--sage)}
.nav-line i{background:linear-gradient(90deg,rgba(var(--sage-rgb),.2),var(--sage))}
.c1 .blist li::before,.c2 .blist li::before{background:var(--sage)}
.fld input:focus,.fld textarea:focus{border-color:var(--sage);box-shadow:0 0 0 4px rgba(var(--sage-rgb),.16)}

/* "Talk to us" badge: less glass, readable (Mit, 26.10) — dark frosted disc, no lens bending, brighter lettering */
.tk-glass,.tk.lens .tk-glass{background:radial-gradient(120% 120% at 30% 18%,rgba(255,255,255,.06),rgba(255,255,255,0) 55%),rgba(8,10,9,.72);
  -webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 24px 60px -18px rgba(0,0,0,.7)}
.tk-glass::before,.tk-glass::after{opacity:.35}
.tk-rim{opacity:.6}
.tk-ring text{fill:#F1F4F2;font-weight:600;stroke:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .tk-glass,.tk.lens .tk-glass{background-color:rgba(8,10,9,.9)} }

/* ═════════ LAYOUT SYSTEM v1 (26.10.2026) — one content edge, one card margin, one column line ═════════
   --gx  content edge from the screen side (logo, hero text, section text, card content all start here)
   --cm  side margin of the rounded section cards; card padding = --gx - --cm, so card content sits on --gx
   --col gap between the two columns of a split section; the right column starts on the same line everywhere */
:root{--cm:16px;--gx:max(48px,3.2vw,calc((100vw - 1800px) / 2));--col:clamp(48px,5vw,104px)}
@media (max-width:1100px){ :root{--cm:12px;--gx:40px;--col:40px} }
@media (max-width:760px){ :root{--cm:6px;--gx:22px;--col:24px} }
@media (max-width:400px){ :root{--cm:4px;--gx:18px} }

.nav{padding-left:var(--gx);padding-right:var(--gx)}
@media (min-width:1101px),(max-width:1100px) and (orientation:landscape) and (min-height:521px){
  .hero-intro{left:var(--gx)}
  .hero-h1{left:calc(var(--gx) - 8px);right:var(--gx)}
}
.clients-lbl{padding-left:var(--gx);padding-right:var(--gx)}
.what,.cta,.what:is(*),.cta:is(*){margin-left:var(--cm);margin-right:var(--cm);padding-left:calc(var(--gx) - var(--cm));padding-right:calc(var(--gx) - var(--cm))}
.hands,.process,.foot{padding-left:var(--gx);padding-right:var(--gx)}
.vwrap{width:calc(100% - 2 * var(--cm))}

/* split sections share one column line (desktop) */
@media (min-width:1101px){
  .what-head,.panel,.cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col)}
  .what-head{align-items:end}
  .what-head .lead{max-width:34em;margin-bottom:.35em}
  .pimg{height:clamp(420px,62vh,660px)}
  .ptxt{max-width:36em}
}

/* ═════════ HERO + MENU LAYOUT FIX (26.10.2026) ═════════ */
/* scroll cue ends on the content edge, like the logo, menu button and badge */
.scroll-cue{right:var(--gx)}
/* "Efficiency": the ink of the E stem starts exactly on --gx (side bearing ≈ .019em) */
.w1{margin-left:-.019em}
@media (min-width:1101px),(max-width:1100px) and (orientation:landscape) and (min-height:521px){
  .w1{margin-left:calc(8px - .019em)} /* h1 box sits at --gx - 8px; replace the fixed 8px with the real bearing */
}
@media (min-width:1101px){
  /* tall desktop screens: the hero fills the first view (cap 1100 → 1440) */
.hero{height:clamp(660px,100vh,1440px);height:clamp(660px,100svh,1440px)}
  /* above 1730px wide the headline kept growing slower than the content box; keep the 18.5vw ratio up to the 1800px box */
.w1{font-size:clamp(56px,18.5vw,360px)}
  .w2{font-size:clamp(40px,6.4vw,126px);margin-left:min(23vw,440px)}
}
/* portrait tablets: menu links stack from the top with one even gap and one type size (no 145px gaps, no 470px hole) */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .menu-links{justify-content:flex-start;max-height:none;gap:clamp(20px,3svh,40px)}
  .ml-t{font-size:clamp(40px,min(11vw,7.4svh),96px)}
}

/* ═════════ WHAT WE DO + VIDEO: spacing fix v1 (26.10.2026) ═════════ */
/* desktop: lead and panel body share one measure, so both right edges meet (55–68 characters a line) */
@media (min-width:1101px){
  .what-head .lead,.pbody{max-width:33em}
  .ptxt{max-width:none}
}
/* portrait iPad (761–900): two 350px columns gave 35–38 characters a line; stack image over text like iPad mini */
@media (min-width:761px) and (max-width:900px) and (orientation:portrait){
  .panel{grid-template-columns:minmax(0,1fr);gap:32px}
  .pimg{aspect-ratio:4 / 3}
  .what-head .lead,.pbody{max-width:34em}
}
/* large phones / iPad mini (561–760): four tabs fit in one row, saves one 58px tab row */
@media (min-width:561px) and (max-width:760px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* phones: a 5:4 image lets tabs + image + text of a panel fit one screen on 393/430px phones */
@media (max-width:560px){
  .pimg{aspect-ratio:5 / 4}
}
/* phone landscape: the image was taller than the screen (457px on 393px); keep the panel inside the view */
@media (max-height:520px) and (orientation:landscape){
  .what{padding-top:64px;padding-bottom:72px}
  .pimg{aspect-ratio:auto;height:calc(100svh - var(--nav-h) - 32px)}
  .ptitle{font-size:clamp(30px,4.4vw,40px)}
}

/* video: the sticky nav covered the top of the frame (12–36px); centre the frame in the space below the nav */
.vpin{padding-top:var(--nav-h)}
@media (min-width:1101px),(max-width:1100px) and (orientation:landscape) and (min-height:521px){
  .vwrap{height:min(calc((100vw - 2 * var(--cm)) * 9 / 16),calc(100vh - var(--nav-h) - 48px));height:min(calc((100vw - 2 * var(--cm)) * 9 / 16),calc(100svh - var(--nav-h) - 48px))}
}
@media (max-height:520px) and (orientation:landscape){
  .vwrap{height:calc(100vh - var(--nav-h) - 24px);height:calc(100svh - var(--nav-h) - 24px)}
}
/* video: end corners match the section cards (40/36/28px) instead of 10px; the scroll animation is unchanged */
.vwrap{--vr:40px;border-radius:calc(var(--vr) + 42px * (1 - var(--p,1)))}
@media (max-width:1100px){ .vwrap{--vr:36px} }
@media (max-width:760px){ .vwrap{--vr:28px} }
/* video headline starts on the content edge --gx, like the section text above it */
.vt{left:calc(var(--gx) - var(--cm));right:max(clamp(22px,22%,340px),calc(var(--gx) - var(--cm)))}
@media (max-width:1100px) and (orientation:portrait){ .vt{right:max(clamp(22px,12%,120px),calc(var(--gx) - var(--cm)))} }
@media (max-width:760px),(max-height:520px) and (orientation:landscape){ .vt{right:calc(var(--gx) - var(--cm))} }

/* ═════════ PROCESS CARDS on LAYOUT SYSTEM v1 (26.10.2026) ═════════ */
/* cards are section cards: outer edge on --cm, content on --gx (like .what and .cta) */
.process{padding-left:var(--cm);padding-right:var(--cm)}
.card{padding:28px calc(var(--gx) - var(--cm)) 44px;min-height:0}
/* peek strip = top padding + "(Step N)" label + same space below, so the label shows whole when stacked */
.stack{--peek:76px}
/* desktop: the icon starts on the shared right-column line (--col), list follows */
.card-grid{grid-template-columns:calc((100% + var(--col)) / 2 - 56px) auto minmax(0,1fr)}
@media (max-width:1100px){
  .card{padding:24px calc(var(--gx) - var(--cm)) 36px}
  .stack{--peek:68px}
  /* two equal columns on the shared --col line, as in the other split sections */
.card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col)}
}
@media (max-width:760px){
  .card{padding:18px calc(var(--gx) - var(--cm)) 24px}
  .stack{--peek:56px}
  .card-grid{grid-template-columns:minmax(0,1fr) auto}
}
/* large phones / small portrait tablets: body and list side by side, no 85-character body lines */
@media (min-width:561px) and (max-width:760px){
  .card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"step ico" "title ico" "body list"}
  .ico{width:clamp(72px,12vw,96px);justify-self:end}
  .c-list{margin-top:0;padding-top:0;border-top:0}
}

/* ═════════ CONTACT + FOOTER LAYOUT v1 (26.10.2026) — contact rows, success card ═════════ */
@media (min-width:1101px){
  /* headline row on top; then picture | form on one shared top and bottom line (was: picture hung 320px below the form) */
.cta-grid{grid-template-areas:"copy ." "books form";grid-template-rows:auto auto;row-gap:clamp(40px,3.6vw,64px)}
  /* picture takes the form height and keeps a 5:4 frame */
.books{margin-top:0;align-self:stretch;justify-self:start;width:auto;max-width:100%;height:auto;min-height:420px;aspect-ratio:5 / 4}
  .books .pic{background-position:center 60%} /* keep the whole book stack in the frame */
}
/* success card: same gap below the lead and same inner edge as the form it replaces (was 0px gap) */
@media (max-width:1100px){ .done{margin-top:44px;padding:40px 36px} }
@media (max-width:760px){ .done{margin-top:32px;padding:32px 20px} }
@media (max-width:400px){ .done{padding:28px 16px} }

/* books picture (desktop): the frame stays on the form's top and bottom line; only the image inside drifts on scroll */
@media (min-width:1101px){
  .books{transform:none}
  .books .pic{transform:translateY(var(--py,0px)) scale(1.16);will-change:transform}
}

/* video shade: neutral black (no colour tint), so the video keeps its exact Sage #8FB3A3 */
.vshade{background:linear-gradient(to top,rgba(10,12,11,.78) 0%,rgba(10,12,11,.46) 38%,rgba(10,12,11,.12) 72%,rgba(10,12,11,0) 100%)}

/* ═════════ LANGUAGE SWITCH (DE / EN) — next to the logo; current language bright, the other muted ═════════ */
.lang-sw{display:flex;align-items:center;flex:none;margin-left:clamp(14px,2vw,28px)}
.lang-sw a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 6px;justify-content:center;font-size:14px;font-weight:600;letter-spacing:.1em;color:#8A9590;text-decoration:none;transition:color .3s ease}
.lang-sw a+a::before{content:"";width:1px;height:12px;background:rgba(241,244,242,.24);margin-right:12px;margin-left:-6px}
.lang-sw a[aria-current="page"]{color:#F1F4F2}
@media (hover:hover){ .lang-sw a:not([aria-current]):hover{color:#FFFFFF} }
.lang-sw a:focus-visible{outline:1px solid #F1F4F2;outline-offset:2px;border-radius:6px}
.js:not(.go) .lang-sw{opacity:0}
.lang-sw{transition:opacity .8s ease .2s}
@media (max-width:560px){ .lang-sw{margin-left:6px} .lang-sw a{padding:0 4px} .lang-sw a+a::before{margin-right:8px;margin-left:-4px} }

/* ═════════ CONTACT HEADER = WHAT-WE-DO HEADER (26.10.2026) — label + heading left, lead on the shared right column ═════════ */
.cta-lead{grid-area:lead}
@media (min-width:1101px){
  .cta-grid{grid-template-areas:"copy lead" "books form";align-items:start}
  .cta-copy .mega2{margin-bottom:0}
  .cta-lead{align-self:end;max-width:33em;margin-bottom:.35em}
}
@media (max-width:1100px){
  .cta-grid{grid-template-areas:"copy" "lead" "form" "books"}
}
@media (min-width:761px) and (max-width:1100px){
  .cta-grid{grid-template-areas:"copy copy" "lead lead" "form books"}
}
/* footer legal links may wrap (long German words on 320 px phones) */
.frow .legal{display:inline-flex;flex-wrap:wrap;column-gap:24px;row-gap:0}

/* menu words: the rise mask must not cut descenders (g, j, p, q, y). The old padding was in em of the small link
   font (≈2 px), not of the 40–118 px word; a clip in % of the word box scales with every menu size. */
.ml-m{overflow:visible;clip-path:inset(-12% -6% -32% -6%)}
/* word masks (video headline + split headings): room for italic overhangs — the "f" tail and the "y" tail of
   Instrument Serif italic reach ~.3em below the line and ~.12em to the side; the negative margin keeps the layout */
.vt .vw{padding:.14em .16em .34em;margin:-.14em -.16em -.34em}
.rw{padding:.12em .1em .3em;margin:-.12em -.1em -.3em}

/* ═════════ QA FIXES (26.10.2026) ═════════ */
/* footer: the "•" sits exactly between the two legal links (the gap came on top of the dot's own margin) */
@media (min-width:561px){ .frow .legal{column-gap:0} }
/* DE / EN switch: the divider sits on the border between two equal 44 px boxes, so both gaps are equal at every size */
.lang-sw a{position:relative;padding:0}
.lang-sw a+a::before{position:absolute;left:0;top:50%;margin:0;transform:translateY(-50%)}
@media (max-width:560px){ .lang-sw a{padding:0} .lang-sw a+a::before{margin:0} }
/* menu on tall portrait tablets (iPad Pro): the link group sits in the middle of the free height, not only the top half */
@media (min-width:900px) and (max-width:1100px) and (orientation:portrait){ .menu-links{justify-content:center} }
/* form error state: the first wrong field gets the focus — it must still look wrong (red), not valid (green) */
.fld input[aria-invalid="true"]:focus,.fld textarea[aria-invalid="true"]:focus{border-color:#ff9a9a;box-shadow:0 0 0 4px rgba(255,154,154,.16)}
.fl input[aria-invalid="true"]:focus + label,.fl textarea[aria-invalid="true"]:focus + label{color:#ffb4b4}
/* footer: one separator sign on every page and every size: "·" with equal space */
.legal a + a::before{content:"·";display:inline;margin:0 12px;color:#939D98}
.frow .legal,.legal{gap:0;column-gap:0}
/* success message: the form keeps its place (invisible) and the message lies on top in the same cell,
   so the books picture and the card keep their size when the form is sent */
#enquiry[hidden]{display:flex!important;visibility:hidden}
.done{grid-area:form;align-self:stretch;justify-content:center}
/* contact: picture left, form right on tablets too (as on desktop) */
@media (min-width:761px) and (max-width:1100px){
  .cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"copy copy" "lead lead" "books form"}
}
/* menu: the active dot stays clear of the screen edge on small phones */
@media (max-width:400px){ .menu-links a::after{left:-9px} }

/* ═════════ SMOOTHNESS + HEADLINE FIT (26.10.2026) ═════════ */
/* the page never moves sideways: no horizontal scroll and no sideways rubber-band bounce (Safari trackpad) */
html,body{overflow-x:clip;overscroll-behavior-x:none}
/* desktop: section headlines keep today's size but never get larger than their column allows, so the
   "What we do" headline is always 2 lines and the contact headline 1 line, in German and English.
   Factors = 100 / (longest line in em + 3 %), measured in Instrument Serif. Phones/tablets unchanged. */
html[lang="de"]{--fit-h2:15cqi;--fit-m2:15.1cqi}
html[lang="en"]{--fit-h2:12.5cqi;--fit-m2:16.9cqi}
@media (min-width:1101px){
  .what-head>div,.cta-copy{container-type:inline-size}
  .what-head .h2{font-size:min(clamp(44px,6vw,96px),var(--fit-h2))}
  .cta-copy .mega2{font-size:min(clamp(56px,8vw,140px),var(--fit-m2))}
}

/* ═════════ TABLET QA (27.10.2026) ═════════ */
/* contact: picture and form are two equal panels on desktop and landscape iPads — same height and width
   in every engine (Safari let the fixed shape win over the stretch, so the picture ended 72 px above the form) */
@media (min-width:1101px){
  .books{justify-self:stretch;width:auto;max-width:none;aspect-ratio:auto;min-height:0;height:auto;align-self:stretch}
}
/* iPad mini portrait (744 px): tablet layout and tablet margins, not the phone layout */
@media (min-width:700px) and (max-width:760px){
  :root{--gx:40px;--cm:12px;--col:40px}
  .books{display:block;margin-top:32px;width:auto;max-width:none;aspect-ratio:auto;height:auto;min-height:0;align-self:stretch}   /* same top margin as the form card */
.cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"copy copy" "lead lead" "books form";column-gap:var(--col)}
}
/* short texts: no single word alone on the last line */
.side-h{text-wrap:balance}
.blist li,.cbody,.pbody,.lead,.fnote,.fillp{text-wrap:pretty}
/* the nav background arrives quickly after a fast jump down the page */
.nav{transition:background .25s ease,box-shadow .25s ease}
/* tab change: the new picture opens at once and lands softly (the old ease started so slowly that the card looked empty for ~200 ms) */
.pimg{animation-timing-function:cubic-bezier(.2,.75,.25,1);animation-duration:.9s}
/* footer logo: fully invisible until its reveal starts (thin edges of the letters showed one step early) */
.js .rvc:not(.in) .bigmark{visibility:hidden}
/* success message: no single word alone on the last line */
.done p{text-wrap:pretty}