/* ============================================================
   NIVANTA WEALTH — Light v2
   Structure borrowed from the Fintrox reference: framed panels,
   centred section headings, pill buttons with a circular badge,
   tinted fill cards (no borders, no shadows), a tab interface,
   a bento grid, and a big wordmark closing the footer.
   Canela (display) · Söhne (text) · Söhne Mono (data)
   ============================================================ */

@font-face{font-family:'Canela';src:url('fonts/canela-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Canela';src:url('fonts/canela-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Canela';src:url('fonts/canela-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Canela';src:url('fonts/canela-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/sohne-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/sohne-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/sohne-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'SohneMono';src:url('fonts/sohne-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --canvas:#E9EDE6;
  --white:#FFFFFF;
  --ivory:#F7F4ED;
  --ivory-2:#F1ECE1;

  --ink:#11151A;
  --grey-d:#3E434B;
  --grey-m:#5F656E;
  --grey-l:#666B73;
  --line:#E0DACE;
  --line-2:#EDE8DD;

  --gold:#A17740;
  --gold-l:#C2985C;
  --gold-d:#7A5A2E;
  --gold-t:#F4EBDB;

  --sage:#5F7D66;
  --sage-d:#435C49;
  --sage-t:#E4EDE3;
  --sky:#5B87A4;
  --sky-d:#3F6580;
  --sky-t:#E4EDF3;

  --dsp:'Canela','Instrument Serif',Georgia,serif;
  --ui:'Sohne','Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --mo:'SohneMono','Geist Mono',ui-monospace,monospace;

  --wrap:1240px;
  --pad:56px;
  --gap:14px;
  --r:30px;
  --r2:22px;
  --e:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--canvas)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--ui);font-size:17px;line-height:1.75;color:var(--grey-d);
  background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── frame ───────────────────────────────────────────────── */
.shell{padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap)}
/* the panels live inside <main>, so it needs the same gap — without this
   every section below the hero sits flush against the next */
.shell > main{display:flex;flex-direction:column;gap:var(--gap)}
.panel{border-radius:var(--r);position:relative;overflow:hidden}
/* `clip` rounds the corners the same way but does NOT make a scroll
   container — `hidden` did, and that silently killed every
   position:sticky inside a panel (the whole Who-we-serve stack). */
@supports (overflow:clip){.panel{overflow:clip}}
.panel-white{background:var(--white)}
.panel-ivory{background:var(--ivory)}
.panel-sage{background:var(--sage-t)}
.panel-sky{background:var(--sky-t)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding:112px 0}

/* ── type ────────────────────────────────────────────────── */
.dsp{font-family:var(--dsp);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.d1{font-size:clamp(42px,5.8vw,78px);line-height:1.05;letter-spacing:-.028em}
.d2{font-size:clamp(32px,4.2vw,58px);line-height:1.1}
.dsp em,.dsp .it{font-style:italic;color:var(--gold)}
.ln{display:block}
/* a word's mask: room below for descenders and a hair either side so an
   italic overhang (the f in "first") is never shaved off */
.w{display:inline-block;overflow:hidden;padding:0 .07em .16em;margin:0 -.07em -.16em;vertical-align:top}
.wi{display:inline-block;font-style:inherit}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mo);font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-d);margin-bottom:22px;line-height:1}
.tick{width:22px;height:1px;background:currentColor;flex:none}
.lede{margin-top:22px;font-size:19px;line-height:1.7;color:var(--grey-m);max-width:52ch}
.head{margin-bottom:64px}
.head-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.lede-c{text-align:center;margin-left:auto;margin-right:auto}

/* ── pill buttons (text + circular badge) ────────────────── */
.pill{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border-radius:999px;
  border:1px solid transparent;font-family:var(--ui);font-size:15px;font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;transition:background .32s,color .32s,border-color .32s}
.pill-b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .4s var(--e),background .32s,color .32s}
.pill-b svg{width:17px;height:17px}
.pill:hover .pill-b{transform:translateX(3px)}

.pill-gold{background:var(--gold);color:var(--ink)}
.pill-gold .pill-b{background:var(--ivory);color:var(--gold-d)}
.pill-gold:hover{background:var(--gold-d);color:#fff}

.pill-dark{background:var(--ink);color:#fff}
.pill-dark .pill-b{background:#fff;color:var(--ink)}
.pill-dark:hover{background:#000}
/* Login: a clear colour change on hover and nothing else — it does not
   follow the cursor and its icon does not nudge */
.nav-login{transition:background .35s var(--e),color .35s var(--e)}
.nav-login .pill-b{transition:background .35s var(--e),color .35s var(--e)}
.nav-login:hover{background:var(--gold-l);color:var(--ink)}
.nav-login:hover .pill-b{background:var(--ink);color:#fff;transform:none}

/* the header WhatsApp button answers in WhatsApp's own green */

.pill-ghost{background:rgba(255,255,255,.9);border-color:var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill-ghost .pill-b{background:var(--ink);color:#fff}
.pill-ghost:hover{background:#fff;border-color:var(--gold)}

.pill-wa{background:#fff;color:#0B7A3E;border-color:rgba(11,122,62,.22)}
.pill-wa .pill-b{background:#25D366;color:#04301A}
.pill-wa:hover{border-color:#25D366}
.pill-wide{width:100%;justify-content:space-between;padding-left:28px}



/* ── HERO ────────────────────────────────────────────────── */
/* copy sits on clear sky; the range is a band across the foot of the panel,
   so the trail never runs through the headline */
/* left-aligned editorial hero over a single photograph */
.hero{min-height:min(calc(100vh - 150px),820px);display:flex;flex-direction:column;
  justify-content:center;text-align:left;padding:126px 0 96px;
  background:linear-gradient(180deg,#DCE8F0 0%,#E7EEEF 42%,#F1F4EF 100%)}
/* ── hero: one photograph ────────────────────────────────────
   Full bleed behind the copy. The wash below is what keeps the type
   readable over it; the photograph itself is only eased toward the
   palette, never repositioned by script. */
.range-wrap{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;overflow:hidden}
.hero-shot{width:100%;height:100%;object-fit:cover;object-position:26% 58%;
  display:block;filter:saturate(.82) brightness(1.03)}
/* Two washes on one element. The vertical one settles the photograph into
   the page top and bottom; the horizontal one keeps the copy column on a
   flat light ground and clears by 76%, well before the summit. */
.hl-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(238,242,238,.97) 0%, rgba(238,242,238,.9) 24%,
      rgba(238,242,238,.74) 36%, rgba(238,242,238,.3) 48%, rgba(238,242,238,0) 60%),
    linear-gradient(180deg, rgba(238,242,238,.9) 0%, rgba(238,242,238,.34) 14%,
      rgba(238,242,238,0) 34%, rgba(238,242,238,0) 74%, rgba(238,242,238,.55) 100%)}

.hero-in{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  width:100%;display:grid;grid-template-columns:1fr;gap:48px;align-items:end}
.hero-copy{min-width:0}
.hero .d1{color:var(--ink)}
.hero .d1 .it{color:var(--gold-d);font-style:italic}
/* with the eyebrow gone the line rides higher and its tail crossed dark rock
   near the peak: a narrower measure wraps it before it gets there, and the
   colour is a step deeper than --grey-d as a margin */
.hero-sub{margin:22px 0 0;max-width:40ch;font-size:17.5px;line-height:1.65;color:#2B3037}
.hero-act{margin-top:32px;display:flex;flex-wrap:wrap;gap:13px}
/* the lead and the rotating phrase are one sentence, so they sit a word
   space apart; the flex gap only separates the phrase from the arrow */
#want{gap:0}
#want .pill-b{margin-left:14px}
.want-lead{color:var(--grey-m);white-space:nowrap;margin-right:.3em}
/* the slot is taller than the text so the rotation has room to slide;
   centring the text inside it puts it back on the label's baseline */
.want-slot{display:inline-flex;align-items:center;height:1.25em;overflow:hidden;
  position:relative;flex:1 1 auto;min-width:0}
.want-tx{display:inline-block;white-space:nowrap;line-height:1;color:var(--gold-d)}

/* floating figures over the foot of the panel — three equal, slim glass
   cards: number over label, nothing else */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,262px));gap:14px;
  justify-content:center;margin-top:calc(var(--gap) * -1 - 46px);
  position:relative;z-index:5;padding:0 var(--pad)}
.fl{border-radius:18px;padding:15px 22px 16px;text-align:left;
  box-shadow:0 12px 30px rgba(17,21,26,.08)}
.fl-v{display:block;font-family:var(--dsp);font-weight:400;
  font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.fl-v i{font-style:italic;font-size:.6em;color:var(--gold-d);margin-left:.08em}
.fl-k{display:block;margin-top:8px;white-space:nowrap;font-family:var(--mo);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-d)}
.fl .cnt{font-style:normal;color:inherit;font-size:inherit}

/* ── values strip: liquid glass ──────────────────────────────
   Glass over a flat colour just reads as a flat colour, so the tints
   move *under* it: a blurred band of gold, sage and sky drifting on a
   loop, seen through a milky ivory surface with the same edge light,
   pointer highlight and travelling sheen as every other glass element. */
.tape.glass{padding:19px 0;border-radius:999px;background:rgba(250,247,240,.62)}
.tape > .tape-wash{position:absolute;z-index:0;top:-40%;bottom:-40%;left:0;width:200%;
  pointer-events:none;filter:blur(22px);opacity:.9;
  background:
    radial-gradient(22% 70% at 12% 50%, rgba(194,152,92,.42), transparent 70%),
    radial-gradient(20% 70% at 38% 50%, rgba(95,125,102,.30), transparent 70%),
    radial-gradient(22% 70% at 63% 50%, rgba(91,135,164,.30), transparent 70%),
    radial-gradient(20% 70% at 88% 50%, rgba(194,152,92,.34), transparent 70%);
  background-size:50% 100%;background-repeat:repeat-x;
  animation:tapeWash 38s linear infinite}
@keyframes tapeWash{to{transform:translateX(-50%)}}
.tape-run{display:flex;gap:0;white-space:nowrap;width:max-content;list-style:none;
  margin:0;padding:0}
.tape-run li{display:flex;align-items:center;font-family:var(--dsp);font-size:22px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
/* a gold diamond between the lines, drawn so it never reads as text */
.tape-run li::after{content:"";width:6px;height:6px;margin:0 30px;flex:none;
  background:var(--gold);transform:rotate(45deg);opacity:.75}

/* ── approach: three tinted cards ────────────────────────── */
.tri{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{border-radius:var(--r2);padding:40px 34px 36px}
.tc-gold{background:var(--gold-t)}
.tc-sage{background:var(--sage-t)}
.tc-sky{background:var(--sky-t)}
.tc-ic{display:block;width:52px;height:52px;margin-bottom:28px}
.tc-gold .tc-ic{color:var(--gold-d)}
.tc-sage .tc-ic{color:var(--sage-d)}
.tc-sky .tc-ic{color:var(--sky-d)}
.tc-ic svg{width:100%;height:100%}
.tc h3{font-family:var(--dsp);font-weight:400;font-size:30px;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:14px}
.tc p{font-size:16.5px;line-height:1.72;color:var(--grey-m)}

/* ── services: tabs ──────────────────────────────────────── */
.tp-card{background:var(--ivory);border-radius:16px;padding:26px 24px}
.tp-card h4{font-family:var(--mo);font-size:12.5px;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.tp-card p{font-size:16px;line-height:1.7;color:var(--grey-m)}
.dash{list-style:none}
.dash li{position:relative;padding-left:19px;font-size:16px;line-height:1.85;color:var(--grey-m)}
.dash li::before{content:"";position:absolute;left:0;top:.92em;width:9px;height:1px;background:var(--gold)}

/* ── clients: bento ──────────────────────────────────────── */
.bento{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bx{background:var(--white);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column}
.bx-lead{grid-column:span 2}
.bx-dark{grid-column:span 3;flex-direction:row;background:var(--ink)}
.bx-ph{display:block;overflow:hidden;background:var(--ivory-2)}
.bx-lead .bx-ph{height:212px}
.bx-dark .bx-ph{width:38%;flex:none;height:auto}
.bx-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.bx-in{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.bx-dark .bx-in{padding:38px 40px}
.bx-n{font-family:var(--mo);font-size:12.5px;letter-spacing:.2em;color:var(--gold-d)}
.bx-dark .bx-n{color:var(--gold-l)}
.bx h3{font-family:var(--dsp);font-weight:400;font-size:26px;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);margin:12px 0 14px}
.bx-dark h3{color:#fff;font-size:32px}
.bx-q{font-family:var(--dsp);font-style:italic;font-size:19px;line-height:1.45;
  color:var(--sage-d);margin-bottom:22px}
.bx-dark .bx-q{color:#D8DDE2}
.bx-s,.bx-a{font-size:15.5px;line-height:1.62;color:var(--grey-m);
  padding-top:15px;border-top:1px solid var(--line-2)}
.bx-s{margin-top:auto}
.bx-a{margin-top:15px}
.bx-dark .bx-s,.bx-dark .bx-a{color:#A8ADB4;border-top-color:rgba(255,255,255,.14)}
.bx-s i,.bx-a i{display:block;font-style:normal;font-family:var(--mo);font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grey-l);margin-bottom:7px}
.bx-dark .bx-s i,.bx-dark .bx-a i{color:var(--gold-l)}
.bx-s b{font-weight:500;color:var(--ink)}
.bx-dark .bx-s b{color:#fff}
.right-place{margin-top:64px;text-align:center;font-family:var(--dsp);font-style:italic;
  font-size:clamp(28px,3.6vw,50px);letter-spacing:-.022em;color:var(--sage-d)}

/* ── trust bar ───────────────────────────────────────────── */
.trust{background:var(--ink);padding:54px 0}
.trust-in{display:flex;justify-content:center}
.tr-say{max-width:46ch;text-align:center;text-wrap:balance;font-size:clamp(22px,2.3vw,31px);
  line-height:1.38;letter-spacing:-.012em;color:#fff}
.tr-say em{font-style:italic;color:var(--gold-l)}

/* ── contact ─────────────────────────────────────────────── */
.sec-contact{padding:108px 0 104px}
.ct{display:grid;grid-template-columns:.8fr 1.2fr;align-items:stretch;
  border-radius:28px;overflow:hidden;background:var(--white);
  box-shadow:0 18px 50px rgba(17,21,26,.07)}
/* one card, two panels: the details sit on a tinted glass panel that runs
   the full height of the form, so the column is part of the card rather
   than empty space beside it */
.ct-say{position:relative;display:flex;flex-direction:column;gap:26px;padding:42px 40px 34px;
  --acc:#44708F;--acc-a:#D2E1EC;--acc-b:#A3C1D6;
  background:
    linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.12) 58%),
    radial-gradient(80% 55% at 85% 100%,rgba(194,152,92,.16),transparent 70%),
    linear-gradient(180deg,#E1EBF2,#D4E2EB);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.9),inset 0 1px 0 #fff}
.ct-k{margin:0}
.ct-say .ct-details li{color:var(--grey-d)}
.ct-say .ct-details a{color:var(--grey-d)}
.ct-art{display:block;width:100%;height:auto;max-width:330px;margin-top:auto;align-self:center}
.il.in .il-steam{animation:ilSteam 3.8s ease-in-out 2.4s infinite}
@keyframes ilSteam{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-5px);opacity:.45}}
.ct-details{list-style:none;display:grid;gap:18px}
.ct-details li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--grey-m)}
.ct-sep{margin:0 .45em;color:var(--line)}
/* a number never breaks across lines; if the pair wraps, it wraps at the divider */
.ct-details a[href^="tel:"]{white-space:nowrap}
.ct-details a{color:var(--grey-m);text-decoration:none;transition:color .3s}
.ct-details a:hover{color:var(--gold-d)}
.ct-i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);color:var(--gold-d)}
.ct-i svg{width:17px;height:17px}
.ct-say .pill-wa{margin-top:28px}

.ct-form{padding:42px 42px 36px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.f{margin-bottom:20px;min-width:0}
.f label{display:block;font-family:var(--mo);font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey-l);margin-bottom:9px}
.f .opt{text-transform:none;letter-spacing:.02em}
.f input,.f select,.f textarea{width:100%;background:var(--ivory);border:1px solid transparent;
  border-radius:12px;padding:15px 16px;font-family:var(--ui);font-size:16px;color:var(--ink);
  transition:border-color .3s,background .3s}
.f textarea{resize:vertical;min-height:112px;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:#9BA1A9}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;background:#fff;border-color:var(--gold)}
.f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235F656E' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;padding-right:38px}
.f-check{display:flex;align-items:flex-start;gap:12px;margin:2px 0 24px;cursor:pointer;
  font-size:15px;line-height:1.55;color:var(--grey-m)}
.f-check input{position:absolute;opacity:0;width:0;height:0}
.f-box{flex:none;width:19px;height:19px;border-radius:6px;border:1px solid var(--line);
  background:var(--ivory);margin-top:2px;position:relative;transition:background .25s,border-color .25s}
.f-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--e)}
.f-check input:checked + .f-box{background:var(--gold);border-color:var(--gold)}
.f-check input:checked + .f-box::after{transform:rotate(45deg) scale(1)}
.f-check input:focus-visible + .f-box{outline:2px solid var(--gold);outline-offset:2px}
.f-status{margin-top:14px;font-family:var(--mo);font-size:12.5px;letter-spacing:.08em;color:var(--gold-d)}

/* the gold italic line between the contact heading and its lede */
.ct-kick{margin:16px auto 0;max-width:40ch;text-wrap:balance;font-style:italic;font-size:clamp(21px,2.1vw,28px);
  line-height:1.3;letter-spacing:-.01em;color:var(--gold-d)}
.ct-kick + .lede{margin-top:18px}

/* the registration line under the adviser's name */
.ct-sub{display:block;margin-top:4px;font-style:normal;font-family:var(--mo);
  font-size:12px;letter-spacing:.06em;color:var(--grey-m)}

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:fixed;top:var(--gap);left:var(--gap);right:var(--gap);z-index:120;
  pointer-events:none}
/* three tracks so the dock is centred on the viewport, not on whatever
   the brand and the action happen to measure */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:11px 16px;max-width:var(--wrap);margin:0 auto;pointer-events:auto;
  border:1px solid transparent;border-radius:999px;
  transition:padding .5s var(--e),background .5s var(--e),
             box-shadow .5s var(--e),border-color .5s var(--e)}
/* the auto middle track is already centred between two equal 1fr tracks,
   so the dock needs no justify-self — and a `center` here would survive
   into the mobile rules and shrink-wrap the bar that left/right stretch */
.nav-in .brand{justify-self:start}
.nav-in .pill-dark{justify-self:end;grid-column:3}
/* placed explicitly: on phones the dock is pinned outside this row, and an
   auto-placed Login would slide into the empty centre column */
/* the bar condenses onto itself — it never spans the full frame */
.nav.stuck .nav-in{padding:7px 10px;background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border-color:rgba(255,255,255,.75);box-shadow:0 12px 38px rgba(17,21,26,.10)}
/* the lockup, as large as the bar allows — its tagline is fine print at any
   header size; the footer shows it large enough to read */
.brand-logo{display:block;height:44px;width:auto;transition:height .5s var(--e)}
.nav.stuck .brand-logo{height:38px}
.brand-logo-foot{height:78px;max-width:100%}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}



.burger{display:none;width:42px;height:34px;background:none;border:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .4s var(--e)}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mnav{display:none;position:fixed;top:calc(var(--gap) + 66px);left:var(--gap);right:var(--gap);z-index:119;
  background:var(--white);border-radius:var(--r2);padding:10px 26px 22px;flex-direction:column;
  box-shadow:0 18px 50px rgba(17,21,26,.14)}
.mnav.open{display:flex}
.mnav a{padding:16px 0;border-bottom:1px solid var(--line-2);text-decoration:none;
  font-family:var(--dsp);font-size:28px;color:var(--ink)}
.mnav a:last-child{border-bottom:0}

/* ── footer ──────────────────────────────────────────────── */
.foot{background:var(--ivory);color:var(--grey-d);padding:76px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr .7fr 1.05fr;gap:52px;align-items:start}
.foot-tag{margin:22px 0 26px;font-size:16px;line-height:1.72;color:var(--grey-m);max-width:34ch}
.foot-nav h2,.foot-connect h2{font-family:var(--mo);font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-d);font-weight:400;margin-bottom:10px;
  padding-bottom:14px;position:relative}
.foot-nav h2::after,.foot-connect h2::after{content:"";position:absolute;left:0;bottom:0;
  width:24px;height:1px;background:var(--gold)}
.foot-nav a{display:block;padding:8px 0;font-size:15px;color:var(--grey-m);text-decoration:none;
  transition:color .3s,padding-left .35s var(--e)}
.foot-nav a:hover{color:var(--gold-d);padding-left:6px}
.foot-connect .fc-row{margin-bottom:14px;font-size:15px;line-height:1.62;color:var(--grey-m)}
.foot-connect a{color:var(--grey-m);text-decoration:none;transition:color .3s}
.foot-connect a:hover{color:var(--gold-d)}

.foot-word{margin:62px 0 0;text-align:center;overflow:hidden;pointer-events:none}
.foot-word span{font-family:var(--dsp);font-size:clamp(70px,15.5vw,230px);line-height:.9;
  letter-spacing:.02em;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1px rgba(161,119,64,.42)}

/* two rows, two ends: the line and the social icons, then copyright and credit */
.foot-base{margin-top:44px;border-top:1px solid var(--line);padding-top:28px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 24px}
.fb-end{justify-self:end;text-align:right;display:grid;gap:6px}
.fb-line{font-family:var(--dsp);font-size:19px;color:var(--ink)}
.fb-line em{font-style:italic;color:var(--gold-d)}
.fb-copy{font-size:14px;color:var(--grey-m)}
.fb-by{font-size:14px;color:var(--grey-m)}
.fb-by a{color:var(--gold-d);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s}
.fb-by a:hover{border-bottom-color:var(--gold)}
.fb-social{display:flex;gap:10px;margin-top:22px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--grey-d);border:1px solid var(--line);text-decoration:none;
  transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),transform .35s var(--e)}
.soc svg{width:18px;height:18px}
.soc:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.soc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.foot-comp{margin-top:30px;display:grid;gap:6px}
.foot-arn{font-family:var(--mo);font-size:12.5px;letter-spacing:.1em;color:var(--gold-d);margin-bottom:4px}
.foot-disc{font-size:13.5px;line-height:1.7;color:var(--grey-m);max-width:96ch}

/* ── whatsapp fab ────────────────────────────────────────── */
.wa{position:fixed;right:26px;bottom:26px;z-index:150;display:flex;align-items:center;
  width:56px;height:56px;border-radius:999px;background:#25D366;color:#04301A;text-decoration:none;
  overflow:hidden;box-shadow:0 10px 30px rgba(11,122,62,.32);opacity:0;pointer-events:none;
  transition:opacity .4s,width .45s var(--e)}
.wa.show{opacity:1;pointer-events:auto}
.wa svg{width:28px;height:28px;fill:#04301A;flex:none;margin:14px}
.wa span{white-space:nowrap;font-size:14.5px;font-weight:600;opacity:0;transition:opacity .3s}
.wa:hover{width:250px}
.wa:hover span{opacity:1}

/* ── reveals ─────────────────────────────────────────────── */
[data-fade]{opacity:0}
[data-fl]{opacity:0}
[data-fr]{opacity:1}

/* ── responsive ──────────────────────────────────────────── */
/* a very wide band crops the artwork hard vertically — give it more height
   so less of the mountain is lost */
@media (min-width:1500px){
}
@media (min-width:2000px){
}

@media (max-width:1180px){
  :root{--pad:40px;--r:24px}
  /* brand across the top, then Navigate and Connect side by side */
  .foot-grid{grid-template-columns:.8fr 1fr;gap:40px 44px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:34px;align-items:start}
}
@media (max-width:1024px){
  /* the 3-up bento loses its shape below this — go two-up and let the
     lead and the dark card run full width */
  .tri{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .bx-lead,.bx-dark{grid-column:span 2}
  .bx-dark{flex-direction:column}
  .bx-dark .bx-ph{width:100%;height:220px}
  .ct{grid-template-columns:1fr}
  .ct-say{padding:32px 28px 28px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.9),inset 0 1px 0 #fff}
  .ct-art{max-width:260px}
  .ct-form{padding:32px 26px 30px}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .hero{padding-bottom:340px}
}
@media (max-width:860px){
  :root{--pad:24px;--gap:10px;--r:20px}
    .burger{display:block;margin-left:auto}
  /* Login has no other route on a phone, so it stays — just smaller */
  .nav-login{padding:5px 5px 5px 14px;gap:9px;font-size:13px}
  .nav-login .pill-b{width:30px;height:30px}
  .sec{padding:76px 0}
  .head{margin-bottom:44px}

  /* the range becomes a block under the copy so the trail never crosses the type */
  /* the dock sits below the header on phones, so the hero starts lower */
  .hero{min-height:auto;padding:164px 0 0;justify-content:flex-start}
  .hero-in{order:1;padding-bottom:30px}
  /* the photograph becomes a band under the copy, so nothing sits on top
     of it and the copy-protecting wash comes off */
  .range-wrap{order:2;position:relative;inset:auto;width:100%;height:310px}
  .hero-shot{object-position:50% 58%}
  .hl-scrim{background:linear-gradient(180deg, #EEF2EE 0%,
    rgba(238,242,238,.5) 12%, rgba(238,242,238,.1) 26%, rgba(238,242,238,0) 44%)}
  .figures{grid-template-columns:1fr;gap:10px;margin-top:-34px}
  .tape.glass{padding:15px 0}
  .tape-run li{font-size:18px}
  .tape-run li::after{margin:0 22px}
  .hero-act{gap:11px}
  .hero-act .pill{width:100%;justify-content:space-between;font-size:14px;padding-left:18px;gap:10px}

  .bento{grid-template-columns:1fr}
  .bx-lead,.bx-dark{grid-column:span 1}
      .f2{grid-template-columns:1fr;gap:0}
  .trust-in{flex-direction:column;gap:22px;text-align:center}
  .tr-div{display:none}
  .foot{padding:56px 0 30px}
  .foot-base{grid-template-columns:1fr;gap:16px}
  .fb-end{justify-self:start;text-align:left}
  .wa{right:14px;bottom:14px}
  .wa:hover{width:56px}
  .wa:hover span{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .il .il-steam{animation:none}
  .tape > .tape-wash{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-fade],[data-fl]{opacity:1}
}


/* ============================================================
   LIQUID GLASS
   A frosted pane that actually responds: a pointer-tracked
   specular highlight (the "liquid" part, driven by --mx/--my)
   over a slow sheen that keeps it alive without a cursor.
   ============================================================ */
.glass{position:relative;isolation:isolate;overflow:hidden;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(255,255,255,.3),
             0 8px 32px rgba(17,21,26,.07)}
.glass > *{position:relative;z-index:2}

/* highlight follows the pointer */
.glass::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.85),rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity .5s var(--e)}
.glass:hover::before{opacity:1}

/* slow travelling sheen */
.glass::after{content:"";position:absolute;top:-70%;width:55%;height:240%;z-index:1;
  pointer-events:none;transform:rotate(18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  animation:sheen 11s cubic-bezier(.5,0,.2,1) infinite}
@keyframes sheen{0%{left:-60%}52%{left:130%}100%{left:130%}}


/* ── scroll progress ─────────────────────────────────────── */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.scrollbar span{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--gold-l),var(--gold))}

/* ── photography ─────────────────────────────────────────── */
.bx-ph-sm{height:152px}
.bx-ph{position:relative}
.bx-ph img{height:118%;will-change:transform}

/* ── micro-interactions ──────────────────────────────────── */
.bx{transition:transform .55s var(--e),box-shadow .55s var(--e)}
.bx:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(17,21,26,.11)}
.bx-dark:hover{box-shadow:0 20px 48px rgba(17,21,26,.26)}

.tc{transition:box-shadow .55s var(--e)}
.tc:hover{box-shadow:0 18px 40px rgba(17,21,26,.09)}
.tc-ic{transition:transform .65s var(--e)}
.tc:hover .tc-ic{transform:rotate(-9deg) scale(1.08)}

.tp-card{transition:background .4s,transform .5s var(--e)}
.tp-card:hover{background:var(--gold-t);transform:translateY(-3px)}

.ct-details li{transition:transform .4s var(--e)}
.ct-details li:hover{transform:translateX(4px)}
.ct-i{transition:background .35s,color .35s,transform .5s var(--e)}
.ct-details li:hover .ct-i{background:var(--gold);color:#fff;transform:scale(1.08)}

.fl{transition:box-shadow .55s var(--e)}
.fl:hover{box-shadow:0 18px 38px rgba(17,21,26,.12)}


@media (prefers-reduced-motion:reduce){
  .glass::after{animation:none}
  .bx:hover,.tc:hover,.fl:hover,.tp-card:hover{transform:none}
}


/* ============================================================
   AIRSIDE-STYLE DOCK, FOCUS LIST AND HALFTONE
   ============================================================ */

/* ── header: brand + one action ──────────────────────────── */
.nav-in{justify-content:space-between}
.nav-in .brand{margin-right:auto}

/* ── the dock: pinned bottom-centre, opens on load ───────── */
.dock{display:flex;align-items:center;gap:5px;
  padding:5px;border-radius:999px;background:rgba(14,18,23,.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 34px rgba(9,12,16,.26),inset 0 1px 0 rgba(255,255,255,.14)}
.dock-mk{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#12161B}
.dock-mk svg{width:18px;height:18px}

/* the items are what expands */
.dock-items{position:relative;display:flex;align-items:center;gap:2px;overflow:hidden;
  max-width:0;opacity:0;
  transition:max-width 1s var(--e),opacity .6s ease .15s}
.dock.open .dock-items{max-width:560px;opacity:1}
.dock-items a{position:relative;z-index:2;text-decoration:none;white-space:nowrap;
  font-family:var(--ui);font-size:13.5px;font-weight:500;color:#B9BEC5;
  padding:9px 15px;border-radius:999px;transition:color .3s}
.dock-items a:hover{color:#fff}
.dock-items a.on{color:#12161B}
.dk-ind{position:absolute;top:0;bottom:0;left:0;width:0;z-index:1;border-radius:999px;
  background:var(--gold-l);opacity:0;
  transition:transform .55s var(--e),width .55s var(--e),opacity .3s}
.dk-ind.ready{opacity:1}

.dock-cta{flex:none;text-decoration:none;padding:9px 17px;border-radius:999px;
  background:#fff;color:#12161B;font-family:var(--ui);font-size:13.5px;font-weight:600;
  transition:background .3s,transform .3s var(--e)}
.dock-cta:hover,.dock-cta.on{background:var(--gold-l)}
.dock-cta:hover{transform:translateY(-1px)}

/* ── halftone on the distant range ───────────────────────── */

/* ── services: stacked focus list ────────────────────────── */

.tpanel{grid-template-columns:1fr;gap:30px;padding:40px}

@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:34px;align-items:start}
}
@media (max-width:1024px){
  }
@media (max-width:860px){
  .dock{position:fixed;z-index:140;top:calc(var(--gap) + 60px);left:var(--gap);right:var(--gap);
    bottom:auto;justify-content:space-between;max-width:calc(100vw - var(--gap) * 2)}
  .dock-items{gap:0}
  .dock.open .dock-items{max-width:none;flex:1;justify-content:space-around}
  .dock-items a{padding:10px 8px;font-size:12.5px}
  .dock-mk{display:none}
  .dock-cta{padding:9px 15px;font-size:12.5px}
}


/* ============================================================
   SERVICES — pinned horizontal track
   Four panels slide sideways while the section holds; the tab
   bar stays put and tracks progress. Vertical stacking is the
   next section's job, so these two never feel like one long
   pinned corridor.
   ============================================================ */
.hpin{position:relative;overflow:hidden;padding-top:12px}
/* Everything from here to the panel's last line has to fit between the
   header and the bottom of the screen while the section is pinned, so the
   vertical rhythm is measured in vh and tightens on a short laptop. */
.hbar{display:flex;gap:6px;position:relative;padding-bottom:12px;
  margin-bottom:clamp(15px,2.5vh,28px);border-bottom:1px solid var(--line)}
.hb{position:relative;z-index:2;flex:1;padding:12px 10px;border:0;background:none;cursor:pointer;
  text-align:center;font-family:var(--ui);font-size:15px;font-weight:500;color:var(--grey-m);
  border-radius:999px;transition:color .4s var(--e)}
.hb:hover{color:var(--ink)}
.hb.is-on{color:var(--ink)}
/* The pill tracks scroll progress, so it glides between tabs rather than
   jumping when the active index flips — and it carries the colour of the
   slide it is sitting on, blended across the gap as it travels.
   light.js writes --tabc; the white here is only the fallback. */
.hb-ind{position:absolute;z-index:1;top:0;left:0;width:0;height:calc(100% - 13px);
  border-radius:999px;background:var(--tabc,var(--white));opacity:0;
  box-shadow:0 6px 18px rgba(17,21,26,.14);transition:opacity .4s}
.hb-ind.ready{opacity:1}
/* the label only goes white once the pill is confirmed behind it, so a JS
   failure can never leave white text on the bare ivory bar */
.hb-ind.ready ~ .hb.is-on{color:#fff}
.hb-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.hb-prog i{display:block;height:100%;width:25%;background:var(--gold);border-radius:2px}

.htrack{display:flex;width:max-content;will-change:transform}
.hp{position:relative;overflow:hidden;flex:0 0 calc(100vw - var(--gap) * 2);display:grid;
  grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  min-height:calc(100vh - 220px);
  padding:clamp(24px,4vh,44px) max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)))}
.hp-tx{position:relative;z-index:2;min-width:0;will-change:transform}
/* an outsized numeral behind the copy, drifting at its own rate */
.hp-ghost{position:absolute;z-index:0;right:4vw;bottom:-6vh;pointer-events:none;
  font-family:var(--dsp);font-size:34vh;line-height:.8;color:var(--ink);opacity:.045;
  will-change:transform}
.hp-n{font-family:var(--mo);font-size:12.5px;letter-spacing:.2em;color:var(--gold-d)}
.hp-tx h3{font-size:clamp(28px,3.2vw,44px);line-height:1.12;margin:11px 0 13px;max-width:16ch}
.hp-lede{font-size:17px;line-height:1.68;color:var(--grey-m);max-width:46ch;
  margin-bottom:clamp(16px,2.6vh,32px)}
.hp-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:clamp(18px,3vh,34px)}
.hp-cols h4{font-family:var(--mo);font-size:12.5px;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:9px}
.hp-cols p{font-size:15.5px;line-height:1.62;color:var(--grey-m)}
.hp-ph{position:relative;z-index:1;display:grid;place-items:center;border-radius:var(--r2);
  overflow:hidden;aspect-ratio:440 / 340;padding:4%;will-change:transform;
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(17,21,26,.06)}

/* ── the four service illustrations ──────────────────────────
   Line drawings in the panel's own accent. Each draws itself in the
   first time its panel is in view, then one small element keeps moving.
   Nothing is hidden unless the script has marked the drawing "pre", so
   with no JavaScript they simply appear, finished. */
.hp-gold{--acc:#A17740;--acc-a:#EDDCBD;--acc-b:#DDBF8C}
.hp-sage{--acc:#4F6E57;--acc-a:#D5E3D4;--acc-b:#AFC8B4}
.hp-sky{--acc:#44708F;--acc-a:#D2E1EC;--acc-b:#A3C1D6}
.hp-ivory{--acc:#8A6432;--acc-a:#EAE1CE;--acc-b:#D8C6A0}
.il{width:100%;height:100%;overflow:visible}
.il .s{fill:none;stroke:#2B3037;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.il .thin{stroke:#8A9097;stroke-width:1.2}
.il .acc{fill:none;stroke:var(--acc);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.il .thinacc{stroke-width:1.8}
.il .wline{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.il .a{fill:var(--acc-a)}
.il .a2{fill:var(--acc-b)}
.il .gd{fill:#D9B982}
.il .gdfill{fill:#A17740}
.il .lf{fill:#B7CDB9}
.il .lf2{fill:#C9DACA}
.il .wh{fill:#fff}
.il .dot{fill:#fff;stroke:var(--acc);stroke-width:2.4}

.il.pre .dr{stroke-dasharray:1;stroke-dashoffset:1}
.il.pre .fi{fill-opacity:0}
.il.pre g.fi{opacity:0}
.il.pre.in .dr{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--e) var(--d,0s)}
.il.pre.in .fi{fill-opacity:var(--fo,1);transition:fill-opacity .9s var(--e) calc(var(--d,0s) + .15s)}
.il.pre.in g.fi{opacity:1;transition:opacity .9s var(--e) var(--d,0s)}

/* one living detail per drawing, once it has finished drawing */
.il-sway,.il-pulse,.il-bob{transform-box:fill-box}
.il-sway{transform-origin:50% 100%}
.il-pulse{transform-origin:50% 50%}
.il.in .il-sway{animation:ilSway 4.6s ease-in-out 2.4s infinite}
.il.in .il-pulse{animation:ilPulse 3.2s ease-in-out 2.4s infinite}
.il.in .il-bob{animation:ilBob 3.6s ease-in-out 2.4s infinite}
@keyframes ilSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes ilPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ilBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .il.pre .dr{stroke-dashoffset:0}
  .il.pre .fi{fill-opacity:var(--fo,1)}
  .il.pre g.fi{opacity:1}
  .il .il-sway,.il .il-pulse,.il .il-bob{animation:none}
}

/* one accent tint per panel, the way the reference colours each step */
.hp-gold{background:var(--gold-t)}
.hp-sage{background:var(--sage-t)}
.hp-sky{background:var(--sky-t)}
.hp-ivory{background:var(--ivory-2)}

/* ── the CTA break between the two pinned sections ───────── */
.ctabreak{background:var(--ink);padding:104px 0;text-align:center}
.cb-glow{position:absolute;z-index:0;left:50%;top:50%;width:62vw;max-width:820px;aspect-ratio:1;
  margin:-31vw 0 0 -31vw;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(194,152,92,.30),rgba(194,152,92,.10) 55%,transparent)}
@media (min-width:1323px){.cb-glow{margin:-410px 0 0 -410px}}
.ctab-in{position:relative;z-index:1}
.ctab-in{display:flex;flex-direction:column;align-items:center}
.ctabreak .eyebrow{color:var(--gold-l)}
.ctabreak .d2{color:#fff}
.ctabreak .d2 em{color:var(--gold-l)}
.ctab-lede{margin:20px auto 0;max-width:52ch;text-wrap:balance;text-align:center;color:#C4C9CF}
.ctab-act{margin-top:38px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ── CLIENTS — stacking cards ────────────────────────────────
   Each card sticks 12px lower than the one before, so the deck
   under the top card stays visible as an edge. The scrub in
   light.js only dims and shrinks; the stacking itself is CSS,
   which keeps it correct even if the JS never runs. */
.stackable{display:block;padding-bottom:4vh}
.stackable .bx{position:sticky;top:calc(var(--gap) + 84px + var(--i,0) * 12px);
  min-height:min(74vh,680px);
  box-shadow:0 -8px 30px rgba(17,21,26,.06);
  transform-origin:50% 0%;
  /* no CSS transition here — the scrub writes transform every frame,
     and a transition on top of that turns the stack to treacle */
  transition:none}
.stackable .bx:hover{box-shadow:0 -8px 30px rgba(17,21,26,.06)}
/* A card that has been covered recedes behind a veil rather than going
   translucent — fading the element itself let the card underneath read
   straight through it, and two sets of headings overlapped. */
.stackable .bx::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;background:var(--sage-t);opacity:var(--veil,0)}
/* .bento sets a 20px grid gap; inside a card that gap became a seam of
   panel colour between the photograph and the copy. */
.stackable .bx{grid-column:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  margin-bottom:30px;background:var(--white)}
.stackable .bx-ph{height:auto;overflow:hidden}
/* max-width:100% in the reset silently clamps these to 100% while the -6%
   offset stays, which leaves the cell's own background showing down the
   right edge. Both oversized photos need the opt-out. */
.stackable .bx-ph img{height:112%;width:112%;max-width:none;margin:-6% 0 0 -6%}
.stackable .bx-in{will-change:transform}

/* ── focus on the live card ──────────────────────────────────
   While the stack is running, the section behind it recedes: a vignette
   deepens the panel toward its edges and the heading steps back, so the
   card in play is the brightest thing on the screen. Nothing goes dark —
   the middle of the vignette stays clear, which is where the card sits. */
#clients .wrap{position:relative;z-index:2}
.cl-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--focus,0);
  background:radial-gradient(116% 74% at 50% 46%,
    rgba(17,21,26,0) 30%, rgba(17,21,26,.10) 62%, rgba(17,21,26,.30) 100%)}
#clients .head{opacity:calc(1 - var(--focus,0) * .82)}
/* box-shadow is transitioned, not scrubbed — one card is live at a time,
   so this changes about six times in the whole section rather than 60/sec */
.stackable .bx{transition:box-shadow .65s var(--e)}
/* the glow has to read on every side: the card above it is veiled and the
   one below has not arrived, so a shadow that only fell downwards would
   spend most of its life hidden under the next card */
.stackable .bx.is-live{box-shadow:0 0 130px -12px rgba(161,119,64,.62),
  0 30px 80px -30px rgba(17,21,26,.34),
  0 0 0 1px rgba(161,119,64,.16)}
.stackable .bx-in{padding:52px 54px}
.stackable .bx h3{font-size:clamp(28px,3.2vw,44px);margin:14px 0 18px}
.stackable .bx-q{font-size:clamp(19px,1.9vw,25px);margin-bottom:30px}
.stackable .bx-s,.stackable .bx-a{font-size:16.5px}


/* ── responsive for the two scroll sections ───────────────────
   These must come last: the base rules above are appended after
   the earlier media blocks, so anything declared up there loses. */
@media (max-width:1024px){
  /* the horizontal track becomes a native snap carousel, and the stack
     falls back to a grid — pinned scroll-jacking fights touch scrolling */
  .hpin{overflow:visible;padding-top:0}
  /* the tab bar stays on touch screens: four labels up front are the clearest
     sign there are four panels, and it follows the swipe as you go */
  .hbar{gap:2px;margin-bottom:18px;padding-bottom:10px}
  .hb{padding:10px 4px;font-size:14px}
  .hb-ind{height:calc(100% - 11px)}
  .htrack{width:auto;gap:16px;padding:0 6vw 6px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x mandatory;scroll-padding:0 6vw;-webkit-overflow-scrolling:touch}
  .htrack::-webkit-scrollbar{display:none}
  .hp{flex:0 0 84vw;grid-template-columns:1fr;gap:22px;min-height:0;align-content:start;
    padding:26px 24px 28px;border-radius:var(--r2);scroll-snap-align:start}
  .hp-ghost{display:none}
  .hp-tx,.hp-ph,.hp-ph img,.il-bg{transform:none!important}
  .hp-cols{grid-template-columns:1fr;gap:20px}
  /* the drawing leads each card on a phone, so the topic reads before the text */
  .hp-ph{order:-1;aspect-ratio:440 / 300}

  .stackable{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .stackable .bx{position:static;top:auto;min-height:0;box-shadow:none;
    grid-template-columns:1fr;margin-bottom:0;transform:none!important;opacity:1!important}
  .stackable{padding-bottom:0}
  .stackable .bx-in{transform:none!important;opacity:1!important}
  .stackable .bx::after{display:none}
  .cl-veil{display:none}
  #clients .head{opacity:1}
  .stackable .bx.is-live{box-shadow:none}
  .stackable .bx-in{padding:28px 28px 30px}
  .stackable .bx-ph{height:200px}
  .stackable .bx h3{font-size:26px;margin:12px 0 14px}
  .stackable .bx-q{font-size:19px;margin-bottom:22px}

  .ctabreak{padding:76px 0}
}
@media (max-width:860px){
  .stackable{grid-template-columns:1fr}
  /* narrow enough that a sliver of the next card always shows at the edge */
  .hp{flex:0 0 80vw}
  .hb{font-size:13px}
}

/* ============================================================
   TESTIMONIALS — two rows drifting in opposite directions
   No client photographs, so each card carries an initials mark
   in one of the three brand tints. The edges fade out so the
   rows read as continuous rather than cut off at the frame.
   ============================================================ */
.tm-head{position:relative}

/* Glass needs something behind it to read as glass. Soft washes of the
   three brand tints sit under the rows, fixed in place, so every card
   carries a different blend of colour as it drifts across them. */
#voices > .wrap,.tm-rows{position:relative;z-index:1}
#voices::before{content:"";position:absolute;z-index:0;left:0;right:0;top:34%;bottom:4%;
  pointer-events:none;filter:blur(46px);opacity:.95;
  background:
    radial-gradient(28% 46% at 16% 32%, rgba(194,152,92,.46), transparent 70%),
    radial-gradient(26% 44% at 46% 70%, rgba(95,125,102,.36), transparent 70%),
    radial-gradient(28% 46% at 78% 30%, rgba(91,135,164,.40), transparent 70%),
    radial-gradient(22% 40% at 94% 78%, rgba(194,152,92,.32), transparent 70%)}

.tm-rows{display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tm-row{overflow:hidden}
/* the trailing padding equals the gap, so a half-width shift lands exactly
   on the first duplicate and the loop has no hitch */
.tm-track{display:flex;gap:14px;width:max-content;padding:10px 14px 16px 0;will-change:transform}
.tm-card{position:relative;flex:0 0 340px;margin:0;display:flex;flex-direction:column;gap:16px;
  padding:22px 22px 18px;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.42) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),
             0 8px 26px rgba(17,21,26,.06);
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
/* the specular sweep across the top-left of the pane */
.tm-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 34%)}
.tm-card > *{position:relative}
.tm-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 16px 36px rgba(17,21,26,.10)}
.tm-card blockquote{margin:0}
.tm-card blockquote p{font-family:var(--dsp);font-size:16px;line-height:1.55;
  letter-spacing:-.004em;color:var(--ink)}
.tm-card figcaption{margin-top:auto;display:flex;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid rgba(17,21,26,.07)}
.tm-mono{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mo);font-size:11px;letter-spacing:.06em}
.tm-gold{background:var(--gold-t);color:var(--gold-d)}
.tm-sage{background:var(--sage-t);color:var(--sage-d)}
.tm-sky{background:var(--sky-t);color:var(--sky-d)}
.tm-name{font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink)}

/* reduced motion: nothing moves — each row becomes a strip you scroll yourself */
.tm-static .tm-rows{-webkit-mask-image:none;mask-image:none}
.tm-static .tm-row{overflow-x:auto;padding:0 var(--pad);scroll-snap-type:x mandatory}
.tm-static .tm-card{scroll-snap-align:start}
.tm-static 
@media (max-width:860px){
  .tm-card{flex-basis:280px;padding:18px 18px 16px;gap:14px}
  .tm-card blockquote p{font-size:15px}
  .tm-rows{gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .tm-track{gap:12px;padding-right:12px}
}

/* Reduced motion on a desktop: the track is not pinned, so without this the
   panels past the first would sit off to the right with no way to reach them.
   It becomes the same scroll-and-snap carousel phones get. */
@media (prefers-reduced-motion:reduce) and (min-width:1025px){
  .hpin{overflow:visible}
  .htrack{width:auto;gap:16px;padding:0 var(--pad) 6px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--pad)}
  .hp{flex:0 0 min(1120px,88vw);min-height:0;border-radius:var(--r2);scroll-snap-align:start}
}

/* the new card photographs keep faces in frame when a phone crops them wide */
.stackable .bx-ph img{object-position:50% 30%}
/* the footer wordmark rises letter by letter */
.fw-l{display:inline-block;will-change:transform}
/* on a phone the drawing would only push the form further down */
@media (max-width:860px){ .ct-art{display:none} }

/* ============================================================
   v21
   ============================================================ */
/* the mark sits in its own copper on an ivory disc — recolouring a logo to
   suit a background is the one thing a logo should never do */
.dock-mk{background:var(--ivory)}
.dock-mk img{width:20px;height:20px;display:block}

/* ── buttons change colour on hover; they no longer move ─────
   The magnetic pull, the arrow nudge and the small lifts are gone. */
.pill{transition:background-color .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.pill .pill-b{transition:background-color .35s var(--e),color .35s var(--e)}
.pill:hover .pill-b{transform:none}
.pill-ghost:hover{background:var(--gold-t);border-color:var(--gold)}
.pill-wa:hover{background:#25D366;color:#04301A;border-color:#25D366}
.pill-wa:hover .pill-b{background:#04301A;color:#25D366}
.dock-cta:hover{transform:none}
.soc:hover{transform:none}

/* ── Who We Serve: the closing lines, readable ───────────────
   They sat in the card's bottom 50px — where the next card's shadow falls
   and where that card starts covering them as you scroll. Darker text,
   more room beneath, and a lighter shadow from the incoming card. */
.stackable .bx-s,.stackable .bx-a{color:var(--grey-d)}
.stackable .bx-s i,.stackable .bx-a i{color:var(--grey-m)}
@media (min-width:1025px){ .stackable .bx-in{padding-bottom:88px} }

/* card 05: the moments that bring people to this card */
.bx-ev{list-style:none;margin:-8px 0 26px;padding:0;display:flex;flex-wrap:wrap;row-gap:4px;
  font-family:var(--mo);font-size:12px;letter-spacing:.06em;color:var(--gold-d)}
/* the dot trails each item, so a wrapped line ends on "Sale \00B7" rather
   than the next line opening with a stray dot */
.bx-ev li:not(:last-child)::after{content:"\00B7";margin:0 .6em;color:var(--gold)}

/* form: the honeypot is off-screen for people, visible only to bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── the thank-you popup ─────────────────────────────────── */
/* margin:auto is what centres a modal dialog — the page's `* { margin:0 }` reset
   had removed it, leaving the popup pinned to the top-left corner */
.thanks{margin:auto;max-height:calc(100vh - 32px);border:0;padding:0;border-radius:26px;width:min(440px,calc(100vw - 32px));
  background:var(--white);color:var(--ink);box-shadow:0 30px 80px rgba(17,21,26,.25)}
.thanks::backdrop{background:rgba(17,21,26,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.thanks-in{padding:40px 34px 32px;text-align:center;display:grid;justify-items:center;gap:12px}
.thanks-mk{width:64px;height:64px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;margin-bottom:6px}
.thanks-mk img{width:30px;height:30px;display:block}
.thanks h2{font-size:29px;line-height:1.2;letter-spacing:-.015em;font-weight:400}
.thanks p{font-size:17px;color:var(--grey-d);margin-bottom:12px}
@media (max-width:860px){ .brand-logo{height:36px} .nav.stuck .brand-logo{height:34px} .brand-logo-foot{height:60px} }