/* ============================================================
   SAMVAD — Design System v3
   Light · frosted glass · depth · high-definition
   Mint · brass · deep navy on a near-white ground
   ============================================================ */

:root {
  /* ---- ground ---- */
  --bg: #F2F5F9;
  --bg-2: #EAEFF5;
  --bg-3: #FFFFFF;

  /* ---- frosted glass ---- */
  --glass: linear-gradient(155deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 46%, rgba(255,255,255,.5));
  --glass-2: linear-gradient(155deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  --surface: rgba(255, 255, 255, 0.6);
  --surface-2: rgba(255, 255, 255, 0.78);
  --surface-hi: rgba(255, 255, 255, 0.95);

  /* ---- palette ---- */
  --navy: #0A1524;
  --navy-deep: #060D18;
  --navy-2: #16294224;
  --mint: #0FB396;          /* legible on white */
  --mint-2: #0A8F79;
  --mint-hi: #19E5C0;       /* fills, glows */
  --mint-deep: #075C4E;
  --mint-wash: #DFF6F1;
  --brass: #B8860B;         /* legible on white */
  --brass-2: #916A08;
  --brass-hi: #F5C451;
  --brass-wash: #FBF2DC;
  --azure: #2E63E8;

  /* ---- text ---- */
  --ink: #0B1727;
  --ink-soft: #536176;
  --ink-dim: #8593A6;
  --paper: #0B1727;         /* legacy alias: text colour */
  --white: #FFFFFF;

  /* ---- lines ---- */
  --line: rgba(11, 23, 39, 0.1);
  --line-2: rgba(11, 23, 39, 0.16);
  --line-light: rgba(11, 23, 39, 0.1);

  /* ---- glow ---- */
  --glow-mint: 0 0 0 1px rgba(15,179,150,.3), 0 0 30px -6px rgba(25,229,192,.55);
  --glow-brass: 0 0 0 1px rgba(184,134,11,.3), 0 0 30px -6px rgba(245,196,81,.5);

  /* ---- elevation: soft, cool, layered ---- */
  --e1: 0 1px 2px rgba(11,23,39,.05), 0 4px 14px -6px rgba(11,23,39,.1);
  --e2: 0 1px 3px rgba(11,23,39,.06), 0 12px 28px -12px rgba(11,23,39,.16), 0 30px 60px -34px rgba(15,179,150,.3);
  --e3: 0 2px 6px rgba(11,23,39,.08), 0 22px 44px -18px rgba(11,23,39,.2), 0 44px 88px -44px rgba(15,179,150,.4);

  /* ---- type ---- */
  --mega: 'Anton', 'Arial Narrow', sans-serif;
  --display: 'Archivo', 'Helvetica Neue', sans-serif;
  --sans: 'Archivo', 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Archivo', Georgia, serif;

  --fs-hero: clamp(3rem, 8.6vw, 8.8rem);
  --fs-h1: clamp(2.4rem, 6vw, 5.2rem);
  --fs-h2: clamp(2rem, 4.8vw, 4rem);
  --fs-h3: clamp(1.28rem, 2.1vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.45vw, 1.28rem);
  --fs-body: clamp(0.97rem, 1.05vw, 1.06rem);
  --fs-small: 0.86rem;
  --fs-tiny: 0.7rem;

  --pad-x: clamp(1.2rem, 4.5vw, 5rem);
  --sec-y: clamp(3.6rem, 6.5vw, 6.5rem);
  --r: 26px;
  --r-lg: 34px;
  --r-sm: 16px;
  --ease: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: initial; -webkit-text-size-adjust: 100%; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--mint-hi); color: #04231D; }

/* ---------- Ambient light field ---------- */
/* Saturated colour field behind everything. Glass only reads as glass when there
   is something worth refracting behind it — on a flat white page it reads as paint. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(48% 38% at 82% -2%, rgba(25,229,192,.62), transparent 62%),
    radial-gradient(42% 34% at 4% 10%, rgba(46,99,232,.34), transparent 62%),
    radial-gradient(46% 38% at 26% 92%, rgba(245,196,81,.5), transparent 62%),
    radial-gradient(40% 34% at 92% 66%, rgba(15,179,150,.34), transparent 62%),
    radial-gradient(36% 30% at 58% 44%, rgba(46,99,232,.16), transparent 64%),
    var(--bg);
}
body > .mesh {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,23,39,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,23,39,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 76%);
}

/* ---------- Grain ---------- */
body::after {
  content: '';
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 2000;
  opacity: .1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); }
  60% { transform: translate(-3%,-2%); }
  80% { transform: translate(4%,4%); }
}

/* ---------- Cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 3000; border-radius: 50%;
  transform: translate(-50%,-50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--mint); box-shadow: 0 0 10px rgba(15,179,150,.8); }
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(15,179,150,.5);
  transition: width .35s var(--spring), height .35s var(--spring), background-color .3s, border-color .3s;
}
.cursor-ring.is-hover { width: 68px; height: 68px; background: rgba(15,179,150,.09); border-color: var(--mint); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem;
}
.preloader::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(46% 38% at 50% 50%, rgba(25,229,192,.24), transparent 70%);
}
.preloader__word {
  position: relative;
  font-family: var(--mega); font-weight: 400;
  font-size: clamp(2.8rem, 11vw, 8rem);
  letter-spacing: -0.01em;
  display: flex; overflow: hidden;
  color: var(--ink);
}
.preloader__word span { display: inline-block; transform: translateY(110%); }
.preloader__tag {
  position: relative;
  font-family: var(--mono);
  font-size: var(--fs-tiny); letter-spacing: .5em; text-transform: uppercase;
  color: var(--brass); opacity: 0; font-weight: 600;
}
.preloader__bar { position: relative; width: min(280px, 56vw); height: 2px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--mint), var(--brass-hi)); }

/* ---------- Page-transition veil ---------- */
.veil {
  position: fixed; inset: 0; z-index: 4500;
  background: linear-gradient(160deg, #FFFFFF, #E9EEF5);
  transform: scaleY(0); transform-origin: top; pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.3rem;
}
.veil::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(46% 38% at 50% 50%, rgba(25,229,192,.22), transparent 70%);
}
.veil__mark {
  position: relative;
  width: clamp(76px, 13vw, 116px); height: auto;
  opacity: 0; transform: scale(.6);
}
.veil__word {
  position: relative;
  font-family: var(--mega); font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: .52em; text-indent: .52em;
  color: var(--ink-dim);
  opacity: 0; transform: translateY(12px);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.h-display {
  font-family: var(--mega);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -0.005em;
  font-size: var(--fs-hero);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.018em; }
.h-display, h1, h2, h3 { color: var(--ink); }

.accent { color: var(--mint); font-style: normal; font-weight: inherit; }
.serif { font-family: var(--serif); }
.italic { font-style: italic; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .7rem;
  border-radius: 100px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.9), var(--e1);
  font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--mint-2);
}
/* the eyebrow dot broadcasts — two rings leaving it on a loop, like a signal */
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--mint);
  animation: signal 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.eyebrow--star::before, .eyebrow--light::before { background: var(--brass); animation-name: signalBrass; }
.eyebrow--star, .eyebrow--light { color: var(--brass-2); }
@keyframes signal {
  0%   { box-shadow: 0 0 0 0 rgba(15,179,150,.5), 0 0 0 0 rgba(15,179,150,.3); }
  70%  { box-shadow: 0 0 0 7px rgba(15,179,150,0), 0 0 0 14px rgba(15,179,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,179,150,0), 0 0 0 0 rgba(15,179,150,0); }
}
@keyframes signalBrass {
  0%   { box-shadow: 0 0 0 0 rgba(184,134,11,.5), 0 0 0 0 rgba(184,134,11,.3); }
  70%  { box-shadow: 0 0 0 7px rgba(184,134,11,0), 0 0 0 14px rgba(184,134,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,134,11,0), 0 0 0 0 rgba(184,134,11,0); }
}
@keyframes blip { 50% { opacity: .25; transform: scale(.7); } }

/* ---- Typing indicator: three dots taking turns, the universal "someone is
        replying" cue. Drop <span class="typing"><i></i><i></i><i></i></span>. ---- */
.typing { display: inline-flex; align-items: flex-end; gap: 4px; height: 1em; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  animation: typing 1.4s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; background: var(--mint-2); }
.typing i:nth-child(3) { animation-delay: .36s; background: var(--brass); }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ---- Equaliser: five bars rising and falling, i.e. a voice ---- */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3px; border-radius: 2px; background: var(--mint); animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 75%; animation-delay: .14s; background: var(--mint-2); }
.eq i:nth-child(3) { height: 100%; animation-delay: .28s; }
.eq i:nth-child(4) { height: 65%; animation-delay: .42s; background: var(--brass); }
.eq i:nth-child(5) { height: 45%; animation-delay: .56s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-soft); max-width: 58ch; }
.small { font-size: var(--fs-small); }
p { color: var(--ink-soft); }

.split-line { display: block; overflow: hidden; padding-bottom: .04em; }
.split-line > span { display: block; transform: translateY(115%); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--sec-y); position: relative; }
.section--dark { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0)); }
.section--deep { background: linear-gradient(180deg, rgba(234,239,245,.9), rgba(255,255,255,.35)); }
.section--tint { background: linear-gradient(180deg, rgba(255,255,255,.66), transparent); }
.section--teal {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(25,229,192,.28), transparent 68%),
    linear-gradient(180deg, rgba(223,246,241,.8), rgba(255,255,255,0));
}
.sec-head { max-width: 880px; margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.sec-head .eyebrow { margin-bottom: 1.1rem; }
.sec-head h2 { margin-bottom: 1rem; }

.grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.rule { border: 0; border-top: 1px solid var(--line); }

/* ============================================================
   GLASS PRIMITIVE
   ============================================================ */
/* Real glass: mostly transparent, heavy blur, a lit top-left bevel against a
   shaded bottom-right one, and an inner sheen. The tint is barely there so the
   colour field behind actually shows through. */
/* Genuinely transparent: only a whisper of white tint, a light blur so what is
   behind stays legible as colour and shape, and bevelled edges to catch light. */
.glass, .card, .post-card, .res-tile, .trust__item, .vert__media {
  position: relative;
  background:
    linear-gradient(142deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.18) 100%);
  backdrop-filter: blur(14px) saturate(1.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.9);
  border-radius: var(--r);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,.8),       /* lit bevel, top-left  */
    inset -1.5px -1.5px 0 rgba(255,255,255,.24),    /* shaded bevel, bottom-right */
    inset 0 16px 34px -22px rgba(255,255,255,.7),   /* inner sheen          */
    0 12px 36px -16px rgba(11,23,39,.2),
    0 2px 8px -5px rgba(11,23,39,.1);
}
/* refractive rim: bright where light enters, tinted where it exits */
.glass::after, .card::after, .post-card::after, .res-tile::after, .trust__item::after, .vert__media::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(142deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.35) 26%,
    rgba(15,179,150,.3) 52%,
    rgba(46,99,232,.22) 74%,
    rgba(255,255,255,.85) 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;
  transition: background .5s;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 2rem;
  border-radius: 100px;
  font-weight: 700; font-size: .93rem; letter-spacing: -0.01em;
  white-space: nowrap; isolation: isolate; overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .3s var(--spring), box-shadow .35s var(--ease), color .3s;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(2px) scale(.985); }
.btn .arr { transition: transform .4s var(--spring); }
.btn:hover .arr { transform: translate(4px,-4px); }

.btn--primary, .btn--teal {
  background: linear-gradient(180deg, #23E9C6 0%, var(--mint) 48%, var(--mint-2) 100%);
  color: #01271F;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 0 rgba(0,60,50,.28) inset,
              0 8px 20px -8px rgba(15,179,150,.6), 0 18px 40px -22px rgba(15,179,150,.7);
}
.btn--primary:hover, .btn--teal:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px -8px rgba(15,179,150,.7), 0 28px 60px -26px rgba(15,179,150,.8);
}

.btn--brass {
  background: linear-gradient(180deg, #FFD778 0%, var(--brass-hi) 46%, var(--brass) 100%);
  color: #2E1F00;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 0 rgba(90,60,0,.24) inset,
              0 8px 20px -8px rgba(184,134,11,.5), 0 18px 40px -22px rgba(184,134,11,.6);
}
.btn--brass:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px -8px rgba(184,134,11,.6), 0 28px 60px -26px rgba(184,134,11,.7); }

/* dark button — the high-contrast option on a white page */
.btn--light {
  background: linear-gradient(180deg, #16263C, var(--navy));
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 26px -12px rgba(11,23,39,.7);
}
.btn--light:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(11,23,39,.8); }

.btn--ghost, .btn--ghost-light {
  background: var(--glass-2);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.95), var(--e1);
}
.btn--ghost:hover, .btn--ghost-light:hover {
  transform: translateY(-3px);
  color: var(--mint-2);
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.6), 0 14px 30px -14px rgba(15,179,150,.55);
}

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .93rem; color: var(--ink);
  transition: gap .3s var(--ease), color .3s;
}
.tlink span { transition: transform .3s var(--spring); }
.tlink:hover { gap: .9rem; color: var(--mint-2); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: clamp(.7rem, 1.6vw, 1.2rem); left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(1480px, calc(100% - 2 * var(--pad-x)));
  padding: .65rem .7rem .65rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 100px;
  background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px var(--line), var(--e1);
  transition: transform .5s var(--ease), box-shadow .4s, background .4s, top .4s;
}
.nav.is-scrolled {
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px var(--line-2), var(--e2);
}
.nav.is-hidden { transform: translateX(-50%) translateY(-160%); }

.nav__logo {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--display); font-weight: 800;
  font-size: 1.35rem; letter-spacing: -0.03em;
  color: var(--ink);
}
.nav__logo small {
  font-family: var(--sans); font-weight: 700;
  font-size: .46rem; letter-spacing: .34em; margin-top: .34rem;
  color: var(--mint-2);
}
.nav__links { display: flex; gap: clamp(.3rem, 1vw, .5rem); align-items: center; }
.nav__links a {
  position: relative;
  font-size: .85rem; font-weight: 600;
  padding: .55rem .9rem; border-radius: 100px;
  transition: color .3s, background .3s;
  color: var(--ink-soft);
}
.nav__links a:hover { color: var(--ink); background: rgba(11,23,39,.05); }
.nav__links a.is-active {
  color: var(--mint-2); font-weight: 700;
  background: rgba(15,179,150,.12);
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.28);
}
.nav__right { display: flex; align-items: center; gap: .6rem; }
.nav__cta { padding: .72rem 1.4rem; font-size: .82rem; }

.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(11,23,39,.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.nav__burger span { width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(3.4px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.4px) rotate(-45deg); }
@media (max-width: 1180px) { .nav__links { display: none; } .nav__burger { display: flex; } }
@media (max-width: 620px) {
  .nav { padding-left: 1rem; }
  .nav__cta { display: none; }
  .nav__logo { font-size: 1.12rem; }
  .nav__logo img { width: 32px; height: 32px; }
  .nav__logo small { font-size: .4rem; letter-spacing: .26em; }
}

/* overlay menu */
.menu {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(242,245,249,.86);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6.5rem var(--pad-x) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 2.5rem; }
.menu__links a {
  font-family: var(--mega); font-weight: 400;
  font-size: clamp(1.9rem, 7.5vw, 3.6rem); line-height: 1.22;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(34px);
  transition: opacity .5s, transform .7s var(--ease), color .3s;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a:hover { color: var(--mint-2); }
.menu__links a i { font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .3em; color: var(--brass); }
.menu__foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-dim); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: clip;
  padding: 7.5rem var(--pad-x) clamp(2rem, 4vw, 3.2rem);
}
.hero--short { min-height: 76svh; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .85; }
.hero__contour { position: absolute; inset: 0; opacity: .12; color: var(--mint); }

.hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.6s var(--ease);
  mask-image: radial-gradient(58% 62% at 74% 38%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(58% 62% at 74% 38%, #000 28%, transparent 78%);
}
.hero-canvas.is-ready { opacity: 1; }
@media (max-width: 900px) {
  .hero-canvas {
    opacity: 0;
    mask-image: radial-gradient(52% 26% at 68% 13%, #000 18%, transparent 78%);
    -webkit-mask-image: radial-gradient(52% 26% at 68% 13%, #000 18%, transparent 78%);
  }
  .hero-canvas.is-ready { opacity: .6; }
  .eyebrow { font-size: .58rem; letter-spacing: .14em; padding: .4rem .8rem .4rem .6rem; }
  .hero { padding-top: 6.5rem; }
  .hero h1 { margin-top: 1.1rem !important; }
  .hero .lead { margin-top: 1.3rem !important; font-size: .98rem; }
  .hero .flex { margin-top: 1.8rem !important; }
  .hero__meta { margin-top: 1.6rem; padding-top: 1.1rem; font-size: .74rem; gap: .8rem; }
  .btn { padding: .95rem 1.6rem; font-size: .88rem; }
  .footer__cta .flex { justify-content: flex-start; }
}

.hero__meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3.4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-dim);
  position: relative; z-index: 2;
}
.hero__scroll {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-tiny); letter-spacing: .3em; text-transform: uppercase;
}
.hero__scroll i { display: block; width: 1px; height: 32px; background: linear-gradient(var(--mint), transparent); animation: scrollPulse 1.9s var(--ease) infinite; transform-origin: top; }
@keyframes scrollPulse { 0% { transform: scaleY(0);} 50% { transform: scaleY(1);} 100% { transform: scaleY(0); transform-origin: bottom;} }

.insignia { position: relative; width: 118px; height: 118px; display: grid; place-items: center; color: var(--ink-dim); }
.insignia svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.insignia text { font-size: 9px; letter-spacing: 3.1px; text-transform: uppercase; font-weight: 600; fill: currentColor; font-family: var(--mono); }
.insignia b { font-size: 1.5rem; color: var(--brass); }
@keyframes spin { to { transform: rotate(360deg); } }

.page-hero {
  padding: clamp(7.5rem, 13vh, 9.5rem) var(--pad-x) clamp(2rem, 3.4vw, 3.2rem);
  position: relative; overflow: clip;
}
.page-hero__crumb {
  display: inline-flex; gap: .7rem; align-items: center;
  font-size: var(--fs-tiny); letter-spacing: .28em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-dim); margin-bottom: 1.6rem;
}

/* ============================================================
   MARQUEE (retained for any page still using it)
   ============================================================ */
.marquee {
  overflow: clip; white-space: nowrap; display: flex;
  padding-block: 1.3rem;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(25,229,192,.09), rgba(245,196,81,.09));
  position: relative;
}
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14vw; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: inline-flex; gap: 2.6rem; padding-right: 2.6rem; animation: marquee 30s linear infinite; flex-shrink: 0; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--mega); font-size: clamp(1.2rem, 2.4vw, 2rem); display: inline-flex; align-items: center; gap: 2.6rem; color: var(--ink); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============================================================
   CARDS
   ============================================================ */
.card, .card--dark {
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.card > *, .card--dark > * { position: relative; z-index: 2; }
.card::before, .card--dark::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -10%, rgba(25,229,192,.22), transparent 62%);
  opacity: 0; transition: opacity .55s var(--ease);
}
.card:hover, .card--dark:hover { box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,1); }
.card:hover::before, .card--dark:hover::before { opacity: 1; }
.card:hover::after, .card--dark:hover::after {
  background: linear-gradient(150deg, rgba(255,255,255,1), rgba(15,179,150,.45) 40%, rgba(11,23,39,.06) 66%, rgba(245,196,81,.5));
}
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .94rem; color: var(--ink-soft); }
.card__num {
  display: block; margin-bottom: 1rem;
  font-family: var(--mono); font-weight: 600; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-2);
}
.card__icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: 1.5rem;
  color: var(--mint-2);
  background: linear-gradient(155deg, rgba(255,255,255,1), rgba(223,246,241,.7));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,1), 0 6px 16px -8px rgba(15,179,150,.5);
  transform: translateZ(30px);
  transition: transform .55s var(--spring), box-shadow .45s, color .4s;
}
.card__icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card__icon {
  transform: translateZ(46px) scale(1.05);
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.5), 0 14px 30px -10px rgba(15,179,150,.6);
}
.card--dark .card__icon { color: var(--brass-2); background: linear-gradient(155deg, rgba(255,255,255,1), rgba(251,242,220,.8)); }
.card--dark:hover .card__icon { box-shadow: inset 0 0 0 1px rgba(184,134,11,.5), 0 14px 30px -10px rgba(184,134,11,.5); }

/* ============================================================
   BENTO
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem, 1.3vw, 1.2rem); grid-auto-rows: minmax(150px, auto); }
.bento > * { grid-column: span 4; }
.bento .b-3 { grid-column: span 3; }
.bento .b-4 { grid-column: span 4; }
.bento .b-6 { grid-column: span 6; }
.bento .b-8 { grid-column: span 8; }
.bento .b-12 { grid-column: span 12; }
.bento .b-r2 { grid-row: span 2; }
@media (max-width: 1000px) {
  .bento > *, .bento .b-3, .bento .b-4, .bento .b-6, .bento .b-8 { grid-column: span 6; }
  .bento .b-12 { grid-column: span 12; }
  .bento .b-r2 { grid-row: span 1; }
}
@media (max-width: 640px) { .bento > *, .bento .b-3, .bento .b-4, .bento .b-6, .bento .b-8, .bento .b-12 { grid-column: span 12; } }

/* ============================================================
   STATS
   ============================================================ */
.stat { padding: 1.6rem 0; }
.stat__num {
  font-family: var(--mega); font-weight: 400;
  font-size: clamp(3rem, 6.5vw, 5.6rem); line-height: .88;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline;
  color: var(--ink);
}
.stat__num sup { font-size: .38em; margin-left: .08em; color: var(--mint); }
.stat__label { margin-top: .7rem; font-family: var(--mono); font-size: var(--fs-tiny); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }

/* ============================================================
   CHIPS
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 100px;
  background: var(--glass-2);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.95);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  transition: transform .35s var(--spring), color .3s, box-shadow .35s, background .3s;
  cursor: pointer;
}
.chip:hover, .chip.is-active {
  transform: translateY(-3px);
  color: var(--mint-2);
  background: rgba(15,179,150,.12);
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.5), 0 10px 24px -12px rgba(15,179,150,.6);
}
.chip--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0;
  animation: signal 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.chip:nth-child(2)::before { animation-delay: .5s; }
.chip:nth-child(3)::before { animation-delay: 1s; }
.chip:nth-child(4)::before { animation-delay: 1.5s; }

/* ============================================================
   VERTICAL SHOWCASE
   ============================================================ */
.vert {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: center;
  padding-block: clamp(2rem, 3.6vw, 3.4rem);
  border-top: 1px solid var(--line);
}
.vert:last-child { border-bottom: 1px solid var(--line); }
.vert:nth-of-type(even) .vert__media { order: 2; }
@media (max-width: 940px) {
  .vert { grid-template-columns: 1fr; }
  .vert:nth-of-type(even) .vert__media { order: 0; }
}
.vert__media { aspect-ratio: 4/3.1; overflow: hidden; }
.vert__media .visual, .vert__media .pframe { position: absolute; inset: 0; z-index: 1; }
.vert__index {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--mono); font-weight: 600; font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass-2);
}
/* extra room below the chips: the CTA carries a wide glow that otherwise bleeds
   up into the chip row, and the magnetic pull lifts it further on hover */
.vert__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 2.8rem; }
.vert .btn:hover { z-index: 2; }

/* ============================================================
   PHOTO FRAME
   ============================================================ */
.pframe { position: relative; overflow: hidden; border-radius: inherit; isolation: isolate; }
/* GSAP owns transform here (parallax + overscale); hover grades via filter only */
.pframe img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.95) contrast(1.02);
  transition: filter .7s var(--ease);
  will-change: transform;
}
.pframe::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,23,39,0) 42%, rgba(11,23,39,.5) 100%),
    linear-gradient(118deg, rgba(25,229,192,.14), transparent 52%);
}
.pframe:hover img { filter: saturate(1.08) contrast(1.03); }

/* a single light sweep crosses each photograph as it scrolls into view */
.pframe::before {
  content: ''; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
}
.pframe.is-in::before { animation: photoSweep 1.5s var(--ease) .25s 1 both; }
@keyframes photoSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.pframe__cap {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 100px;
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 18px -8px rgba(11,23,39,.5);
}
.pframe__cap b { color: var(--mint-2); font-weight: 600; }
.pframe__no {
  position: absolute; right: 1.2rem; top: 1.1rem; z-index: 3;
  font-family: var(--mega); font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1; color: rgba(255,255,255,.72);
  text-shadow: 0 2px 18px rgba(11,23,39,.4);
}

/* ---------- Abstract visuals (fallback) ---------- */
.visual { position: relative; overflow: hidden; border-radius: inherit; }
.visual--junior { background: linear-gradient(135deg, #DCEAF6 0%, #EDF3F9 48%, #D6EFEC 100%); }
.visual--senior { background: linear-gradient(135deg, #D8EEE8 0%, #EFF6F3 48%, #CFE9E1 100%); }
.visual--corp   { background: linear-gradient(135deg, #F6EEDA 0%, #FAF5E9 48%, #F1E4C6 100%); }
.visual__rings { position: absolute; inset: 0; z-index: 3; }
.visual__rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(11,23,39,.1); }
.visual__glyph {
  position: absolute; right: 7%; bottom: 4%; z-index: 3;
  font-family: var(--mega); font-size: clamp(4rem, 10vw, 8rem);
  letter-spacing: -0.01em; color: rgba(11,23,39,.1); line-height: .85;
}
.visual__badge {
  position: absolute; top: 1.3rem; left: 1.3rem; z-index: 4;
  padding: .45rem 1rem; border-radius: 100px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; padding-left: 2.6rem; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 1.7rem; bottom: 1.7rem; width: 2px;
  background: linear-gradient(180deg, var(--mint), rgba(15,179,150,.14) 60%, transparent);
  border-radius: 2px;
}
.tl-item {
  position: relative; margin-bottom: .7rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-sm);
  background: linear-gradient(142deg, rgba(255,255,255,.28), rgba(255,255,255,.07) 48%, rgba(255,255,255,.16));
  backdrop-filter: blur(12px) saturate(1.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.85);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.78), inset -1.5px -1.5px 0 rgba(255,255,255,.22),
              0 10px 26px -16px rgba(11,23,39,.2);
  transition: transform .5s var(--ease), box-shadow .45s, background .4s;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-item:hover {
  transform: translateX(8px);
  background: linear-gradient(155deg, rgba(223,246,241,.9), rgba(255,255,255,.7));
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.35), var(--e2);
}
.tl-item::before {
  content: ''; position: absolute; left: -2.6rem; top: 1.55rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(15,179,150,.12);
  transition: transform .4s var(--spring), box-shadow .4s, background .3s;
}
.tl-item:hover::before { background: var(--mint); transform: scale(1.2); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 7px rgba(15,179,150,.2); }
.tl-item__phase { display: block; margin-bottom: .45rem; font-family: var(--mono); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-2); }
.tl-item h3 { margin-bottom: .5rem; }
.tl-item p { max-width: 62ch; }

/* ============================================================
   ROWS
   ============================================================ */
.rows { display: flex; flex-direction: column; gap: .7rem; }
.row-item {
  display: grid; grid-template-columns: 84px 1fr 1.2fr auto;
  gap: 2rem; align-items: center;
  padding: 1.7rem 1.6rem;
  border-radius: var(--r-sm);
  position: relative;
  background: linear-gradient(142deg, rgba(255,255,255,.28), rgba(255,255,255,.07) 48%, rgba(255,255,255,.16));
  backdrop-filter: blur(12px) saturate(1.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.85);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.78), inset -1.5px -1.5px 0 rgba(255,255,255,.22),
              0 10px 26px -16px rgba(11,23,39,.2);
  transition: transform .5s var(--ease), background .4s, box-shadow .4s;
}
.row-item:hover {
  transform: translateX(8px);
  background: linear-gradient(90deg, rgba(223,246,241,.95), rgba(255,255,255,.7) 70%);
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.35), var(--e2);
}
.row-item__num { font-family: var(--mono); font-weight: 600; font-size: .9rem; letter-spacing: .1em; color: var(--brass-2); }
.row-item h3 { font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
.row-item p { font-size: .92rem; max-width: 48ch; }
.row-item .arr-circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .4s, color .4s, transform .5s var(--spring), box-shadow .4s;
}
.row-item:hover .arr-circle {
  background: linear-gradient(180deg, #23E9C6, var(--mint-2));
  color: #01271F; transform: rotate(-45deg) scale(1.06);
  box-shadow: 0 10px 26px -10px rgba(15,179,150,.8);
}
@media (max-width: 880px) { .row-item { grid-template-columns: 1fr auto; } .row-item__num, .row-item p { display: none; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: .7rem; }
.faq details {
  border-radius: var(--r-sm);
  background: linear-gradient(142deg, rgba(255,255,255,.28), rgba(255,255,255,.07) 48%, rgba(255,255,255,.16));
  backdrop-filter: blur(12px) saturate(1.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.85);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.78), inset -1.5px -1.5px 0 rgba(255,255,255,.22),
              0 10px 26px -16px rgba(11,23,39,.2);
  transition: box-shadow .4s, background .4s;
}
.faq details:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--e1); }
.faq details[open] {
  background: linear-gradient(155deg, rgba(223,246,241,.9), rgba(255,255,255,.72));
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.32), var(--e2);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.45rem 1.5rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.32rem);
  letter-spacing: -0.02em; color: var(--ink);
  transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mint-2); }
.faq summary .x {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-weight: 400; font-size: 1.05rem;
  background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .45s var(--spring), background .35s, color .35s, box-shadow .35s;
}
.faq details[open] summary .x {
  transform: rotate(135deg);
  background: linear-gradient(180deg, #23E9C6, var(--mint-2)); color: #01271F;
  box-shadow: 0 8px 22px -10px rgba(15,179,150,.9);
}
.faq .faq__body { padding: 0 1.5rem 1.7rem; color: var(--ink-soft); max-width: 72ch; }

/* ============================================================
   TEAM
   ============================================================ */
.team-card { position: relative; }
.team-card__photo {
  aspect-ratio: 4/4.6; border-radius: var(--r);
  position: relative; overflow: hidden;
  margin-bottom: 1.2rem;
  background: linear-gradient(165deg, #E7EEF6, #D9E6F1 70%);
  display: grid; place-items: center;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px var(--line);
  transition: transform .6s var(--ease), box-shadow .6s;
}
.team-card:hover .team-card__photo { transform: translateY(-8px) scale(1.015); box-shadow: var(--e3), inset 0 0 0 1px rgba(15,179,150,.3); }
.team-card__photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 55% at 50% 0%, rgba(25,229,192,.3), transparent 62%),
              radial-gradient(60% 45% at 80% 100%, rgba(245,196,81,.22), transparent 62%);
}
.team-card__photo img {
  position: absolute; z-index: 2; bottom: 0; left: 50%;
  transform: translateX(-50%) scale(1.02);
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  filter: saturate(1) contrast(1.02) drop-shadow(0 18px 30px rgba(11,23,39,.28));
  transition: transform .7s var(--ease);
}
.team-card:hover .team-card__photo img { transform: translateX(-50%) scale(1.06); }
.team-card__initials {
  position: relative; z-index: 2;
  font-family: var(--mega); font-weight: 400;
  font-size: clamp(3.2rem, 6.5vw, 5rem); letter-spacing: -0.01em;
  color: rgba(11,23,39,.16);
}
.team-card__rank {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  padding: .42rem .85rem; border-radius: 100px;
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-2);
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.3);
  backdrop-filter: blur(8px);
}
.team-card h3 { font-size: 1.22rem; }
.team-card__role { font-size: var(--fs-small); color: var(--mint-2); font-weight: 700; margin: .35rem 0 .7rem; }
.team-card__bio { font-size: .91rem; color: var(--ink-soft); }

/* ============================================================
   TRUST
   ============================================================ */
.trust { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 1.4vw, 1.2rem); }
.trust__item {
  flex: 1 1 210px;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--r-sm);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.trust__item:hover { transform: translateY(-5px); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,1); }
.trust__item .ico { display: grid; place-items: center; color: var(--brass-2); }
.trust__item .ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust__item b { display: block; font-size: .95rem; color: var(--ink); }
.trust__item span { font-size: .78rem; color: var(--ink-dim); }

/* ============================================================
   BLOG
   ============================================================ */
.post-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s; }
.post-card:hover { transform: translateY(-8px); box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,1); }
.post-card__media { aspect-ratio: 16/9.5; position: relative; overflow: hidden; }
.post-card__media .visual, .post-card__media .pframe { position: absolute; inset: 0; border-radius: 0; }
.post-card__body { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; position: relative; z-index: 2; }
.post-card__meta { display: flex; gap: .7rem; align-items: center; font-family: var(--mono); font-size: var(--fs-tiny); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--mint-2); }
.post-card__meta i { font-style: normal; color: var(--brass-2); }
.post-card h3 { font-size: 1.28rem; line-height: 1.18; }
.post-card p { font-size: .92rem; flex: 1; }

/* ============================================================
   RESOURCES
   ============================================================ */
.res-tile { display: flex; align-items: flex-start; gap: 1.3rem; padding: 1.7rem; transition: transform .5s var(--ease), box-shadow .5s; }
.res-tile > * { position: relative; z-index: 2; }
.res-tile:hover { transform: translateY(-6px); box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,1); }
.res-tile__icon {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; color: var(--mint-2);
  background: linear-gradient(155deg, rgba(255,255,255,1), rgba(223,246,241,.7));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,1), 0 6px 16px -8px rgba(15,179,150,.5);
}
.res-tile__icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.res-tile h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.res-tile p { font-size: .89rem; margin-bottom: .7rem; }

/* ============================================================
   PHONE MOCKUP
   ============================================================ */
.phone {
  width: min(310px, 74vw); aspect-ratio: 9/19;
  border-radius: 46px; padding: 13px; position: relative; margin-inline: auto;
  background: linear-gradient(150deg, #FFFFFF, #D9E2EC 40%, #F2F5F9);
  box-shadow: 0 50px 100px -40px rgba(11,23,39,.45), 0 0 0 1px rgba(11,23,39,.1),
              inset 0 1px 0 rgba(255,255,255,1), 0 40px 90px -50px rgba(15,179,150,.5);
  transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) rotate(1deg);
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}
.phone:hover { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.phone::before {
  content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; border-radius: 100px; background: #0B1727; z-index: 4;
}
.phone__screen {
  position: absolute; inset: 13px; border-radius: 34px; overflow: hidden;
  background: linear-gradient(170deg, #FFFFFF, #EAF3F6 72%);
  display: flex; flex-direction: column;
  padding: 3.6rem 1rem 1.2rem; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(11,23,39,.06);
}
.phone__row {
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px var(--line), 0 3px 10px -6px rgba(11,23,39,.3);
  border-radius: 14px; padding: .75rem .8rem; margin-bottom: .55rem;
  font-size: .66rem; display: flex; align-items: center; gap: .6rem;
  color: var(--ink-soft); line-height: 1.4;
}
.phone__row b { color: var(--ink); font-weight: 700; }
.phone__dot {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; color: #01271F;
  background: linear-gradient(160deg, #4FF6DA, var(--mint));
  box-shadow: 0 4px 12px -5px rgba(15,179,150,.9), inset 0 1px 0 rgba(255,255,255,.6);
}
.phone__dot svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   COMING SOON
   ============================================================ */
.soon-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.15rem; border-radius: 100px;
  font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-2);
  background: linear-gradient(110deg, rgba(245,196,81,.16), rgba(245,196,81,.34), rgba(245,196,81,.16));
  background-size: 200% 100%;
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.34), 0 6px 18px -10px rgba(184,134,11,.7);
  animation: shimmer 3s linear infinite;
}
.soon-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); animation: blip 1.7s ease infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   FORMS
   ============================================================ */
.field { margin-bottom: 1.5rem; }
.field label {
  display: block; margin-bottom: .55rem;
  font-family: var(--mono);
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.field input, .field textarea, .field select {
  width: 100%; padding: .95rem 1.1rem;
  border: 0; border-radius: 14px;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,1);
  color: var(--ink); font-size: 1rem;
  transition: box-shadow .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,179,150,.7), 0 0 24px -8px rgba(15,179,150,.6);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select option { background: #fff; color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative; overflow: clip;
  padding: clamp(3rem, 5vw, 4.5rem) var(--pad-x) 1.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(234,239,245,.92));
  border-top: 1px solid var(--line);
}
.footer__cta {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end;
  padding-bottom: clamp(2rem, 3.4vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 3.4vw, 3rem);
}
@media (max-width: 940px) { .footer__cta { grid-template-columns: 1fr; } }
.footer__cta h2 { font-size: var(--fs-h1); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.2rem; }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__col h4 {
  margin-bottom: 1.1rem; font-family: var(--mono); font-weight: 600;
  font-size: var(--fs-tiny); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-2);
}
.footer__col a { display: block; padding-block: .32rem; font-size: .92rem; color: var(--ink-soft); transition: color .3s, transform .3s var(--ease); }
.footer__col a:hover { color: var(--mint-2); transform: translateX(5px); }
.footer__brand p { margin-top: 1rem; max-width: 36ch; font-size: .92rem; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--ink-dim);
}
.footer__word {
  margin-top: 2rem; text-align: center; user-select: none; white-space: nowrap;
  font-family: var(--mega); font-weight: 400;
  font-size: clamp(4rem, 17vw, 16rem); line-height: .82; letter-spacing: .02em;
  color: rgba(11,23,39,.07);
}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 800;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #46D97B, #128C3E);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -10px rgba(18,140,62,.7);
  transition: transform .45s var(--spring);
}
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(70,217,123,.5);
  animation: ripple 2.6s ease-out infinite;
}
@keyframes ripple { to { box-shadow: 0 0 0 22px rgba(70,217,123,0); } }
.wa-float:hover { transform: scale(1.12) rotate(8deg); }
.wa-float svg { width: 29px; height: 29px; fill: currentColor; position: relative; }

.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 1100;
  background: linear-gradient(90deg, var(--mint), var(--brass-hi));
  box-shadow: 0 0 14px rgba(15,179,150,.7);
}

/* ============================================================
   REVEAL STATES
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(48px); will-change: transform, opacity; }
[data-reveal="left"] { transform: translateX(-58px); }
[data-reveal="right"] { transform: translateX(58px); }
[data-reveal="scale"] { transform: scale(.9); }
[data-reveal="none"] { transform: none; }
.clip-reveal { clip-path: inset(0 0 100% 0); will-change: clip-path; }
html.no-js [data-reveal], html.no-js .split-line > span, html.no-js .clip-reveal { opacity: 1; transform: none; clip-path: none; }

/* ============================================================
   UTILITIES
   ============================================================ */
.tc { text-align: center; }
.mx { margin-inline: auto; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.flex { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.on-dark { color: var(--ink); }
.num-roman { font-family: var(--mono); font-weight: 600; color: var(--brass-2); }

/* ============================================================
   TYPE TIERS — last, so they win over component rules
   ============================================================ */
.h-display, .preloader__word, .footer__word, .marquee__track span, .menu__links a, .stat__num {
  font-family: var(--mega); font-weight: 400; letter-spacing: 0;
}
.menu__links a { letter-spacing: -0.01em; text-transform: uppercase; }
.stat__num { letter-spacing: -0.01em; }
.footer__word { letter-spacing: .02em; }

.eyebrow, .page-hero__crumb, .stat__label, .card__num, .tl-item__phase,
.footer__col h4, .field label, .visual__badge, .team-card__rank, .soon-tag,
.post-card__meta, .hero__scroll, .row-item__num, .vert__index, .insignia text,
.nav__logo small, .footer__bottom, .hero__meta {
  font-family: var(--mono);
}
.card__num, .row-item__num, .vert__index { font-weight: 600; }
.eyebrow { letter-spacing: .2em; }

/* ============================================================
   GRADIENT TYPE
   The ramp is applied to the animated word spans as well as their parent:
   GSAP transforms those children, and a composited child drops an ancestor's
   background-clip:text fill. The angle is near-vertical so each word's ramp
   lines up with its neighbours instead of banding across the line.
   ============================================================ */
.h-display, h1, h2,
.h-display .w, h1 .w, h2 .w,
.h-display .split-line > span, h1 .split-line > span, h2 .split-line > span {
  background-image: linear-gradient(168deg, #0B1727 4%, #163C52 44%, #0E9C84 104%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Word spans are all one line tall, so a vertical ramp lines up across them.
   Whole-line spans are not — a vertical ramp would restart on every line and
   read as a repeat, so those run left-to-right instead. */
.h-display .split-line > span, h1 .split-line > span, h2 .split-line > span {
  background-image: linear-gradient(94deg, #0B1727 0%, #16455E 48%, #0E9C84 100%);
}
/* every heading level takes the ramp, including the word spans GSAP transforms */
h3, h3 .w, .faq summary, .team-card h3, .row-item h3, .tl-item h3, .post-card h3, .res-tile h3 {
  background-image: linear-gradient(148deg, #0B1727 10%, #1B4A5E 60%, #0E9C84 112%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* the +/× toggle lives inside the clipped summary, so it needs its fill back */
.faq summary .x { background-image: none; -webkit-text-fill-color: var(--ink); }
.faq details[open] summary .x { -webkit-text-fill-color: #01271F; }

/* the ramp drifts slowly, so headings feel alive rather than static */
.h-display, h1, h2,
.h-display .w, h1 .w, h2 .w,
.h-display .split-line > span, h1 .split-line > span, h2 .split-line > span {
  background-size: 210% 100%;
  animation: rampDrift 11s ease-in-out infinite alternate;
}
@keyframes rampDrift { to { background-position: 100% 0; } }

.accent, .accent .w {
  background-image: linear-gradient(118deg, #0FB396 0%, #16C7A4 38%, #C9950E 104%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.stat__num {
  background-image: linear-gradient(166deg, #0B1727 8%, #14425A 52%, #0E9C84 108%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat__num sup {
  background-image: linear-gradient(180deg, #16C7A4, #0A8F79);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.preloader__word {
  background-image: linear-gradient(168deg, #0B1727 10%, #0E9C84 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer__word {
  background-image: linear-gradient(170deg, rgba(11,23,39,.16) 10%, rgba(15,179,150,.16) 60%, rgba(184,134,11,.14));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.menu__links a {
  background-image: linear-gradient(168deg, #0B1727 20%, #14425A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .3s, transform .7s var(--ease), background-image .3s;
}
.menu__links a:hover { background-image: linear-gradient(118deg, #0FB396, #C9950E); }
.menu__links a i { -webkit-text-fill-color: var(--brass); }

/* section eyebrows and labels pick up a soft two-stop ramp too */
.eyebrow {
  background-image:
    linear-gradient(142deg, rgba(255,255,255,.9), rgba(255,255,255,.5) 50%, rgba(223,246,241,.6)),
    linear-gradient(120deg, rgba(25,229,192,.16), rgba(46,99,232,.1));
}
.vert__index, .tl-item__phase, .card__num, .row-item__num {
  background-image: linear-gradient(110deg, #B8860B, #0E9C84 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   BRAND MARK
   ============================================================ */
/* .footer__col a sets display:block, which would stack the mark above the wordmark */
.nav__logo, .footer__brand .nav__logo {
  display: flex; flex-direction: row; align-items: center; gap: .7rem;
}
.nav__logo img {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(15,179,150,.4));
  transition: transform .5s var(--spring);
}
.nav__logo:hover img { transform: rotate(-12deg) scale(1.08); }
.nav__logo span { display: flex; flex-direction: column; line-height: 1; }
.footer__brand .nav__logo img { width: 48px; height: 48px; }

.preloader__mark {
  width: clamp(64px, 12vw, 92px); height: auto;
  opacity: 0; transform: scale(.7);
  position: relative;
  filter: drop-shadow(0 6px 20px rgba(15,179,150,.45));
}
.veil__mark { filter: drop-shadow(0 6px 24px rgba(15,179,150,.45)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .phone { transform: none; }
}