/* ══════════════════════════════════════════════════════════════════════════
   SmartIndia.ai — design system derived from the logo
   ──────────────────────────────────────────────────────────────────────────
   Palette source : tricolour wordmark (saffron / white / green),
                    navy Ashoka Chakra, antique gold, black field
   Geometry source: gopuram tiers, dome + iwan arches, 24-spoke radial
   Type source    : serif wordmark  +  wide-tracked sans tagline
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* — the two theme accents —
       Apricot and Pistachio in light, Antique Gold and Muted Pistachio in
       dark. Everything warm on the page is mixed toward the first and
       everything green toward the second, so the two themes are the same
       design wearing a different weight rather than two designs. — */
  --apricot:    #FFD8B5;
  --pistachio:  #D8E8B8;

  /* — channels —
       The sheet below writes its whites, shadows and golds through these
       four channels instead of naming them, so a theme is a dozen lines
       here rather than two hundred edits down the file. `-k` scales the
       alpha: a white inset that reads as a highlight on paper has to fall
       to a tenth of itself before it reads as one on a dark ground. — */
  --c-lift:      255,255,255;    /* highlights: the light on a surface */
  --lift-k:      1;
  --c-shade:     25,28,23;       /* cool shadow */
  --c-shade-w:   58,42,16;       /* warm shadow */
  --shade-k:     1;
  --c-gold-fill: 220,168,71;     /* gold as a filled surface */
  --c-gold-ink:  126,82,16;      /* gold as a written line or letter */
  --c-green:     19,136,8;
  --c-saffron:   240,130,33;
  --c-navy:      46,79,176;

  /* — ground: warm paper, mixed toward Apricot and taken a step down from
       the old near-white so the glass and the gold have something to sit
       against. The mark keeps its own gold, tricolour and navy. — */
  --ink:        #EFE1D0;
  --ink-2:      #E7D6C1;
  --surface:    #FDF6EE;
  --surface-2:  #F8EEE1;
  --surface-3:  #E0CDB4;

  /* — gold. --gold-hi is the *darkest* of the three: it is what figures and
       accents are written in, so on paper it has to be the heaviest. — */
  --gold-hi:    #7E5210;
  --gold:       #9C6C1B;
  --gold-mid:   #B88230;
  --gold-deep:  #533109;
  /* the bright metal, for surfaces filled with gold rather than written in it */
  --gold-fill-hi: #F6D492;
  --gold-fill:    #DCA847;

  /* — tricolour. --green-brand is the logo's own green and is never
       re-weighted; --green is the page's, free to lean toward Pistachio. — */
  --saffron:    #E2761B;
  --saffron-dp: #B45516;
  --green:      #2E7D14;
  --green-brand:#138808;
  --navy:       #1B3A8F;
  --navy-lit:   #2E4FB0;

  /* — text — */
  --text:       #191C17;
  --text-2:     #3A4036;
  --muted:      #5C6150;   /* the ground moved down, so the secondary text has
                              to move with it: at the old weight this fell to
                              3.99:1 against the paper, under the 4.5 floor */
  --faint:      #676C5B;   /* real content still sits at this weight (client
                              names, domains), so it clears 4.5:1 too */

  /* — structure — */
  --line:       rgba(var(--c-gold-ink),.26);
  --line-soft:  rgba(var(--c-shade),.12);
  --glass:      rgba(var(--c-lift),calc(.62 * var(--lift-k)));

  /* — liquid glass —
     Four ingredients, always used together, so every pane in the UI is cut
     from the same material:
       film   the body of the glass — translucent, never a solid
       sheen  a steep diagonal highlight: the light *on* the surface
       edge   inset hairlines — bright on top where light lands, a soft dark
              line below where the pane's own thickness casts into itself
       lift   the shadow that puts the pane above the page instead of in it
     Written through the channels above, so the same glass darkens with the
     theme instead of needing a second set of definitions.
     lens/lens-sm are the backdrop blurs. They are expensive, so they go on
     floating and interactive surfaces only; the dense editorial grids take
     film + sheen + edge and skip the blur (see §16). */
  --glass-film:    rgba(var(--c-lift),calc(.58 * var(--lift-k)));
  --glass-film-2:  rgba(var(--c-lift),calc(.72 * var(--lift-k)));
  --glass-well:    rgba(var(--c-shade),calc(.045 * var(--shade-k)));
  --glass-sheen:   linear-gradient(157deg,
                     rgba(var(--c-lift),calc(.80 * var(--lift-k))) 0%,
                     rgba(var(--c-lift),calc(.34 * var(--lift-k))) 32%,
                     rgba(var(--c-lift),0)                          58%,
                     rgba(var(--c-lift),calc(.44 * var(--lift-k))) 100%);
  --glass-edge:    inset 0 1px 0 rgba(var(--c-lift),calc(.90 * var(--lift-k))),
                   inset 0 -1px 0 rgba(var(--c-shade),calc(.05 * var(--shade-k))),
                   inset 0 0 34px rgba(var(--c-lift),calc(.35 * var(--lift-k)));
  --glass-edge-hi: inset 0 1px 0 rgba(var(--c-lift),calc(1 * var(--lift-k))),
                   inset 0 -1px 0 rgba(var(--c-shade),calc(.07 * var(--shade-k))),
                   inset 0 0 40px rgba(var(--c-lift),calc(.55 * var(--lift-k)));
  --glass-lift:    0 22px 44px -26px rgba(var(--c-shade-w),calc(.26 * var(--shade-k))),
                   0 2px 8px rgba(var(--c-shade-w),calc(.07 * var(--shade-k)));
  /* Washes that have to *invert* rather than dim. On paper the hero copy sits
     on a pool of page colour and the menu is a white sheet; on a dark ground
     both become pools of shade, so scaling their alpha would only make them
     vanish. These are the only backgrounds stated twice. */
  --hero-veil:
    radial-gradient(58% 50% at 30% 48%, rgba(var(--c-lift),.80), transparent 70%),
    linear-gradient(180deg,rgba(var(--c-lift),.62) 0%,transparent 30%);
  --hero-veil-m:
    linear-gradient(180deg,rgba(var(--c-lift),.88) 0%,rgba(var(--c-lift),.62) 46%,rgba(var(--c-lift),.22) 72%);
  --sheet: rgba(var(--c-lift),.88);

  /* — the logo plate —
     The mark is drawn for a dark ground (white wordmark, pale tagline), so
     where the full lockup lands it is handed that ground back rather than
     being recoloured — one master, no second copy to keep in sync. The nav
     is the exception: it carries the wordmark alone, which is small enough
     to re-ink instead (see .nav__logo).
     The plate is mixed from the palette's own olive-black instead of the
     old blue-black it arrived with, so on paper it reads as the page's own
     deepest shade and on the dark ground it is the footer one step up
     rather than a card pasted onto it. */
  --plate:      linear-gradient(158deg,#20241A 0%,#0C0F07 100%);
  --plate-edge: rgba(var(--c-gold-fill),.16);
  --plate-lift: 0 16px 38px -22px rgba(58,42,16,.42);
  --plate-halo: 0 0 0 6px rgba(var(--c-gold-fill),.05);

  /* — footer ground — inverts rather than dims, like the washes above */
  --foot-bg:   linear-gradient(180deg,var(--ink-2) 0%,#EDE8DB 100%);
  --foot-dim:  var(--faint);

  --glass-lens:    blur(22px) saturate(1.35);
  --glass-lens-sm: blur(12px) saturate(1.2);

  /* — type — */
  --serif: "Cormorant Garamond", "Iowan Old Style", Garamond, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* — rhythm — */
  --gut: clamp(20px, 5vw, 72px);
  --sect: clamp(88px, 12vh, 168px);
  /* Glass is a different material from the editorial grid and carries its own
     geometry: panes and controls are cut with a radius, while the structural
     grids (services, steps, stats, wall, index) keep the logo's hard corners
     and get the glass film without the radius. */
  --r-glass: clamp(14px,1.4vw,20px);
  --r-ctrl: 12px;
  --r-pill: 999px;

  /* — motion — */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK
   ──────────────────────────────────────────────────────────────────────────
   Only the palette and the four channels are restated; every rule in the
   sheet below is written through them and follows without being touched.

   There is deliberately no prefers-color-scheme block: the inline script in
   <head> resolves the system preference and stamps data-theme before first
   paint, and the page's content is rendered from data.js, so a visitor with
   no JS has no page to theme in the first place.
   ────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --apricot:    #E8B98C;
  --pistachio:  #A9C489;

  --c-lift:      232,240,214;    /* a faintly pistachio white, so even the
                                    highlights carry the palette */
  --lift-k:      .085;
  --c-shade:     0,0,0;
  --c-shade-w:   0,0,0;
  --shade-k:     2;
  --c-gold-fill: 116,97,58;      /* Antique Gold */
  --c-gold-ink:  205,178,120;    /* gold has to be written light on a dark
                                    ground — the inverse of the paper theme */
  --c-green:     110,140,85;
  --c-saffron:   238,148,69;
  --c-navy:      110,138,216;

  --ink:        #12140E;
  --ink-2:      #171A11;
  --surface:    #1C2016;
  --surface-2:  #22271A;
  --surface-3:  #2C3222;

  --gold-hi:    #DCC08A;
  --gold:       #C2A468;
  --gold-mid:   #A78C50;
  --gold-deep:  #74613A;
  --gold-fill-hi: #E9D3A0;
  --gold-fill:    #74613A;

  --saffron:    #EE9445;
  --saffron-dp: #C9762F;
  --green:      #6E8C55;
  --green-brand:#4F6040;         /* Muted Pistachio */
  --navy:       #4A6BC8;
  --navy-lit:   #6E8AD8;

  --text:       #EDEBDF;
  --text-2:     #CBC9BA;
  --muted:      #9A9A88;
  --faint:      #87877A;

  --line-soft:  rgba(var(--c-lift),.16);
  --hero-veil:
    radial-gradient(58% 50% at 30% 48%, rgba(0,0,0,.60), transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.52) 0%,transparent 30%);
  --hero-veil-m:
    linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.60) 46%,rgba(0,0,0,.26) 72%);
  --sheet: rgba(14,16,11,.93);
  --glass-well: rgba(0,0,0,.30);

  /* On the dark ground the plate has nothing to separate itself from, so it
     stops trying: it sits a single step above the footer, carries a warmer
     gold hairline to say it is still the brand plate, and drops the paper
     theme's cast shadow for a soft one that only deepens the corner. The
     mark keeps the dark ground it was drawn for either way. */
  --plate:      linear-gradient(158deg,#242A1B 0%,#141810 100%);
  --plate-edge: rgba(var(--c-gold-fill),.34);
  --plate-lift: 0 18px 40px -26px rgba(0,0,0,.8);
  --plate-halo: 0 0 0 6px rgba(var(--c-gold-fill),.05);

  /* the footer lightens downward on paper; on the dark ground it has to do
     the same in the other direction rather than run off to a paper white */
  --foot-bg:   linear-gradient(180deg,var(--ink-2) 0%,#20261A 100%);
  /* --faint is tuned for real content on the page ground. The footer's
     tagline and colophon sit on the darkest band in the site at 12–13px
     with wide tracking, and at that weight they were dropping out — they
     are carried at --muted here so they stay legible. */
  --foot-dim:  var(--muted);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--text-2);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-booting{ overflow:hidden; }
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--saffron); color:#0A0A0A; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}

/* ─────────────────────────── the logo itself ─────────────────────────── */
.si-logo{ width:100%; height:auto; overflow:visible; }
.si-logo .si-wm{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-1px;
}
.si-logo .si-tagline text{
  font-family:var(--sans);
  font-weight:400;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.  3D LOGO REVEAL
   ══════════════════════════════════════════════════════════════════════════ */
/* The intro keeps the logo's own black field. The mark was drawn for that
   ground — bright gold on near-black, white wordmark — so rather than
   restating every colour inside here, the reveal re-declares the handful of
   tokens that flip between the two worlds. Everything nested below it (the
   outro line, the rules, the skip control) then reads light-on-dark exactly
   as it did before the page went to paper. */
.reveal{
  position:fixed; inset:0; z-index:9000;
  --text:    #F4F1EA;
  --text-2:  #C9C4B8;
  --muted:   #8E93A0;
  --gold-hi: #FFE7B0;
  --gold:    #E3B25B;
  --saffron: #FF9933;
  --green:   #1FA83A;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(var(--c-gold-fill),.10) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% -10%, rgba(var(--c-navy),.14) 0%, transparent 62%),
    #010204;
  overflow:hidden;
  will-change:opacity, clip-path;
}
.reveal__canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* faint horizon band — the ground the mark rises off during the intro */
.reveal__horizon{
  position:absolute; left:0; right:0; top:58%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--c-gold-fill),.42),transparent);
  opacity:0; transform:scaleX(.2);
  transition:opacity .9s var(--ease), transform 1.4s var(--ease);
}
.reveal.s-1 .reveal__horizon{ opacity:1; transform:scaleX(1); }
.reveal.s-4 .reveal__horizon{ opacity:0; transform:scaleX(1.6); }

.reveal__stage{
  position:relative;
  width:min(84vw, 900px);
  perspective:1400px;
  /* the camera itself drifts — the mark never deforms */
  perspective-origin:calc(50% + var(--ox,0px)) calc(46% + var(--oy,0px));
}
.reveal__depth{
  position:relative;
  transform-style:preserve-3d;
  transform:translateZ(-420px) rotateX(14deg) scale(.86);
  opacity:0;
  transition:transform 1.5s var(--ease), opacity .8s ease;
}
.reveal__extrude,.reveal__face{ transform-style:preserve-3d; }

/* stacked shells receding in Z — a genuine extrusion of the chakra */
.reveal__extrude{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform:scaleZ(.04);
  transition:transform 1.6s var(--ease);
}
.reveal.s-1 .reveal__extrude{ transform:scaleZ(.55); }
.reveal.s-2 .reveal__extrude,
.reveal.s-3 .reveal__extrude,
.reveal.s-4 .reveal__extrude{ transform:scaleZ(1); }
/* flat layers — no filter, no preserve-3d, no per-shell compositing hint */
.reveal__shell{
  position:absolute; left:0; top:0; width:100%; height:auto;
  pointer-events:none;
}

.reveal__face{ position:relative; transform:translateZ(1px); }

/* the chakra spins up and locks — decelerating, exactly once */
.reveal .si-chakra-spin{
  transform-box:fill-box;
  transform-origin:50% 50%;
  transform:rotate(-152deg);
}
.reveal.s-2 .si-chakra-spin,
.reveal.s-3 .si-chakra-spin,
.reveal.s-4 .si-chakra-spin{
  transform:rotate(0deg);
  transition:transform 1.9s cubic-bezier(.13,.9,.24,1);
}

/* soft glow that breathes during the hero hold */
.reveal.s-3 .reveal__face .si-wordmark{
  filter:drop-shadow(0 0 26px rgba(var(--c-gold-fill),.22));
}
.reveal__face .si-wordmark{ opacity:0; transition:opacity .5s ease; }
.reveal__face .si-tagline{ opacity:0; transition:opacity .7s ease; }
.reveal__face .si-tagline .si-rule{ transform:scaleX(0); transform-origin:center;
  transition:transform 1s var(--ease) .15s; }

/* specular sweep that travels across the mark — soft-edged so it reads as
   light on metal, never as a rectangle sliding past */
.reveal__sweep{
  position:absolute; inset:0 -14%;
  background:linear-gradient(102deg,
    transparent 42%,
    rgba(255,231,176,.10) 48%,
    rgba(var(--c-lift),calc(.22 * var(--lift-k))) 51%,
    rgba(255,231,176,.09) 54%,
    transparent 60%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 50%,#000 0%,rgba(0,0,0,.45) 58%,transparent 88%);
  mask-image:radial-gradient(72% 62% at 50% 50%,#000 0%,rgba(0,0,0,.45) 58%,transparent 88%);
  transform:translate3d(-58%,0,3px);
  opacity:0; pointer-events:none;
  mix-blend-mode:screen;
}
.reveal.s-2 .reveal__sweep{
  opacity:1;
  transform:translate3d(58%,0,3px);
  transition:transform 1.15s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.reveal.s-3 .reveal__sweep,
.reveal.s-4 .reveal__sweep{ opacity:0; transition:opacity .5s ease; }

/* stage machine */
.reveal.s-1 .reveal__depth{
  opacity:1;
  transform:translateZ(-210px) rotateX(9deg) scale(.9);
}

.reveal.s-2 .reveal__depth{
  opacity:1;
  transform:translateZ(0) rotateX(4deg) scale(.98);
}
.reveal.s-2 .reveal__face .si-wordmark{ opacity:1; }

.reveal.s-3 .reveal__depth{
  opacity:1;
  transform:translateZ(60px) rotateX(0deg) scale(1);
  transition:transform 1.6s var(--ease);
}
.reveal.s-3 .reveal__face .si-wordmark{ opacity:1; }
.reveal.s-3 .reveal__face .si-tagline{ opacity:1; }
.reveal.s-3 .reveal__face .si-tagline .si-rule{ transform:scaleX(1); }

/* camera pushes through the chakra */
.reveal.s-4 .reveal__depth{
  transform:translateZ(760px) rotateX(-5deg) scale(1.5);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.5,0,.75,0), opacity .8s ease .25s;
}
.reveal.s-4 .reveal__face .si-wordmark,
.reveal.s-4 .reveal__face .si-tagline{ opacity:1; }

.reveal__bloom{
  position:absolute; left:50%; top:46%;
  width:44vmax; height:44vmax; margin:-22vmax 0 0 -22vmax;
  border-radius:50%;
  /* on paper the flash cannot be white — it is a warm gold flare that the
     page reads as light coming *through* the mark */
  background:radial-gradient(circle,
    rgba(var(--c-lift),calc(.92 * var(--lift-k))) 0%,
    rgba(var(--c-gold-fill),.80) 20%,
    rgba(var(--c-gold-fill),.42) 42%,
    transparent 68%);
  opacity:0; transform:scale(.05);
  pointer-events:none;
}
.reveal.s-4 .reveal__bloom{
  opacity:1; transform:scale(1.9);
  transition:transform 1s cubic-bezier(.4,0,.4,1), opacity 1s ease;
}
/* the flare recedes so the brand line lands on clean ground */
.reveal.is-outro .reveal__bloom{
  opacity:0; transform:scale(2.6);
  transition:transform 1.6s var(--ease), opacity 1.05s ease;
}

/* ── outro: the brand line, as the mark clears the frame ── */
.reveal__outro{
  position:absolute; left:50%; top:50%;
  width:min(92vw,940px);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vw,24px);
  pointer-events:none;
  opacity:0;
}
.reveal__line{
  margin:0; width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .28em;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,5.4vw,60px);
  line-height:1.16; letter-spacing:-.012em;
  color:var(--text);
  text-align:center;
}
.reveal__line span{ display:block; overflow:hidden; padding:.02em 0 .1em; }
.reveal__line i{
  display:block; font-style:normal;
  transform:translateY(115%);
  transition:transform .62s var(--ease);
}
.reveal__line .hl i{
  background:linear-gradient(96deg,var(--saffron) 0%,var(--gold-hi) 52%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* the twin rules from the mark's tagline, rebuilt at outro scale */
.reveal__rule{
  display:block; width:min(46vw,320px); height:1px;
  background:linear-gradient(90deg,transparent,var(--saffron) 22%,var(--gold-hi) 50%,var(--green) 78%,transparent);
  transform:scaleX(0);
  transition:transform .9s var(--ease) .22s;
}

.reveal.is-outro .reveal__outro{ opacity:1; transition:opacity .4s ease; }
.reveal.is-outro .reveal__line i{ transform:none; }
.reveal.is-outro .reveal__rule{ transform:scaleX(1); }
.reveal.is-outro .reveal__line span:nth-child(1) i{ transition-delay:.02s; }
.reveal.is-outro .reveal__line span:nth-child(2) i{ transition-delay:.09s; }
.reveal.is-outro .reveal__line span:nth-child(3) i{ transition-delay:.16s; }
.reveal.is-outro .reveal__line span:nth-child(4) i{ transition-delay:.23s; }
.reveal.is-outro .reveal__line span:nth-child(5) i{ transition-delay:.30s; }

.reveal.is-outro-out .reveal__outro{
  opacity:0;
  transform:translate(-50%,calc(-50% - 16px));
  transition:opacity .42s ease, transform .55s var(--ease);
}

.reveal__skip{
  position:absolute; right:clamp(16px,4vw,40px); bottom:clamp(16px,4vh,36px);
  background:rgba(var(--c-lift),calc(.5 * var(--lift-k))); border:1px solid rgba(var(--c-gold-ink),.30);
  color:var(--gold);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 16px; cursor:pointer;
  opacity:0; transition:opacity .5s ease .8s, border-color .3s, color .3s;
}
.reveal.s-1 .reveal__skip,.reveal.s-2 .reveal__skip,.reveal.s-3 .reveal__skip{ opacity:.6; }
.reveal__skip:hover{ opacity:1; border-color:var(--gold); color:var(--gold-hi); }
.reveal.s-4 .reveal__skip{ opacity:0; transition:opacity .2s; }
/* stays reachable through the closing line */
.reveal.is-outro .reveal__skip{ opacity:.6; transition:opacity .4s ease; }
.reveal.is-outro .reveal__skip:hover{ opacity:1; }
.reveal.is-outro-out .reveal__skip{ opacity:0; transition:opacity .2s; }

.reveal.is-done{
  opacity:0; pointer-events:none;
  transition:opacity .55s ease;
}
.reveal.is-gone{ display:none; }

/* The page eases forward as the reveal clears. While the reveal owns the
   screen the page is left unpainted entirely — transforming a document this
   tall would force the browser to rasterise every section behind the intro. */
main,.foot{ transition:opacity .9s ease, visibility 0s; }
.hero__inner{ transition:transform 1.3s var(--ease); }

body.is-booting main,
body.is-booting .foot{ opacity:0; visibility:hidden; }
body.is-booting .hero__inner{ transform:scale(1.05); }
body.is-booting .nav{ opacity:0; transform:translateY(-14px); }

/* ══════════════════════════════════════════════════════════════════════════
   2.  NAV
   ══════════════════════════════════════════════════════════════════════════ */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:8000;
  background:rgba(var(--c-shade),calc(.06 * var(--shade-k)));
}
.scrollbar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--saffron),var(--gold-mid) 50%,var(--green));
  box-shadow:0 0 12px rgba(var(--c-gold-ink),.35);
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:18px var(--gut);
  /* backdrop-filter is deliberately NOT transitioned: interpolating a blur
     re-filters everything behind the bar on every frame of the half-second
     it runs, which is exactly when the page is being scrolled. It snaps on
     instead, under the background fade, and reads the same. */
  transition:padding .5s var(--ease), background .5s ease, border-color .5s ease,
             transform 1.2s var(--ease), opacity .9s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:11px var(--gut);
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.72 * var(--lift-k)));
  -webkit-backdrop-filter:var(--glass-lens);
  backdrop-filter:var(--glass-lens);
  border-bottom-color:var(--line);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.95 * var(--lift-k))),
    0 18px 36px -30px rgba(var(--c-shade-w),calc(.55 * var(--shade-k)));
}
.nav.is-hidden{ transform:translateY(-104%); }

.nav__brand{ display:block; flex:0 0 auto; }
/* Where the mark lands on the page itself — the nav and the footer — the
   paper theme re-inks it rather than plating it: the letters are written in
   the page's own ink and the lockup sits directly on the ground, with no
   card under it at all. On the dark theme the plate comes back, because
   there the mark already has the ground it was drawn for.
   The tricolour never moves in either direction: the saffron "In", the green
   "a" and the navy chakra are the flag, and they hold on both grounds. */
.nav__logo{
  display:block; width:clamp(172px,19vw,222px);
  padding:9px 15px; border-radius:13px;
  background:none;
  box-shadow:none;
  transition:box-shadow .5s var(--ease), background .5s ease;
}
:root[data-theme="dark"] .nav__logo{
  background:var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.10 * var(--lift-k))),
    inset 0 0 0 1px var(--plate-edge),
    0 8px 20px -12px rgba(20,24,14,.55);
}
:root[data-theme="dark"] .nav__brand:hover .nav__logo{
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.14 * var(--lift-k))),
    inset 0 0 0 1px rgba(var(--c-gold-fill),.34),
    0 10px 24px -12px rgba(20,24,14,.62);
}
/* the re-inking itself. Scoped to the two page placements — the intro keeps
   its own black field, so the mark there stays exactly as it was drawn. */
:root:not([data-theme="dark"]) .nav__logo .si-ink,
:root:not([data-theme="dark"]) .foot__logo .si-ink{ fill:var(--text); }
:root:not([data-theme="dark"]) .nav__logo .si-ink-2,
:root:not([data-theme="dark"]) .foot__logo .si-ink-2{ fill:var(--muted); }
.nav__logo .si-logo{ overflow:visible; }

/* seven items now, so the gap tightens and the row is allowed to give ground
   before the burger takes over — it must never collide with the CTA */
.nav__links{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(11px,1.5vw,26px);
  min-width:0;
}
.nav__links a{
  position:relative;
  font-size:13px; font-weight:500; letter-spacing:.06em;
  color:var(--text-2);
  padding:6px 0;
  transition:color .3s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--saffron),var(--gold),var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--text); }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }

/* — template switch —
   Left is this site (the normal template). Right is the 3D template, loaded
   from the extracted HTML pack. Both glyphs live in the knob and cross-fade. */
.themer{
  flex:none; margin-left:14px;
  width:62px; height:32px; padding:0;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge);
  cursor:pointer;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.themer:hover{ border-color:rgba(var(--c-gold-ink),.46); box-shadow:var(--glass-edge-hi); }
.themer:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.themer__track{ display:block; position:relative; width:100%; height:100%; }
.themer__knob{
  position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold-fill-hi),var(--gold-fill));
  box-shadow:0 2px 6px rgba(var(--c-shade-w),calc(.30 * var(--shade-k)));
  transition:transform .5s var(--ease), background .5s ease;
}
.themer svg{
  position:absolute; width:14px; height:14px;
  fill:none; stroke:var(--gold-deep); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .35s ease, transform .5s var(--ease);
}
.themer__cube{ opacity:0; transform:rotate(-60deg); }
:root[data-mode="3d"] .themer__knob{ transform:translateX(30px); }
:root[data-mode="3d"] .themer__flat{ opacity:0; transform:rotate(60deg); }
:root[data-mode="3d"] .themer__cube{ opacity:1; transform:rotate(0deg); }

/* The 3D pack is framed over the page. The switch stays on top so those
   files never have to be edited. */
:root[data-mode="3d"],
:root[data-mode="3d"] body{ overflow:hidden; }
.tpl-3d{
  position:fixed; inset:0; z-index:6500;
  width:100%; height:100%; border:0; background:#050505;
}
.tpl-3d[hidden]{ display:none; }
:root[data-mode="3d"] .nav{
  transform:none !important; opacity:1 !important;
  background:none; box-shadow:none; border-color:transparent;
  pointer-events:none;
}
:root[data-mode="3d"] .nav__brand,
:root[data-mode="3d"] .nav__links,
:root[data-mode="3d"] .nav__cta,
:root[data-mode="3d"] .nav__burger{ visibility:hidden; }
:root[data-mode="3d"] .themer{ pointer-events:auto; position:relative; z-index:6600; }
:root[data-mode="3d"] .reveal,
:root[data-mode="3d"] main,
:root[data-mode="3d"] .foot,
:root[data-mode="3d"] .menu,
:root[data-mode="3d"] .dock,
:root[data-mode="3d"] .scrollbar,
:root[data-mode="3d"] .cursor{ visibility:hidden; pointer-events:none; }
:root[data-mode="3d"] body.is-booting{ overflow:auto; }

/* The ground, the text and every pane ease between themes together. Scoped to
   a class the switch adds for the length of the change, so the transition is
   never paid for during normal scrolling or on first paint. */
.theme-xf, .theme-xf *, .theme-xf *::before, .theme-xf *::after{
  transition:background-color .42s ease, color .42s ease,
             border-color .42s ease, fill .42s ease !important;
}

.nav__burger{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge);
  position:relative; cursor:pointer;
}
.nav__burger i{
  position:absolute; left:12px; width:20px; height:1.4px; background:var(--gold);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger i:nth-child(1){ top:18px; }
.nav__burger i:nth-child(2){ top:24px; width:13px; }
.nav__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); width:20px; }

/* full-screen mobile menu */
.menu{
  position:fixed; inset:0; z-index:6900;
  /* a full-bleed sheet of the same glass: the page stays faintly readable
     underneath, which is what tells you the menu is a layer and not a page */
  background:
    radial-gradient(100% 70% at 50% 110%, rgba(var(--c-gold-fill),.22), transparent 60%),
    var(--glass-sheen),
    var(--sheet);
  -webkit-backdrop-filter:blur(30px) saturate(1.25);
  backdrop-filter:blur(30px) saturate(1.25);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--gut) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__inner{ display:flex; flex-direction:column; gap:2px; }
.menu__inner a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--serif); font-size:clamp(30px,9vw,54px); font-weight:500;
  color:var(--text); line-height:1.15;
  padding:8px 0;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s ease, transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__inner a{ opacity:1; transform:none; }
.menu__inner a em{
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.2em; color:var(--gold); opacity:.75;
}
.menu__inner a:hover{ color:var(--gold-hi); }
.menu__foot{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:8px 28px;
  font-size:13px; letter-spacing:.04em; color:var(--muted);
}
.menu__foot a:hover{ color:var(--gold); }

/* ══════════════════════════════════════════════════════════════════════════
   3.  PRIMITIVES
   ══════════════════════════════════════════════════════════════════════════ */
.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 var(--gut); }
.section{ position:relative; padding:var(--sect) 0; }
.section + .section{ border-top:1px solid var(--line-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 22px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--saffron);
  box-shadow:0 0 0 4px rgba(var(--c-saffron),.18);
}

.display{
  margin:0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.6vw,72px);
  line-height:1.06; letter-spacing:-.015em;
  color:var(--text);
}
.display em{
  font-style:italic;
  background:linear-gradient(96deg,var(--saffron) 0%,var(--gold-hi) 46%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.display--xl{ font-size:clamp(40px,8vw,104px); }

.sect-head{ margin-bottom:clamp(44px,6vw,80px); max-width:900px; }
.sect-head--split{
  max-width:none;
  display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(24px,5vw,64px);
  align-items:end;
}
.sect-head--center{ max-width:900px; margin-inline:auto; text-align:center; }
.sect-head--center .eyebrow{ justify-content:center; }
.sect-head__note{
  margin:0; font-size:15px; line-height:1.7; color:var(--muted);
  padding-left:20px; border-left:1px solid var(--line);
}

.lead{ font-size:clamp(17px,1.7vw,21px); line-height:1.6; color:var(--text); }
.muted{ color:var(--muted); }

/* Cormorant defaults to old-style figures, which turn "132" into "I32".
   Every number set in the display face gets lining figures. */
.hero__meta b,.stat b,.steps li::before,.rating__score b,.prod__card::after,
.why__item .n,.svc__no{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r-pill);
  overflow:hidden; cursor:pointer; border:1px solid transparent;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .35s, border-color .35s;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn--gold{
  color:#241703;
  /* gold glass: the tint is still solid enough to carry dark text, but the
     top-lit sheen and the rim are the same ones the panes use */
  background:
    linear-gradient(157deg,rgba(var(--c-lift),calc(.42 * var(--lift-k))),rgba(var(--c-lift),0) 46%),
    linear-gradient(100deg,var(--gold-fill-hi),var(--gold-fill) 44%,var(--gold-mid));
  box-shadow:
    0 12px 28px -14px rgba(var(--c-gold-ink),.55),
    inset 0 1px 0 rgba(var(--c-lift),calc(.7 * var(--lift-k))),
    inset 0 -1px 0 rgba(var(--c-gold-ink),.28);
}
.btn--gold::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,transparent 30%,rgba(var(--c-lift),calc(.65 * var(--lift-k))) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.btn--gold:hover::before{ transform:translateX(120%); }
.btn--gold:hover{ box-shadow:0 18px 36px -14px rgba(var(--c-gold-ink),.62), inset 0 1px 0 rgba(var(--c-lift),calc(.7 * var(--lift-k))); }
.btn--ghost{
  color:var(--text); border-color:var(--line);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge);
}
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(var(--c-saffron),.14),rgba(var(--c-gold-fill),.18),rgba(var(--c-green),.12));
  opacity:0; transition:opacity .45s ease;
}
.btn--ghost:hover{
  border-color:rgba(var(--c-gold-ink),.45); color:var(--text);
  box-shadow:var(--glass-edge-hi);
}
.btn--ghost:hover::before{ opacity:1; }
.btn--wide{ width:100%; }

/* scroll reveal */
.reveal-up{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s ease, transform 1s var(--ease);
}
.reveal-up.in{ opacity:1; transform:none; }

/* card 3-D tilt */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  will-change:transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   4.  HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(100px,12vh,140px) 0 clamp(64px,8vh,96px);
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 78% 34%, rgba(var(--c-navy),.14), transparent 62%),
    radial-gradient(80% 60% at 22% 76%, rgba(var(--c-gold-fill),.20), transparent 62%),
    linear-gradient(180deg,var(--surface-2) 0%,var(--surface-2) 58%,var(--ink-2) 100%);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.95; }
.hero__veil{
  position:absolute; inset:0;
  /* the copy still needs its own ground under the scene — on paper that is a
     wash of the page colour rather than a shadow */
  background:var(--hero-veil);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:1320px; margin:0 auto; padding:0 var(--gut); }

.hero__title{
  margin:0 0 clamp(20px,2.6vh,30px);
  font-family:var(--serif); font-weight:500;
  /* scales against height as well as width, so the hero always fits one screen */
  font-size:clamp(38px,min(7.4vw,11vh),104px);
  line-height:1.14; letter-spacing:-.022em;
  color:var(--text);
  max-width:15ch;
}
/* the mask sits on the line box, which is tall enough to hold Cormorant's
   full ascender/descender run — the tight rhythm comes back as negative margin */
.hero__title .line{ display:block; overflow:hidden; margin-bottom:-.155em; }
.hero__title .line:last-child{ margin-bottom:0; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%) rotate(2deg);
  transition:transform 1.15s var(--ease);
}
.hero__title.in .line > span{ transform:none; }
.hero__title .line:nth-child(2) > span{ transition-delay:.09s; }
.hero__title .line:nth-child(3) > span{ transition-delay:.18s; }
.hero__title em{
  font-style:italic;
  background:linear-gradient(96deg,var(--saffron) 0%,var(--gold-hi) 50%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero__lede{
  margin:0 0 clamp(24px,3vh,38px);
  max-width:54ch;
  font-size:clamp(15.5px,1.6vw,19px); line-height:1.68;
  color:var(--text-2);
  transition-delay:.3s;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  transition-delay:.42s;
}
/* one pane of glass, divided — not four tiles. The hero scene stays visible
   through it, lensed, which is the whole point of putting it here. */
.hero__meta{
  list-style:none; margin:clamp(26px,4.5vh,60px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-glass);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens);
  backdrop-filter:var(--glass-lens);
  box-shadow:var(--glass-edge), var(--glass-lift);
  transition-delay:.54s;
}
.hero__meta li{
  padding:20px 18px 18px;
  display:flex; flex-direction:column; gap:4px;
  border-left:1px solid var(--line-soft);
}
.hero__meta li:first-child{ border-left:none; }
.hero__meta b{
  font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:600;
  line-height:1; color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.hero__meta span{ font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll span{
  width:1px; height:46px; overflow:hidden; position:relative;
  background:rgba(var(--c-gold-ink),.22);
}
.hero__scroll span::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:trickle 2.4s var(--ease-io) infinite;
}
.hero__scroll i{
  width:5px; height:5px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg);
}
@keyframes trickle{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
/* on short screens the scroll cue would collide with the meta bar */
@media (max-height:900px){ .hero__scroll{ display:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   5.  TICKER
   ══════════════════════════════════════════════════════════════════════════ */
.ticker{
  overflow:hidden; padding:20px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--surface-2),var(--ink-2));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__row{
  display:flex; gap:0; width:max-content;
  animation:slide 62s linear infinite;
}
.ticker__row span{
  display:inline-flex; align-items:center; gap:26px;
  padding:0 26px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.ticker__row span::after{
  content:""; width:4px; height:4px;
  background:var(--gold-mid); opacity:.75;
  transform:rotate(45deg);
}
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__row{ animation-play-state:paused; }

/* ══════════════════════════════════════════════════════════════════════════
   6.  ABOUT
   ══════════════════════════════════════════════════════════════════════════ */
.about__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,6vw,90px); align-items:start;
}
.about__body p{ margin:0 0 18px; font-size:16.5px; line-height:1.75; }
.about__body p:last-child{ margin-bottom:0; }

/* three domed arches — lifted from the Taj iwan + gopuram tiers */
.about__arches{
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,22px);
  padding-top:12px;
}
.arch{
  position:relative; flex:1;
  border:1px solid var(--line);
  border-bottom:none;
  background:linear-gradient(180deg,rgba(var(--c-gold-fill),.16),transparent 70%);
  overflow:hidden;
  transition:transform .8s var(--ease), border-color .6s;
}
.arch::before{
  content:""; position:absolute; left:12%; right:12%; top:8%; bottom:0;
  border:1px solid var(--line-soft); border-bottom:none;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
}
.arch i{
  position:absolute; left:50%; bottom:0; width:1px; height:0;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform:translateX(-50%);
  transition:height 1.2s var(--ease);
}
.about__arches.in .arch i{ height:64%; }
.arch--1{ height:170px; border-radius:50% 50% 0 0 / 24% 24% 0 0; transition-delay:.05s; }
.arch--2{ height:250px; border-radius:50% 50% 0 0 / 22% 22% 0 0; transition-delay:.15s;
  background:linear-gradient(180deg,rgba(var(--c-saffron),.16),transparent 72%); }
.arch--3{ height:200px; border-radius:50% 50% 0 0 / 24% 24% 0 0; transition-delay:.25s;
  background:linear-gradient(180deg,rgba(var(--c-green),.13),transparent 72%); }
.about__arches:hover .arch{ border-color:rgba(var(--c-gold-ink),.40); }
.about__arches:hover .arch--2{ transform:translateY(-8px); }

/* mission / vision */
.mv{
  margin-top:clamp(56px,8vw,110px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.5vw,28px);
}
.mv__card{
  position:relative; overflow:hidden;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge), var(--glass-lift);
  /* the dome reference stays: rounded shoulders, squarer base */
  border-radius:var(--r-glass) var(--r-glass) var(--r-ctrl) var(--r-ctrl);
  transition:box-shadow .6s var(--ease), border-color .5s ease;
}
.mv__card:hover{
  border-color:rgba(var(--c-gold-ink),.38);
  box-shadow:var(--glass-edge-hi), var(--glass-lift);
}
.mv__card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}
.mv__no{
  display:block; margin-bottom:18px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.mv__card h3{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,2.5vw,31px); line-height:1.28; color:var(--text);
}
.mv__glow{
  position:absolute; width:340px; height:340px; right:-140px; bottom:-180px;
  background:radial-gradient(circle,rgba(var(--c-gold-fill),.26),transparent 66%);
  pointer-events:none;
  transition:transform .9s var(--ease), opacity .6s;
  opacity:.7;
}
.mv__card:hover .mv__glow{ transform:translate(-40px,-40px) scale(1.2); opacity:1; }
.mv__card:nth-child(2) .mv__glow{ background:radial-gradient(circle,rgba(var(--c-green),.18),transparent 66%); }

/* ══════════════════════════════════════════════════════════════════════════
   7.  PORTFOLIO — products + live platforms
   ══════════════════════════════════════════════════════════════════════════ */
.portfolio{
  background:
    radial-gradient(60% 50% at 84% 12%, rgba(var(--c-navy),.10), transparent 64%),
    var(--ink);
}
.prod{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
.prod__card{
  --prod-pad:clamp(22px,2.6vw,34px);
  position:relative; overflow:hidden;
  padding:var(--prod-pad);
  border:1px solid var(--line);
  background:var(--glass-sheen), var(--glass-film-2);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge), var(--glass-lift);
  border-radius:var(--r-glass);
  transition:box-shadow .6s var(--ease), border-color .5s ease;
}
/* The numeral used to sit in the padding gutter over pale glass. The plate now
   fills the well edge to edge, so it is written onto the plate instead — paper
   white over the gold, with a shade under it so it holds on the lighter one. */
.prod__card::after{
  content:attr(data-idx);
  position:absolute; z-index:2;
  right:calc(var(--prod-pad) + 14px); top:calc(var(--prod-pad) + 4px);
  font-family:var(--serif); font-size:34px; line-height:1;
  color:rgba(255,249,238,.74);
  text-shadow:0 1px 10px rgba(58,40,10,.45);
}
/* The three cards sit level and stretch to one another: a staircase offset
   made each card a different height, which read as three unrelated panes
   rather than one set. */
.prod__card{ margin-top:0; }
/* the well: glass has an inside too, so the image sits in a recess with the
   light coming from the opposite edge */
.prod__vis{
  height:clamp(140px,16vw,190px); margin-bottom:26px;
  border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
  background:radial-gradient(70% 70% at 50% 60%,rgba(var(--c-gold-fill),.14),transparent 70%),var(--glass-well);
  box-shadow:
    inset 0 1px 8px rgba(var(--c-shade-w),calc(.14 * var(--shade-k))),
    inset 0 -1px 0 rgba(var(--c-lift),calc(.7 * var(--lift-k)));
  overflow:hidden; position:relative;
}
.prod__shot{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .8s var(--ease);
}
/* the image fills the well, so the recess has to be drawn back on top of it —
   otherwise the plate reads as a picture pasted over glass rather than one
   sitting inside it */
.prod__vis::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(158deg,rgba(255,251,240,.30),transparent 44%),
    radial-gradient(84% 74% at 50% 112%,rgba(var(--c-shade-w),calc(.18 * var(--shade-k))),transparent 62%);
  box-shadow:
    inset 0 1px 8px rgba(var(--c-shade-w),calc(.16 * var(--shade-k))),
    inset 0 -1px 0 rgba(var(--c-lift),calc(.5 * var(--lift-k)));
}
.prod__card:hover .prod__shot{ transform:scale(1.045); }
.prod__card h3{
  margin:0 0 10px; font-family:var(--serif); font-weight:600;
  font-size:clamp(19px,2vw,25px); color:var(--text); line-height:1.2;
}
.prod__card p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--muted); }
.prod__card:hover{
  border-color:rgba(var(--c-gold-ink),.38);
  box-shadow:var(--glass-edge-hi), var(--glass-lift);
}

/* ══════════════════════════════════════════════════════════════════════════
   7b.  LIVE PLATFORMS — the portfolio grid
   ──────────────────────────────────────────────────────────────────────────
   Ten cards of identical construction, so the eye reads the row and not the
   individual boxes: one preview plate, one category chip, one title, three
   clamped lines of description, one foot rule. The description is clamped
   rather than left to run because equal heights across a row is what makes a
   grid of cards look considered instead of assembled.
   ══════════════════════════════════════════════════════════════════════════ */
.live{ margin-top:clamp(64px,8vw,116px); }
.live__head{
  display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(24px,5vw,64px);
  align-items:end;
  margin-bottom:clamp(28px,3.4vw,40px);
}
.live__title{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(27px,3.6vw,46px); line-height:1.1; letter-spacing:-.012em;
  color:var(--text);
}

/* — the grid — */
.live__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.live__card{
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-glass);
  background:var(--glass-sheen), var(--glass-film-2);
  box-shadow:var(--glass-edge), var(--glass-lift);
  color:inherit;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s ease;
}
@media (hover:hover){
  .live__card:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--c-gold-ink),.4);
    box-shadow:var(--glass-edge-hi), 0 26px 50px -30px rgba(var(--c-shade-w),calc(.5 * var(--shade-k)));
  }
}
/* touch: no hover to rely on, so the press itself is the feedback */
.live__card:active{ transform:translateY(-1px) scale(.994); }

/* — preview plate —
   A drawn browser window rather than a screenshot: ten real screenshots would
   be ten more requests, would age the moment a client redesigns, and would
   each need their own crop. The monogram plate stays sharp at every size and
   carries the category's own tint. */
.live__vis{
  position:relative; display:block;
  aspect-ratio:16/10;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(78% 78% at 50% 108%, var(--tint,rgba(var(--c-gold-fill),.30)), transparent 68%),
    linear-gradient(180deg,rgba(var(--c-lift),calc(.78 * var(--lift-k))),rgba(247,244,236,.5));
  overflow:hidden;
}
.live__chrome{
  position:absolute; left:0; right:0; top:0; height:30px;
  display:flex; align-items:center; gap:5px;
  padding:0 11px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(var(--c-lift),calc(.9 * var(--lift-k))),rgba(var(--c-lift),calc(.62 * var(--lift-k))));
}
.live__chrome i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(var(--c-gold-ink),.26);
}
.live__chrome i:nth-child(2){ background:rgba(var(--c-saffron),.34); }
.live__chrome i:nth-child(3){ background:rgba(var(--c-green),.30); }
.live__url{
  margin-left:8px; flex:1; min-width:0;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:rgba(var(--c-shade),calc(.045 * var(--shade-k)));
  font-size:9.5px; letter-spacing:.04em; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* the monogram is the ground beneath the shot — seen only if the image is
   missing, so a card without a screenshot still looks deliberate */
.live__mono{
  position:absolute; inset:30px 0 0 0;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:clamp(30px,3.6vw,44px); font-weight:600;
  letter-spacing:.04em; color:var(--gold-hi);
  transition:transform .6s var(--ease);
}
/* the site's own hero, sitting inside the drawn browser window. Pinned to the
   top edge so the crop keeps the masthead and headline — the part that
   identifies the site — rather than centring on whatever is halfway down. */
.live__shot{
  position:absolute; left:0; right:0; top:30px; bottom:0;
  width:100%; height:calc(100% - 30px);
  object-fit:cover; object-position:50% 0;
  transition:transform .7s var(--ease);
}
.live__glow{
  position:absolute; inset:30px 0 0 0;
  background:radial-gradient(58% 58% at 50% 58%, var(--tint,rgba(var(--c-gold-fill),.3)), transparent 72%);
  opacity:0; transition:opacity .55s ease;
  mix-blend-mode:soft-light;
}
@media (hover:hover){
  .live__card:hover .live__mono{ transform:translateY(-3px) scale(1.04); }
  /* a slow push into the shot, cropped by the window, so the preview feels
     live rather than pasted on */
  .live__card:hover .live__shot{ transform:scale(1.045); }
  .live__card:hover .live__glow{ opacity:.7; }
}
/* one tint per category, so a filtered view reads as a set */
.live__card[data-cat="ecom"]    { --tint:rgba(var(--c-saffron),.30); }
.live__card[data-cat="multi"]   { --tint:rgba(var(--c-navy),.26); }
.live__card[data-cat="dynamic"] { --tint:rgba(var(--c-green),.24); }
.live__card[data-cat="web"]     { --tint:rgba(var(--c-gold-fill),.34); }

/* — body — */
.live__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2vw,24px);
}
.live__cat{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.live__card h4{
  margin:0 0 8px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(17px,1.6vw,21px); line-height:1.22; color:var(--text);
}
.live__card p{
  margin:0 0 18px;
  font-size:13.5px; line-height:1.66; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.live__foot{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.live__dom{
  font-size:11.5px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.live__cta{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:12.5px; font-weight:500; color:var(--gold-hi);
  transition:color .3s;
}
.live__cta svg{ width:12px; height:12px; transition:transform .4s var(--ease); }
@media (hover:hover){
  .live__card:hover .live__cta svg{ transform:translate(2px,-2px); }
}
/* the grid arrives as a wave across its columns, once, when it first
   scrolls into view */
.live__grid.is-live .live__card{
  animation:liveIn .62s var(--ease) both;
  animation-delay:calc(var(--i,0) * .07s);
}
@keyframes liveIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* — live preview —
   The card opens the client's site inside a browser window drawn from the
   same parts as the card's own preview plate, so the modal reads as that
   card enlarged rather than as a separate piece of UI. Sits above the nav,
   the dock and the menu, and below the cursor. */
.peek{
  position:fixed; inset:0; z-index:9200;
  display:grid; place-items:center;
  padding:clamp(10px,2.4vw,34px);
}
.peek[hidden]{ display:none; }
.peek__scrim{
  position:absolute; inset:0;
  background:rgba(var(--c-shade),calc(.52 * var(--shade-k)));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .32s ease;
}
.peek.is-open .peek__scrim{ opacity:1; }

.peek__win{
  position:relative;
  display:flex; flex-direction:column;
  width:min(1240px,100%); height:min(880px,100%);
  border:1px solid var(--line); border-radius:var(--r-glass);
  background:var(--surface);
  box-shadow:var(--glass-edge), 0 40px 90px -40px rgba(var(--c-shade-w),calc(.6 * var(--shade-k)));
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.peek.is-open .peek__win{ opacity:1; transform:none; }

/* — the window's title bar — the card's chrome strip, grown up — */
.peek__bar{
  display:flex; align-items:center; gap:clamp(8px,1.2vw,16px);
  flex:none; padding:0 clamp(10px,1.2vw,16px); height:52px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(var(--c-lift),calc(.9 * var(--lift-k))),rgba(var(--c-lift),calc(.62 * var(--lift-k))));
}
.peek__dots{ display:flex; gap:5px; flex:none; padding-left:4px; }
.peek__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(var(--c-gold-ink),.26); }
.peek__dots i:nth-child(2){ background:rgba(var(--c-saffron),.34); }
.peek__dots i:nth-child(3){ background:rgba(var(--c-green),.30); }

/* name and domain share one column: the domain is the address, the name is
   what the visitor just clicked, and neither is worth a second row */
.peek__id{
  flex:1; min-width:0;
  display:flex; align-items:baseline; gap:9px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(var(--c-shade),calc(.045 * var(--shade-k)));
  overflow:hidden;
}
.peek__name{ font-weight:600; font-size:12.5px; color:var(--text-2); white-space:nowrap; }
.peek__url{
  min-width:0; flex:1;
  font-size:11px; letter-spacing:.03em; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.peek__sizes{
  flex:none; display:flex; gap:2px; padding:2px;
  border:1px solid var(--line-soft); border-radius:var(--r-pill);
}
.peek__size{
  padding:4px 11px; border:0; border-radius:var(--r-pill);
  background:none; cursor:pointer; color:var(--muted);
  font:inherit; font-size:11px; letter-spacing:.02em;
  transition:background .25s ease, color .25s ease;
}
.peek__size.is-on{ background:rgba(var(--c-gold-fill),.22); color:var(--gold-hi); }
@media (hover:hover){ .peek__size:not(.is-on):hover{ color:var(--text-2); } }

.peek__out{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:var(--r-pill);
  border:1px solid rgba(var(--c-gold-ink),.3);
  font-size:11.5px; letter-spacing:.02em; color:var(--gold-hi);
  text-decoration:none; transition:background .25s ease, border-color .25s ease;
}
.peek__out svg{ width:11px; height:11px; }
@media (hover:hover){
  .peek__out:hover{ background:rgba(var(--c-gold-fill),.16); border-color:rgba(var(--c-gold-ink),.5); }
}
.peek__x{
  flex:none; display:grid; place-items:center;
  width:32px; height:32px; padding:0;
  border:1px solid var(--line-soft); border-radius:50%;
  background:none; color:var(--muted); cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.peek__x svg{ width:15px; height:15px; }
@media (hover:hover){ .peek__x:hover{ background:rgba(var(--c-shade),calc(.06 * var(--shade-k))); color:var(--text); } }

/* — the stage — the ground behind the frame stays visible in phone mode,
     where the frame is narrower than the window — */
.peek__stage{
  position:relative; flex:1; min-height:0;
  display:grid; place-items:center;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(var(--c-gold-fill),.10), transparent 70%),
    var(--surface-2);
}
.peek__frame{
  width:100%; height:100%; border:0; display:block;
  background:var(--surface);
  opacity:0; transition:opacity .4s ease;
}
.peek__frame.is-in{ opacity:1; }

/* phone width: the frame *is* the viewport, so this shows the site's own
   responsive layout rather than a scaled-down picture of the desktop one */
/* the inset is what lets the device edge and its shadow be seen at all —
   without it the frame fills the stage and the rounding never shows */
.peek__stage[data-size="phone"]{ padding:clamp(10px,1.6vw,22px); }
.peek__stage[data-size="phone"] .peek__frame{
  width:min(390px,100%); height:min(844px,100%);
  border:1px solid var(--line);
  border-radius:clamp(12px,1.4vw,22px);
  box-shadow:0 30px 60px -34px rgba(var(--c-shade-w),calc(.5 * var(--shade-k)));
}

.peek__wait, .peek__stall{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center;
}
.peek__wait p{ margin:0; font-size:12.5px; letter-spacing:.04em; color:var(--muted); }
.peek__wait[hidden], .peek__stall[hidden]{ display:none; }
.peek__spin{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(var(--c-gold-ink),.18);
  border-top-color:var(--gold);
  animation:peekSpin .8s linear infinite;
}
@keyframes peekSpin{ to{ transform:rotate(360deg); } }

.peek__stall{ background:var(--surface-2); }
.peek__stall-t{ margin:0; font-family:var(--serif); font-size:clamp(18px,2vw,23px); color:var(--text); }
.peek__stall-p{ margin:0; max-width:44ch; font-size:13px; line-height:1.65; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   8.  SERVICES
   ══════════════════════════════════════════════════════════════════════════ */
.svc{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
/* Film-only glass: sheen + rim, no backdrop blur. Seven panes each running
   their own backdrop filter would re-lens this whole section on every scroll
   frame, and there is nothing behind them worth blurring anyway. */
.svc__item{
  position:relative; overflow:hidden;
  grid-column:span 2;
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.62 * var(--lift-k)));
  box-shadow:var(--glass-edge);
  padding:clamp(24px,3vw,40px);
  min-height:270px;
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:background .6s ease, box-shadow .6s ease;
}
/* varied composition — the first two are wide, the rest fall into thirds */
.svc__item:nth-child(1){ grid-column:span 4; min-height:330px; }
.svc__item:nth-child(2){ grid-column:span 2; min-height:330px; }
.svc__item:nth-child(6){ grid-column:span 2; }
.svc__item:nth-child(7){ grid-column:span 4; }
.svc__item:hover{
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.92 * var(--lift-k)));
  box-shadow:var(--glass-edge-hi);
}
.svc__item::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at var(--mx,50%) var(--my,50%),
             rgba(var(--c-gold-fill),.18),transparent 62%);
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.svc__item:hover::before{ opacity:1; }

.svc__ico{
  width:58px; height:58px; margin-bottom:auto;
  position:relative; flex:0 0 auto;
}
.svc__ico svg{ width:100%; height:100%; overflow:visible; }
.svc__ico svg [data-stroke]{
  stroke:var(--gold); fill:none; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.2s var(--ease), stroke .4s;
}
.svc__item.in .svc__ico svg [data-stroke]{ stroke-dashoffset:0; }
.svc__item:hover .svc__ico svg [data-stroke]{ stroke:var(--gold-hi); }

.svc__no{
  position:absolute; right:clamp(18px,2vw,28px); top:clamp(18px,2vw,26px);
  font-size:11px; letter-spacing:.18em; color:var(--faint);
}
.svc__item h3{
  margin:26px 0 10px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px,2.2vw,28px); line-height:1.18; color:var(--text);
}
.svc__item p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--muted); max-width:46ch; }
.svc__more{
  margin-top:18px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .4s ease;
}
.svc__more ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.svc__more li{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); padding:5px 11px;
  border:1px solid rgba(var(--c-gold-ink),.26); border-radius:var(--r-pill);
  background:linear-gradient(160deg,rgba(var(--c-lift),calc(.9 * var(--lift-k))),rgba(var(--c-lift),0) 60%),rgba(var(--c-gold-fill),.14);
  box-shadow:inset 0 1px 0 rgba(var(--c-lift),calc(.8 * var(--lift-k)));
}
.svc__item.is-open .svc__more,
.svc__item:hover .svc__more{ max-height:200px; opacity:1; }

/* ══════════════════════════════════════════════════════════════════════════
   9.  WORK — rail + index
   ══════════════════════════════════════════════════════════════════════════ */
.work{ background:linear-gradient(180deg,var(--ink),var(--surface-2) 40%,var(--ink)); }
.rail-wrap{ position:relative; margin-bottom:clamp(64px,8vw,110px); }
.rail{
  display:flex; gap:clamp(14px,2vw,24px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px var(--gut) 26px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
/* Film-only glass again: these live in a horizontal scroller, and a blur that
   re-resolves on every drag frame is the one place it is guaranteed to be felt. */
.rail__card{
  flex:0 0 clamp(268px,30vw,400px);
  scroll-snap-align:center;
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:var(--glass-sheen), var(--glass-film-2);
  box-shadow:var(--glass-edge), var(--glass-lift);
  border-radius:var(--r-glass);
  transition:transform .7s var(--ease), border-color .5s, box-shadow .5s;
  will-change:transform;
}
.rail__card:hover{
  border-color:rgba(var(--c-gold-ink),.42);
  box-shadow:var(--glass-edge-hi), var(--glass-lift);
}
.rail__vis{
  position:relative; aspect-ratio:16/11; overflow:hidden;
  display:grid; place-items:center;
  background:#FFFDF7;
}
.rail__vis::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 80% at 50% 108%, var(--c1,rgba(var(--c-gold-fill),.42)), transparent 62%),
    radial-gradient(60% 60% at 18% 10%, var(--c2,rgba(var(--c-navy),.32)), transparent 66%);
  transition:transform 1s var(--ease);
}
.rail__card:hover .rail__vis::before{ transform:scale(1.12); }
.rail__mono{
  position:relative; z-index:2;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(44px,6vw,72px); line-height:1;
  letter-spacing:-.03em;
  color:rgba(var(--c-shade),calc(.88 * var(--shade-k)));
  text-shadow:0 10px 26px rgba(var(--c-lift),calc(.7 * var(--lift-k)));
  transition:transform .8s var(--ease);
}
.rail__card:hover .rail__mono{ transform:translateY(-5px) scale(1.04); }
.rail__grid{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    linear-gradient(rgba(var(--c-shade),calc(.06 * var(--shade-k))) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--c-shade),calc(.06 * var(--shade-k))) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
}
.rail__body{ padding:22px 22px 24px; }
.rail__cat{
  display:inline-block; margin-bottom:12px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  padding:4px 11px;
  border:1px solid rgba(var(--c-gold-ink),.26); border-radius:var(--r-pill);
  background:linear-gradient(160deg,rgba(var(--c-lift),calc(.9 * var(--lift-k))),rgba(var(--c-lift),calc(.35 * var(--lift-k))) 60%);
  box-shadow:inset 0 1px 0 rgba(var(--c-lift),calc(.8 * var(--lift-k)));
}
.rail__body h3{
  margin:0 0 6px; font-family:var(--serif); font-weight:600;
  font-size:20px; line-height:1.22; color:var(--text);
}
.rail__dom{ margin:0 0 18px; font-size:13px; color:var(--muted); word-break:break-all; }
.rail__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
}
.rail__cta svg{ width:13px; height:13px; transition:transform .4s var(--ease); }
.rail__cta:hover svg{ transform:translate(3px,-3px); }

.rail__nav{
  display:flex; gap:8px; justify-content:flex-end;
  max-width:1320px; margin:0 auto; padding:0 var(--gut);
}
.rail__btn{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--gold);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge);
  cursor:pointer; transition:border-color .3s, background .3s, color .3s, box-shadow .3s;
}
.rail__btn svg{ width:20px; height:20px; }
.rail__btn:hover{
  border-color:var(--gold); color:var(--gold-hi);
  background:var(--glass-sheen), rgba(var(--c-gold-fill),.20);
  box-shadow:var(--glass-edge-hi);
}

/* index */
.index__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:20px; margin-bottom:28px;
  padding-bottom:20px; border-bottom:1px solid var(--line-soft);
}
.index__head h3{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.6vw,32px); color:var(--text);
}
.filters{ display:flex; flex-wrap:wrap; gap:6px; }
.filters button{
  border:1px solid var(--line-soft); border-radius:var(--r-pill);
  background:var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge);
  padding:8px 15px; cursor:pointer;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.filters button b{ color:var(--faint); font-weight:500; margin-left:6px; }
.filters button:hover{ color:var(--text); border-color:var(--line); }
.filters button[aria-selected="true"]{
  color:#241703; border-color:transparent;
  background:
    linear-gradient(157deg,rgba(var(--c-lift),calc(.4 * var(--lift-k))),rgba(var(--c-lift),0) 46%),
    linear-gradient(100deg,var(--gold-fill-hi),var(--gold-fill));
  box-shadow:inset 0 1px 0 rgba(var(--c-lift),calc(.7 * var(--lift-k))), 0 8px 20px -12px rgba(var(--c-gold-ink),.55);
}
.filters button[aria-selected="true"] b{ color:rgba(36,23,3,.62); }

.index__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
/* film-only glass — this list can run to 130 rows */
.index__list li{ background:var(--glass-sheen), rgba(var(--c-lift),calc(.66 * var(--lift-k))); }
.index__list a{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px;
  transition:background .35s ease;
}
.index__list a:hover{ background:rgba(var(--c-gold-fill),.12); }
.index__list .ix-mono{
  flex:0 0 34px; height:34px; display:grid; place-items:center;
  font-family:var(--serif); font-size:14px; font-weight:600;
  color:var(--gold-hi);
  border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(150deg,rgba(var(--c-gold-fill),.26),rgba(var(--c-lift),calc(.6 * var(--lift-k))) 70%);
  box-shadow:inset 0 1px 0 rgba(var(--c-lift),calc(.8 * var(--lift-k)));
}
.index__list .ix-txt{ min-width:0; }
.index__list .ix-name{
  display:block; font-size:14px; font-weight:500; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.index__list .ix-dom{
  display:block; font-size:11.5px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.index__list .ix-arrow{
  margin-left:auto; flex:0 0 auto; color:var(--faint);
  transition:transform .4s var(--ease), color .3s;
}
.index__list a:hover .ix-arrow{ transform:translate(3px,-3px); color:var(--gold); }
.index__more{ margin:28px auto 0; display:flex; }

/* ══════════════════════════════════════════════════════════════════════════
   9b.  VENDORS
   ──────────────────────────────────────────────────────────────────────────
   A hairline grid rather than separated cards: the same structural material
   as the services, stats and steps blocks, so the page keeps one rhythm. The
   glass here is film-only — sheen and rim, no backdrop lens — because six
   panes of blur in a row costs more than it shows at this size.
   ══════════════════════════════════════════════════════════════════════════ */
.vend{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.vend__card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(24px,3vw,38px);
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.62 * var(--lift-k)));
  box-shadow:var(--glass-edge);
  color:inherit;
  transition:background .5s ease, box-shadow .5s var(--ease);
}
/* the wash follows the pointer, the same light the service panels use */
.vend__card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(48% 60% at var(--mx,50%) var(--my,0%),rgba(var(--c-gold-fill),.16),transparent 70%);
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.vend__card:hover::before,
.vend__card:focus-visible::before{ opacity:1; }
.vend__card:hover{ background:var(--glass-sheen), rgba(var(--c-lift),calc(.86 * var(--lift-k))); box-shadow:var(--glass-edge-hi); }

.vend__mono{
  position:relative;
  width:44px; height:44px; margin-bottom:20px;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.02em;
  color:var(--gold-hi);
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(150deg,rgba(var(--c-gold-fill),.26),rgba(var(--c-lift),calc(.6 * var(--lift-k))) 70%);
  box-shadow:inset 0 1px 0 rgba(var(--c-lift),calc(.8 * var(--lift-k)));
  transition:transform .5s var(--ease), border-color .4s;
}
.vend__card:hover .vend__mono{ transform:translateY(-2px); border-color:rgba(var(--c-gold-ink),.38); }

.vend__card h3{
  position:relative; margin:0 0 6px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(18px,1.9vw,23px); line-height:1.2; color:var(--text);
}
.vend__cat{
  position:relative; margin-bottom:14px;
  font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--gold);
}
.vend__card p{
  position:relative; margin:0 0 22px;
  font-size:14.5px; line-height:1.7; color:var(--muted);
}
/* pinned to the foot so the meta line stays level across a row of cards
   whose descriptions run to different lengths */
.vend__foot{
  position:relative; margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.vend__foot em{
  font-style:normal; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.vend__dom{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--text-2);
  transition:color .3s;
}
.vend__dom svg{ width:12px; height:12px; transition:transform .4s var(--ease); }
a.vend__card:hover .vend__dom{ color:var(--gold-hi); }
a.vend__card:hover .vend__dom svg{ transform:translate(2px,-2px); }

/* ══════════════════════════════════════════════════════════════════════════
   10.  WHY + STATS
   ══════════════════════════════════════════════════════════════════════════ */
.why__list{
  list-style:none; margin:0 0 clamp(64px,9vw,120px); padding:0;
  counter-reset:w;
}
.why__item{
  counter-increment:w;
  position:relative;
  display:grid; grid-template-columns:auto 1.1fr 1.4fr; gap:clamp(18px,4vw,56px);
  align-items:start;
  padding:clamp(26px,3.4vw,42px) 0;
  border-top:1px solid var(--line-soft);
  transition:background .6s ease;
}
.why__item:last-child{ border-bottom:1px solid var(--line-soft); }
.why__item::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,var(--saffron),var(--gold),var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease);
}
.why__item:hover::after{ transform:scaleX(1); }
.why__item .n{
  font-size:11px; letter-spacing:.2em; color:var(--gold); padding-top:10px;
  font-variant-numeric:tabular-nums;
}
.why__item h3{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,3.4vw,44px); line-height:1.08; color:var(--text);
  letter-spacing:-.01em;
  transition:transform .7s var(--ease);
}
.why__item:hover h3{ transform:translateX(8px); }
.why__item p{ margin:0; font-size:15.5px; line-height:1.72; color:var(--muted); padding-top:8px; }

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.stat{
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.68 * var(--lift-k)));
  box-shadow:var(--glass-edge);
  padding:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
.stat::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--saffron),var(--gold-hi),var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease);
}
.stat.in::before{ transform:scaleX(1); }
.stat b{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(38px,6vw,72px); line-height:.94;
  letter-spacing:-.02em;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.stat span{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.stats__note{ margin:18px 0 0; font-size:12.5px; color:var(--faint); }

/* ══════════════════════════════════════════════════════════════════════════
   11.  TECHNOLOGY
   ══════════════════════════════════════════════════════════════════════════ */
.steps{
  list-style:none; margin:0 0 clamp(56px,7vw,96px); padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  counter-reset:s;
}
.steps li{
  counter-increment:s;
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.62 * var(--lift-k)));
  box-shadow:var(--glass-edge);
  padding:clamp(24px,3vw,38px);
  position:relative; overflow:hidden;
  transition:background .5s, box-shadow .5s;
}
.steps li:hover{
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.92 * var(--lift-k)));
  box-shadow:var(--glass-edge-hi);
}
.steps li::before{
  content:"0" counter(s);
  display:block; margin-bottom:20px;
  font-family:var(--serif); font-size:clamp(30px,4vw,50px); line-height:1;
  color:transparent;
  background:linear-gradient(160deg,var(--gold-hi),rgba(var(--c-gold-ink),.28));
  -webkit-background-clip:text; background-clip:text;
}
.steps li h4{
  margin:0 0 8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--text);
}
.steps li p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.steps li::after{
  content:""; position:absolute; right:0; top:50%; width:0; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .7s var(--ease);
}
.steps li:hover::after{ width:34px; }

.cap{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
}
.cap__col h4{
  margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.cap__col ul{ list-style:none; margin:0; padding:0; }
.cap__col li{
  padding:9px 0 9px 18px; position:relative;
  font-size:14.5px; color:var(--text-2);
  border-bottom:1px solid var(--line-soft);
  transition:color .3s, padding-left .4s var(--ease);
}
.cap__col li::before{
  content:""; position:absolute; left:0; top:17px;
  width:5px; height:5px; transform:rotate(45deg);
  background:var(--gold-mid);
  transition:background .3s, transform .4s var(--ease);
}
.cap__col li:hover{ color:var(--text); padding-left:24px; }
.cap__col li:hover::before{ background:var(--saffron); transform:rotate(135deg); }
.cap__col:nth-child(2) li:hover::before{ background:var(--gold); }
.cap__col:nth-child(3) li:hover::before{ background:var(--navy-lit); }
.cap__col:nth-child(4) li:hover::before{ background:var(--green); }

/* ══════════════════════════════════════════════════════════════════════════
   12.  CLIENTS
   ══════════════════════════════════════════════════════════════════════════ */
.rating{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:22px 26px;
  border:1px solid var(--line); border-radius:var(--r-glass);
  background:
    linear-gradient(160deg,rgba(var(--c-gold-fill),.20),transparent 70%),
    var(--glass-sheen), var(--glass-film);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge), var(--glass-lift);
}
.rating__score{ display:flex; align-items:baseline; gap:4px; }
.rating__score b{
  font-family:var(--serif); font-size:52px; font-weight:600; line-height:.9;
  color:var(--gold-hi);
}
.rating__score span{ font-size:16px; color:var(--muted); }
.rating__stars{ display:flex; gap:5px; }
.rating__stars i{
  width:14px; height:14px; background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.rating__stars i.half{ background:linear-gradient(90deg,var(--gold) 60%,rgba(var(--c-gold-ink),.22) 60%); }
.rating p{ margin:0; font-size:13px; color:var(--muted); }
.rating p b{ color:var(--text); }

/* ──────────────────────────────────────────────────────────────────────────
   GOOGLE REVIEWS
   ──────────────────────────────────────────────────────────────────────────
   These run from six words to ninety, so a row grid would either crop the
   long ones or leave craters under the short ones. Columns let each card take
   exactly the height its own text needs; `break-inside` keeps a card whole.
   ────────────────────────────────────────────────────────────────────────── */
.revs{
  column-count:3; column-gap:clamp(14px,1.6vw,22px);
  margin-bottom:clamp(22px,2.6vw,32px);
}
.rev{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; margin:0 0 clamp(14px,1.6vw,22px);
  padding:clamp(20px,2.1vw,26px);
  border:1px solid var(--line); border-radius:var(--r-glass);
  background:var(--glass-sheen), var(--glass-film-2);
  -webkit-backdrop-filter:var(--glass-lens-sm);
  backdrop-filter:var(--glass-lens-sm);
  box-shadow:var(--glass-edge), var(--glass-lift);
  transition:box-shadow .6s var(--ease), border-color .5s ease;
}
.rev:hover{
  border-color:rgba(var(--c-gold-ink),.34);
  box-shadow:var(--glass-edge-hi), var(--glass-lift);
}
.rev__stars{ display:flex; gap:4px; margin-bottom:14px; }
.rev__stars i{
  width:13px; height:13px; background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.rev__stars i.off{ background:rgba(var(--c-gold-ink),.22); }
.rev__q{
  margin:0 0 18px; font-size:14.5px; line-height:1.72; color:var(--text);
}
.rev__by{ display:flex; align-items:center; gap:11px; }
.rev__ini{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  font-family:var(--serif); font-size:13px; letter-spacing:.02em;
  color:var(--gold-hi);
  background:linear-gradient(150deg,rgba(var(--c-gold-fill),.34),rgba(var(--c-gold-fill),.10));
  box-shadow:inset 0 0 0 1px rgba(var(--c-gold-ink),.18);
}
.rev__name{ font-size:14px; font-weight:600; color:var(--text); }
.revs__note{
  margin:0 0 clamp(34px,4vw,52px);
  font-size:13px; color:var(--muted);
}
.revs__note a{ color:var(--gold-hi); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:1080px){ .revs{ column-count:2; } }
@media (max-width:640px){ .revs{ column-count:1; } }

.wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.wall a{
  position:relative; overflow:hidden;
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.62 * var(--lift-k)));
  box-shadow:var(--glass-edge);
  min-height:104px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:18px 16px;
  transition:background .45s ease;
}
.wall a::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg,rgba(var(--c-gold-fill),.22),transparent 62%);
  opacity:0; transition:opacity .45s ease;
}
.wall a:hover{
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.94 * var(--lift-k)));
  box-shadow:var(--glass-edge-hi);
}
.wall a:hover::before{ opacity:1; }
.wall .w-mono{
  position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.02em;
  color:var(--gold);
  transition:color .4s, transform .5s var(--ease);
}
.wall a:hover .w-mono{ color:var(--gold-hi); transform:translateY(-2px); }
.wall .w-name{
  position:relative;
  font-size:11.5px; line-height:1.4; color:var(--faint);
  transition:color .4s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wall a:hover .w-name{ color:var(--text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   13.  CONTACT
   ══════════════════════════════════════════════════════════════════════════ */
.contact{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 108%, rgba(var(--c-gold-fill),.16), transparent 64%),
    var(--surface-2);
}
.contact__bg{ position:absolute; inset:0; }
.contact__bg canvas{ width:100%; height:100%; opacity:.85; }
.contact .wrap{ position:relative; z-index:2; }
.contact__grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,72px);
  align-items:start;
  margin-top:clamp(20px,3vw,40px);
}

/* the deepest pane on the page: the contact canvas moves behind it, so this
   is the one place the lens has real material to work with */
.form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  padding:clamp(24px,3.4vw,42px);
  border:1px solid var(--line); border-radius:var(--r-glass);
  background:var(--glass-sheen), rgba(var(--c-lift),calc(.62 * var(--lift-k)));
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:var(--glass-edge), var(--glass-lift);
}
.field{ position:relative; }
.field--full{ grid-column:1/-1; }
.form .btn{ grid-column:1/-1; }
/* fields are recesses cut into the pane, not panes of their own — light on the
   inside of the top edge, shadow falling in from it */
.field input,.field textarea,.field select{
  width:100%; padding:20px 16px 10px;
  background:linear-gradient(180deg,rgba(var(--c-lift),calc(.95 * var(--lift-k))),rgba(var(--c-lift),calc(.72 * var(--lift-k))));
  border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.9 * var(--lift-k))),
    inset 0 6px 12px -10px rgba(var(--c-shade-w),calc(.45 * var(--shade-k)));
  color:var(--text); font-family:inherit; font-size:15px;
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:118px; }
.field select{ padding-top:22px; cursor:pointer; }
.field select option{ background:var(--surface); color:var(--text); }
.field label{
  position:absolute; left:17px; top:16px;
  font-size:14px; color:var(--muted);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .32s var(--ease), color .32s ease;
}
.field label span{ color:var(--faint); }
.field label.label--static,
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.76);
  color:var(--gold);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(var(--c-gold-ink),.5);
  background:linear-gradient(180deg,#fff,rgba(var(--c-lift),calc(.9 * var(--lift-k))));
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.9 * var(--lift-k))),
    inset 0 6px 12px -10px rgba(var(--c-shade-w),calc(.35 * var(--shade-k))),
    0 0 0 3px rgba(var(--c-gold-fill),.22);
  outline:none;
}
.field.has-err input,.field.has-err textarea{ border-color:#C0392B; }
.err{ margin:6px 0 0; font-size:12px; color:#B23122; min-height:0; }

/* the business field is a two-line note, not a brief — it should not open at
   the same height as the requirement box below it */
#f-biz{ min-height:74px; }

/* required marker: red enough to register, small enough not to shout */
.req{ color:#C0392B; font-weight:600; font-size:1.05em; line-height:0; }
.form__note{
  grid-column:1/-1; margin:-4px 0 0;
  font-size:12px; color:var(--faint);
}
.form__status{
  grid-column:1/-1; margin:0; font-size:13.5px; color:var(--gold-hi);
  min-height:20px;
}
.form__status.is-err{ color:#B23122; }
.form__status.is-ok{
  display:flex; align-items:center; gap:8px;
  color:#0F7A22; font-weight:500;
}
/* the tick travels inline as a data URI — no icon file, no extra markup, and
   nothing to load before the confirmation can be shown */
.form__status.is-ok::before{
  content:""; flex:0 0 auto;
  width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23138808'/%3E%3Cpath d='M5.8 10.3l2.7 2.7 5.7-5.7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* the button says what it is doing while the request is in flight */
.btn.is-busy{ opacity:.72; cursor:progress; }
.btn:disabled{ pointer-events:none; }

.contact__aside{ display:grid; gap:clamp(20px,2.6vw,32px); }
.cblock h4{
  margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.cblock address{ font-style:normal; font-size:15px; line-height:1.75; color:var(--text-2); }
.cblock p{ margin:0; font-size:15px; line-height:1.75; }
.clink{
  display:block; font-size:15.5px; color:var(--text);
  padding:5px 0; width:fit-content;
  position:relative;
}
.clink::after{
  content:""; position:absolute; left:0; bottom:3px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.clink:hover{ color:var(--gold-hi); }
.clink:hover::after{ transform:scaleX(1); }

/* ══════════════════════════════════════════════════════════════════════════
   14.  FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.foot{
  border-top:1px solid var(--line);
  background:var(--foot-bg);
  padding:clamp(48px,7vw,84px) 0 26px;
}
.foot__inner{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(32px,6vw,80px);
  align-items:start;
}
/* the full lockup — wordmark, chakra and tagline all read on the ground they
   were drawn for, so this one keeps its plate in both themes. --plate-halo is
   keeps it from reading as a card dropped onto the footer: a wide, very
   faint gold bleed that steps the plate's edge out into the ground instead
   of ending it, so in both themes the lockup settles into the footer
   rather than sitting on top of it. */
.foot__logo{
  display:block; width:clamp(232px,29vw,322px); margin-bottom:18px;
  padding:16px 20px 12px; border-radius:18px;
  background:none;
  box-shadow:none;
  transition:background .5s ease, box-shadow .5s ease;
}
:root[data-theme="dark"] .foot__logo{
  background:var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lift),calc(.09 * var(--lift-k))),
    inset 0 0 0 1px var(--plate-edge),
    var(--plate-halo),
    var(--plate-lift);
}
.foot__brand p{ margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--foot-dim); }
.foot__nav{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.foot__nav h5{
  margin:0 0 14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.foot__nav a{
  display:block; padding:5px 0; font-size:14.5px; color:var(--text-2);
  transition:color .3s, transform .4s var(--ease);
}
.foot__nav a:hover{ color:var(--gold-hi); transform:translateX(4px); }
.foot__base{
  margin-top:clamp(40px,6vw,72px); padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:12.5px; color:var(--foot-dim);
}
.foot__base p{ margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   15.  CURSOR
   ══════════════════════════════════════════════════════════════════════════ */
.cursor{
  position:fixed; top:0; left:0; z-index:9500;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(var(--c-gold-ink),.55); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .3s ease, width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), background .35s ease, border-color .35s ease;
  will-change:transform;
}
.cursor i{
  position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
  background:var(--gold); border-radius:50%;
}
.cursor.is-on{ opacity:1; }
.cursor.is-hot{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  background:rgba(var(--c-gold-fill),.16); border-color:var(--gold);
}
.cursor.is-hot i{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   16.  FLOATING ENQUIRY DOCK — liquid glass
   ──────────────────────────────────────────────────────────────────────────
   Two ways to reach us, always within thumb reach: WhatsApp and the enquiry
   form. They float *above* the editorial grid as hardware rather than
   layout, which is why they are the roundest things on the page.

   One material, four stacked jobs, in paint order:
     .fab          backdrop lensing (blur + saturate) and the ambient shadow
     .fab::before  the sheen — a bright diagonal band that drifts on hover
     .fab::after   the rim — a gradient hairline, bright at the top edge where
                   light would land, fading to nothing at the bottom
     .fab__tint    the body colour, its own layer so it can brighten on hover
                   without touching the sheen or the rim
   Only the tint and the icon differ between the two buttons.

   The label sits *before* the icon in the markup: the dock is pinned to the
   right, so the pill grows leftwards and the icon never moves under the
   pointer that is hovering it.
   ══════════════════════════════════════════════════════════════════════════ */
.dock{
  position:fixed;
  right:clamp(14px,2.6vw,32px);
  bottom:clamp(14px,2.6vw,32px);
  z-index:7200;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(10px,1.2vw,14px);

  /* hidden until the page has scrolled; JS adds .is-in */
  visibility:hidden;
  transition:visibility 0s linear .6s;
}
.dock.is-in{ visibility:visible; transition:visibility 0s linear 0s; }

.fab{
  position:relative;
  display:flex; align-items:center;
  height:clamp(52px,6.4vw,58px);
  border-radius:var(--r-pill);
  overflow:hidden; isolation:isolate;

  border:none;
  background:rgba(var(--c-lift),calc(.42 * var(--lift-k)));
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:
    0 1px 0 rgba(var(--c-lift),calc(.85 * var(--lift-k))) inset,       /* top rim catch  */
    0 -1px 0 rgba(var(--c-shade-w),calc(.08 * var(--shade-k))) inset,         /* bottom bounce  */
    0 0 24px rgba(var(--c-lift),calc(.45 * var(--lift-k))) inset,      /* interior glow  */
    0 14px 34px rgba(var(--c-shade-w),calc(.20 * var(--shade-k))),            /* ambient drop   */
    0 3px 10px rgba(var(--c-shade-w),calc(.12 * var(--shade-k)));             /* contact shadow */

  /* each button carries its own entrance so the dock can stagger them */
  opacity:0; transform:translateY(14px) scale(.92);
  transition:opacity .5s var(--ease), transform .6s var(--ease),
             box-shadow .4s ease;
}
.dock.is-in .fab{ opacity:1; transform:translateY(0) scale(1); }
/* the dock fills bottom-up: WhatsApp lands first, the enquiry pill a beat later */
.dock.is-in .fab--enq{ transition-delay:.07s; }

/* the body tint — its own layer so hover can lift it alone */
.fab__tint{
  position:absolute; inset:0; z-index:-2; border-radius:inherit;
  transition:opacity .45s ease;
  opacity:.9;
}
.fab--wa .fab__tint{
  background:
    linear-gradient(152deg,
      rgba(37,211,102,.55) 0%,
      rgba(25,150,50,.45) 46%,
      rgba(var(--c-green),.42) 100%);
}
.fab--enq .fab__tint{
  background:
    linear-gradient(152deg,
      rgba(var(--c-gold-fill),.75) 0%,
      rgba(var(--c-gold-fill),.62) 46%,
      rgba(var(--c-gold-ink),.55) 100%);
}

/* the sheen — the thing that makes it read as *liquid* rather than frosted.
   A steep bright band sitting across the top-left, offset far enough that
   the hover transition slides it across the face like light moving on a
   curved surface. */
.fab::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(var(--c-lift),calc(.42 * var(--lift-k))) 0%,
      rgba(var(--c-lift),calc(.10 * var(--lift-k))) 26%,
      rgba(var(--c-lift),0)   48%,
      rgba(var(--c-lift),0)   72%,
      rgba(var(--c-lift),calc(.09 * var(--lift-k))) 100%);
  transform:translateX(-16%);
  transition:transform .8s var(--ease), opacity .5s ease;
  pointer-events:none;
}

/* the rim — a hairline that is brightest where light lands and turns to a
   faint shadow underneath, where on paper the pane's own thickness would
   darken rather than glow. A flat 1px border cannot do this; a masked
   gradient can. */
.fab::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,
    rgba(var(--c-lift),calc(.95 * var(--lift-k))) 0%,
    rgba(var(--c-lift),calc(.45 * var(--lift-k))) 34%,
    rgba(var(--c-shade-w),calc(.14 * var(--shade-k))) 60%,
    rgba(var(--c-shade-w),calc(.20 * var(--shade-k))) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.fab__icon{
  flex:0 0 auto;
  width:clamp(52px,6.4vw,58px); height:100%;
  padding:clamp(14px,1.7vw,17px);
  filter:drop-shadow(0 1px 1px rgba(var(--c-lift),calc(.6 * var(--lift-k))));
  transition:transform .5s var(--ease);
}
.fab--wa .fab__icon{ color:#08461A; }
.fab--enq .fab__icon{ color:#3D2606; padding:clamp(15px,1.8vw,18px); }

/* The label is width-animated rather than translated so the glass itself
   grows — a pill that slides a label out from under its own edge would show
   the label through the blur before it arrives. */
.fab__label{
  display:flex; align-items:center; height:100%;
  max-width:0; overflow:hidden;
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 2px rgba(var(--c-lift),calc(.55 * var(--lift-k)));
  opacity:0;
  transition:max-width .62s var(--ease), opacity .4s ease .1s,
             padding .62s var(--ease);
}
.fab--wa .fab__label{ color:#08461A; }
.fab--enq .fab__label{ color:#3D2606; }

@media (hover:hover) and (pointer:fine){
  .fab:hover .fab__label,
  .fab:focus-visible .fab__label{
    max-width:260px; opacity:1;
    padding-left:clamp(20px,2vw,24px);
  }
  .fab:hover{
    box-shadow:
      0 1px 0 rgba(var(--c-lift),calc(.95 * var(--lift-k))) inset,
      0 -1px 0 rgba(var(--c-shade-w),calc(.10 * var(--shade-k))) inset,
      0 0 30px rgba(var(--c-lift),calc(.6 * var(--lift-k))) inset,
      0 18px 42px rgba(var(--c-shade-w),calc(.24 * var(--shade-k))),
      0 3px 12px rgba(var(--c-shade-w),calc(.14 * var(--shade-k))),
      0 0 26px var(--fab-halo,rgba(var(--c-shade-w),calc(.10 * var(--shade-k))));  /* the glass picks up its own colour */
  }
  .fab--wa{  --fab-halo:rgba(var(--c-green),.30); }
  .fab--enq{ --fab-halo:rgba(var(--c-gold-ink),.34); }
  .fab:hover::before{ transform:translateX(14%); }
  .fab:hover .fab__tint{ opacity:1; }
  .fab:hover .fab__icon{ transform:scale(1.06); }
}

/* press — the glass compresses rather than dimming, which is what a physical
   pane of it would do */
.dock.is-in .fab:active{ transform:translateY(0) scale(.965); }
.fab:active::before{ transform:translateX(20%); }

.fab:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* out of the way of the things it would otherwise sit on top of */
body.is-locked .dock,               /* mobile menu open */
body.is-booting .dock{              /* reveal still running */
  visibility:hidden !important;
}
body.is-locked .dock .fab,
body.is-booting .dock .fab{
  opacity:0 !important;
  transform:translateY(14px) scale(.92) !important;
}

/* On coarse pointers there is no hover, so a label that only opens on hover
   would never open at all — keep both labels out and size the pills for a
   thumb. Two named buttons also removes any guessing about what the
   envelope does. */
@media (hover:none),(pointer:coarse){
  .dock{ gap:10px; }
  .fab{ height:54px; }
  .fab__icon{ width:54px; padding:15px; }
  .fab--enq .fab__icon{ padding:16px; }
  .fab__label{
    max-width:260px; opacity:1;
    padding-left:18px;
    font-size:11.5px; letter-spacing:.11em;
  }
}
@media (max-width:380px){
  /* no room for two labelled pills next to the page — drop to icons */
  .fab__label{ max-width:0; opacity:0; padding-left:0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   17.  RESPONSIVE — intentional layouts, not shrunk desktop
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .svc__item:nth-child(1),.svc__item:nth-child(7){ grid-column:span 3; }
  .svc__item{ grid-column:span 3; }
  .svc__item:nth-child(2){ grid-column:span 3; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vend{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* tablet: two portfolio cards across */
  .live__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .live__head{ grid-template-columns:1fr; align-items:start; gap:18px; }
}

/* Wider cards need a shallower plate: held at 16/10 the preview becomes the
   whole card and the words are pushed under the fold of the grid. */
/* the bar runs out of room for the client's name before it runs out of room
   for the address the visitor is actually looking at */
@media (max-width:860px){
  .peek__name{ display:none; }
}
@media (max-width:980px){
  .live__vis{ aspect-ratio:16/9; }
}

/* the nav row runs out of room before the burger breakpoint does, so the
   labels shed weight first rather than wrapping onto a second line */
@media (max-width:1120px){
  .nav__links{ gap:clamp(9px,1.1vw,16px); }
  .nav__links a{ font-size:12.5px; letter-spacing:.03em; }
}

@media (max-width:980px){
  .nav__links,.nav__cta{ display:none; }
  /* with the links and the CTA gone, the switch would strand itself beside the
     logo — it takes over the auto margin so it stays paired with the burger */
  .themer{ margin-left:auto; }
  .nav__burger{ display:block; margin-left:10px; }
  .about__grid{ grid-template-columns:1fr; }
  .about__arches{ order:-1; max-width:420px; }
  .sect-head--split{ grid-template-columns:1fr; align-items:start; }
  .sect-head__note{ padding-left:16px; }
  .prod{ grid-template-columns:1fr; }
  .mv{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .foot__inner{ grid-template-columns:1fr; }
  .why__item{ grid-template-columns:auto 1fr; }
  .why__item p{ grid-column:2; padding-top:12px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .hero{ min-height:92svh; align-items:flex-end; padding-bottom:clamp(64px,10vh,90px); }
  .hero__title{ font-size:clamp(40px,12vw,58px); max-width:none; }
  .hero__lede{ font-size:15.5px; max-width:38ch; }
  /* keep the copy sitting on solid ground, whatever the scene is doing */
  .hero__veil{
    background:var(--hero-veil-m);
  }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  /* the scene runs brighter behind a narrow screen, so the film thickens to
     keep the numbers legible — the lens stays */
  .hero__meta{
    grid-template-columns:1fr;
    background:var(--glass-sheen), rgba(var(--c-lift),calc(.82 * var(--lift-k)));
  }
  /* stacked, so the divider moves from the side to the top edge */
  .hero__meta li{
    flex-direction:row; align-items:baseline; gap:12px;
    border-left:none; border-top:1px solid var(--line-soft);
  }
  .hero__meta li:first-child{ border-top:none; }
  .hero__meta b{ font-size:26px; min-width:96px; }
  .hero__scroll{ display:none; }
  .svc__item,.svc__item:nth-child(n){ grid-column:span 6; min-height:0; }
  .svc__more{ max-height:200px; opacity:1; }
  .steps,.cap{ grid-template-columns:1fr; }
  .vend{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }

  /* phone: one card across */
  .live__grid{ grid-template-columns:1fr; }
  .live__vis{ aspect-ratio:16/9; }

  /* the preview takes the whole screen and the bar keeps only the address,
     the way out and the way back */
  .peek{ padding:0; }
  .peek__win{ width:100%; height:100%; border:0; border-radius:0; }
  .peek__bar{ height:48px; gap:8px; }
  .peek__sizes{ display:none; }
  .peek__name{ display:none; }
  .peek__out span{ display:none; }
  .peek__out{ padding:7px 9px; }
  .peek__stage[data-size="phone"] .peek__frame{
    width:100%; height:100%; border:0; border-radius:0; box-shadow:none;
  }
  .form{ grid-template-columns:1fr; }
  .foot__nav{ grid-template-columns:1fr 1fr; }
  .index__list{ grid-template-columns:1fr; }
  .wall{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .wall a{ min-height:86px; }
  .rail__nav{ justify-content:center; }
  .reveal__stage{ width:90vw; }
}

/* low-power devices: drop the expensive compositing.
   Every lensed surface loses its backdrop-filter and gains enough opacity to
   hold its own contrast — glass without a lens behind it is just a flat film,
   and text on a flat film over a moving canvas is unreadable. */
body.is-low .mv__glow,
body.is-low .svc__item::before{ display:none; }
body.is-low .form,
body.is-low .nav.is-stuck,
body.is-low .menu,
body.is-low .fab,
body.is-low .mv__card,
body.is-low .prod__card,
body.is-low .rating,
body.is-low .hero__meta,
body.is-low .btn--ghost,
body.is-low .rail__btn,
body.is-low .filters button,
body.is-low .nav__burger{ -webkit-backdrop-filter:none; backdrop-filter:none; }
body.is-low .nav.is-stuck{ background:rgba(var(--c-lift),calc(.96 * var(--lift-k))); }
body.is-low .form{ background:var(--glass-sheen), rgba(var(--c-lift),calc(.94 * var(--lift-k))); }
body.is-low .hero__meta{ background:var(--glass-sheen), rgba(var(--c-lift),calc(.94 * var(--lift-k))); }
body.is-low .mv__card,
body.is-low .prod__card,
body.is-low .rating{ background:var(--glass-sheen), rgba(var(--c-lift),calc(.95 * var(--lift-k))); }
body.is-low .reveal__sweep{ display:none; }
/* without the backdrop lens there is nothing behind the tint to look through,
   so the buttons become opaque pills rather than milky ones */
body.is-low .fab--wa{ background:#8FE3AC; }
body.is-low .fab--enq{ background:#F3D79B; }
body.is-low .fab__tint{ opacity:1; }
body.is-low .fab::before{ opacity:.5; }

/* ══════════════════════════════════════════════════════════════════════════
   18.  ANIMATIC FLOW
   ──────────────────────────────────────────────────────────────────────────
   Every rule below is gated behind .flow-on / .flow-rich, which only ever
   come from flow.js. No JS, or prefers-reduced-motion, and none of this
   applies — the page falls back to the plain reveals above it.

   The custom properties are all fed by the one scroll loop in flow.js:
     --fl-in   a section arriving      --fl-y    depth-layer offset
     --fl-out  a block leaving         --fl-vel  scroll velocity

   Note the split between `transform` and `translate`. The entry animations
   further up this file own `transform`; everything scroll-linked here rides
   the independent `translate` property, so a card can be mid-reveal and
   parallaxing at once without either one clobbering the other.
   ══════════════════════════════════════════════════════════════════════════ */
@property --fl-y   { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --fl-out { syntax:'<number>'; inherits:false; initial-value:0; }
@property --fl-vel { syntax:'<number>'; inherits:true;  initial-value:0; }
/* inherited on purpose: the divider that reads this is a ::before, and a
   pseudo-element only picks a registered property up from its originator if
   the property inherits — otherwise it would sit on the initial value forever */
@property --fl-in  { syntax:'<number>'; inherits:true;  initial-value:0; }

/* — section dividers draw themselves as the section arrives —
   clipped rather than scaled: scaleX would squeeze the whole tricolour into
   the drawn portion instead of wiping it on left to right */
.flow-on .section + .section{ border-top-color:transparent; }
.flow-on .section + .section::before{
  content:""; position:absolute; z-index:1;
  left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,var(--saffron),var(--gold-mid) 52%,var(--green));
  opacity:.5;
  clip-path:inset(0 calc((1 - var(--fl-in,0)) * 100%) 0 0);
}

/* — headings, a line at a time —
   The mask is a clip-path rather than overflow:hidden for two reasons: it
   takes no part in layout, so wrapping the lines cannot shift a heading by a
   single pixel; and it can bleed sideways and a little below the line box, so
   Cormorant's descenders and the italic overhang are not shaved off. The
   bleed is a fraction of an em and the line starts a full 125% below, so
   there is no chance of the incoming text peeking under the edge. */
.flow-on .fl-line{
  display:block;
  clip-path:inset(-.12em -.4em -.14em -.14em);
}
.flow-on .fl-line > span{
  display:block;
  transform:translateY(125%) rotate(1.4deg); transform-origin:0 0;
  transition:transform 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * .085s);
}
.flow-on .fl-lines.in .fl-line > span{ transform:none; }
/* the mask does the moving now, so the wrapper only fades */
.flow-on .reveal-up.fl-lines{ transform:none; }

/* — grids arrive as a wave: one delay step per column, per row — */
.flow-on .fl-stag{ transition-delay:calc(var(--i,0) * var(--fl-step,.07s)); }
.flow-on .fl-item{
  opacity:0; translate:0 24px;
  transition:opacity .8s ease, translate 1s var(--ease);
  transition-delay:calc(var(--i,0) * var(--fl-step,.07s));
}
.flow-on .fl-item.in{ opacity:1; translate:0 0; }

/* — depth: layers drift against the scroll — */
.flow-rich .fl-par{ translate:0 var(--fl-y,0px); }

/* — a block eases back once it has been read, instead of cutting away at the
     top of the screen. Origin is the top edge so the recede reads as depth
     rather than as the block sliding out from under itself. — */
.flow-rich .fl-block{
  transform:translate3d(0,calc(var(--fl-out,0) * -30px),0) scale(calc(1 - var(--fl-out,0) * .018));
  transform-origin:50% 0;
}
/* the dimming is a separate class because a block that carries .reveal-up is
   already animating its own opacity on the way in — one owner per property */
.flow-rich .fl-fade{ opacity:calc(1 - var(--fl-out,0) * .48); }
/* the hero is already mid-transform on `transform` while the intro clears,
   so its exit rides `translate` instead */
.flow-rich .fl-hero{
  translate:0 calc(var(--fl-out,0) * -64px);
  opacity:calc(1 - var(--fl-out,0) * .9);
  will-change:translate, opacity;
}

/* — cards hang a little behind a fast flick and catch up when it stops — */
.flow-rich .fl-drag{ translate:0 calc(var(--fl-vel,0) * var(--fl-amp,6px)); }
/* a layer can be both, and `translate` is a single property — so the two
   offsets are summed here rather than one silently winning */
.flow-rich .fl-par.fl-drag{
  translate:0 calc(var(--fl-y,0px) + var(--fl-vel,0) * var(--fl-amp,6px));
}

/* the contact scene is the section's own background, so it is given bleed
   before it is allowed to drift — otherwise the drift opens a seam */
.flow-rich .contact .contact__bg{ top:-70px; bottom:-70px; }

/* ══════════════════════════════════════════════════════════════════════════
   18b.  AMBIENT FLOAT
   ──────────────────────────────────────────────────────────────────────────
   §18 above moves the page when the scroll moves. This moves it when nothing
   moves at all. Gated behind .float-on / .float-rich, which only ever come
   from float.js.

     --fl-mx / --fl-my   pointer, smoothed, written on <html> once a frame
     --fl-d              per-layer depth, in px of travel at full deflection

   Every layer derives its own offset from those two numbers, so the cost of
   the parallax does not grow with the number of layers - one style write a
   frame feeds all of them, and the compositor does the moving.
   ══════════════════════════════════════════════════════════════════════════ */
@property --fl-mx { syntax:'<number>'; inherits:true; initial-value:0; }
@property --fl-my { syntax:'<number>'; inherits:true; initial-value:0; }

/* - the words -
   Amplitude is deliberately tiny: about two pixels and half a degree. Big
   enough that a still screenshot and the live page are different things,
   small enough that the eye reads it as the page breathing rather than as
   text that will not sit still. Never a bounce, never a shake - the curve
   never returns the same way it left. */
@keyframes flWordDrift{
  0%   { transform:translate3d(0,0,0)          rotate(0deg); }
  27%  { transform:translate3d(.5px,-2.1px,0)  rotate(.42deg); }
  53%  { transform:translate3d(-.7px,1.2px,0)  rotate(-.3deg); }
  78%  { transform:translate3d(-.4px,-1.1px,0) rotate(.16deg); }
  100% { transform:translate3d(0,0,0)          rotate(0deg); }
}
@keyframes flWordDriftFine{
  0%   { transform:translate3d(0,0,0); }
  30%  { transform:translate3d(.3px,-.75px,0); }
  62%  { transform:translate3d(-.35px,.5px,0); }
  100% { transform:translate3d(0,0,0); }
}

.float-on .fl-word{
  display:inline-block;
  /* the word's own box only - the drift must not re-wrap the line */
  white-space:pre-wrap;
}
/* Only while the heading is actually on screen. `.fl-live` is added and
   removed by float.js's own observer, so an off-screen heading has no
   animation at all rather than a paused one - which is what keeps the count
   of compositor layers at the two or three headings in view, instead of every
   heading the visitor has scrolled past. (The site's own `.in` cannot do this
   job: it is a latch that is never taken off again.) */
.float-on .fl-live .fl-word{
  /* `--w` is the word's index: a per-word duration so no two words share a
     period, and a *negative* delay so the heading arrives already scattered
     through the cycle instead of starting as one block and drifting apart */
  animation:flWordDrift calc(8.5s + var(--w,0) * .77s) ease-in-out
            calc(var(--w,0) * -1.37s) infinite;
}
/* the eyebrow is a line of 11px caps - at the heading's amplitude it would
   read as a wobble, so it floats at a third of it */
.float-on .eyebrow.fl-live .fl-word{
  animation-name:flWordDriftFine;
  animation-duration:calc(11s + var(--w,0) * .9s);
}

/* The hero's line mask is `overflow:hidden`, which would shave the drift off
   the top and bottom of every word. Swapped for the same clipped-with-bleed
   mask §18 uses on the display headings: it still hides the 105% entry slide,
   but it lets a two-pixel drift through. */
.float-on .hero__title .line{
  overflow:visible;
  clip-path:inset(-.02em -.32em -.06em -.12em);
}

/* - pointer parallax -
   `translate` is shared with §18's scroll channels, so where a layer is on
   both the two are summed in one declaration rather than one silently
   winning. Vertical travel is deliberately under half the horizontal: a
   window is wider than it is tall, so equal amplitudes do not read as equal. */
.float-rich .fl-ptr{
  translate:calc(var(--fl-mx,0) * var(--fl-d,0) * 1px)
            calc(var(--fl-my,0) * var(--fl-d,0) * .42px);
}
.float-rich .fl-ptr.fl-par{
  translate:calc(var(--fl-mx,0) * var(--fl-d,0) * 1px)
            calc(var(--fl-y,0px) + var(--fl-my,0) * var(--fl-d,0) * .42px);
}
/* the hero lines carry the deepest parallax on the page, so they are the one
   place worth naming a compositor layer for outright */
.float-rich .hero__title .line.fl-ptr{ will-change:translate; }

/* - bodies in the space -
   A blurred disc and a hairline ring, in the section's own tint. They sit
   behind the content and take no pointer, so nothing here can come between
   the visitor and a link. `--k` is the size as a percentage of the section's
   width, which is what keeps them proportionate at every breakpoint instead
   of needing a size per media query. */
.fl-orb{
  position:absolute; z-index:0;
  left:var(--x,50%); top:var(--y,50%);
  width:calc(var(--k,20) * 1%);
  aspect-ratio:1;
  margin:calc(var(--k,20) * -.5%) 0 0 calc(var(--k,20) * -.5%);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s ease;
  background:radial-gradient(circle at 34% 30%,
    rgba(var(--orb),.30), rgba(var(--orb),.10) 46%, rgba(var(--orb),0) 72%);
  filter:blur(var(--orb-blur,26px));
}
/* both the reveal and the drift are gated, not just the reveal - otherwise a
   device that never gets .float-rich would sit there animating nine blurred
   bodies it is deliberately not showing */
.float-rich .fl-orb{
  opacity:1;
  animation:flBodyDrift var(--d-t,40s) ease-in-out infinite;
}
/* the ring is the same body seen as an edge: no fill, one hairline, and a
   flattening rotation so it reads as a disc turned away from the viewer */
.fl-orb--ring{
  background:none;
  /* faint enough that it never competes with a heading it passes behind -
     it is the edge of a body at distance, not a drawn ring */
  border:1px solid rgba(var(--orb),.15);
  filter:blur(var(--orb-blur,2.6px));
  rotate:x 62deg;
}
.fl-orb[data-tint="gold"]   { --orb:var(--c-gold-fill); }
.fl-orb[data-tint="saffron"]{ --orb:var(--c-saffron); }
.fl-orb[data-tint="green"]  { --orb:var(--c-green); }
.fl-orb[data-tint="navy"]   { --orb:var(--c-navy); }

/* the turn is slow enough that it is never seen happening, only noticed as
   having happened - which is the difference between ambient and animated */
@keyframes flBodyDrift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  33%  { transform:translate3d(2.5%,-4%,0) scale(1.06); }
  66%  { transform:translate3d(-3%,2.5%,0) scale(.95); }
  100% { transform:translate3d(0,0,0) scale(1); }
}

/* the content column has to win against a body placed behind it - most
   sections never set a z-index of their own, so it is given here once */
.float-rich .section > .wrap,
.float-rich .section > .rail-wrap{ position:relative; z-index:1; }

/* A body sitting in a section's right-hand margin reaches past the section's
   own edge, and an absolutely positioned child that does that is still counted
   in the document's scroll width - so the page reports as horizontally
   scrollable even with `overflow-x:hidden` holding it shut on the body.
   `clip` rather than `hidden` on purpose: hidden would make every section a
   scroll container, and clip can be given to one axis while the other stays
   visible - which is what lets a body carry on down past the section boundary
   into the next one, instead of being cut off at the seam. The hero already
   clips itself, and the rail carries its own horizontal scroller inside this
   one, so neither is affected. */
.float-rich .section{ overflow-x:clip; }

/* - cards lean toward the cursor as a set -
   site.js already tilts a hovered card under the pointer. This is the other
   half: every card in the grid leans a little, all the time, so the hovered
   one is a member of a moving set rather than the only live thing on a still
   page. The amplitude is a third of the hover tilt. */
.float-rich .live__card,
.float-rich .svc__item{
  translate:calc(var(--fl-mx,0) * 2.2px) calc(var(--fl-my,0) * 1px);
}
/* ...except while it is being hovered, where site.js's own tilt takes the
   element over completely and the two must not argue */
@media (hover:hover){
  .float-rich .live__card:hover,
  .float-rich .svc__item:hover{ translate:none; }
}

/* - coarse pointers -
   A phone drives the same channels from device tilt at half amplitude, but
   the blurred bodies are the one thing worth dropping outright: a 26px blur
   over a quarter of the viewport is the most expensive paint on the page and
   the least visible on the smallest screen. */
@media (max-width:640px){
  .fl-orb{ display:none; }
  .float-rich .live__card,
  .float-rich .svc__item{ translate:none; }
}

/* low-power devices already lose .float-rich in JS, so the parallax and the
   bodies never start; the words keep floating, because a compositor animation
   on the handful of spans that are on screen is not what makes a page slow */
body.is-low .fl-orb{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   19.  REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .ticker__row{ animation:none; }
  .cursor{ display:none; }
  /* float.js never starts under reduced motion, so these only matter if the
     preference is switched on mid-visit: the layers go back to level rather
     than keeping the lean they happened to be holding */
  .fl-word{ animation:none !important; transform:none !important; }
  .fl-ptr{ translate:none !important; }
  .fl-orb{ display:none; }
  /* a frozen ring reads as a broken control, so the wait says so in words */
  .peek__spin{ display:none; }
  body.is-booting main,body.is-booting .foot,body.is-booting .nav,
  body.is-booting .hero__inner{
    transform:none; opacity:1; visibility:visible;
  }
  .svc__more{ max-height:200px; opacity:1; }
  .about__arches .arch i{ height:64%; }
}

/* print */
@media print{
  .reveal,.nav,.menu,.cursor,.scrollbar,.hero__canvas,.contact__bg,.ticker,.dock{ display:none !important; }
  body{ background:#fff; color:#111; }
}