/* ==========================================================================
   ZER0 STUDIOS — V4
   A specimen sheet. The work is mounted in hairline frames with registration
   ticks and labelled with real data; the viewport is framed like a slide.
   Brand type only: Plus Jakarta Sans and Inter. The lab signal comes from
   tabular figures, tracked caps and hairlines, not from a monospace face.
   ========================================================================== */

:root{
  --bg:#F6F6F4;
  --fg:#111111;
  --line:rgba(17,17,17,.12);
  --line-2:rgba(17,17,17,.26);
  --dim:rgba(17,17,17,.5);
  --dim-2:rgba(17,17,17,.36);

  --display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gut:clamp(24px,5vw,96px);
  --max:1600px;
  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --nav-h:clamp(64px,6vw,84px);

}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:clamp(14px,.35vw + 13px,16px);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- the data layer: Inter, tracked caps, tabular figures ---------- */
.lbl{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.5}
.dim{color:var(--dim-2)}

/* registration marks, fixed in the margin */
.marks{position:fixed;inset:0;z-index:90;pointer-events:none}
.marks i{position:absolute;width:14px;height:14px;border-color:var(--line-2);border-style:solid;border-width:0}
.marks i:nth-child(1){top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.marks i:nth-child(2){top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.marks i:nth-child(3){bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.marks i:nth-child(4){bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

/* ---------- buttons & links ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border:1px solid var(--fg);border-radius:100px;
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);transition:color .45s var(--e);
}
.btn::before{content:'';position:absolute;inset:0;background:var(--fg);transform:translate3d(0,101%,0);transition:transform .5s var(--e)}
.btn > *{position:relative;z-index:1}
.btn i{font-style:normal;transition:transform .45s var(--e)}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:translate3d(0,0,0)}
.btn:hover i{transform:translateX(4px)}
.btn--lg{padding:15px 26px;font-size:12px}

.lnk{position:relative;padding-bottom:4px;color:var(--fg)}
.lnk::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:100% 50%;transition:transform .5s var(--e)}
.lnk:hover::after{transform:scaleX(0)}

/* ==========================================================================
   NAV — a menu bar
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding-inline:var(--gut);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__logo img{width:clamp(66px,5.2vw,80px)}
.nav__links{display:flex;gap:clamp(22px,2.6vw,40px);justify-self:center}
.nav__links a{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);position:relative;padding-block:6px;transition:color .3s ease}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav__end{display:flex;align-items:center;gap:10px;justify-self:end}

.burger{display:none;width:44px;height:44px;position:relative;flex:none}
.burger i{position:absolute;left:12px;width:20px;height:1px;background:var(--fg);transition:transform .45s var(--e)}
.burger i:nth-child(1){top:20px}
.burger i:nth-child(2){top:25px}
body.menu-open .burger i:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:95;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--gut) clamp(28px,5vw,56px);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-io);pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__list{display:grid;gap:4px;margin-top:auto}
.menu__list a{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:var(--display);font-weight:500;font-size:clamp(2rem,9vw,4.4rem);letter-spacing:-.035em;line-height:1.1;padding-block:clamp(8px,1.6vh,16px);border-bottom:1px solid var(--line);opacity:0;transform:translate3d(0,24px,0);color:#111;transition:color .4s ease,padding-left .55s var(--e)}
.menu__list a::after{content:'→';font-size:.5em;color:#111;opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .55s var(--e)}
@media (hover:hover){
  .menu__list:hover a{color:rgba(17,17,17,.3)}
  .menu__list a:hover{color:#111;padding-left:.25em}
  .menu__list a:hover::after{opacity:1;transform:none}
}
body.menu-open .menu__list a{animation:menuIn .8s var(--e) forwards}
.menu__list a:nth-child(1){animation-delay:.14s}
.menu__list a:nth-child(2){animation-delay:.2s}
.menu__list a:nth-child(3){animation-delay:.26s}
.menu__list a:nth-child(4){animation-delay:.32s}
@keyframes menuIn{to{opacity:1;transform:none}}
.menu__foot{margin-top:auto;padding-top:clamp(24px,4vw,48px);display:flex;justify-content:space-between;gap:24px;color:var(--dim)}

/* ==========================================================================
   HERO — the plotting grid, and an instrument that follows the pointer
   ========================================================================== */
.hero{position:relative;min-height:84svh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden}
/* the plotting grid is drawn on canvas: crisp dots that brighten and swell under
   the pointer and carry a slow ambient wave — never a blur */
.hero__grid{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}

.hero__c{position:relative;z-index:2;display:grid;gap:clamp(28px,4.5vh,56px);padding-block:clamp(60px,10vh,140px)}
/* the clock sits level with the cap-top of the headline's first line, at the right */
.hero__head{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(24px,4vw,64px)}
.hero__clock{flex:none;white-space:nowrap;margin-top:clamp(6px,.95vw,14px)}
.hero__top{display:flex;justify-content:flex-end;gap:24px;flex-wrap:wrap}
#clock,.clock{font-variant-numeric:tabular-nums}
.hero__t{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6.4vw,6.8rem);line-height:1.04;letter-spacing:-.035em;max-width:17ch}
/* the second line sits dim and comes to full strength under the pointer */
.hero__t2{display:inline-block;color:var(--dim-2);transition:color .6s var(--e)}
.hero__t:hover .hero__t2{color:var(--fg)}
.hero__arrow{display:inline-block;margin-inline:.04em}
/* a small globe turns beside "Worldwide" — drawn on canvas in the text colour */
.hero__orb{display:inline-block;width:.78em;height:.78em;margin-left:.1em;vertical-align:-.06em;position:relative}
.hero__orb canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.hero__p{max-width:52ch;font-size:clamp(15px,1.1vw,18px);line-height:1.6;color:var(--dim)}
.hero__row{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);flex-wrap:wrap}

/* data lists — the specimen-label pattern; the hairline draws in on reveal */
.data{display:grid;gap:4px;max-width:72ch}
.data > div{position:relative;display:grid;grid-template-columns:minmax(11ch,auto) 1fr;gap:clamp(14px,2vw,32px);padding-block:10px}
.data > div::before{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e)}
.data > div.is-in::before{transform:scaleX(1)}
.data dt{color:var(--dim-2)}
.data a{position:relative}
.data a::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--line-2);transition:background .3s ease}
.data a:hover::after{background:var(--fg)}

/* ==========================================================================
   section headers — the rule draws in from the left
   ========================================================================== */
.sec{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:clamp(16px,2vw,24px);margin-bottom:clamp(40px,5vw,72px)}
.sec::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--e) .1s}
.sec.is-in::after{transform:scaleX(1)}

/* ==========================================================================
   WORK — specimens
   ========================================================================== */
.spec{padding-block:clamp(90px,12vw,180px)}
.hero + .spec{padding-top:clamp(16px,3vw,40px)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,7vw,110px) clamp(32px,4vw,72px)}
.card{display:grid;gap:clamp(16px,1.8vw,24px);min-width:0}
.card__m{position:relative;display:block;aspect-ratio:16/10;overflow:visible;background:#E9E9E6;border:1px solid var(--line-2);cursor:crosshair;transition:border-color .5s ease}
.card:hover .card__m{border-color:var(--fg)}
.card__poster,.card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__poster{transform:scale(1);transition:transform 1.3s var(--e)}
.card:hover .card__poster{transform:scale(1.025)}
.card__video{opacity:0;transition:opacity .9s ease}
.card__m.has-video .card__video{opacity:1}
/* ticks sit outside the corners and step outward on hover */
.tick{position:absolute;width:10px;height:10px;border-color:var(--fg);border-style:solid;border-width:0;opacity:.5;transition:opacity .4s ease,transform .5s var(--e)}
.tick--tl{top:-11px;left:-11px;border-top-width:1px;border-left-width:1px}
.tick--tr{top:-11px;right:-11px;border-top-width:1px;border-right-width:1px}
.tick--bl{bottom:-11px;left:-11px;border-bottom-width:1px;border-left-width:1px}
.tick--br{bottom:-11px;right:-11px;border-bottom-width:1px;border-right-width:1px}
.card:hover .tick{opacity:1}
.card:hover .tick--tl{transform:translate(-3px,-3px)}
.card:hover .tick--tr{transform:translate(3px,-3px)}
.card:hover .tick--bl{transform:translate(-3px,3px)}
.card:hover .tick--br{transform:translate(3px,3px)}
/* the call to view sits on the mount and surfaces on hover */
.card__go{position:absolute;right:14px;bottom:12px;z-index:2;padding:6px 10px;background:var(--bg);color:var(--fg);opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s ease,transform .5s var(--e)}
.card:hover .card__go{opacity:1;transform:none}

.card__l{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line);transition:border-color .5s ease}
.card:hover .card__l{border-color:var(--line-2)}
.card__n{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.01em;line-height:1.2}
.card__meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ==========================================================================
   SERVICES — protocols
   ========================================================================== */
.meth{padding-block:0 clamp(90px,12vw,180px)}
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:baseline;gap:clamp(16px,3vw,56px);padding-block:clamp(22px,2.8vw,36px);border-bottom:1px solid var(--line);cursor:default}
.row__t{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,2rem);letter-spacing:-.025em;line-height:1.1;transition:transform .55s var(--e)}
.row__s{color:var(--dim);text-transform:none;letter-spacing:.02em;font-size:12px;transition:color .4s ease}
.row__a{color:var(--dim-2);transition:transform .5s var(--e),color .4s ease}
.row:hover .row__t{transform:translateX(clamp(6px,.8vw,14px))}
.row:hover .row__s{color:var(--fg)}
.row:hover .row__a{transform:translateX(6px);color:var(--fg)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.enq{padding-block:0 clamp(90px,12vw,180px)}
.enq .shell{display:grid;gap:clamp(32px,4vw,56px)}
.enq__t{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,4.2vw,4.4rem);letter-spacing:-.03em;line-height:1.02;max-width:16ch}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab{padding-top:calc(var(--nav-h) + clamp(48px,8vh,110px));padding-bottom:clamp(80px,11vw,170px)}
.ab .shell{display:grid;gap:clamp(28px,4vh,56px)}
.ab__t{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6.2vw,6.4rem);line-height:.98;letter-spacing:-.035em;max-width:12ch}
.ab__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start;margin-top:clamp(12px,2vw,24px)}
.ab__c{display:grid;gap:clamp(18px,2vw,28px);max-width:52ch}
.ab__c p{color:var(--dim);font-size:clamp(15px,1.05vw,17px);line-height:1.7}
.ab__f{display:grid;gap:14px;justify-self:end;align-self:start;width:100%;max-width:min(100%,40vh,26vw)}
/* on wide screens the globe sits beside the headline, level with its top */
@media (min-width:1001px){
  .ab .shell{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(32px,5vw,96px)}
  .ab .hero__top{grid-column:1 / -1}
  .ab__t{grid-column:1}
  .ab__g{display:contents}
  .ab__c{grid-column:1;grid-row:3}
  .ab__f{grid-column:2;grid-row:2 / 4;margin-top:clamp(4px,.6vw,10px)}
}
/* the globe: ink dots on a hairline sphere, routes plotted out of London; drag to turn */
.ab__globe{position:relative;width:100%;min-width:0;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ab__globe::before{content:"";display:block;padding-top:100%}
.ab__globe.is-drag{cursor:grabbing}
.ab__globe canvas{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;max-width:100%}
.ab__cap{display:flex;justify-content:space-between;gap:24px;padding-top:12px;border-top:1px solid var(--line)}
/* disciplines — a row per discipline: title, the offerings, an arrow */
.disc{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) auto;align-items:baseline;gap:clamp(16px,3vw,56px);padding-block:clamp(22px,2.8vw,36px);border-bottom:1px solid var(--line);cursor:default}
.disc__t{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,2rem);letter-spacing:-.025em;line-height:1.1;transition:transform .55s var(--e)}
.disc__s{color:var(--dim);font-size:clamp(14px,1vw,16px);line-height:1.6;max-width:52ch;transition:color .4s ease}
.disc__a{color:var(--dim-2);transition:transform .5s var(--e),color .4s ease}
.disc:hover .disc__t{transform:translateX(clamp(6px,.8vw,14px))}
.disc:hover .disc__s{color:var(--fg)}
.disc:hover .disc__a{transform:translateX(6px);color:var(--fg)}

/* in their words — a row of quotes, stepped with the arrows; swipe on touch */
.voices{padding-block:0 clamp(90px,12vw,180px)}
.car__nav{display:flex;align-items:center;gap:14px}
.car__btn{width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--fg);transition:border-color .4s ease,opacity .4s ease,transform .5s var(--e)}
.car__btn:hover{border-color:var(--fg)}
.car__btn:active{transform:scale(.94)}
.car__btn[disabled]{opacity:.3;pointer-events:none}
.car{display:flex;gap:clamp(28px,4vw,64px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;padding-bottom:4px}
.car::-webkit-scrollbar{display:none}
.q{display:grid;gap:clamp(14px,1.8vw,22px);align-content:start;width:clamp(280px,34vw,480px);flex:none;scroll-snap-align:start;padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line)}
.q p{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.35;letter-spacing:-.015em;text-wrap:balance}
.q footer{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{border-top:1px solid var(--line);padding-block:clamp(18px,2vw,28px) clamp(40px,4vw,56px)}
.foot__g{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot__g a:hover{color:var(--fg)}

/* ==========================================================================
   MOTION — reveals and the split-word rise
   ========================================================================== */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .word > i{display:inline-block;font-style:inherit;transform:translate3d(0,108%,0);transition:transform 1.1s var(--e)}
.js .is-in .word > i{transform:translate3d(0,0,0)}
.js .reveal{opacity:0;transform:translate3d(0,12px,0);transition:opacity 1s ease,transform 1.1s var(--e)}
.js .reveal.is-in{opacity:1;transform:none}
/* cards stagger within their row */
.js .cards .card:nth-child(2n){transition-delay:.12s}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .ab__g{grid-template-columns:1fr}
  .ab__f{justify-self:center;max-width:min(44vw,24vh)}
}
@media (max-width:860px){
  .nav{grid-template-columns:auto 1fr}
  .nav__links{display:none}
  .nav__end .btn{display:none}
  .burger{display:block}
}
@media (max-width:720px){
  .hero__head{flex-direction:column-reverse;align-items:flex-start;gap:18px}
  /* sized so "London → Worldwide" holds one line on a phone */
  .hero__t{font-size:clamp(1.4rem,7.8vw,2.4rem)}
  .cards{grid-template-columns:1fr}
  .row,.disc{grid-template-columns:1fr auto}
  .row__s,.disc__s{grid-column:1 / -1}
  .q{width:min(82vw,420px)}
  .hero__top{justify-content:space-between}
  .marks{display:none}
  .foot__g{flex-direction:column;gap:10px}
}
@media (hover:none),(pointer:coarse){
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal,.js .word > i{opacity:1!important;transform:none!important}
  .data > div::before,.sec::after{transform:none!important}
  .car{scroll-behavior:auto}
}

/* ==========================================================================
   COMING SOON — the hero is the whole page, on the ink ground
   ========================================================================== */
.soon{overflow:hidden}
.ink{--bg:#111111;--fg:#F6F6F4;--line:rgba(246,246,244,.14);--line-2:rgba(246,246,244,.3);--dim:rgba(246,246,244,.55);--dim-2:rgba(246,246,244,.4)}
.ink ::selection{background:var(--fg);color:var(--bg)}
.ink .nav{background:color-mix(in srgb,var(--bg) 86%,transparent)}
/* the holding page has no rules: the nav and footer sit on the ground unframed */
.nav--soon{border-bottom:0}
.ink .btn{border-color:var(--fg);color:var(--fg)}
.ink .btn:hover{color:var(--bg)}
.nav--soon{grid-template-columns:auto 1fr auto}
.nav__end--soon{gap:18px}
/* the logo follows the ground */
.logo-on-paper{display:none}
.soon:not(.ink) .logo-on-paper{display:block}
.soon:not(.ink) .logo-on-ink{display:none}
/* light / dark switch: a hairline pill, the knob sits right for ink */
.switch{position:relative;width:38px;height:20px;border:1px solid var(--line-2);border-radius:20px;flex:none;transition:border-color .4s ease}
.switch i{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--fg);transition:transform .45s var(--e)}
.ink .switch i{transform:translateX(18px)}
.switch:hover{border-color:var(--fg)}
body.soon,.soon .nav,.soon .btn,.soon .switch{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.nav__soon{justify-self:center;white-space:nowrap}
.nav__clock{justify-self:end;white-space:nowrap}
.hero--soon{min-height:100svh;height:100svh;flex-direction:column;justify-content:center;padding-bottom:0}
.hero--soon .hero__g{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,5vw,96px);flex:1;padding-block:clamp(32px,6vh,96px)}
.hero--soon .hero__c{padding-block:0;flex:none;gap:clamp(22px,3.5vh,40px)}
/* the clock sits just above the headline */
.hero--soon .hero__clock{margin:0 0 calc(-1 * clamp(10px,2vh,24px))}
.hero--soon .hero__t{max-width:none;font-size:clamp(2.2rem,4.7vw,5.2rem)}
/* desktop: the big globe beside the headline, no orb in the line */
.hero--soon .hero__orb{display:none}
.hero__side{justify-self:end;width:100%;max-width:min(100%,56vh,34vw)}
@media (max-width:720px){.hero--soon .hero__t{font-size:clamp(1.4rem,7.8vw,2.4rem)}}
.hero__foot{position:relative;z-index:2;display:grid;gap:14px;padding-block:clamp(16px,2.4vh,28px)}
.hero__disc{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--dim);max-width:52ch;margin-top:clamp(8px,2vh,20px)}
.hero__disc i{font-style:normal;color:var(--dim-2)}
/* each service comes to full strength under the pointer */
.hero__disc span{cursor:default;transition:color .35s ease}
@media (hover:hover){.hero__disc span:hover{color:var(--fg)}}
.hero__foot2{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero__foot a:hover{color:var(--fg)}
/* phones: one screen, no scroll — the column shares its spare height evenly
   between the text block and the globe, and everything is sized in svh */
@media (max-width:860px){
  .hero--soon{height:100svh;min-height:0}
  .hero--soon .hero__g{display:flex;flex-direction:column;justify-content:center;gap:0;padding-block:clamp(10px,2svh,24px);flex:1;min-height:0}
  .hero--soon .hero__c{gap:clamp(14px,2.4svh,26px)}
  /* phones: no big globe; the small orb comes back beside "Worldwide" */
  .hero__side{display:none}
  .hero--soon .hero__orb{display:inline-block}
  .hero--soon .hero__p{font-size:clamp(14px,2svh,16px);line-height:1.55}
  .hero__disc{margin-top:clamp(4px,1svh,12px)}
  /* the call and the Instagram link share one line on a phone */
  .hero--soon .hero__row{flex-wrap:nowrap;gap:16px}
  .hero--soon .btn--lg{padding:13px 18px;font-size:11px;flex:none}
  .hero--soon .hero__row .lnk{white-space:nowrap}
  .lnk__pre{display:none}
  .nav__soon{display:none}
  .nav--soon{grid-template-columns:auto 1fr}
  .hero__foot{padding-block:clamp(10px,1.8svh,20px)}
  .hero__foot2{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:4px 16px}
}