/* ==========================================================================
   ADVISIBLE — warm luxury / editorial
   Palette + type tokens live in :root. Change them there, nowhere else.
   ========================================================================== */

:root{
  /* ---- LIGHT THEME · "Signal" ------------------------------------------
     Cool dashboard white + electric indigo, with a magenta/cyan/amber signal
     spectrum drawn from the ad-tech ecosystem (social, programmatic, search).
     --------------------------------------------------------------------- */
  --bone:#E8EBEC;          /* page background — mineral grey */
  --paper:#F1F3F3;         /* raised surface: cards, .paper sections */
  --sand:#E8ECF7;
  --deep:#0B0E1C;          /* raised bands: hero, footer, banners */
  --deep-2:#141834;
  --ink:#0B0E1C;           /* primary foreground */
  --ink-90:#161B33;
  --ink-2:#4A5068;         /* body copy */
  --grey:#767E99;
  --grey-2:#9AA1B8;
  --line:#C7CED1;
  --line-dk:rgba(244,246,251,.15);
  --hdr-bg:rgba(232,235,236,.84);
  --hdr-bg-dk:rgba(11,14,28,.74);
  --hero-f1:rgba(11,14,28,.58);
  --hero-f2:rgba(11,14,28,.14);
  --hero-f3:rgba(11,14,28,.95);
  --clay:#4A2BF0;          /* primary accent — programmatic / data */
  --clay-dk:#3A1FD0;
  --bronze:#7C6BFF;
  --champagne:#8E7BFF;
  /* canvas art channels (raw rgb triples) */
  --art-1:124,107,255;     /* indigo   */
  --art-2:255,46,126;      /* magenta  — social / influencer */
  --art-3:0,200,240;       /* cyan     — search / performance */

  /* brand marks — constant across themes */
  --on-deep:#EDF1F5;        /* foreground on dark bands — light in BOTH themes */
  --logo-orange:#FCA01C;
  --logo-orange-dk:#E5820F;
  --logo-cyan:#12A6C6;
  --logo-cyan-lt:#35C3DC;

  --ui:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --pad:clamp(20px,4.4vw,72px);
  --wrap:1560px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* The page background lived only on body. Anything that makes the body
   translucent — the navigation fade below does exactly that — exposes
   whatever is behind it. Painting the same colour on the root element means
   there is nothing behind it to expose, in either theme. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;
  background:var(--bone)}
html.lenis{height:auto}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--clay);color:var(--bone)}

h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.02}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------------- type scale ---------------- */
.d1{font-size:clamp(3.2rem,11.5vw,11rem);letter-spacing:-.05em;line-height:.88}
.d2{font-size:clamp(2.4rem,6.6vw,6rem);letter-spacing:-.045em;line-height:.96}
.d3{font-size:clamp(1.9rem,3.9vw,3.4rem);letter-spacing:-.038em;line-height:1.06}
.d4{font-size:clamp(1.35rem,2.1vw,1.95rem);letter-spacing:-.03em;line-height:1.18}
.body-lg{font-size:clamp(1.05rem,1.35vw,1.32rem);line-height:1.55;color:var(--ink-2)}
.body{font-size:1.02rem;line-height:1.68;color:var(--ink-2)}
.small{font-size:.9rem;line-height:1.6;color:var(--grey)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.tag{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);display:inline-flex;align-items:center;gap:12px;
}
.tag::before{content:"";width:26px;height:1px;background:var(--clay);flex-shrink:0}
.num{
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--clay);
  letter-spacing:0;
}

/* ---------------- layout ---------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding:clamp(84px,11vw,180px) 0;position:relative}
.sec-sm{padding:clamp(60px,7vw,110px) 0}
.dark{background:var(--deep);color:var(--on-deep)}



.paper{background:var(--paper)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-dk)}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}

/* ---------------- preloader ---------------- */
#pre{
  position:fixed;inset:0;z-index:9999;background:var(--deep);color:var(--on-deep);
  display:grid;place-items:center;
}
#pre .pre-in{text-align:center;overflow:hidden}
#pre .pre-mark{
  font-size:clamp(2rem,7vw,5rem);font-weight:500;letter-spacing:-.05em;
  display:block;transform:translateY(105%);animation:preUp 1s var(--ease) .15s forwards;
}
@keyframes preUp{to{transform:translateY(0)}}
#pre .pre-bar{
  width:min(240px,52vw);height:1px;background:rgba(255,255,255,.2);margin:26px auto 0;position:relative;
}
#pre .pre-bar i{
  position:absolute;inset:0 auto 0 0;width:0%;background:var(--clay);display:block;
  transition:width .2s linear;
}
#pre .pre-pct{
  margin-top:14px;font-size:.72rem;letter-spacing:.24em;color:var(--grey-2);
  font-variant-numeric:tabular-nums;
}
#pre.done{transform:translateY(-100%);transition:transform 1.05s var(--ease) .1s}
html.no-pre #pre{display:none}

/* ---------------- page transition curtain ---------------- */
/* ---------------- page transitions ----------------
   Native cross-document View Transitions: the browser crossfades the outgoing
   and incoming page itself. No overlay element, no click interception, no
   timer holding up the navigation. Browsers without support simply navigate,
   which is still instant. */
/* Transitions are suppressed until the first frame has been painted. Without
   this, anything the scripts correct on load — the header's dark treatment
   most visibly — animates from its wrong starting value instead of simply
   being right, which is what turned a one-frame discrepancy into a visible
   flicker on every page change. Removed by app.js after one rAF. */
html.no-tx *,html.no-tx *::before,html.no-tx *::after{
  /* transitions only. It also killed animation-duration, which collided with
     the page-fade below: the body was forced to its end state for two frames
     and then dropped back to the animation's real progress once the class
     came off — a pop, then a disappearance, then a fade. */
  transition:none!important;
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .7s var(--ease-io) both}
::view-transition-new(root){animation:vtIn .7s var(--ease-io) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}to{opacity:1}}

/* Fallback: when the browser skips its own cross-document transition, fade the
   arriving page in over the same 0.7s so the experience is identical. This is
   what makes local file:// previews and browsers without View Transitions feel
   the same as the live site. */
/* Fallback for engines without cross-document view transitions — iOS Safari,
   most importantly. Note what this actually does: a real view transition
   crossfades a snapshot of the OLD page into the new one, so something is on
   screen throughout. This fallback has no old snapshot; it simply fades the
   destination up from nothing. Measured on the iOS code path, the body sits
   at 2% opacity when the page becomes visible and takes ~530ms to reach full
   — half a second of watching the page materialise through itself. That is
   the glitch, and it is worse than no transition at all. */
html.vt-fb body{animation:vtFb .7s var(--ease-io) both}
@keyframes vtFb{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.vt-fb body{animation:none}}

/* On touch the fallback is removed outright: the page is simply there, which
   is both faster and honest. Desktop, where the real crossfade exists, is
   untouched. */
@media (hover:none),(pointer:coarse){
  html.vt-fb body{animation:none}
}

/* content already on screen at load: present immediately, no slide */
.fade.now,.sp.now,.clip.now{transition:none}

/* ---------------- custom cursor ---------------- */
#cur,#curD{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;border-radius:50%;
  will-change:transform;mix-blend-mode:difference;
}
#cur{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.85);margin:-18px 0 0 -18px;
  transition:width .34s var(--ease),height .34s var(--ease),margin .34s var(--ease),
             background .34s var(--ease),opacity .3s;
  display:grid;place-items:center;
}
#curD{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px;transition:opacity .3s,transform .3s}
#cur .cur-lbl{
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s;white-space:nowrap;
}
body.cur-lg #cur{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--clay);border-color:transparent}
body.cur-lg #cur .cur-lbl{opacity:1;transform:scale(1)}
body.cur-lg #curD{opacity:0}
body.cur-sm #cur{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(255,255,255,.16)}
body.cur-hide #cur,body.cur-hide #curD{opacity:0}
@media (hover:none),(pointer:coarse){#cur,#curD{display:none!important}}

/* verticals collapse to a single column on phones — see the mobile block */


/* ---------------- header ---------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding:26px var(--pad);display:flex;align-items:center;gap:28px;
  transition:transform .6s var(--ease),background .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.solid{
  background:var(--hdr-bg);backdrop-filter:saturate(180%) blur(16px);
  padding-top:16px;padding-bottom:16px;border-bottom-color:var(--line);
}
.hdr.hide{transform:translateY(-102%)}
.hdr.on-dark{color:var(--on-deep)}
.hdr.on-dark.solid{background:var(--hdr-bg-dk);border-bottom-color:var(--line-dk)}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;position:relative;z-index:2}
.brand-word{
  font-size:1.42rem;font-weight:600;letter-spacing:-.055em;line-height:1;
}
.brand-word i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.brand img{height:30px;width:auto}
.brand-dot{width:5px;height:5px;border-radius:50%;background:var(--clay);margin-bottom:9px}

.hdr-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hdr-nav a{
  padding:9px 16px;font-size:.86rem;letter-spacing:.02em;position:relative;
}
.hdr-nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.hdr-nav a:hover::after,.hdr-nav a.on::after{transform:scaleX(1)}
.hdr-cta{
  margin-left:14px;padding:11px 24px;border:1px solid currentColor;border-radius:100px;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;position:relative;overflow:hidden;
}
.hdr-cta span{position:relative;z-index:2;transition:color .45s var(--ease)}
.hdr-cta::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.hdr.on-dark .hdr-cta::before{background:var(--on-deep)}
.hdr-cta:hover::before{transform:translateY(0)}
.hdr-cta:hover span{color:var(--bone)}
.hdr.on-dark .hdr-cta:hover span{color:var(--ink)}

/* menu button */
.menu-btn{
  display:none;margin-left:auto;width:52px;height:52px;position:relative;z-index:2;
  border-radius:50%;border:1px solid currentColor;
  /* the header is a flex row: without this the circle is the item that gives
     way when the row runs out of width, and it collapses into a thin ellipse
     hanging off the right edge. It is hidden above 1024, so desktop is unaffected. */
  flex:0 0 52px;
}
.menu-btn i{
  position:absolute;left:16px;right:16px;height:1px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s;
}
.menu-btn i:nth-child(1){top:22px}
.menu-btn i:nth-child(2){bottom:22px}
body.menu-open .menu-btn i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .menu-btn i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* fullscreen menu */
#menu{
  position:fixed;inset:0;z-index:590;background:var(--deep);color:var(--on-deep);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .9s var(--ease),visibility 0s linear .9s;
  display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 60px;
  overflow-y:auto;
  /* Centring a scroll container's children pushes half of any overflow past
     the TOP edge, and scrollTop cannot go below zero, so that half is
     unreachable — on a phone "01 Home" sat ~100px above the viewport with the
     menu already scrolled to its top. "safe" falls back to flex-start the
     moment the content does not fit, and is ignored while it does, so the
     desktop menu stays centred exactly as before. The plain value above is
     kept first as the fallback for engines that don't parse this one. */
  justify-content:safe center;
}
body.menu-open #menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease),visibility 0s}
#menu .m-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;width:100%;max-width:var(--wrap);margin-inline:auto}
#menu .m-list li{overflow:hidden;border-bottom:1px solid var(--line-dk)}
#menu .m-list a{
  display:flex;align-items:baseline;gap:20px;padding:clamp(10px,1.5vw,20px) 0;
  font-size:clamp(1.9rem,5.2vw,4.2rem);letter-spacing:-.045em;line-height:1.08;font-weight:500;
  transform:translateY(110%);transition:transform .8s var(--ease),color .35s;
}
body.menu-open #menu .m-list a{transform:translateY(0)}
#menu .m-list li:nth-child(1) a{transition-delay:.2s}
#menu .m-list li:nth-child(2) a{transition-delay:.26s}
#menu .m-list li:nth-child(3) a{transition-delay:.32s}
#menu .m-list li:nth-child(4) a{transition-delay:.38s}
#menu .m-list li:nth-child(5) a{transition-delay:.44s}
#menu .m-list li:nth-child(6) a{transition-delay:.5s}
#menu .m-list a:hover{color:var(--clay)}
#menu .m-list a em{font-family:var(--serif);font-size:.85rem;font-style:italic;color:var(--grey-2);letter-spacing:0}
#menu .m-side{opacity:0;transform:translateY(24px);transition:.8s var(--ease) .5s}
body.menu-open #menu .m-side{opacity:1;transform:none}
#menu .m-side h5,#menu .m-side .lbl{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);margin-bottom:18px}
#menu .m-side li{margin-bottom:9px}
#menu .m-side a:hover{color:var(--clay)}
#menu .m-side .blk{margin-bottom:40px}

/* ---------------- section rail ---------------- */
#rail{
  position:fixed;right:calc(var(--pad) - 6px);top:50%;transform:translateY(-50%);
  z-index:500;display:flex;flex-direction:column;gap:16px;opacity:0;transition:opacity .5s;
}
#rail.show{opacity:1}
#rail a{display:flex;align-items:center;gap:12px;justify-content:flex-end}
#rail .lbl{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  opacity:0;transform:translateX(8px);transition:.4s var(--ease);white-space:nowrap;
}
#rail a:hover .lbl,#rail a.on .lbl{opacity:1;transform:none}
#rail .dt{
  width:7px;height:7px;border-radius:50%;border:1px solid var(--grey);
  transition:.4s var(--ease);flex-shrink:0;
}
#rail a.on .dt{background:var(--clay);border-color:var(--clay);transform:scale(1.35)}
body.on-dark-rail #rail .lbl{color:var(--grey-2)}
body.on-dark-rail #rail .dt{border-color:var(--grey-2)}

/* ---------------- split text ---------------- */
.sp{display:block}
.sp .w{display:inline-block;overflow:hidden;vertical-align:top}
.sp .w > i{
  display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .95s var(--ease);
}
.sp.in .w > i{transform:translateY(0)}
.fade{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.fade.in{opacity:1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}

/* ---- touch: nothing ships invisible -------------------------------------
   .fade, .sp and .clip all default to HIDDEN and are revealed by app.js,
   which is deferred — so between the browser's first paint and the moment
   that script runs, every heading and paragraph on the page is at opacity 0.
   Nine to twenty-five elements per page. On desktop the view-transition
   crossfade covers that window; iOS Safari has no crossfade, so the
   destination was painting as a structurally-correct but EMPTY page and then
   popping its content in.

   On touch the defaults are inverted: content is visible as it parses, and
   app.js marks only what is BELOW the fold as pending. Anything mis-timed
   now happens off-screen, where it cannot be seen, instead of in the first
   viewport, where it was the whole problem. Desktop keeps its original
   behaviour untouched. */
@media (hover:none),(pointer:coarse){
  .fade{opacity:1;transform:none}
  .fade.pending{opacity:0;transform:translateY(20px)}
  .sp .w > i{transform:translateY(0)}
  .sp.pending .w > i{transform:translateY(110%)}
  .clip{clip-path:inset(0 0 0 0)}
  .clip.pending{clip-path:inset(0 0 100% 0)}

  /* The root canvas is the first colour Safari puts on screen for a new
     document, before any section has painted. It was --bone, which is light,
     while EVERY page opens on a dark hero and closes on a dark footer — so a
     light band was being shown, then covered. Matching it to the dark bands
     means the first pixel is already the right colour. */
  html{background:var(--deep)}
}
.clip.in{clip-path:inset(0 0 0 0)}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}[data-d="6"]{transition-delay:.54s}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;padding:17px 34px;border-radius:100px;
  font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  position:relative;overflow:hidden;border:1px solid var(--ink);will-change:transform;
}
.btn span{position:relative;z-index:2;transition:color .5s var(--ease)}
.btn .ar{position:relative;z-index:2;width:16px;height:16px;transition:transform .5s var(--ease),color .5s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);border-radius:100px;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover span,.btn:hover .ar{color:var(--bone)}
.btn-fill{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-fill::before{background:var(--clay)}
.btn-fill:hover span,.btn-fill:hover .ar{color:var(--bone)}
.dark .btn{border-color:var(--on-deep);color:var(--on-deep)}
.dark .btn::before{background:var(--on-deep)}
.dark .btn:hover span,.dark .btn:hover .ar{color:var(--deep)}
.dark .btn-fill{background:var(--clay);border-color:var(--clay)}
.dark .btn-fill::before{background:var(--on-deep)}

.lnk{
  display:inline-flex;align-items:center;gap:11px;font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:6px;position:relative;
}
.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease);
}
.lnk:hover::after{transform:scaleX(0)}
.lnk svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.lnk:hover svg{transform:translateX(5px)}

/* ---------------- hero ---------------- */
.hero{
  height:100svh;min-height:600px;position:relative;overflow:hidden;
  background:var(--deep);color:var(--on-deep);display:flex;align-items:flex-end;
  padding-bottom:clamp(40px,7vh,80px);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg canvas{width:100%;height:100%;opacity:1}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--hero-f1) 0%,var(--hero-f2) 42%,var(--hero-f3) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-top{
  position:absolute;top:clamp(96px,15vh,160px);left:var(--pad);right:var(--pad);z-index:2;
  display:flex;justify-content:space-between;gap:30px;
}
.hero-h{max-width:18ch;margin-bottom:clamp(20px,2.6vw,34px)}
.hero-h .it{color:var(--champagne)}
.hero-line{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vh,44px);
}
.hero-lbl{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,241,245,.45);display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
}
.hero-lbl::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);
  box-shadow:0 0 0 0 rgba(var(--art-2),.7);animation:liveDot 2.6s ease-out infinite;
}
@keyframes liveDot{
  0%{box-shadow:0 0 0 0 rgba(var(--art-2),.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(var(--art-2),0)}
}
.hero-cycle{
  height:1.35em;overflow:hidden;position:relative;display:block;
  font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.02em;font-weight:500;
  min-width:min(19ch,72vw);
}
.hero-cycle span{
  display:block;position:absolute;inset:0;transform:translateY(105%);
  transition:transform .85s var(--ease),opacity .85s;opacity:0;
  background:linear-gradient(92deg,var(--bone) 30%,var(--champagne));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-cycle span.on{transform:translateY(0);opacity:1}
.hero-cycle span.out{transform:translateY(-105%);opacity:0}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(28px,5vh,54px)}
.hero-foot p{max-width:46ch}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.scroll-cue .ln{width:1px;height:64px;background:var(--line-dk);position:relative;overflow:hidden}
.scroll-cue .ln::after{
  content:"";position:absolute;left:0;right:0;top:-100%;height:100%;background:var(--clay);
  animation:cue 2.1s var(--ease-io) infinite;
}
@keyframes cue{0%{top:-100%}55%,100%{top:100%}}
.scroll-cue span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-2);writing-mode:vertical-rl}

/* ---------------- statement ---------------- */
.stmt{max-width:22ch}
.stmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:end}

/* ---------------- services (pinned) ---------------- */
.svc-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.svc-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:100px 0}
.svc-visual{
  position:relative;aspect-ratio:4/5;max-height:56vh;border-radius:2px;overflow:hidden;
  background:var(--deep);
}
.svc-visual .vs{
  position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity .8s var(--ease),transform 1.1s var(--ease);
}
.svc-visual .vs.on{opacity:1;transform:scale(1)}
.svc-visual .vs canvas{width:100%;height:100%}
.svc-visual .vs-num{
  position:absolute;left:26px;bottom:18px;font-family:var(--serif);font-style:italic;
  font-size:clamp(3.4rem,7vw,6.4rem);color:rgba(255,255,255,.9);line-height:1;z-index:3;
}
.svc-visual .vs-nm{
  position:absolute;right:26px;bottom:32px;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);z-index:3;text-align:right;max-width:9ch;
}
.svc-list{padding:clamp(40px,10vh,120px) 0}
.svc-item{
  display:block;padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--line);
  position:relative;transition:opacity .6s var(--ease);
}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,32px)}
.svc-head .i{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:1rem;flex-shrink:0;width:2.4ch}
.svc-head h3{
  font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1.04;
  transition:transform .6s var(--ease),color .4s;flex:1;
}
.svc-item:hover .svc-head h3{transform:translateX(14px);color:var(--clay)}
.svc-head .ar{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  flex-shrink:0;transition:.5s var(--ease);
}
.svc-item:hover .svc-head .ar{background:var(--clay);border-color:var(--clay);color:var(--bone);transform:rotate(-45deg)}
.svc-body{
  max-width:52ch;margin-top:14px;padding-left:calc(2.4ch + clamp(14px,2vw,32px));
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .7s var(--ease),opacity .5s,margin .5s;
}
.svc-item.act .svc-body{max-height:190px;opacity:1}
.svc-item.act .svc-head h3{color:var(--clay)}

/* ---------------- WhatsApp chip ----------------
   Sits beside the Dubai number rather than replacing its tel: link — calling
   and messaging are different intents and one link can only serve one. Colour
   is inherited so it reads as part of the list; the brand green appears only
   on hover, which keeps it recognisable without competing with the palette. */
.wa{
  display:inline-flex;align-items:center;gap:6px;margin-left:12px;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.62;transition:opacity .35s var(--ease),color .35s var(--ease);
  vertical-align:baseline;
}
.wa svg{flex-shrink:0}
.wa:hover,.wa:focus-visible{opacity:1;color:#25D366}
/* on the contact page it sits under the large number, not beside it */
.wa.wa-blk{margin-left:0;margin-top:14px;font-size:.76rem}

/* ---------------- globe ---------------- */
.globe-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.globe-stage{position:relative;aspect-ratio:1;max-width:620px;width:100%;margin-inline:auto}
/* the browser keeps vertical scroll and pinch-zoom; the horizontal component
   reaches the canvas so the globe can be dragged. Inert for a mouse. */
.globe-stage canvas{width:100%;height:100%;touch-action:pan-y pinch-zoom}
.globe-hint{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:rgba(237,241,245,.34);pointer-events:none;
  transition:color .45s var(--ease);
}
.globe-stage:hover .globe-hint{color:rgba(237,241,245,.6)}
@media (max-width:700px){.globe-hint{font-size:.56rem;letter-spacing:.14em}}

@media (max-width:400px){
  .hdr{padding-inline:18px}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-data:reduce){
  #clientField,.hero-bg,#globe{display:none}
}
.svc-card{position:relative;overflow:hidden;isolation:isolate}
.svc-anim{
  position:absolute;top:0;right:0;width:58%;height:100%;
  z-index:0;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000);
  mask-image:linear-gradient(90deg,transparent,#000 42%,#000);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.svc-card:hover .svc-anim{opacity:.92;transform:scale(1.06)}
.svc-card > :not(.svc-anim){position:relative;z-index:1}
.svc-card h3,.svc-card .k{text-shadow:0 1px 14px var(--bone)}
[data-theme="dark"] .svc-card h3,[data-theme="dark"] .svc-card .k{text-shadow:0 1px 14px var(--deep-2)}
.svc-card p{max-width:34ch}


.adv-hero .wrap{position:relative;z-index:2;pointer-events:none}
.adv-hero .wrap a,.adv-hero .wrap button{pointer-events:auto}
.adv-copy{max-width:32ch}
.adv-count{display:flex;align-items:baseline;gap:16px;margin:8px 0 26px}
.adv-count b{
  font-size:clamp(4rem,11vw,9rem);font-weight:500;letter-spacing:-.055em;line-height:.86;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(96deg,var(--on-deep) 24%,var(--champagne));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.adv-count em{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4vw,3rem);color:var(--clay)}
.field-note{
  position:absolute;left:var(--pad);bottom:26px;z-index:2;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,241,245,.4);display:flex;align-items:center;gap:10px;
}
.field-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);
  animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.verticals{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.vert{background:var(--bone);padding:clamp(28px,3.4vw,52px) clamp(16px,2vw,30px);
  position:relative;overflow:hidden;transition:background .5s var(--ease)}
.vert:hover{background:var(--paper)}
.vert .k{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.86rem;display:block;margin-bottom:18px}
.vert h3{font-size:clamp(1.05rem,1.5vw,1.42rem);letter-spacing:-.03em;margin-bottom:9px;line-height:1.12}
.vert p{font-size:.87rem;line-height:1.6;color:var(--ink-2)}
.vert::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.vert:hover::after{transform:scaleX(1)}
@media (max-width:1100px){.verticals{grid-template-columns:repeat(3,1fr)}}

.mk-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
.mk-list li{
  padding:13px 0;border-bottom:1px solid var(--line-dk);display:flex;align-items:center;gap:12px;
  font-size:.92rem;transition:color .35s;cursor:default;
}
.mk-list li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--clay);flex-shrink:0;
  transition:transform .35s var(--ease);
}
.mk-list li:hover{color:var(--on-deep)}
.mk-list li:hover::before{transform:scale(1.9)}

/* ---------------- tabs ---------------- */
.tabs-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:44px}
.tabs-nav button{
  padding:12px 26px;border-radius:100px;border:1px solid var(--line);font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;transition:.45s var(--ease);
}
.dark .tabs-nav button{border-color:var(--line-dk)}
.tabs-nav button:hover{border-color:var(--clay)}
.tabs-nav button.on{background:var(--clay);border-color:var(--clay);color:var(--bone)}
.tab-p{display:none}
.tab-p.on{display:block;animation:tabIn .7s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tab-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.tab-pts li{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.dark .tab-pts li{border-color:var(--line-dk)}
.tab-pts .i{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.9rem;flex-shrink:0}

/* ---------------- counters ---------------- */
.ctr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
/* only the homepage row carries five stats; every other page has four, and
   a fifth track there renders as an empty cell of bare grid background */
.ctr-grid.ctr-5{grid-template-columns:repeat(5,1fr)}
/* P2-06 — five stats in three columns left a sixth slot empty, and the grid
   draws its rules as a background showing through the gaps, so that slot read
   as a grey panel. Measured 83% fill at 768, 900 and 1024px. Letting the last
   stat span the remaining two tracks fills the row exactly. Approved as a
   desktop-width change; above 1200px the row is five across and unaffected. */
@media (max-width:1200px){
  .ctr-grid.ctr-5{grid-template-columns:repeat(3,1fr)}
  .ctr-grid.ctr-5 > :last-child{grid-column:span 2}
}
.dark .ctr-grid{background:var(--line-dk)}
.ctr{background:var(--bone);padding:clamp(30px,4vw,58px) clamp(18px,2.4vw,34px)}
.dark .ctr{background:var(--deep)}
.ctr b{
  display:block;font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:500;letter-spacing:-.05em;
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.ctr b em{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.6em}
/* direct child only: this also matched the number span inside <b>, which
   is why every counter digit rendered at label size instead of display size */
.ctr > span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

/* ---------------- marquee ---------------- */
.mq{overflow:hidden;padding:clamp(30px,4vw,54px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark .mq{border-color:var(--line-dk)}
.mq-track{display:flex;gap:0;width:max-content;animation:mq 34s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{
  display:inline-flex;align-items:center;gap:clamp(28px,4vw,64px);padding-inline:clamp(14px,2vw,32px);
  font-size:clamp(1.5rem,3.2vw,2.8rem);letter-spacing:-.035em;white-space:nowrap;
}
.mq-item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);flex-shrink:0}

/* ---------------- responsive card grids ----------------
   .cols is a 12-column grid and the cards hard-code span 4 inline, so on a
   phone they stayed three-across at ~106px wide with one word per line.
   These override the inline spans at the two breakpoints. */
@media (max-width:900px){ .cols > *{grid-column:span 6 !important} }
@media (max-width:640px){ .cols > *{grid-column:span 12 !important} }

/* ---------------- team grid (About) ----------------
   Scoped to this grid on purpose: the shared .cols grid does not collapse on
   narrow screens, and fixing it globally would change four other pages. */
.team-grid > *{grid-column:span 3}
@media (max-width:1100px){.team-grid > *{grid-column:span 6}}
@media (max-width:640px){.team-grid > *{grid-column:span 12}}

/* ---------------- cards ---------------- */
.card{
  border:1px solid var(--line);padding:clamp(26px,3vw,44px);position:relative;overflow:hidden;
  transition:border-color .5s,transform .6s var(--ease);background:var(--paper);
}
.dark .card{border-color:var(--line-dk);background:var(--deep-2)}
a.card:hover{border-color:var(--clay);transform:translateY(-5px)}
.card .k{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.92rem;display:block;margin-bottom:22px}

/* ---------------- location card flags ----------------
   Scoped to .team-grid so no other .card on the site is affected. The flags
   are inline SVG rather than emoji or images: vector stays sharp at any pixel
   density, costs no request, and lets each one carry its real construction
   instead of a platform's emoji font.

   The wave is done with two cheap transforms rather than a displacement
   filter or a canvas. The SVG itself gets a slow perspective sway, and a
   separate gradient overlay drifts across it — the moving light is what
   actually reads as cloth; geometry alone reads as a tilting card. Both are
   compositor-only properties, so there is no JavaScript, no per-frame layout,
   and nothing for the main thread to do. The elements are ~58x39px, so the
   layers they promote are negligible. */
.team-grid .card{padding-top:clamp(30px,3.2vw,46px)}
.team-grid .card .k{padding-right:74px}       /* keeps the label clear of the flag */
.flag{
  position:absolute;top:clamp(24px,2.6vw,36px);right:clamp(24px,2.6vw,36px);
  width:58px;height:39px;border-radius:2px;overflow:hidden;display:block;
  box-shadow:0 1px 0 rgba(0,0,0,.28),0 6px 16px -6px rgba(0,0,0,.5);
  outline:1px solid rgba(255,255,255,.10);outline-offset:-1px;
}
.flag svg{width:100%;height:100%;display:block;transform-origin:0% 50%;
  animation:flagSway 9s ease-in-out infinite}
/* the travelling highlight: one gradient, one background-position animation */
.fl-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(0,0,0,.30) 0%, rgba(255,255,255,.20) 16%, rgba(0,0,0,.24) 34%,
    rgba(255,255,255,.14) 54%, rgba(0,0,0,.26) 74%, rgba(255,255,255,.10) 88%,
    rgba(0,0,0,.28) 100%);
  background-size:260% 100%;
  mix-blend-mode:overlay;
  animation:flagShade 9s linear infinite;
}
@keyframes flagSway{
  0%,100%{transform:perspective(220px) rotateY(0deg)   skewY(0deg)    scaleY(1)}
  27%    {transform:perspective(220px) rotateY(7deg)   skewY(-1.1deg) scaleY(1.014)}
  52%    {transform:perspective(220px) rotateY(1deg)   skewY(1deg)    scaleY(.996)}
  78%    {transform:perspective(220px) rotateY(-6deg)  skewY(-.5deg)  scaleY(1.008)}
}
@keyframes flagShade{from{background-position:0% 0}to{background-position:-260% 0}}
/* four different phases and speeds — in step they read as one mechanism */
.team-grid > *:nth-child(1) .flag svg,.team-grid > *:nth-child(1) .fl-shade{animation-duration:9s;   animation-delay:-0.4s}
.team-grid > *:nth-child(2) .flag svg,.team-grid > *:nth-child(2) .fl-shade{animation-duration:10.5s;animation-delay:-3.1s}
.team-grid > *:nth-child(3) .flag svg,.team-grid > *:nth-child(3) .fl-shade{animation-duration:8.2s; animation-delay:-5.6s}
.team-grid > *:nth-child(4) .flag svg,.team-grid > *:nth-child(4) .fl-shade{animation-duration:11.3s;animation-delay:-1.9s}
@media (prefers-reduced-motion:reduce){
  .flag svg,.fl-shade{animation:none}          /* still visible, simply still */
}
.card h3{font-size:clamp(1.2rem,1.8vw,1.6rem);margin-bottom:12px}

/* ---------------- banner (inner pages) ---------------- */
.pbanner{
  background:var(--deep);color:var(--on-deep);padding:clamp(140px,20vh,230px) 0 clamp(50px,7vw,90px);
  position:relative;overflow:hidden;
}
.pbanner canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.72}
.pbanner .wrap{position:relative;z-index:2}
.crumbs{display:flex;gap:12px;align-items:center;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-2);margin-bottom:26px}
.crumbs a:hover{color:var(--clay)}

/* ---------------- article ---------------- */
.art{display:grid;grid-template-columns:1fr 330px;gap:clamp(40px,6vw,100px);align-items:start}
.art-body > * + *{margin-top:1.15em}
.art-body h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-top:2.2em;letter-spacing:-.035em}
.art-body p{color:var(--ink-2);font-size:1.06rem;line-height:1.72}
.art-lead{
  font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.34;letter-spacing:-.028em;color:var(--ink);
  padding-bottom:.6em;margin-bottom:1.4em;border-bottom:1px solid var(--line);
}
.art-body ol{counter-reset:s;padding:0;list-style:none}
.art-body ol li{
  counter-increment:s;padding:26px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:3.2ch 1fr;gap:20px;align-items:baseline;
}
.art-body ol li::before{
  content:"0" counter(s);font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.95rem;
}
.art-body ol h4{font-size:1.12rem;margin-bottom:7px}
.art-body ol p{margin:0;font-size:.99rem}
.aside{position:sticky;top:110px;display:grid;gap:14px}
.aside-box{border:1px solid var(--line);padding:28px}
.aside-box h5,.aside-box .lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.aside-box li a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.94rem;transition:.4s var(--ease)}
.aside-box li:last-child a{border-bottom:0}
.aside-box li a:hover{color:var(--clay);padding-left:7px}
.aside-box li a.on{color:var(--clay)}
.aside-cta{background:var(--deep);color:var(--on-deep);padding:32px}
.aside-cta h4,.aside-cta h3{font-size:1.32rem;margin-bottom:10px;letter-spacing:-.03em}
.aside-cta p{color:rgba(255,255,255,.66);font-size:.95rem;margin-bottom:22px}

/* ---------------- form ---------------- */
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{position:relative;margin-bottom:30px}
.field label{
  position:absolute;left:0;top:14px;font-size:1rem;color:var(--grey);pointer-events:none;
  transition:.4s var(--ease);
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 0 12px;border:0;border-bottom:1px solid var(--line);
  background:none;font:inherit;font-size:1rem;color:var(--ink);border-radius:0;
  transition:border-color .4s;
}
.field select{padding-right:20px}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--clay)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{
  top:-11px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
}
.field.sel label{top:-11px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ---------------- footer ---------------- */
.ftr{background:var(--deep);color:var(--on-deep);padding:clamp(70px,9vw,130px) 0 34px}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(34px,5vw,90px);
  padding-bottom:clamp(50px,6vw,90px);border-bottom:1px solid var(--line-dk)}
/* three columns, not four: the Hours column was removed and a four-track grid
   would leave the last one empty, pulling the other three narrower than they
   need to be. The two- and one-column phone rules below are unaffected. */
.ftr-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px);
  padding:clamp(44px,5vw,72px) 0;border-bottom:1px solid var(--line-dk)}
.ftr h5,.ftr .lbl{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);margin-bottom:22px}
.ftr li{margin-bottom:11px;font-size:.95rem;color:rgba(255,255,255,.66)}
.ftr a{transition:color .35s}
.ftr a:hover{color:var(--clay)}
/* social link in the footer's bottom row. Sits with the copyright so the row
   keeps its two-item space-between layout; nothing else in the footer moves. */
.ftr-copy{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line-dk);
  color:inherit;opacity:.72;flex-shrink:0;
  transition:opacity .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.soc svg{width:14px;height:14px;fill:currentColor;display:block}
.soc:hover{opacity:1;border-color:var(--clay);color:var(--clay)}
/* coarse pointers already get min-height:44px from the touch-target rule, so the
   width is matched here to keep it a circle rather than an oval */
@media (hover:none),(pointer:coarse){.soc{width:44px;height:44px}.soc svg{width:17px;height:17px}}

.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:28px;font-size:.8rem;color:var(--grey-2);letter-spacing:.04em}
.ftr-big{font-size:clamp(2rem,5.6vw,4.6rem);letter-spacing:-.05em;line-height:1.02;max-width:16ch}

/* ---------------- misc ---------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:14px 22px;background:var(--clay);color:var(--bone)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.logo-slot{display:inline-flex;align-items:center}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .globe-wrap,.tab-grid,.stmt-grid{grid-template-columns:1fr}
  .art{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .hdr-nav{display:none}
  .menu-btn{display:block}
  #rail{display:none}
  .svc-wrap{grid-template-columns:1fr;gap:0}
  .svc-sticky{position:relative;height:auto;padding:0 0 40px}
  .svc-visual{aspect-ratio:16/10;max-height:none}
  .svc-list{padding:0 0 20px}
  .svc-body{max-height:none;opacity:1;margin-top:12px}
  .ctr-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-mid{grid-template-columns:repeat(2,1fr)}
  #menu .m-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:700px){
  body{font-size:16px}
  .hero-h{max-width:none}
  .hero-line{gap:10px}
  .hero-cycle{min-width:100%}
  .hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
  .hero-top{position:static;flex-direction:column;gap:10px;margin-bottom:22px;order:1}
  .hero-top .tag{text-align:left!important}
  .hero .wrap{order:2}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:26px}
  /* ---- P2-04 menu choreography ---------------------------------------
     The panel wiped over .9s and the links staggered to .5s at .8s each, so
     the last one landed at 1.3s. Roughly halved throughout; the sequence and
     its easing are the same, it simply arrives. */
  #menu{transition:clip-path .46s var(--ease),visibility 0s linear .46s}
  body.menu-open #menu{transition:clip-path .46s var(--ease),visibility 0s}
  #menu .m-list a{transition:transform .42s var(--ease),color .35s}
  #menu .m-list li:nth-child(1) a{transition-delay:.07s}
  #menu .m-list li:nth-child(2) a{transition-delay:.10s}
  #menu .m-list li:nth-child(3) a{transition-delay:.13s}
  #menu .m-list li:nth-child(4) a{transition-delay:.16s}
  #menu .m-list li:nth-child(5) a{transition-delay:.19s}
  #menu .m-list li:nth-child(6) a{transition-delay:.22s}
  #menu .m-side{transition:.42s var(--ease) .22s}

  /* ---- P2-08 approach tabs -------------------------------------------
     Four pills wrapping onto two ragged rows. A 2x2 grid gives the same four
     targets an even shape and a little more height each. */
  .tabs-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:32px}
  .tabs-nav button{padding:13px 10px;text-align:center}

  /* ---- P2-03 hero heading -------------------------------------------
     At 38.4px the hero broke into 3 lines carrying 2.0 words each — the
     raggedest heading on the site, where everything else sits at 2.3-3.0.
     "One Exceptional Partner." was one word too wide to hold its line. 2.13rem
     is the LARGEST size that lets it hold, measured: 34px gives 2 lines at 3.0
     words each, and going smaller than that buys nothing. Phones only; the
     clamp is untouched everywhere else. */
  .hero-h{font-size:2.13rem}

  /* Flags scale down on phones, where the card is full width and the label
     has the whole row to itself — so the flag moves up beside the label
     rather than needing a reserved column. */
  .flag{width:46px;height:31px;top:22px;right:20px}
  .team-grid .card .k{padding-right:60px}
  .team-grid .card{padding-top:26px}

  /* ---- footer ----------------------------------------------------------
     Eight services stacked one per row, each row a 44px tap target plus an
     11px margin, is 440px of footer before Company and Dubai have even
     started. Two columns puts the eight in the height of four. The row
     margins and label spacing come in as well; the 44px minimum on the links
     themselves is left alone, since that is the tap target and not the
     padding. Desktop keeps its three-across layout untouched. */
  /* Company and Dubai sit side by side; Services keeps the full width because
     its own list is already two across. Three stacked blocks left the lower
     half of the footer as one long single-file column. */
  .ftr-mid{gap:20px 18px;padding:clamp(30px,5vw,48px) 0;grid-template-columns:1fr 1fr}
  .ftr-mid > :first-child{grid-column:1 / -1}
  .ftr h5,.ftr .lbl{margin-bottom:8px}
  .ftr li{margin-bottom:2px}
  .ftr-mid > div:first-child ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}

  /* The homepage hero's scroll cue is dropped on phones. It only exists in
     the hero on index.html, so this rule cannot reach any other page. Hiding
     it with display:none takes it out of flex layout entirely, which means
     the 26px column gap above it goes with it and the hero closes up on its
     own — no compensating margin needed. Desktop keeps the cue. */
  .scroll-cue{display:none}

  .f-row{grid-template-columns:1fr;gap:0}
  /* .ftr-mid is deliberately absent from this collapse-to-one-column list:
     it now has its own two-column rule above, and this line sits later in the
     same block, so leaving it here would silently override it. */
  .ctr-grid,.mk-list,.aside{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr}
  .art-body ol li{grid-template-columns:1fr;gap:8px}
  .svc-head .ar{display:none}

  /* ---- phone header ----------------------------------------------------
     The pill CTA does not fit beside the brand, theme toggle and menu button
     on a phone: it wrapped onto three lines and squeezed the menu button off
     the edge. Contact is still one tap away inside the menu. */
  .hdr{gap:12px}
  .hdr-cta{display:none}
  .menu-btn{width:48px;height:48px;flex:0 0 48px}
  .menu-btn i{left:15px;right:15px}
  .menu-btn i:nth-child(1){top:20px}
  .menu-btn i:nth-child(2){bottom:20px}

  /* ---- homepage counters ----------------------------------------------
     Five stats in a three-column grid leave a sixth cell with nothing in it,
     and because the grid draws its 1px rules as a background showing through
     the gaps, that empty cell reads as a grey block. Two columns with the
     last stat spanning both fills the grid exactly, and gives the labels
     enough width to stop wrapping mid-phrase. */
  .ctr-grid.ctr-5{grid-template-columns:repeat(2,1fr)}
  .ctr-grid.ctr-5 > :last-child{grid-column:1 / -1}

  /* ---- markets ---------------------------------------------------------
     Collapsing to one column turned 14 short country names into a column of
     14 mostly-empty rows the reader has to scroll past. Two columns halve
     that, and 14 divides evenly so no cell is left orphaned. The names are
     short enough that a narrower gutter still clears the widest of them. */
  .mk-list{grid-template-columns:1fr 1fr;column-gap:18px}

  /* ---- services scroll length -----------------------------------------
     Eight services at 78vh each plus a 50vh run-out is seven and a bit full
     screens of swiping to get past one section — on a phone that stops being
     a scroll-told story and becomes an obstacle. 56vh keeps every formation
     its own deliberate beat while halving the distance. Desktop is untouched. */
  .svc3d-scroll{height:calc(var(--n) * 56dvh + 40dvh)}

  /* ---- contact details -------------------------------------------------
     Scoped to the contact column by class, so nothing else on the site — the
     Advertisers page included — can be affected. These were 17-25px tall:
     real destinations (email, two phone numbers, WhatsApp) sized like body
     copy, which on a phone means aiming at a line of text. */
  .contact-details a{display:inline-flex;align-items:center;min-height:44px}
  .contact-details .d4{margin-bottom:-6px}

  /* ---- verticals -------------------------------------------------------
     Five cards in three columns left a sixth cell empty, showing the grid's
     line colour as a grey panel — the same fault as the counters. Unlike the
     counters these cards carry a paragraph each, and a third of a phone is
     about 20 characters a line, which was breaking "Real-money / gaming,
     fantasy / sport, rummy," across five ragged lines. One column fixes the
     empty cell and the wrapping at once. Previously this only happened below
     430px, so most phones got the broken three-column version. */
  .verticals{grid-template-columns:1fr}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sp .w > i{transform:none}
  .fade{opacity:1;transform:none}
  .clip{clip-path:none}
  #pre{display:none}
  #cur,#curD{display:none}
  .hero-cycle span{position:relative;opacity:1;transform:none}
  .hero-cycle{height:auto}
  .hero-cycle span:not(.on){display:none}
}

.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.4vw,30px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:-.025em;font-weight:500;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay)}
.faq summary i{
  position:relative;width:17px;height:17px;flex-shrink:0;
  transition:transform .45s var(--ease);
}
.faq summary i::before,.faq summary i::after{
  content:"";position:absolute;background:var(--clay);border-radius:2px;
}
.faq summary i::before{left:0;right:0;top:8px;height:1.5px}
.faq summary i::after{top:0;bottom:0;left:8px;width:1.5px;transition:opacity .35s var(--ease)}
.faq[open] summary i{transform:rotate(180deg)}
.faq[open] summary i::after{opacity:0}
.faq-a{padding:0 0 clamp(22px,2.4vw,30px);max-width:74ch}
.faq[open] .faq-a{animation:faqIn .5s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}



/* ==========================================================================
   DARK THEME  —  <html data-theme="dark">
   Palette lifted directly from the Advisible logo: near-black, amber, cyan.
   ========================================================================== */
[data-theme="dark"]{
  --on-deep:#EDF1F5;
  --bone:#101317;
  --paper:#171A20;
  --sand:#232830;
  --deep:#1C2027;
  --deep-2:#232830;
  --ink:#EDF1F5;
  --ink-90:#DDE3E9;
  --ink-2:#A6B0BC;
  --grey:#7A8590;
  --grey-2:#616B76;
  --line:rgba(237,241,245,.13);
  --line-dk:rgba(237,241,245,.13);
  --hdr-bg:rgba(16,19,23,.82);
  --hdr-bg-dk:rgba(16,19,23,.82);
  --hero-f1:rgba(16,19,23,.5);
  --hero-f2:rgba(16,19,23,.08);
  --hero-f3:rgba(16,19,23,.96);
  --clay:#FCA01C;          /* logo amber */
  --clay-dk:#E5820F;
  --bronze:#12A6C6;
  --champagne:#35C3DC;     /* logo cyan, lightened */
  --art-1:18,166,198;      /* cyan   */
  --art-2:252,160,28;      /* amber  */
  --art-3:53,195,220;      /* light cyan */
  color-scheme:dark;
}
[data-theme="dark"] .ctr{background:var(--bone)}
[data-theme="dark"] .card{background:var(--deep-2)}
[data-theme="dark"] .dark,[data-theme="dark"] .ftr,
[data-theme="dark"] .pbanner,[data-theme="dark"] .hero{background:var(--deep)}
[data-theme="dark"] .dark .ctr{background:var(--deep)}
[data-theme="dark"] .dark .body,[data-theme="dark"] .dark .body-lg{color:var(--ink-2)}
[data-theme="dark"] .aside-cta{background:var(--deep-2);border:1px solid var(--line)}
[data-theme="dark"] .btn-fill{background:var(--clay);border-color:var(--clay);color:#101317}
[data-theme="dark"] .btn-fill::before{background:var(--ink)}
[data-theme="dark"] .btn-fill:hover span,[data-theme="dark"] .btn-fill:hover .ar{color:#101317}
[data-theme="dark"] .tabs-nav button.on{color:#101317}
[data-theme="dark"] ::selection{background:var(--clay);color:#101317}
[data-theme="dark"] .hero-cycle span{
  background:linear-gradient(92deg,var(--ink) 26%,var(--champagne));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- brand lockup ---- */
.brand{gap:12px}
.brand-mark{height:34px;width:auto;flex-shrink:0}
.brand-mark .m-a{fill:var(--logo-orange)}
.brand-mark .m-d{fill:var(--logo-cyan)}
.brand-word{
  font-size:.82rem;letter-spacing:.13em;line-height:1;white-space:nowrap;
}
.brand-word .w-ad{color:var(--logo-orange)}
.brand-word .w-vis{color:var(--logo-cyan)}
.brand img{height:34px;width:auto}
.ftr .brand-word{font-size:.92rem}
.ftr .brand-mark{height:40px}
@media (max-width:560px){.brand-word{font-size:.7rem;letter-spacing:.1em}.brand-mark{height:28px}}

/* ---- theme toggle ---- */
.th-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;flex-shrink:0;margin-left:6px;
  transition:transform .5s var(--ease),background .4s,color .4s;
}
.th-btn:hover{transform:rotate(24deg)}
.th-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.th-btn .moon{display:none}
[data-theme="dark"] .th-btn .moon{display:block}
[data-theme="dark"] .th-btn .sun{display:none}
@media (max-width:1024px){.th-btn{margin-left:auto;margin-right:10px}}

/* ==========================================================================
   ON-DARK SURFACES
   Every band that is dark in BOTH themes. Text here must stay light — it
   cannot use --ink/--ink-2/--grey, because those invert with the theme.
   ========================================================================== */
.dark,.hero,.pbanner,.ftr,.aside-cta,#menu,#pre{color:var(--on-deep)}
.dark .body,.dark .body-lg,.dark p,
.hero .body,.hero .body-lg,.hero p,
.pbanner .body,.pbanner .body-lg,
.ftr .body,.ftr .body-lg,.ftr p,
.aside-cta .body,.aside-cta p,
.dark .mk-list li{color:rgba(237,241,245,.7)}
.dark h1,.dark h2,.dark h3,.dark h4,
.hero h1,.hero h2,.pbanner h1,.ftr h2,.aside-cta h4,.aside-cta h3{color:var(--on-deep)}
.dark .tag,.hero .tag,.pbanner .tag,.ftr .tag{color:rgba(237,241,245,.58)}
.dark .small,.hero .small,.pbanner .small,.ftr .small{color:rgba(237,241,245,.58)}
.pbanner .crumbs{color:rgba(237,241,245,.6)}
.pbanner .crumbs a:hover{color:var(--clay)}
.ftr h5,#menu .m-side h5,#menu .m-side .lbl{color:rgba(237,241,245,.5)}
.ftr li{color:rgba(237,241,245,.7)}
#menu .m-list a em{color:rgba(237,241,245,.5)}
.scroll-cue span{color:rgba(237,241,245,.55)}
.dark .tabs-nav button{border-color:rgba(237,241,245,.2);color:var(--on-deep)}
.dark .tab-pts li{border-color:rgba(237,241,245,.14)}
.dark .mk-list li{border-color:rgba(237,241,245,.14)}
.dark .rule,.ftr .rule{background:rgba(237,241,245,.14)}
.hdr.on-dark .hdr-cta:hover span{color:var(--deep)}
.hdr.on-dark .th-btn:hover{background:rgba(237,241,245,.12)}

/* brand lockup — raster artwork, constant across themes */
.brand{display:flex;align-items:center;gap:0;flex-shrink:0;position:relative;z-index:2}
.brand img{height:46px;width:auto;display:block}
.ftr .brand img{height:56px}
#pre .pre-mark img{height:clamp(34px,7vw,62px);width:auto;margin-inline:auto}
@media (max-width:560px){.brand img{height:34px}}

/* ---------------- client logo field (Advertisers) ---------------- */
.adv-hero{position:relative;overflow:hidden;background:var(--deep);color:var(--on-deep);
  padding:clamp(150px,20vh,240px) 0 clamp(80px,10vw,140px);min-height:92svh;
  display:flex;align-items:center}
#clientField{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  contain:strict;
}
.cf-cell{
  position:absolute;top:0;left:0;
  display:grid;place-items:center;
  will-change:transform;                  /* promote once, composite on the GPU */
  pointer-events:auto;cursor:pointer;
  transition:filter .45s var(--ease);
}
.cf-cell svg{position:absolute;inset:0;width:100%;height:100%}
.cf-cell svg polygon{
  fill:rgba(var(--art-1),.055);
  stroke:rgba(var(--art-1),.16);stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:fill .35s var(--ease),stroke .35s var(--ease);
}
.cf-cell img{
  position:relative;max-width:58%;max-height:58%;width:auto;height:auto;
  object-fit:contain;pointer-events:none;
  opacity:.78;transition:opacity .38s var(--ease);
}
.cf-cell:hover img{opacity:1}
.cf-cell:hover svg polygon{fill:rgba(var(--art-1),.14);stroke:rgba(var(--art-2),.6)}
@media (prefers-reduced-motion:reduce){.cf-cell{transition:none}}
.adv-hero .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 22% 50%, var(--deep) 26%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, var(--deep) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, var(--deep) 100%);
}

/* ==========================================================================
   SERVICES — THE SWARM
   The field spans the whole stage rather than a left-hand column, so the
   canvas is inset:0. Legibility of the service copy is protected two ways:
   the swarm itself dims particles drawn behind the copy (see G.TEXT_DIM in
   section 18 of app.js), and the stage scrim below darkens that side.
   ========================================================================== */
.svc3d{position:relative;background:var(--deep);color:var(--on-deep)}
.svc3d-scroll{position:relative;height:calc(var(--n) * 88vh + 62vh)}
.svc3d-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.svc3d-stage::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(6,10,18,.55) 62%, rgba(6,10,18,.72) 100%),
    linear-gradient(180deg, var(--deep) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, var(--deep) 100%);
}

/* the particle cloud occupies the whole stage */
.mach{position:absolute;inset:0;z-index:2;pointer-events:none}
.mach-field{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Faint spatial reference grid. Deliberately CSS and not another GL pass:
   it never changes, so painting it once as a background layer costs nothing
   per frame, where a fullscreen shader pass would cost fill rate on every
   frame on exactly the devices that can least afford it. Masked to a soft
   ellipse so it fades out rather than ending at a hard edge. */
.svc3d-stage::before{
  content:"";position:absolute;inset:-10%;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(226,242,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,242,255,.055) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 42% 50%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 42% 50%, #000 20%, transparent 78%);
}
@media (max-width:1024px){
  .svc3d-stage::before{background-size:58px 58px;
    -webkit-mask-image:radial-gradient(ellipse 74% 44% at 50% 40%, #000 18%, transparent 76%);
    mask-image:radial-gradient(ellipse 74% 44% at 50% 40%, #000 18%, transparent 76%)}
}

/* Stand-in when WebGL2 is unavailable. Not a second animation to maintain —
   just enough light in the frame that the section reads as designed rather
   than as a hole where something failed. */
.svc3d-nogl .svc3d-stage::after{
  background:
    radial-gradient(ellipse 42% 46% at 40% 50%, rgba(64,214,148,.13), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(6,10,18,.55) 62%, rgba(6,10,18,.72) 100%),
    linear-gradient(180deg, var(--deep) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, var(--deep) 100%);
}

/* ---- copy ---- */
.svc3d-ui{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  display:grid;grid-template-columns:53% 47%;align-items:center;
  padding-inline:var(--pad);max-width:var(--wrap);margin-inline:auto;
}
.s3-rail{
  position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:13px;pointer-events:auto;z-index:6;
}
.s3-rail button{
  display:flex;align-items:center;gap:11px;font-size:.64rem;letter-spacing:.16em;
  color:rgba(237,241,245,.32);transition:color .4s var(--ease);
}
.s3-rail button::before{content:"";width:18px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.s3-rail button.on{color:var(--on-deep)}
.s3-rail button.on::before{width:40px;background:rgba(var(--art-2),1)}
.s3-rail button:hover{color:rgba(237,241,245,.7)}

.s3-cards{position:relative;grid-column:2;height:56svh}
.s3card{
  position:absolute;left:0;right:0;top:50%;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) translateX(46px) rotateY(-13deg);
  transform-origin:left center;
  transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s linear .55s;
}
.s3card.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%) translateX(0) rotateY(0);
  transition:opacity .55s var(--ease) .08s,transform .8s var(--ease) .08s,visibility 0s;
}
.s3card .k{font-family:var(--serif);font-style:italic;color:rgba(var(--art-2),1);font-size:.95rem;display:block;margin-bottom:18px}
.s3card h3,.s3card h2{font-size:clamp(1.8rem,3.3vw,2.9rem);letter-spacing:-.04em;margin-bottom:18px;line-height:1.05;text-shadow:0 2px 24px rgba(6,10,18,.85)}
.s3card p{color:rgba(237,241,245,.82);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;max-width:40ch;margin-bottom:28px;text-shadow:0 1px 18px rgba(6,10,18,.8)}
.s3card .lnk{color:var(--on-deep)}
.s3-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:7;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(237,241,245,.38);display:flex;align-items:center;gap:12px;
}
.s3-hint span{width:30px;height:1px;background:rgba(var(--art-2),.7);animation:hintRun 2.2s var(--ease-io) infinite}
@keyframes hintRun{0%{transform:scaleX(.2);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}
  51%{transform-origin:right}100%{transform:scaleX(.2);transform-origin:right}}
/* vertical twin of the above, used only by the phone rule further down. The
   rules stay physical under writing-mode, so the bars have to have their width
   and height swapped and the sweep has to run on the other axis. */
@keyframes hintRunV{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

@media (max-width:1024px){
    .svc3d-ui{grid-template-columns:1fr;align-items:end;padding-bottom:13vh}
  .s3-cards{grid-column:1;height:auto;min-height:230px}
  .s3card{top:auto;bottom:0;transform:translateY(24px) translateX(0) rotateY(0)}
  .s3card.on{transform:none}
  .s3-rail{left:auto;right:var(--pad);top:auto;bottom:13vh;transform:none}
}
@media (max-width:700px){
  /* P2-01 — the pinned section was 6.7 screens of swiping, 0.84 screens per
     service, on a page that is 9.4 screens in total. Roughly half a screen per
     formation still gives each one its own beat without making the section an
     obstacle. This rule has to live here rather than in the general phone
     block above: both carry the same specificity, so the later one wins. The
     renderer, formations and morph logic are untouched — only the distance
     the scrub is spread over changes. */
  .svc3d-scroll{height:calc(var(--n) * 40dvh + 26dvh)}
    .s3card h3,.s3card h2{font-size:1.55rem}
  .s3card p{font-size:.97rem;margin-bottom:20px}
  .s3-rail{gap:8px}
  .s3-rail button::before{width:12px}
  .s3-rail button.on::before{width:24px}

  /* The Services scroll hint reads top-to-bottom, with its two marker bars
     above and below rather than left and right. It has to live in THIS block
     rather than the general phone block higher up the file: these selectors
     carry the same specificity as the base ones, so the later declaration is
     the one that wins. Bars and gaps are trimmed because a vertical stack is
     far taller than the horizontal one it replaces, and the space beneath the
     card is fixed. */
  .s3-hint{writing-mode:vertical-rl;bottom:10px;letter-spacing:.13em;font-size:.58rem;gap:6px}
  /* One bar, not two. Rotated upright, both together pushed the stack to 95px
     and collided with the Explore link at 390px and below. Keeping the lower
     one gives the cue a direction to point in — it sweeps downward, which is
     the instruction — while the 8px reclaimed from the bottom offset pays for
     most of its height. flex-shrink is pinned because a flex item with a 1px
     cross size gets collapsed otherwise. */
  .s3-hint span:first-of-type{display:none}
  .s3-hint span:last-of-type{width:1px;height:16px;flex-shrink:0;animation-name:hintRunV}
}
@media (prefers-reduced-motion:reduce){
  .svc3d-scroll{height:auto}
  .svc3d-stage{position:static;height:auto;padding:70px 0;overflow:visible}
  .mach,.s3-hint,.svc3d-stage::after,.svc3d-stage::before{display:none}
  .svc3d-ui{position:static;display:block;padding-bottom:0}
  .s3-cards{height:auto;grid-column:1}
  .s3card{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    padding:32px 0;border-top:1px solid var(--line-dk);transition:none}
  .s3-rail{display:none}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field label em{color:var(--clay);font-style:normal;margin-left:2px}
.field .err{
  display:block;font-size:.78rem;color:#E0396B;margin-top:7px;min-height:0;
  opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.field.bad .err{opacity:1;transform:none}
.field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:#E0396B}
.field.bad label{color:#E0396B}
.field.good input,.field.good select,.field.good textarea{border-bottom-color:rgba(26,143,90,.55)}
.form-note.fail{color:#E0396B}
.form-note.fail a{color:#E0396B;text-decoration:underline}
.btn.sending{opacity:.6;pointer-events:none}
.form-done{
  border:1px solid var(--line);padding:clamp(30px,4vw,48px);text-align:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.form-done.in{opacity:1;transform:none}
.form-done h3{margin:22px 0 12px}
.form-done .body{max-width:44ch;margin-inline:auto}
.fd-tick{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(var(--art-1),.12);position:relative;
}
.fd-tick::after{
  content:"";width:17px;height:9px;border-left:2px solid var(--clay);
  border-bottom:2px solid var(--clay);transform:rotate(-45deg) translate(1px,-2px);
}

/* ---- touch targets & hover suppression (recovered) ---- */
@media (hover:none),(pointer:coarse){
  /* nothing should depend on hover */
  .card:hover,a.card:hover{transform:none}
  .svc-item:hover .svc-head h3{transform:none}
  /* comfortable tap targets everywhere */
  .hdr-nav a,.aside-box li a,.ftr a,.mk-list li,.tabs-nav button{min-height:44px}
  .tabs-nav button{display:inline-flex;align-items:center}
  .btn{padding:16px 30px;min-height:50px}
}
@media (max-width:400px){
  .hdr{padding-inline:18px}
  .btn{width:100%;justify-content:center}
}
@media (max-width:700px){
  /* the wall stays readable but much lighter on phones */
  .adv-hero .scrim{
    background:linear-gradient(180deg,var(--deep) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.5) 66%,var(--deep) 100%);
  }
  .adv-copy{max-width:none}
  /* dvh avoids the iOS address-bar jump that svh alone can't fix on resize */
  .hero{height:auto;min-height:88svh;padding-top:120px}
  /* 340px left the sphere floating in a column of empty space. Filling the
     width the rest of the page uses gives it about a third more diameter,
     which is what makes the dot grid legible at arm's length. */
  .globe-stage{max-width:min(94vw,460px)}
  /* long display words must never punch out of the viewport */
  .d1,.d2,.d3{word-break:break-word;hyphens:auto}
  .art-body ol li{gap:6px}
  form{padding:0}
  .verticals{border-inline:0}
}


/* P2-03, narrow phones. These have to sit AFTER the max-width:700px block —
   the 400px block earlier in the file loses to it on equal specificity, which
   is why the larger size was still winning at 360px. 34px breaks to 3 lines
   below 390px and to 4 below 340px; measured, these hold two lines. */
@media (max-width:400px){.hero-h{font-size:1.94rem}}
@media (max-width:340px){.hero-h{font-size:1.7rem}}

@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Momentum freeze for the Services hold. Applied for at most a few hundred
   milliseconds while a flick is absorbed at the last service, then removed.
   overflow:hidden stops compositor momentum dead AND preserves the scroll
   offset, so nothing moves when it goes on or comes off. Touch only — pointer
   devices clamp the wheel delta instead and never need this. */
html.svc-hold{overflow:hidden}

/* ---- cross-document transition: off on touch --------------------------
   The crossfade animates ::view-transition-old and ::view-transition-new
   across the same 0.7s, so by definition both documents are on screen
   together for that window. On a wide desktop, dissolving between two
   similarly-composed pages reads as intended. On a phone the two pages fill
   the screen and look nothing alike, so the same effect reads as a double
   exposure — confirmed on device, and confirmed in code by the destination
   page reporting nativeViewTransition: true (the vt-fb fallback was never
   involved; it is dead on any engine with onpagereveal, which now includes
   iOS Safari).

   navigation:none opts out of the ANIMATION only. Navigation itself, history,
   Back/Forward, BFCache and direct URLs are untouched — the browser simply
   uses its normal paint-hold and swaps.

   All three conditions must hold, so a desktop or laptop cannot match this:
   a coarse pointer, no hover capability, AND a narrow viewport. A mouse
   reports pointer:fine and hover:hover and fails the first two regardless of
   window size. Same pattern as the reduced-motion opt-out above. */
@media (hover:none) and (pointer:coarse) and (max-width:1024px){
  @view-transition{navigation:none}
}

/* ---------------- touch target sizing ----------------
   Anything tappable gets a 44px minimum on coarse pointers, which is the
   size a fingertip actually needs. Desktop is untouched. */
@media (hover:none),(pointer:coarse){
  .ftr a,.ftr li a,#menu .m-side a,.aside-box li a,.mk-list li,
  .hdr-nav a,.tabs-nav button,.s3-rail button,.lnk,.crumbs a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .ftr-bot a{min-height:44px;display:inline-flex;align-items:center}
}