/* =====================================================================
   Pulse Health — landing.css
   Advanced, editorial, restrained. Built on the theme's Bootstrap base.
   Design language: warm paper + charcoal ink, one deep-red accent used
   sparingly, serif display headings (Fraunces) over Golos UI text.
   ===================================================================== */

:root{
  /* --- Palette (BIQADX brand: navy + blue + green) --- */
  --ink:        #111A2B;   /* deep navy-slate (text / headings / buttons) */
  --ink-2:      #2A3A54;
  --paper:      #FFFFFF;
  --sand:       #F2F5FB;   /* blue-tinted off-white section bg */
  --sand-2:     #E6ECF7;
  --line:       #D9E1F1;
  --muted:      #566179;
  --muted-2:    #8492AC;
  --accent:     #2563EB;   /* corporate blue (primary accent) */
  --accent-ink: #1D4ED8;
  --accent-soft:#E7EEFC;
  --green:      #4C9A51;   /* secondary green (kept) */
  --green-soft: #E7F3E8;
  --gold:       #4C9A51;   /* legacy alias -> green */

  /* --- Type --- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);

  /* --- Rhythm --- */
  --nav-h: 68px;
  --radius: 5px;
}

/* ---------- Base ---------- */
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{ background:var(--ink); color:#fff; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- Type system ---------- */
.serif{ font-family:var(--serif); font-weight:500; font-style:normal; }
.display{
  font-family:var(--serif); font-weight:500; letter-spacing:-.015em;
  line-height:1.02; color:var(--ink);
}
.h-xl{ font-size:clamp(2.6rem, 6vw, 5rem); }
.h-lg{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); }
.h-md{ font-size:clamp(1.5rem, 2.4vw, 2.05rem); }
.lead-2{ font-size:clamp(1.05rem,1.4vw,1.24rem); color:var(--muted); }
.tiny-caps{
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
}
.text-muted-2{ color:var(--muted)!important; }
.accent{ color:var(--accent); }
.mark{ background:linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%); }

/* editorial numbered eyebrow */
.eyebrow{
  display:inline-flex; align-items:baseline; gap:.6rem;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
}
.eyebrow .en{ font-family:var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:0; color:var(--accent); }

/* ---------- Layout helpers ---------- */
.section{ padding:clamp(52px,7vw,104px) 0; }
section[id]{ scroll-margin-top:78px; }
.bg-sand{ background:var(--sand); }
.bg-ink{ background:var(--ink); color:#EDE9E1; }
/* headings / eyebrows / intro leads sitting directly on a dark band stay light.
   (light cards inside a bg-ink section keep their own dark-on-light text — they
   use h5/p, not .display/.eyebrow/.lead-2, so they are unaffected.) */
.bg-ink .display{ color:#fff; }
.bg-ink .eyebrow, .bg-ink .eyebrow .en{ color:#93C5FD; }
.bg-ink .lead-2{ color:rgba(237,233,225,.75); }
.bg-ink .statement{ color:#fff; }
.bg-ink .statement .soft{ color:rgba(255,255,255,.5); }
.rule{ height:1px; background:var(--line); border:0; }
.container{ max-width:1200px; }

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.82rem; --pad-x:1.5rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  border-radius:4px; padding:var(--pad-y) var(--pad-x);
  display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s;
  border:1px solid transparent; letter-spacing:.005em;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-lg{ --pad-y:1rem; --pad-x:1.9rem; font-size:1.02rem; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; color:#fff; transform:translateY(-2px); }
/* primary CTA: understated professional navy — no heavy glow */
.btn-accent{ background:var(--ink); color:#fff; box-shadow:0 3px 10px -6px rgba(16,31,51,.4); }
.btn-accent:hover{ background:#0a1626; color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(16,31,51,.45); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-line:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost-light{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); color:#fff; }
.btn-paper{ background:#fff; color:var(--ink); }
.btn-paper:hover{ background:#fff; color:var(--accent); transform:translateY(-2px); }
.btn .ti{ font-size:1.1em; transition:transform .35s var(--ease); }
.btn:hover .ti-arrow-right{ transform:translateX(4px); }

/* ---------- Announcement bar ---------- */
.topbar{
  background:var(--ink); color:#D9D4C9; font-size:.82rem; letter-spacing:.02em;
  padding:.5rem 0; text-align:center;
}
.topbar a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; }

/* ---------- Nav ---------- */
/* nav bar (id keeps it above Bootstrap's .nav) */
#nav.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent; border-bottom:1px solid transparent; transition:.4s var(--ease);
}
#nav.nav.is-solid{ background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom-color:var(--line); box-shadow:0 8px 30px -24px rgba(17,26,43,.4); }
#nav .nav-inner{ height:var(--nav-h); display:flex; align-items:center; }
#nav .nav-inner > nav{ gap:.15rem; }

/* logo crossfade: white knockout over hero, colored once solid */
.brand-logo{ position:relative; display:block; height:38px; }
.brand-logo img{ height:100%; width:auto; display:block; transition:opacity .4s var(--ease); }
/* default (inner pages): coloured logo, dark links */
.brand-logo .logo-dark{ position:absolute; left:0; top:0; opacity:1; }
.brand-logo .logo-light{ opacity:0; }
/* home hero: white logo + white links while transparent over the video */
/* hero: clean WHITE knockout logo on a subtle top gradient — always crisp over the video */
#nav.over-video:not(.is-solid) .brand-logo .logo-dark{ opacity:0; }
#nav.over-video:not(.is-solid) .brand-logo .logo-light{ opacity:1; }
#nav.over-video:not(.is-solid) .brand-logo img{ filter:drop-shadow(0 1px 5px rgba(0,0,0,.45)); }
#nav.over-video:not(.is-solid)::before{ content:""; position:absolute; left:0; right:0; top:0; height:132px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,16,28,.6) 0%, rgba(9,16,28,.22) 52%, transparent 100%); }
#nav.over-video:not(.is-solid) .nav-link,
#nav.over-video:not(.is-solid) .nav-trigger{ color:rgba(255,255,255,.92); }
#nav.over-video:not(.is-solid) .nav-trigger .chev{ color:rgba(255,255,255,.65); }
#nav.over-video:not(.is-solid) .nav-link:hover,
#nav.over-video:not(.is-solid) .nav-trigger:hover,
#nav.over-video:not(.is-solid) .nav-item:hover .nav-trigger{ background:rgba(255,255,255,.16); color:#fff; }
#nav.over-video:not(.is-solid) .btn-line{ color:#fff; border-color:rgba(255,255,255,.4); }

.nav-link{
  font-weight:600; font-size:.92rem; color:var(--ink-2); letter-spacing:.005em; padding:.5rem .82rem; border-radius:9px; position:relative;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-link:hover{ color:var(--ink); background:var(--sand); }

/* nav sits over a light hero — keep dark content throughout */

/* footer brand logo */
.foot .brand-logo{ height:40px; }

/* ---------- Dropdown mega-menu ---------- */
.nav-item{ position:relative; }
.nav-trigger{ background:none; border:0; cursor:pointer; font-family:inherit; font-weight:600; font-size:.92rem; color:var(--ink-2); letter-spacing:.005em;
  display:inline-flex; align-items:center; gap:.34rem; padding:.5rem .82rem; border-radius:9px; transition:color .25s var(--ease), background .25s var(--ease); }
.nav-trigger .chev{ font-size:.8em; opacity:.55; transition:transform .3s var(--ease); }
.nav-trigger:hover, .nav-item:hover .nav-trigger{ color:var(--ink); background:var(--sand); }
.nav-item:hover .nav-trigger .chev{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:100%; left:0; padding-top:15px; opacity:0; visibility:hidden; transform:translateY(9px); transition:opacity .28s var(--ease), transform .28s var(--slow), visibility .28s; z-index:120; }
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown__inner{ background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:0 34px 70px -34px rgba(17,26,43,.42), 0 6px 16px -8px rgba(17,26,43,.14); padding:.3rem; min-width:212px; }
.dropdown a{ position:relative; z-index:0; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .75rem; border-radius:5px; font-weight:600; font-size:.84rem; letter-spacing:.005em; color:var(--ink); transition:color .25s var(--ease); }
/* hover background wipes in left → right */
.dropdown a::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent-soft); transform:scaleX(0); transform-origin:left center; transition:transform .34s var(--ease); }
.dropdown a:hover{ color:var(--accent-ink); }
.dropdown a:hover::before{ transform:scaleX(1); }
.dropdown a::after{ content:"\2192"; color:var(--accent); opacity:0; transform:translateX(-6px); transition:.25s var(--ease); }
.dropdown a:hover::after{ opacity:1; transform:none; }

/* ---------- Mobile flat panel links ---------- */
.nav-panel__link{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; font-weight:600; font-size:1.1rem; color:var(--ink); border-top:1px solid var(--line); transition:color .2s; }
.nav-panel__link:first-child{ border-top:0; }
.nav-panel__link:hover, .nav-panel__link:active{ color:var(--accent); }

/* ---------- Mobile submenu groups ---------- */
.nav-panel{ max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; }
.m-group{ border-top:1px solid var(--line); }
.m-group:first-child{ border-top:0; }
.m-group__head{ width:100%; background:none; border:0; display:flex; align-items:center; justify-content:space-between; padding:.95rem 0; font-weight:700; font-size:1.02rem; color:var(--ink); cursor:pointer; }
.m-group__head .chev{ color:var(--muted-2); transition:transform .3s var(--ease); }
.m-group__head .chev.up{ transform:rotate(180deg); }
.m-group__items{ display:flex; flex-direction:column; padding:0 0 .7rem; }
.m-group__items a{ padding:.5rem 0 .5rem .2rem; color:var(--muted); font-size:.95rem; }
.m-group__items a:hover{ color:var(--accent); }

/* ---------- HERO (split: navy panel + video) ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; background:var(--ink); }
.hero--split{ display:grid; grid-template-columns:1.02fr 0.98fr; min-height:100svh; }

/* left content panel */
.hero__panel{
  position:relative; display:flex; align-items:center;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(37,99,235,.28), transparent 55%),
    linear-gradient(160deg, #0c1a2c 0%, #12233b 60%, #0b2429 100%);
}
.hero__panel::before{ /* fine grid texture */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 80% at 30% 30%, #000, transparent 75%);
  mask-image:radial-gradient(80% 80% at 30% 30%, #000, transparent 75%);
}
.hero__panel-inner{
  position:relative; z-index:1; width:100%; max-width:600px;
  margin-left:auto; margin-right:clamp(2rem, 5vw, 5.5rem);
  padding:calc(var(--nav-h) + 7vh) clamp(1.4rem,3vw,2rem) 8vh;
  padding-left:clamp(1.4rem, 6vw, 4rem);
}

/* right visual */
.hero__visual{ position:relative; overflow:hidden; background:#0b1420; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1.04); filter:saturate(.9) contrast(1.03);
}
.hero__visual-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(14,29,48,.9) 0%, rgba(14,29,48,.25) 26%, transparent 55%),
             linear-gradient(180deg, transparent 70%, rgba(11,20,32,.5) 100%); }
.hero__chip{
  position:absolute; z-index:2; left:24px; bottom:24px;
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .85rem; border-radius:6px;
  background:rgba(9,16,28,.55); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:#fff;
}
.hero__chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(76,154,81,.7); animation:pulse 2.4s infinite; }

/* stats row inside panel */
.hero__stats{ display:flex; gap:2rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
.hero__stats > div{ display:flex; flex-direction:column; gap:.15rem; }
.hero__stats .k{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.hero__stats .v{ font-family:var(--serif); font-size:1.05rem; color:#fff; }

/* split-tuned headline size + lead */
.hero--split h1{ font-size:clamp(2.3rem, 3.3vw, 3.6rem); max-width:14ch; margin-bottom:1.4rem; }
.hero--split .hero__lead{ max-width:46ch; }

@media (max-width: 991px){
  .hero--split{ grid-template-columns:1fr; min-height:0; }
  .hero__panel-inner{ max-width:none; margin:0; padding:calc(var(--nav-h) + 5vh) 6vw 5vh; }
  .hero__visual{ min-height:46vh; }
  .hero--split h1{ font-size:clamp(2.1rem, 8vw, 3rem); }
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(9,16,28,.82) 0%, rgba(9,16,28,.5) 42%, rgba(9,16,28,.12) 100%),
    linear-gradient(180deg, rgba(9,16,28,.45) 0%, transparent 26%, transparent 72%, rgba(9,16,28,.4) 100%);
}
.hero__grain{ position:absolute; inset:0; z-index:2; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner{ position:relative; z-index:3; padding-top:calc(var(--nav-h) + 6vh); padding-bottom:10vh; width:100%; }
.hero h1{ font-size:clamp(2.7rem, 6.4vw, 5.6rem); max-width:16ch; color:#fff; }
.hero .display{ color:#fff; }
.hero .accent-word{ font-style:italic; color:#fff; position:relative; }
.hero .accent-word::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.09em; background:var(--accent); border-radius:2px; }
.hero__lead{ max-width:48ch; font-size:clamp(1.05rem,1.5vw,1.24rem); color:rgba(255,255,255,.8); }

/* --- Hero redesign: content, kicker, cta, fact bar --- */
.hero__content{ max-width:min(760px, 90%); }
.hero__kicker{
  display:flex; align-items:center; gap:.85rem; margin:0 0 1.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.hero__kicker .bar{ width:34px; height:2px; background:var(--accent); display:inline-block; }
.hero h1{ margin-bottom:1.5rem; }
.hero__cta{ display:flex; align-items:center; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero__textlink{
  color:#fff; font-weight:600; font-size:1rem; display:inline-flex; align-items:center; gap:.4rem;
  padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.35); transition:.3s var(--ease);
}
.hero__textlink .ti{ transition:transform .35s var(--ease); }
.hero__textlink:hover{ color:#fff; border-bottom-color:#fff; }
.hero__textlink:hover .ti{ transform:translateX(4px); }

.hero__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(0deg, rgba(9,16,28,.5), rgba(9,16,28,0));
  backdrop-filter:blur(3px);
}
.hero__bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; }
.hero__facts{ list-style:none; display:flex; margin:0; padding:0; gap:2.4rem; flex-wrap:wrap; }
.hero__facts li{ display:flex; flex-direction:column; gap:.15rem; position:relative; }
.hero__facts li:not(:first-child){ padding-left:2.4rem; }
.hero__facts li:not(:first-child)::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.2); }
.hero__facts .k{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hero__facts .v{ font-family:var(--serif); font-size:1.05rem; color:#fff; }
.hero__scroll{ display:inline-flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.8); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; transition:.3s; }
.hero__scroll:hover{ color:#fff; }
.hero__scroll .line{ width:46px; height:1px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:""; position:absolute; left:0; top:0; height:100%; width:16px; background:#fff; animation:track 1.9s var(--ease) infinite; }
@keyframes track{ 0%{ transform:translateX(-16px);} 60%{ transform:translateX(46px);} 100%{ transform:translateX(46px);} }
@media (max-width: 767px){
  .hero__bar-inner{ padding:.9rem 0; }
  .hero__facts{ gap:1.2rem; }
  .hero__facts li:not(:first-child){ padding-left:1.2rem; }
  .hero__facts .v{ font-size:.92rem; }
  .hero__scroll{ display:none; }
}
.hero__meta{ display:flex; flex-wrap:wrap; gap:2rem; }
.hero__meta .n{ font-family:var(--serif); font-size:1.7rem; line-height:1; }
.hero__meta .l{ font-size:.82rem; color:rgba(255,255,255,.7); }
.hero__badge{
  display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .9rem; border-radius:6px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px);
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.hero__badge .dot{ width:8px; height:8px; border-radius:50%; background:#59d17d; box-shadow:0 0 0 0 rgba(89,209,125,.7); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(89,209,125,.6)} 70%{box-shadow:0 0 0 9px rgba(89,209,125,0)} 100%{box-shadow:0 0 0 0 rgba(89,209,125,0)} }
.scroll-cue{ position:absolute; left:50%; bottom:26px; z-index:3; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-cue span{ width:1px; height:38px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0} 45%{opacity:1} 100%{transform:scaleY(1);transform-origin:top;opacity:0} }
.hero__controls{ position:absolute; right:22px; bottom:22px; z-index:4; display:flex; gap:.5rem; }
.icon-btn{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.25); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); transition:.3s; }
.icon-btn:hover{ background:rgba(255,255,255,.16); }

/* ===== HERO: clean headline + video showcase (light) ===== */
.hero{ position:relative; background:var(--paper); color:var(--ink); overflow:hidden;
  padding-bottom:0; }
.hero__glow{ position:absolute; top:-8%; left:50%; transform:translateX(-50%); width:min(1100px,120%); height:520px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, var(--accent-soft), transparent 70%); }
.hero__head{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; padding-top:calc(var(--nav-h) + 9vh); padding-bottom:clamp(2.4rem,4vw,3.6rem); }
.hero__head .hero__kicker{ justify-content:center; }
.hero__kicker{ display:flex; align-items:center; gap:.75rem; margin:0 0 1.5rem; font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hero__kicker .bar{ width:28px; height:2px; background:var(--accent); display:inline-block; }
.hero h1, .hero .display{ color:var(--ink); font-size:clamp(2.4rem, 5vw, 4.4rem); line-height:1.05; max-width:none; margin:0 auto 1.5rem; }
.hero .accent-word{ font-style:italic; color:var(--accent); }
.hero .accent-word::after{ display:none; }

/* typing word */
.type-word{ position:relative; display:inline-block; }
.type-ghost{ visibility:hidden; }
.type-live{ position:absolute; left:0; top:0; white-space:nowrap; }
.type-caret{ display:inline-block; width:.06em; height:.82em; background:currentColor; margin-left:.06em; vertical-align:baseline; animation:type-blink .85s step-end infinite; }
@keyframes type-blink{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }
.hero__lead{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.24rem); max-width:58ch; margin:0 auto; }
.hero__cta{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero__textlink{ color:var(--ink); font-weight:600; font-size:1rem; display:inline-flex; align-items:center; gap:.4rem; padding-bottom:2px; border-bottom:1px solid var(--line); transition:.3s var(--ease); }
.hero__textlink:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.hero__textlink .ti{ transition:transform .35s var(--ease); }
.hero__textlink:hover .ti{ transform:translateX(4px); }

/* full-width cinematic video showcase */
.hero__showcase{ position:relative; z-index:1; padding-bottom:clamp(20px,3vw,40px); }
.showcase{ position:relative; border-radius:8px; overflow:hidden; background:#0b1420;
  height:clamp(320px, 58vh, 640px); border:1px solid var(--line);
  box-shadow:0 50px 90px -50px rgba(16,31,51,.55); }
.showcase .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.02); filter:saturate(.95) contrast(1.03); }
.showcase__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,16,28,.12) 0%, transparent 28%, transparent 60%, rgba(9,16,28,.62) 100%); }
.showcase__chip{ position:absolute; z-index:2; top:18px; left:18px; display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; border-radius:6px; background:rgba(9,16,28,.5); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); color:#fff; font-size:.76rem; font-weight:600; }
.showcase__chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite; }
.showcase__facts{ position:absolute; z-index:1; left:0; right:0; bottom:0; display:flex; gap:2.6rem; flex-wrap:wrap; padding:1.3rem clamp(1.2rem,3vw,2rem); }
.showcase__facts > div{ display:flex; flex-direction:column; gap:.1rem; }
.showcase__facts .k{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.showcase__facts .v{ font-family:var(--serif); font-size:1.02rem; color:#fff; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(76,154,81,.6)} 70%{box-shadow:0 0 0 8px rgba(76,154,81,0)} 100%{box-shadow:0 0 0 0 rgba(76,154,81,0)} }
@media (max-width:767px){
  .hero__head{ padding-top:calc(var(--nav-h) + 7vh); }
  .showcase{ height:54vh; }
  .showcase__facts{ gap:1.1rem; padding:1rem 1.1rem; }
  .hero__cta{ gap:1.1rem; }
}

/* ===== HERO: full-screen video ===== */
.hero--full{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#0b1420; padding:0; }
.hero--full .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:none; filter:none; }
.hero--full .hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,16,28,.28) 0%, transparent 26%, transparent 52%, rgba(9,16,28,.6) 100%); }
.hero__full-btns{ position:absolute; z-index:2; left:0; right:0; bottom:clamp(66px,10vh,116px); display:flex; justify-content:center; gap:.85rem; flex-wrap:wrap; padding:0 1.2rem; }
/* premium hero CTAs sitting on the dark bottom scrim */
.hero__full-btns .btn{ --pad-y:1rem; --pad-x:1.95rem; font-size:1.03rem; letter-spacing:.012em; }
.hero__full-btns .btn-paper{ box-shadow:0 12px 30px -16px rgba(0,0,0,.55); }
.hero__full-btns .btn-paper:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -18px rgba(0,0,0,.6); }
.hero__full-btns .btn-ghost-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero__full-btns .btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-3px); }
.hero__full-btns .btn-ghost-light .ti{ font-size:1.05em; }

/* animated scroll cue */
.hero__cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.7); font-size:.62rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; transition:color .3s var(--ease); }
.hero__cue:hover{ color:#fff; }
.hero__cue .mouse{ width:22px; height:34px; border:1.6px solid rgba(255,255,255,.5); border-radius:11px; position:relative; }
.hero__cue .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:#fff; transform:translateX(-50%); animation:cue-scroll 1.9s var(--ease) infinite; }
@keyframes cue-scroll{ 0%{ opacity:0; transform:translate(-50%,0) } 45%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,11px) } }
@media (max-width:575px){ .hero__cue{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero__cue .mouse::after{ animation:none; } }

/* ===== Inner page hero ===== */
.phero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#ffffff 0%, #eef4fb 100%); border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + 8vh) 0 clamp(2.6rem,5vw,4.2rem); }
.phero__bg{ position:absolute; top:-20%; right:-8%; width:min(720px,80%); height:560px; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 70% 30%, var(--accent-soft), transparent 70%); }
.phero .container{ position:relative; z-index:1; max-width:880px; }
.phero__label{ display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1.2rem; font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.phero__label .bar{ width:28px; height:2px; background:var(--accent); display:inline-block; }
.phero__title{ color:var(--ink); font-size:clamp(2.3rem,4.6vw,3.8rem); line-height:1.04; letter-spacing:-.02em; margin:0; max-width:18ch; }
.phero__sub{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.24rem); line-height:1.6; max-width:60ch; margin:1.4rem 0 0; }
.phero__stage{ margin-top:1.4rem; }
/* breadcrumb hero image — right-anchored, fades into the light band (keeps nav + text readable) */
.phero__media{ position:absolute; top:0; right:0; bottom:0; width:min(48%,660px); z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%, rgba(0,0,0,.5) 46%, #000 82%);
  mask-image:linear-gradient(90deg,transparent 0%, rgba(0,0,0,.5) 46%, #000 82%);
  animation:pheroIn 1.1s var(--ease,cubic-bezier(.4,0,.2,1)) both; }
.phero__media::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(238,244,251,.05) 0%, rgba(238,244,251,.55) 100%); }
.phero__media img{ width:100%; height:100%; object-fit:cover; transform-origin:70% 40%;
  animation:pheroKen 20s ease-in-out infinite alternate; }
@keyframes pheroKen{ from{ transform:scale(1.04); } to{ transform:scale(1.13); } }
@keyframes pheroIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .phero__media, .phero__media img{ animation:none; } }

/* ---------- Marquee (client logos) ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3.4rem; width:max-content; animation:scrollx 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.mq-item{ position:relative; display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.01em; color:var(--ink); opacity:.9; }
.mq-item::before{ content:"·"; position:absolute; left:-1.9rem; color:var(--accent); opacity:.6; }

/* ---------- Mission statement ---------- */
.statement{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.22; letter-spacing:-.01em; }
.statement .soft{ color:var(--muted-2); }

/* ---------- Feature cards (monochrome) ---------- */
.card-x{
  background:var(--paper); border:1px solid var(--line); border-radius:7px;
  padding:30px; height:100%; position:relative;
  transition:transform .4s var(--slow), box-shadow .4s var(--slow), border-color .4s;
}
.card-x:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -30px rgba(16,31,51,.28); border-color:var(--sand-2); }
.card-x .idx{ position:absolute; top:22px; right:26px; font-family:var(--serif); font-size:1.1rem; color:var(--line); }
.ficon{
  width:50px; height:50px; border-radius:8px; display:grid; place-items:center; font-size:1.45rem;
  background:var(--accent-soft); color:var(--accent); margin-bottom:20px;
  transition:.4s var(--slow);
}
.card-x:hover .ficon{ background:var(--accent); color:#fff; }
.card-x h5{ font-weight:700; font-size:1.16rem; margin-bottom:.5rem; }

/* ---------- Steps ---------- */
.step{ position:relative; padding-top:2.4rem; }
.step__n{ font-family:var(--serif); font-size:3.2rem; color:var(--line); line-height:1; position:absolute; top:-.4rem; left:0; }
.step__bar{ height:2px; background:var(--line); position:relative; margin:1.4rem 0; overflow:hidden; }
.step__bar i{ position:absolute; inset:0; width:0; background:var(--accent); transition:width 1s var(--ease); }
.step.in .step__bar i{ width:100%; }

/* ---------- Conditions chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:6px;
  background:var(--paper); border:1px solid var(--line); font-weight:600; font-size:.95rem; color:var(--ink-2);
  transition:.3s var(--ease);
}
.chip:hover{ border-color:var(--ink); transform:translateY(-2px); }
.chip .ti{ color:var(--accent); }

/* ---------- Split / about ---------- */
.media{ position:relative; border-radius:7px; overflow:hidden; background:var(--sand-2); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow); }
.media:hover img{ transform:scale(1.05); }
.media--tall{ aspect-ratio:4/5; }
.badge-float{
  position:absolute; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:8px; padding:.85rem 1.05rem; display:flex; gap:.7rem; align-items:center;
  box-shadow:0 26px 50px -28px rgba(18,16,14,.5);
}
.badge-float .bf-n{ font-family:var(--serif); font-size:1.35rem; line-height:1; }
.check{ display:flex; gap:.85rem; align-items:flex-start; padding:1rem 0; border-top:1px solid var(--line); }
.check .ci{ width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:.85rem; flex:0 0 auto; margin-top:.15rem; }
.check h6{ font-weight:700; margin-bottom:.15rem; }

/* ---------- Stats ---------- */
.stat .num{ font-family:var(--serif); font-size:clamp(2.6rem,4.5vw,3.8rem); line-height:1; }
.stat .num .u{ color:var(--accent); }
.bg-ink .stat p{ color:rgba(237,233,225,.6); }
.bg-ink .rule{ background:rgba(255,255,255,.12); }

/* ---------- Doctors ---------- */
.doc{ border-radius:11px; overflow:hidden; background:var(--paper); border:1px solid var(--line); transition:transform .5s var(--slow), box-shadow .5s var(--slow); }
.doc:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -46px rgba(18,16,14,.45); }
.doc__ph{ aspect-ratio:1/1; overflow:hidden; background:var(--sand-2); position:relative; }
.doc__ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--slow); filter:grayscale(.15); }
.doc:hover .doc__ph img{ transform:scale(1.06); filter:grayscale(0); }
.doc__tag{ position:absolute; left:12px; top:12px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.94); padding:.32rem .6rem; border-radius:6px; }
.doc__tag.live{ color:#1a8f4c; } .doc__tag.live::before{ content:"•"; margin-right:.25rem; }

/* ---------- Security band ---------- */
.badge-cert{ display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.badge-cert .ti{ font-size:1.7rem; color:var(--ink); }
.badge-cert small{ color:var(--muted); }

/* ---------- Healthcare impact: visual ---------- */
.impact-media{ position:relative; border-radius:11px; overflow:hidden; aspect-ratio:4/4.3; background:var(--sand-2); border:1px solid var(--line); box-shadow:0 46px 88px -54px rgba(16,31,51,.5); }
.impact-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--slow); }
.impact-media:hover img{ transform:scale(1.05); }
.impact-media__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(9,16,28,.35) 100%); }
.impact-media__badge{ position:absolute; left:18px; bottom:18px; display:flex; gap:.75rem; align-items:center; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:8px; padding:.8rem 1.05rem; box-shadow:0 22px 44px -26px rgba(16,31,51,.5); }
.impact-media__ic{ width:42px; height:42px; flex:0 0 auto; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.3rem; }
.impact-media__n{ font-family:var(--serif); font-size:1.05rem; line-height:1.1; }
.impact-media small{ color:var(--muted); }

.impact-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem; margin-bottom:1.7rem; }
.impact-item{ display:flex; gap:.8rem; align-items:flex-start; }
.impact-item__ic{ flex:0 0 auto; font-size:1.45rem; line-height:1.25; color:var(--accent); }
.impact-item > div b{ display:block; font-weight:700; font-size:.98rem; margin-bottom:.15rem; color:var(--ink); }
.impact-item > div span{ display:block; color:var(--muted); font-size:.85rem; line-height:1.5; }

.sdg-label{ display:block; margin-bottom:.75rem; }
.sdg-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sdg{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem .4rem .4rem; border-radius:8px; font-size:.82rem; font-weight:600; color:#fff; box-shadow:0 12px 24px -14px rgba(16,31,51,.5); }
.sdg b{ display:grid; place-items:center; width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.22); font-weight:800; font-size:.82rem; }
.sdg-3{ background:#4C9F38; } .sdg-9{ background:#F36D25; } .sdg-10{ background:#DD1367; }
@media (max-width:479px){ .impact-list{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:30px; height:100%; position:relative; }
.quote .mark-q{ font-family:var(--serif); font-size:3rem; line-height:.6; color:var(--accent-soft); position:absolute; top:22px; right:26px; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; }
.quote p{ font-size:1.05rem; }
.q-av{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--sand-2); }

/* ---------- Pricing ---------- */
.price{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:32px; height:100%; transition:.4s var(--slow); }
.price:hover{ transform:translateY(-4px); box-shadow:0 40px 70px -50px rgba(18,16,14,.4); }
.price--feature{ background:var(--ink); color:#EDE9E1; border-color:var(--ink); }
.price--feature .amt, .price--feature h4{ color:#fff; }
.price .amt{ font-family:var(--serif); font-size:2.8rem; line-height:1; }
.price ul{ list-style:none; padding:0; margin:1.4rem 0; }
.price li{ display:flex; gap:.6rem; align-items:flex-start; padding:.42rem 0; font-size:.96rem; }
.price li .ti{ color:var(--accent); margin-top:.2rem; }
.price--feature li .ti{ color:#93C5FD; }
.pill-pop{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.3rem .7rem; border-radius:6px; }

/* ---------- App / integrations ---------- */
.app-shot{ border-radius:13px; overflow:hidden; border:1px solid var(--line); background:var(--sand-2); }
.int-logo{ width:56px; height:56px; border-radius:9px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; font-size:1.5rem; color:var(--ink); }

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:2rem; font-family:var(--serif); font-size:1.2rem; color:var(--ink); cursor:pointer; }
.faq-q .ti{ flex:0 0 auto; transition:transform .4s var(--ease); color:var(--accent); }
.faq-item.open .faq-q .ti{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; height:0; transition:height .45s var(--slow); }
.faq-a p{ padding:0 0 1.5rem; color:var(--muted); max-width:66ch; margin:0; }

/* ---------- CTA ---------- */
.cta{ position:relative; border-radius:8px; overflow:hidden; background:var(--ink); color:#fff; }
.cta__bg{ position:absolute; inset:0; background:radial-gradient(90% 120% at 15% 0%, rgba(37,99,235,.42), transparent 55%), radial-gradient(80% 120% at 100% 100%, rgba(76,154,81,.30), transparent 55%); }
.cta__inner{ position:relative; z-index:1; }

/* ---------- Let's talk: newsletter-style ---------- */
.talk{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center; background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:clamp(1.8rem,4vw,3rem); }
.talk__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.talk__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite; }
.talk h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.55rem,2.5vw,2.15rem); line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:.9rem 0 .6rem; }
.talk p{ color:var(--muted); font-size:1rem; line-height:1.55; margin:0; max-width:44ch; }
.talk__form{ display:flex; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:7px; padding:.35rem; box-shadow:0 16px 34px -20px rgba(16,31,51,.3); }
.talk__form input{ flex:1; min-width:0; border:0; background:none; padding:.62rem .95rem; font:inherit; color:var(--ink); outline:none; }
.talk__form input::placeholder{ color:var(--muted-2); }
.talk__form .btn{ white-space:nowrap; flex:0 0 auto; }
.talk__note{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; color:var(--muted-2); font-size:.8rem; }
@media (max-width:768px){ .talk{ grid-template-columns:1fr; gap:1.5rem; } }

/* simple centered variant */
.talk2{ max-width:620px; margin:0 auto; }
.talk2 .talk__eyebrow{ justify-content:center; }
.talk2__h{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:.9rem 0 .5rem; }
.talk2__p{ color:var(--muted); margin:0 0 1.6rem; }
.talk2__form{ max-width:460px; margin:0 auto; }
.talk2 .talk__note{ margin-top:.9rem; }

/* ---------- Let's talk: contact CTA (legacy) ---------- */
.cta2{ position:relative; overflow:hidden; border-radius:14px; background:var(--ink); color:#fff; padding:clamp(2.2rem,4.5vw,3.8rem); }
.cta2__bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(90% 120% at 12% 0%, rgba(37,99,235,.42), transparent 55%), radial-gradient(80% 130% at 100% 100%, rgba(76,154,81,.3), transparent 55%); }
.cta2__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.cta2__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#93C5FD; }
.cta2__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite; }
.cta2 h2{ color:#fff; font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:1.08; letter-spacing:-.015em; margin:1.1rem 0 1rem; max-width:18ch; }
.cta2 p{ color:rgba(255,255,255,.75); font-size:1.05rem; line-height:1.6; max-width:46ch; margin:0 0 1.8rem; }
.cta2__btns{ display:flex; flex-wrap:wrap; gap:.9rem; }

.cta2__card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:1.4rem 1.5rem; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cta2__row{ display:flex; align-items:center; gap:.9rem; padding:.8rem 0; border-top:1px solid rgba(255,255,255,.1); }
.cta2__row:first-child{ border-top:0; padding-top:0; }
.cta2__ic{ width:40px; height:40px; flex:0 0 auto; border-radius:7px; background:rgba(147,197,253,.14); color:#93C5FD; display:grid; place-items:center; font-size:1.15rem; }
.cta2__row .k{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); }
.cta2__row .v{ display:block; font-weight:600; font-size:1rem; }
.cta2__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.1); }
.cta2__tags span{ font-size:.72rem; font-weight:600; padding:.28rem .65rem; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#dfe6ee; }
@media (max-width:860px){ .cta2__grid{ grid-template-columns:1fr; } .cta2 h2{ max-width:none; } }

/* ---------- Newsletter ---------- */
.subscribe{ display:flex; gap:.5rem; max-width:440px; }
.subscribe input{ flex:1; border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:.8rem 1.2rem; font:inherit; color:var(--ink); }
.subscribe input:focus{ outline:none; border-color:var(--ink); }

/* ---------- Footer ---------- */
.foot{ background:var(--ink); color:#B7B1A6; }
.foot a{ color:#B7B1A6; transition:.25s; }
.foot a:hover{ color:#fff; }
.foot h6{ color:#fff; font-weight:700; letter-spacing:.02em; font-size:.82rem; text-transform:uppercase; }
.foot .brand{ color:#fff; }
.foot .brand small{ color:#8b867d; }
.soc{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#fff; font-size:1.1rem; transition:.3s; }
.soc:hover{ background:var(--accent); }

/* ---------- BIQADX: stage tags ---------- */
.stage{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid #cbe6e1;
}
.stage.green{ background:var(--green-soft); color:#2f6a33; border-color:#cfe6d1; }
.stage.neutral{ background:var(--sand); color:var(--muted); border-color:var(--line); }
.stage .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* stage rail (positioning strip) */
.rail{ display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; align-items:center; justify-content:center; }
.rail span{ font-family:var(--serif); font-size:1.05rem; color:var(--muted); position:relative; }
.rail span:not(:last-child)::after{ content:"·"; position:absolute; right:-1.25rem; color:var(--line); }

/* ---------- Reusable arrow link ---------- */
.link-arrow{ color:var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:.45rem; padding-bottom:2px; border-bottom:1px solid var(--line); transition:.3s var(--ease); }
.link-arrow:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.link-arrow .ti{ transition:transform .35s var(--ease); }
.link-arrow:hover .ti{ transform:translateX(4px); }

/* ---------- Who we are: image + fact grid ---------- */
.who-media{ position:relative; border-radius:11px; overflow:hidden; aspect-ratio:4/3.4; background:var(--sand-2); border:1px solid var(--line); box-shadow:0 44px 84px -54px rgba(16,31,51,.5); }
.who-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--slow); }
.who-media:hover img{ transform:scale(1.05); }
.who-badge{ position:absolute; left:18px; bottom:18px; display:flex; gap:.75rem; align-items:center; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:8px; padding:.8rem 1.05rem; box-shadow:0 22px 44px -26px rgba(16,31,51,.5); }
.who-badge__ic{ width:42px; height:42px; flex:0 0 auto; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.3rem; }
.who-badge__n{ font-family:var(--serif); font-size:1.2rem; line-height:1; }
.who-badge small{ color:var(--muted); }

.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.factcard{ display:flex; gap:.7rem; align-items:flex-start; padding:.95rem 1rem; border:1px solid var(--line); border-radius:7px; background:var(--paper); transition:border-color .3s, transform .35s var(--slow); }
.factcard:hover{ border-color:var(--accent); transform:translateY(-2px); }
.factcard > i{ color:var(--accent); font-size:1.25rem; margin-top:.1rem; flex:0 0 auto; }
.factcard .k{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.factcard .v{ display:block; font-weight:600; color:var(--ink); font-size:.92rem; margin-top:.15rem; }
@media (max-width:479px){ .factgrid{ grid-template-columns:1fr; } }

/* ---------- Who we are: "at a glance" panel (legacy) ---------- */
.glance{ border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow:hidden; box-shadow:0 30px 60px -50px rgba(16,31,51,.4); }
.glance__head{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); padding:1rem 1.4rem; background:var(--sand); border-bottom:1px solid var(--line); }
.glance__row{ display:flex; align-items:center; gap:1rem; padding:1.15rem 1.4rem; border-top:1px solid var(--line); }
.glance__row:first-of-type{ border-top:0; }
.glance__ic{ width:40px; height:40px; flex:0 0 auto; border-radius:8px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.2rem; }
.glance__k{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.1rem; }
.glance__v{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); }

/* ---------- Problem: colour-accented cards ---------- */
.pcard-b{ position:relative; height:100%; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:34px 28px 30px; overflow:hidden; transition:transform .45s var(--slow), box-shadow .45s var(--slow); }
.pcard-b::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--c); }
.pcard-b:hover{ transform:translateY(-6px); box-shadow:0 30px 56px -34px rgba(16,31,51,.32); }
.pcard-b.blue{ --c:var(--accent); --tint:var(--accent-soft); }
.pcard-b.green{ --c:var(--green); --tint:var(--green-soft); }
.pcard-b.amber{ --c:#c68a12; --tint:#f7edd6; }
.pcard-b__no{ position:absolute; top:26px; right:28px; font-family:var(--serif); font-size:1.5rem; color:var(--line); }
.pcard-b__ic{ width:56px; height:56px; border-radius:9px; display:grid; place-items:center; font-size:1.6rem; background:var(--tint); color:var(--c); margin-bottom:22px; }
.pcard-b h5{ font-weight:700; font-size:1.18rem; margin-bottom:.5rem; }
.pcard-b p{ color:var(--muted); margin:0; }

/* ---------- Problem: compact points ---------- */
.prob-points{ display:grid; gap:.9rem; margin-top:.5rem; }
.prob-pt{ display:flex; gap:.85rem; align-items:flex-start; }
.prob-pt__ic{ width:38px; height:38px; flex:0 0 auto; border-radius:8px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; font-size:1.15rem; color:var(--accent); }
.prob-pt p{ margin:.35rem 0 0; color:var(--muted); }
.prob-pt b{ color:var(--ink); font-weight:700; }

/* ---------- Labeled orbit constellation ---------- */
.orbit{ position:relative; width:100%; max-width:490px; aspect-ratio:1; margin:0 auto; }
.orbit::before{ content:""; position:absolute; inset:6%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(37,99,235,.12), rgba(76,154,81,.07) 52%, transparent 72%); }
.orbit__cap{ position:absolute; z-index:5; top:-8px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .95rem; border-radius:100px; background:var(--paper); border:1px solid var(--line); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; box-shadow:0 12px 28px -18px rgba(16,31,51,.5); }
.orbit__cap .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:orb-blink 2s ease-in-out infinite; }
@keyframes orb-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.orbit__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.ol-ring{ fill:none; stroke:var(--line); stroke-width:1.4; stroke-dasharray:2 8; }
.ol-line{ stroke:#bcdad5; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 9; animation:orb-flow 24s linear infinite; }
@keyframes orb-flow{ to{ stroke-dashoffset:-200 } }

/* smooth orbiting pulse dot */
.orbit__spin{ position:absolute; inset:0; z-index:2; animation:orb-spin 13s linear infinite; }
@keyframes orb-spin{ to{ transform:rotate(360deg) } }
.orbit__trav{ position:absolute; left:50%; top:13%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(37,99,235,.16), 0 0 20px 3px rgba(37,99,235,.6); }

/* hub */
.orbit__hub{ position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:134px; height:134px; border-radius:50%; background:radial-gradient(120% 120% at 30% 24%, #123739, #0b2429 72%); color:#fff; display:grid; place-content:center; justify-items:center; gap:.25rem; text-align:center; box-shadow:0 28px 56px -22px rgba(16,31,51,.72), inset 0 1px 0 rgba(255,255,255,.09); }
.orbit__hub::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--accent); opacity:.4; animation:orb-hubring 3.6s ease-out infinite; }
.orbit__hub::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--green); opacity:.32; animation:orb-hubring 3.6s ease-out 1.8s infinite; }
@keyframes orb-hubring{ 0%{ transform:scale(1); opacity:.5 } 100%{ transform:scale(1.32); opacity:0 } }
.orbit__hub i{ font-size:1.75rem; color:#93C5FD; }
.orbit__hub span{ font-family:var(--serif); font-size:1rem; line-height:1.15; }

/* labeled setting chips */
.orbit__chip{ position:absolute; z-index:3; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.45rem; padding:.52rem .85rem; border-radius:9px; background:var(--paper); border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--ink); white-space:nowrap; box-shadow:0 18px 36px -22px rgba(16,31,51,.5); transition:border-color .3s, box-shadow .3s; animation:orb-bob 6s ease-in-out infinite; }
.orbit__chip i{ font-size:1.05rem; color:var(--accent); }
.orbit__chip.g i{ color:var(--green); }
.orbit__chip:hover{ border-color:var(--accent); box-shadow:0 22px 42px -20px rgba(37,99,235,.42); }
.orbit__chip.g:hover{ border-color:var(--green); box-shadow:0 22px 42px -20px rgba(76,154,81,.42); }
.orbit__chip:nth-of-type(4){ animation-delay:.8s } .orbit__chip:nth-of-type(5){ animation-delay:1.6s } .orbit__chip:nth-of-type(6){ animation-delay:2.4s } .orbit__chip:nth-of-type(7){ animation-delay:3.2s }
@keyframes orb-bob{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 7px)) } }

@media (max-width: 575px){
  .orbit{ max-width:340px; }
  .orbit__chip{ font-size:.72rem; padding:.4rem .6rem; }
  .orbit__hub{ width:106px; height:106px; }
}
@media (prefers-reduced-motion: reduce){
  .orbit__spin, .ol-line, .orbit__chip, .orbit__hub::before, .orbit__hub::after, .orbit__cap .dot{ animation:none!important; }
}

/* ---------- Approach (alt): product showcase + feature cards ---------- */
.ay-showcase{ position:relative; margin-top:2.4rem; border-radius:7px; overflow:hidden; aspect-ratio:16/6.4; min-height:280px; max-height:460px; background:#0b1420; border:1px solid var(--line); box-shadow:0 50px 90px -52px rgba(16,31,51,.55); }
.ay-showcase video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ay-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,16,28,.15) 0%, transparent 40%, transparent 58%, rgba(9,16,28,.55) 100%); }
.ay-chip{ position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem; border-radius:100px; background:rgba(9,16,28,.55); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); color:#fff; font-size:.8rem; font-weight:600; }
.ay-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite; }

.ay-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:1.6rem; }
.ay-card{ background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:24px 20px; transition:transform .45s var(--slow), box-shadow .45s var(--slow), border-color .3s; }
.ay-card.n1,.ay-card.n2{ --c:var(--accent); --tint:var(--accent-soft); }
.ay-card.n3,.ay-card.n5{ --c:var(--green); --tint:var(--green-soft); }
.ay-card.n4{ --c:#7c5cd6; --tint:#efe9fb; }
.ay-card::before{ content:""; display:block; height:3px; width:34px; border-radius:3px; background:var(--c); margin-bottom:18px; }
.ay-card:hover{ transform:translateY(-6px); box-shadow:0 28px 52px -32px rgba(16,31,51,.32); border-color:var(--sand-2); }
.ay-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ay-ic{ width:48px; height:48px; border-radius:8px; display:grid; place-items:center; font-size:1.3rem; background:var(--tint); color:var(--c); transition:.35s var(--slow); }
.ay-card:hover .ay-ic{ transform:scale(1.08) rotate(-4deg); }
.ay-no{ font-family:var(--serif); font-size:1.25rem; color:var(--line); }
.ay-card h6{ font-weight:700; font-size:1rem; margin:0 0 .5rem; letter-spacing:-.01em; }
.ay-card p{ font-size:.85rem; line-height:1.5; color:var(--muted); margin:0; }
@media (max-width:991px){ .ay-grid{ grid-template-columns:repeat(2,1fr); } .ay-showcase{ aspect-ratio:16/9; } }
@media (max-width:575px){ .ay-grid{ grid-template-columns:1fr; } }

/* ---------- Approach: orbiting principles around product (light) ---------- */
.approachX{ position:relative; overflow:hidden; }
.ax-blue{ color:var(--accent); }
.ax-glow{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); width:min(940px,94%); height:720px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(37,99,235,.12), rgba(76,154,81,.06) 44%, transparent 70%); }
.approachX .container{ position:relative; z-index:1; }

.ax-stage{ position:relative; height:clamp(600px, 60vw, 760px); margin-top:2.5rem; }
.ax-ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,56%); aspect-ratio:1; border-radius:50%; border:1.5px dashed var(--line); }
.ax-ring--2{ width:min(660px,72%); border-style:solid; border-color:rgba(37,99,235,.12); animation:ax-spin 46s linear infinite; }
@keyframes ax-spin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

.ax-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(300px,30%); aspect-ratio:4/3.4; border-radius:13px; overflow:hidden; background:#0b1420; border:1px solid var(--line); box-shadow:0 44px 84px -38px rgba(16,31,51,.55); z-index:3; }
.ax-core video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ax-brand{ position:absolute; left:50%; top:calc(50% + clamp(150px,15vw,170px)); transform:translateX(-50%); z-index:4; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.9rem; color:var(--ink); white-space:nowrap; }
.ax-brand .ti{ color:var(--accent); }

/* soft pulsing glow behind the video core */
.ax-core-glow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px,42%); aspect-ratio:1; border-radius:50%; z-index:2; pointer-events:none; filter:blur(6px);
  background:radial-gradient(circle, rgba(37,99,235,.22), rgba(76,154,81,.08) 45%, transparent 66%); animation:ax-glowpulse 4.5s ease-in-out infinite; }
@keyframes ax-glowpulse{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06) } }

/* glow dots orbiting along the rings */
.ax-spin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; z-index:2; pointer-events:none; animation:ax-orbit 18s linear infinite; }
.ax-spin.s1{ width:min(520px,56%); aspect-ratio:1; }
.ax-spin.s2{ width:min(660px,72%); aspect-ratio:1; animation-duration:26s; animation-direction:reverse; }
.ax-spin__dot{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.12), 0 0 16px 3px rgba(37,99,235,.6); }
.ax-spin__dot.green{ background:var(--green); box-shadow:0 0 0 4px rgba(76,154,81,.12), 0 0 16px 3px rgba(76,154,81,.6); }
@keyframes ax-orbit{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

.ax-node{ position:absolute; width:232px; transform:translate(-50%,-50%); text-align:center; z-index:2;
  opacity:0; transition:opacity .8s var(--slow); }
.ax-stage.in .ax-node{ opacity:1; }
.ax-stage.in .ax-node.n1{ transition-delay:.12s } .ax-stage.in .ax-node.n2{ transition-delay:.26s } .ax-stage.in .ax-node.n3{ transition-delay:.4s } .ax-stage.in .ax-node.n4{ transition-delay:.54s } .ax-stage.in .ax-node.n5{ transition-delay:.68s }
.ax-node.n1,.ax-node.n2{ --c:var(--accent); }
.ax-node.n3,.ax-node.n5{ --c:var(--green); }
.ax-node.n4{ --c:#7c5cd6; }
.ax-ic{ width:62px; height:62px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-size:1.55rem; background:var(--paper); border:1px solid var(--line); color:var(--c); position:relative; box-shadow:0 14px 30px -14px rgba(16,31,51,.4); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ax-node:hover .ax-ic{ transform:scale(1.1); box-shadow:0 20px 40px -14px rgba(16,31,51,.5); }
.ax-ic::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--c); opacity:.35; animation:ax-pulse 3s ease-out infinite; }
@keyframes ax-pulse{ 0%{ transform:scale(1); opacity:.4 } 100%{ transform:scale(1.22); opacity:0 } }
.ax-no{ display:block; font-family:var(--serif); font-size:1.35rem; line-height:1; color:var(--c); margin-bottom:.3rem; }
.ax-node h6{ font-weight:700; font-size:1.02rem; margin:0 0 .4rem; }
.ax-node p{ font-size:.85rem; line-height:1.5; color:var(--muted); margin:0; }

.ax-node.n1{ left:50%; top:14%; }
.ax-node.n2{ left:85%; top:38%; }
.ax-node.n3{ left:81%; top:82%; }
.ax-node.n4{ left:19%; top:82%; }
.ax-node.n5{ left:15%; top:38%; }
.ax-node.n2 .ax-ic::before{ animation-delay:.6s } .ax-node.n3 .ax-ic::before{ animation-delay:1.2s } .ax-node.n4 .ax-ic::before{ animation-delay:1.8s } .ax-node.n5 .ax-ic::before{ animation-delay:2.4s }

@media (max-width:991px){
  /* drop the decorative centre video + orbit chrome on small screens —
     the approach reads cleanly as a stacked list of principle nodes */
  .ax-glow, .ax-ring, .ax-core-glow, .ax-spin, .ax-core, .ax-brand{ display:none; }
  .ax-stage{ height:auto; display:flex; flex-direction:column; align-items:center; gap:1.6rem; margin-top:1rem; }
  .ax-node{ position:static; transform:none; width:100%; max-width:440px; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .ax-ring--2, .ax-ic::before, .ax-spin, .ax-core-glow{ animation:none!important; } .ax-node{ opacity:1!important; } }

/* ---------- Approach pillars (legacy, kept for credibility icons) ---------- */
.pillar{ display:flex; gap:1rem; padding:1.4rem 0; border-top:1px solid var(--line); }
.pillar__ic{ width:46px; height:46px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; font-size:1.35rem; background:var(--accent-soft); color:var(--accent); }
.pillar h6{ font-weight:700; margin-bottom:.15rem; }

/* ---------- Editorial numbered feature list ---------- */
.feature-list{ margin-top:.5rem; border-bottom:1px solid var(--line); }
.feature{ display:flex; gap:1.5rem; padding:1.35rem 0; border-top:1px solid var(--line); transition:padding .35s var(--ease); }
.feature:hover{ padding-left:.5rem; }
.feature__n{ font-family:var(--serif); font-size:1.15rem; line-height:1.4; color:var(--muted-2); flex:0 0 auto; min-width:1.5rem; }
.feature:hover .feature__n{ color:var(--accent); }
.feature__b h6{ font-weight:700; font-size:1.1rem; margin-bottom:.25rem; }
.feature__b p{ color:var(--muted); margin:0; font-size:.96rem; }

/* ---------- Portfolio: clean uniform cards ---------- */
.pf2{ display:block; position:relative; overflow:hidden; height:100%; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:26px 24px; transition:border-color .35s, transform .45s var(--slow), box-shadow .45s var(--slow); }
.pf2::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .45s var(--ease); }
.pf2:hover{ transform:translateY(-5px); box-shadow:0 26px 48px -32px rgba(16,31,51,.32); border-color:transparent; }
.pf2:hover::before{ width:100%; }
.pf2 .stage{ display:inline-flex; margin-bottom:14px; }
.pf2 h5{ font-weight:700; font-size:1.08rem; letter-spacing:-.01em; margin:0 0 .4rem; transition:color .25s; }
.pf2 h5::after{ content:"\2197"; margin-left:.3rem; color:var(--accent); font-weight:700; display:inline-block; opacity:0; transform:translate(-5px,3px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.pf2:hover h5{ color:var(--accent); }
.pf2:hover h5::after{ opacity:1; transform:none; }
.pf2 p{ color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; }

/* ---------- Portfolio: flagship + compact list ---------- */
.pf-feat{ position:relative; height:100%; border-radius:11px; padding:34px 30px; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(158deg, var(--accent-soft) 0%, #ffffff 62%); border:1px solid var(--line); box-shadow:0 40px 78px -50px rgba(16,31,51,.4); }
.pf-feat__ic{ width:60px; height:60px; border-radius:9px; display:grid; place-items:center; font-size:1.7rem; background:var(--ink); color:#fff; box-shadow:0 4px 12px -8px rgba(16,31,51,.4); margin-bottom:20px; }
.pf-feat__tag{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.pf-feat__tag .ti{ color:var(--accent); }
.pf-feat h3{ font-family:var(--serif); font-weight:500; font-size:1.85rem; letter-spacing:-.01em; margin:.5rem 0 .7rem; color:var(--ink); }
.pf-feat p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin:0 0 1.4rem; flex:1; }
.pf-feat .stage{ align-self:flex-start; }

.pf-mini{ border-top:1px solid var(--line); }
.pf-mini__row{ position:relative; display:grid; grid-template-columns:minmax(140px,1fr) 1.3fr auto; align-items:center; gap:1.2rem; padding:1.02rem .8rem; border-bottom:1px solid var(--line); overflow:hidden; }
.pf-mini__row::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(37,99,235,.045); transform:scaleX(0); transform-origin:left center; transition:transform .38s var(--ease); }
.pf-mini__row:hover::before{ transform:scaleX(1); }
.pf-mini__row > *{ position:relative; z-index:1; }
.pf-mini__name{ font-weight:700; font-size:.98rem; color:var(--ink); transition:color .25s; }
.pf-mini__row:hover .pf-mini__name{ color:var(--accent); }
.pf-mini__desc{ color:var(--muted); font-size:.88rem; }
.pf-mini .stage{ justify-self:end; }
@media (max-width:575px){
  .pf-mini__row{ grid-template-columns:1fr auto; gap:.2rem .8rem; }
  .pf-mini__desc{ grid-column:1 / -1; }
}

/* ---------- Portfolio: index / directory list ---------- */
.pf-index{ border-top:1px solid var(--line); }
.pf-row{ position:relative; display:grid; grid-template-columns:52px minmax(180px,1fr) 1.7fr auto 30px; align-items:center; gap:1.5rem; padding:1.35rem 1.1rem; border-bottom:1px solid var(--line); overflow:hidden; }
.pf-row::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(37,99,235,.045); transform:scaleX(0); transform-origin:left center; transition:transform .4s var(--ease); }
.pf-row:hover::before{ transform:scaleX(1); }
.pf-row > *{ position:relative; z-index:1; }
.pf-row__no{ font-family:var(--serif); font-size:1.1rem; color:var(--muted-2); }
.pf-row__name{ font-weight:700; font-size:1.1rem; letter-spacing:-.01em; color:var(--ink); transition:color .25s; }
.pf-row:hover .pf-row__name{ color:var(--accent); }
.pf-row__desc{ color:var(--muted); font-size:.92rem; margin:0; }
.pf-row__stage{ justify-self:end; }
.pf-row__arrow{ color:var(--muted-2); font-size:1.15rem; display:grid; place-items:center; opacity:0; transform:translateX(-8px); transition:.3s var(--ease); }
.pf-row:hover .pf-row__arrow{ opacity:1; transform:none; color:var(--accent); }
@media (max-width:820px){
  .pf-row{ grid-template-columns:auto 1fr auto; gap:.35rem 1rem; padding:1.2rem .6rem; }
  .pf-row__no{ grid-row:1 / span 2; align-self:start; }
  .pf-row__desc{ grid-column:2 / -1; }
  .pf-row__stage{ grid-column:2; justify-self:start; }
  .pf-row__arrow{ display:none; }
}

/* ---------- Portfolio: categorized list ---------- */
.pf-cat{ margin-top:clamp(2.2rem,4vw,3.4rem); }
.pf-cat__label{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:.85rem; border-bottom:2px solid var(--ink); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.pf-cat__label span{ font-family:var(--serif); font-size:1.05rem; color:var(--accent); letter-spacing:0; }
.pf-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:3.2rem; }
.pf-item{ padding:1.25rem 0; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease); }
.pf-item:hover{ padding-left:.45rem; }
.pf-item__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.pf-item h5{ font-weight:700; font-size:1.06rem; margin:0; letter-spacing:-.01em; transition:color .25s; }
.pf-item:hover h5{ color:var(--accent); }
.pf-item .stage{ flex:0 0 auto; }
.pf-item p{ color:var(--muted); font-size:.92rem; line-height:1.5; margin:0; max-width:48ch; }
@media (max-width:767px){ .pf-list{ grid-template-columns:1fr; column-gap:0; } }

/* ---------- Clean portfolio card (flat, no icon tile) ---------- */
.pcard{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:26px 24px 24px; transition:border-color .35s, transform .45s var(--slow), box-shadow .45s var(--slow); }
.pcard::before{ content:""; position:absolute; left:24px; right:24px; top:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.pcard:hover{ transform:translateY(-4px); border-color:var(--sand-2); box-shadow:0 24px 46px -32px rgba(16,31,51,.32); }
.pcard:hover::before{ transform:scaleX(1); }
.pcard .stage{ align-self:flex-start; margin-bottom:1.15rem; }
.pcard h5{ font-weight:700; font-size:1.12rem; margin-bottom:.4rem; letter-spacing:-.01em; }
.pcard p{ color:var(--muted); font-size:.94rem; margin:0; }
.pcard__no{ position:absolute; top:24px; right:24px; font-family:var(--serif); color:var(--line); font-size:.98rem; }

/* ---------- How we build: connected timeline (on dark) ---------- */
.build-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; position:relative; }
.build-flow::before{ content:""; position:absolute; top:30px; left:12.5%; right:12.5%; height:2px; z-index:0;
  background:linear-gradient(90deg, rgba(147,197,253,.12), rgba(147,197,253,.5) 20%, rgba(147,197,253,.5) 80%, rgba(147,197,253,.12)); }
.build-step{ position:relative; text-align:center; padding:0 .4rem; }
.build-step__no{ position:relative; z-index:1; width:60px; height:60px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; color:#93C5FD;
  background:linear-gradient(160deg,#123739,#0b2429); border:1.5px solid rgba(147,197,253,.45); box-shadow:0 0 0 8px #101F33, 0 14px 30px -14px rgba(0,0,0,.6); transition:transform .35s var(--slow), border-color .35s; }
.build-step:hover .build-step__no{ transform:translateY(-4px); border-color:#93C5FD; }
.build-step h5{ color:#fff; font-weight:700; font-size:1.1rem; margin-bottom:.5rem; }
.build-step p{ color:rgba(237,241,245,.6); font-size:.9rem; line-height:1.5; margin:0; }
.build-flow::after{ content:""; position:absolute; top:30px; left:12.5%; width:10px; height:10px; margin-top:-4px; border-radius:50%; background:#93C5FD; box-shadow:0 0 12px 2px rgba(147,197,253,.7); z-index:0; animation:build-travel 5s ease-in-out infinite; }
@keyframes build-travel{ 0%{ left:12.5% } 50%{ left:calc(87.5% - 10px) } 100%{ left:12.5% } }
@media (max-width:767px){
  .build-flow{ grid-template-columns:1fr 1fr; gap:2.2rem 1rem; }
  .build-flow::before, .build-flow::after{ display:none; }
}

/* ---------- Credibility numbered (on dark) ---------- */
.cred{ position:relative; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16); height:100%; transition:border-color .35s var(--ease); }
.cred::before{ content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:linear-gradient(90deg,#93C5FD,#4C9A51); transition:width .5s var(--ease); }
.cred:hover{ border-top-color:transparent; }
.cred:hover::before{ width:46px; }
.cred__n{ font-family:var(--serif); font-size:1.9rem; line-height:1; color:#5f8a86; margin-bottom:1rem; display:block; transition:color .3s var(--ease); }
.cred:hover .cred__n{ color:#93C5FD; }
.cred h5{ color:#fff; font-weight:700; font-size:1.14rem; margin-bottom:.5rem; }
.cred p{ color:rgba(237,241,245,.62); margin:0; font-size:.94rem; line-height:1.55; }

/* flatten collaborate + impact icons (drop the coloured tile look) */
.collab{ border:1px solid var(--line); border-radius:7px; padding:1.15rem 1.25rem; }
.collab .ti{ font-size:1.35rem; color:var(--accent); }
.badge-cert .ti{ font-size:1.4rem; color:var(--accent); }

/* ---------- Portfolio grid ---------- */
.pf{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:22px;
  height:100%; transition:transform .5s var(--slow), box-shadow .5s var(--slow), border-color .4s;
}
.pf:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -30px rgba(16,31,51,.28); border-color:var(--sand-2); }
.pf__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.pf__ic{ width:44px; height:44px; border-radius:7px; display:grid; place-items:center; font-size:1.3rem; background:var(--sand); color:var(--ink); border:1px solid var(--line); transition:.4s var(--slow); }
.pf:hover .pf__ic{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pf h5{ font-weight:700; font-size:1.08rem; margin-bottom:.3rem; }
.pf p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ---------- Disclaimer band ---------- */
.disclaimer{ background:var(--sand); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:1.1rem 1.3rem; }
.disclaimer .ti{ color:var(--accent); }
.disclaimer p{ color:var(--muted); font-size:.9rem; margin:0; }

/* ---------- Collaboration hub diagram ---------- */
.cmap{ position:relative; max-width:900px; margin:0 auto; aspect-ratio:900/560; }
.cmap__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
.cmap-line{ fill:none; stroke:#bcdad5; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 8; animation:orb-flow 24s linear infinite; }
.cmap-dot{ fill:var(--accent); filter:drop-shadow(0 0 5px rgba(37,99,235,.6)); }
.cmap-dot.g{ fill:var(--green); filter:drop-shadow(0 0 5px rgba(76,154,81,.6)); }

.cmap__hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:150px; height:150px; border-radius:50%; text-align:center;
  background:radial-gradient(120% 120% at 30% 24%, #123739, #0b2429 72%); color:#fff; display:grid; place-content:center; justify-items:center; gap:.25rem;
  box-shadow:0 30px 60px -22px rgba(16,31,51,.72), inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(147,197,253,.25); }
.cmap__hub::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--accent); opacity:.4; animation:orb-hubring 3.6s ease-out infinite; }
.cmap__hub::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--green); opacity:.3; animation:orb-hubring 3.6s ease-out 1.8s infinite; }
.cmap__hub-logo{ font-weight:800; letter-spacing:.02em; font-size:1.3rem; }
.cmap__hub small{ color:#93C5FD; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }

.cmap-card{ position:absolute; z-index:1; transform:translate(-50%,-50%); width:210px; display:flex; gap:.7rem; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:13px 15px; box-shadow:0 20px 40px -24px rgba(16,31,51,.45); transition:border-color .3s, transform .35s var(--slow), box-shadow .35s; }
.cmap-card:hover{ border-color:var(--accent); transform:translate(-50%,-50%) scale(1.04); box-shadow:0 26px 46px -22px rgba(37,99,235,.4); }
.cmap-card__ic{ width:40px; height:40px; flex:0 0 auto; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.15rem; }
.cmap-card b{ display:block; font-size:.86rem; font-weight:700; line-height:1.18; color:var(--ink); }
.cmap-card small{ display:block; color:var(--muted); font-size:.74rem; margin-top:.1rem; }

@media (max-width:860px){
  .cmap{ aspect-ratio:auto; max-width:460px; display:flex; flex-direction:column; gap:.9rem; }
  .cmap__lines{ display:none; }
  .cmap__hub{ position:static; transform:none; width:auto; height:auto; border-radius:9px; padding:1.2rem; flex-direction:row; display:flex; align-items:center; justify-content:center; gap:.6rem; }
  .cmap__hub::before, .cmap__hub::after{ display:none; }
  .cmap-card{ position:static; transform:none; width:100%; }
  .cmap-card:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){ .cmap-line, .cmap__hub::before, .cmap__hub::after{ animation:none!important; } }

/* ---------- Collaboration cards (legacy) ---------- */
.collab{ border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.2rem; background:var(--paper); display:flex; gap:.8rem; align-items:center; transition:.3s var(--ease); }
.collab:hover{ border-color:var(--accent); transform:translateY(-3px); }
.collab .ti{ font-size:1.5rem; color:var(--accent); }

/* ---------- Scroll reveal (Apple-style blur + fade + rise) ---------- */
.reveal{ opacity:0; transform:translateY(32px); filter:blur(10px);
  transition:opacity 1s var(--slow), transform 1.15s var(--slow), filter 1s var(--slow); will-change:opacity, transform, filter; }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   INFOGRAPHIC KIT  — reusable, on-brand visuals used across inner &
   product-detail pages. Every "graph" here is honest: stage meters map
   to the real Concept→Validation development path, not fabricated data.
   ===================================================================== */

/* section intro helper */
.viz-head{ max-width:720px; }
.viz-head.center{ margin-inline:auto; text-align:center; }
.viz-head h2{ margin:.6rem 0 0; }

/* --- 1) STAGE METER — where a program sits on the development path --- */
.smeter{ background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:1.5rem 1.7rem 1.4rem; box-shadow:0 26px 54px -42px rgba(16,31,51,.45); }
.smeter__top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.smeter__lb{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.smeter__now{ font-family:var(--serif); font-size:1.05rem; color:var(--accent); }
.smeter__track{ position:relative; display:flex; }
.smeter__base{ position:absolute; top:10px; height:2px; background:var(--line); }
.smeter__fill{ position:absolute; top:10px; height:2px; background:linear-gradient(90deg,var(--accent),var(--green)); border-radius:2px; }
.sm-node{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; }
.sm-dot{ width:22px; height:22px; border-radius:50%; background:var(--paper); border:2px solid var(--line); display:grid; place-items:center; transition:.35s var(--ease); }
.sm-node.on .sm-dot{ border-color:var(--accent); }
.sm-node.on .sm-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.sm-node.now .sm-dot{ box-shadow:0 0 0 5px rgba(37,99,235,.14); animation:pulse 2.6s infinite; }
.sm-lb{ font-size:.72rem; font-weight:600; color:var(--muted-2); max-width:10ch; line-height:1.25; }
.sm-node.on .sm-lb{ color:var(--ink); }

/* --- 2) FLOW — horizontal numbered process --- */
.flow{ display:grid; gap:1.5rem 1.2rem; position:relative; }
.flow::before{ content:""; position:absolute; top:28px; left:calc(50% / var(--n,4)); right:calc(50% / var(--n,4)); height:2px; z-index:0;
  background:linear-gradient(90deg,var(--line),var(--accent-soft),var(--line)); }
.flow__step{ position:relative; text-align:center; padding:0 .3rem; }
.flow__no{ position:relative; z-index:1; width:56px; height:56px; margin:0 auto 1.05rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:1.3rem; color:var(--accent); background:var(--paper); border:1.5px solid var(--line);
  box-shadow:0 16px 30px -18px rgba(16,31,51,.4); transition:transform .4s var(--slow), border-color .3s; }
.flow__no .ti{ font-size:1.4rem; }
.flow__step:hover .flow__no{ transform:translateY(-5px); border-color:var(--accent); }
.flow__step h6{ font-weight:700; font-size:1rem; margin:0 0 .35rem; letter-spacing:-.01em; }
.flow__step p{ color:var(--muted); font-size:.87rem; line-height:1.5; margin:0; }
@media (max-width:767px){
  .flow{ grid-template-columns:1fr 1fr!important; gap:2rem 1rem; }
  .flow::before{ display:none; }
}
@media (max-width:420px){ .flow{ grid-template-columns:1fr!important; } }

/* --- 3) VERTICAL TIMELINE — roadmap / pathway --- */
.vtl{ position:relative; }
.vtl::before{ content:""; position:absolute; left:21px; top:14px; bottom:14px; width:2px; z-index:0;
  background:linear-gradient(var(--accent),var(--green)); opacity:.28; }
.vtl__row{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:1.3rem; padding-bottom:1.4rem; }
.vtl__row:last-child{ padding-bottom:0; }
.vtl__no{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:var(--paper); border:1.5px solid var(--line);
  display:grid; place-items:center; font-family:var(--serif); color:var(--accent); font-size:1.05rem; box-shadow:0 12px 26px -16px rgba(16,31,51,.4); }
.vtl__card{ background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.35rem; transition:.4s var(--slow); }
.vtl__card:hover{ border-color:var(--accent); transform:translateX(3px); box-shadow:0 24px 46px -32px rgba(16,31,51,.32); }
.vtl__card .stage{ margin-bottom:.6rem; }
.vtl__card h5{ font-weight:700; font-size:1.05rem; margin:0 0 .3rem; letter-spacing:-.01em; }
.vtl__card p{ color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; }

/* --- 4) ARCHITECTURE STACK — layered platform --- */
.stack{ display:grid; gap:.65rem; }
.stack__layer{ position:relative; display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-radius:8px;
  background:var(--paper); border:1px solid var(--line); transition:.4s var(--slow); }
.stack__layer::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.stack__layer:nth-child(even)::before{ background:var(--green); }
.stack__layer:hover{ border-color:var(--accent); transform:translateX(4px); box-shadow:0 22px 44px -32px rgba(16,31,51,.28); }
.stack__ic{ width:44px; height:44px; flex:0 0 auto; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.3rem; }
.stack__layer:nth-child(even) .stack__ic{ background:var(--green-soft); color:#2f6a33; }
.stack__tx{ min-width:0; }
.stack__tx b{ display:block; font-size:.98rem; color:var(--ink); letter-spacing:-.01em; }
.stack__tx span{ display:block; color:var(--muted); font-size:.84rem; line-height:1.45; }
.stack__tag{ margin-left:auto; flex:0 0 auto; }
@media (max-width:520px){ .stack__tag{ display:none; } }

/* --- 5) CAPABILITY WEB — generic hub + satellites (reuses .cmap engine) --- */
.nweb{ position:relative; max-width:900px; margin:0 auto; aspect-ratio:900/560; }
.nweb__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
.nweb-line{ fill:none; stroke:#bcdad5; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 8; animation:orb-flow 24s linear infinite; }
.nweb__hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:150px; height:150px; border-radius:50%; text-align:center;
  background:radial-gradient(120% 120% at 30% 24%, #123739, #0b2429 72%); color:#fff; display:grid; place-content:center; justify-items:center; gap:.2rem;
  box-shadow:0 30px 60px -22px rgba(16,31,51,.72), inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(147,197,253,.25); padding:0 .6rem; }
.nweb__hub::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--accent); opacity:.4; animation:orb-hubring 3.6s ease-out infinite; }
.nweb__hub::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid var(--green); opacity:.3; animation:orb-hubring 3.6s ease-out 1.8s infinite; }
.nweb__hub b{ font-weight:800; font-size:1.02rem; line-height:1.1; }
.nweb__hub small{ color:#93C5FD; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.nweb-card{ position:absolute; z-index:1; transform:translate(-50%,-50%); width:198px; display:flex; gap:.65rem; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 14px; box-shadow:0 20px 40px -24px rgba(16,31,51,.45); transition:.4s var(--slow); }
.nweb-card:hover{ border-color:var(--accent); transform:translate(-50%,-50%) scale(1.04); box-shadow:0 26px 46px -22px rgba(37,99,235,.4); }
.nweb-card__ic{ width:38px; height:38px; flex:0 0 auto; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:1.1rem; }
.nweb-card.g .nweb-card__ic{ background:var(--green-soft); color:#2f6a33; }
.nweb-card b{ display:block; font-size:.83rem; font-weight:700; line-height:1.15; color:var(--ink); }
.nweb-card small{ display:block; color:var(--muted); font-size:.72rem; margin-top:.1rem; }
@media (max-width:860px){
  .nweb{ aspect-ratio:auto; max-width:460px; display:flex; flex-direction:column; gap:.8rem; }
  .nweb__lines{ display:none; }
  .nweb__hub{ position:static; transform:none; width:auto; height:auto; border-radius:9px; padding:1.1rem; display:flex; align-items:center; justify-content:center; gap:.6rem; }
  .nweb__hub::before,.nweb__hub::after{ display:none; }
  .nweb-card{ position:static!important; transform:none!important; width:100%; }
  .nweb-card:hover{ transform:none!important; }
}
@media (prefers-reduced-motion: reduce){ .nweb-line,.nweb__hub::before,.nweb__hub::after{ animation:none!important; } }

/* --- 6) PROGRESS RING — qualitative stage completion --- */
.ringrow{ display:flex; flex-wrap:wrap; gap:2.2rem 2.6rem; justify-content:center; }
.ring{ position:relative; width:var(--s,148px); height:var(--s,148px); }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring__bg{ fill:none; stroke:var(--sand-2); stroke-width:9; }
.ring__fg{ fill:none; stroke-width:9; stroke-linecap:round; }
.ring__c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:0 .4rem; }
.ring__c b{ font-family:var(--serif); font-size:1.35rem; line-height:1; color:var(--ink); }
.ring__c small{ display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-top:.35rem; }

/* --- 7) GAP COMPARISON — today vs BIQADX direction (qualitative) --- */
.gap2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.gap-col{ border:1px solid var(--line); border-radius:7px; padding:1.5rem 1.6rem; }
.gap-col.a{ background:var(--sand); }
.gap-col.b{ background:linear-gradient(162deg,var(--accent-soft),#fff 70%); border-color:#cbe6e1; }
.gap-col__h{ display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; }
.gap-col.a .gap-col__h{ color:var(--muted-2); }
.gap-col.b .gap-col__h{ color:var(--accent-ink); }
.gap-col ul{ list-style:none; margin:0; padding:0; }
.gap-col li{ display:flex; gap:.65rem; padding:.62rem 0; font-size:.92rem; color:var(--muted); border-top:1px solid var(--line); }
.gap-col.b li{ border-top-color:#cbe6e1; }
.gap-col li:first-child{ border-top:0; }
.gap-col li .ti{ flex:0 0 auto; margin-top:.1rem; font-size:1.05rem; }
.gap-col.a li .ti{ color:var(--muted-2); }
.gap-col.b li .ti{ color:var(--green); }
@media (max-width:640px){ .gap2{ grid-template-columns:1fr; } }

/* --- 8) STAT / FACT STRIP (qualitative labels, no fabricated metrics) --- */
.fstrip{ display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.fstrip__c{ background:var(--paper); padding:1.4rem 1.3rem; }
.fstrip__k{ font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--accent); margin-bottom:.5rem; }
.fstrip__c b{ display:block; font-size:.95rem; margin-bottom:.15rem; }
.fstrip__c span{ color:var(--muted); font-size:.84rem; }
@media (max-width:767px){ .fstrip{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .fstrip{ grid-template-columns:1fr; } }

/* --- product-detail intro band --- */
.pdx{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center; }
@media (max-width:900px){ .pdx{ grid-template-columns:1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .nav-panel{ position:fixed; inset:var(--nav-h) 0 auto 0; background:#fff; border-bottom:1px solid var(--line); padding:1.2rem 0 1.6rem; box-shadow:0 30px 60px -30px rgba(0,0,0,.3); transform:translateY(-140%); transition:.45s var(--slow); }
  .nav-panel.open{ transform:none; }
  .hero h1{ font-size:clamp(2.5rem,9vw,3.6rem); }
}

/* ============================================================
   MOBILE POLISH — professional small-screen pass (<= 575px)
   ============================================================ */
@media (max-width:575px){
  /* tighter vertical rhythm */
  .section{ padding:clamp(46px,12vw,66px) 0; }
  section[id]{ scroll-margin-top:64px; }
  .phero{ padding-top:calc(var(--nav-h) + 4.5vh); padding-bottom:clamp(1.8rem,6vw,2.6rem); }
  /* mobile: image becomes a faint full-width backdrop so the title stays clear */
  .phero__media{ width:100%; opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%, #000 55%, transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%, #000 55%, transparent 100%); }
  .phero__media::after{ background:linear-gradient(180deg, rgba(238,244,251,.5), rgba(238,244,251,.5)); }
  .container{ padding-left:1.15rem; padding-right:1.15rem; }

  /* hero CTAs: full-width, easy to tap */
  .hero__full-btns{ flex-direction:column; align-items:stretch; gap:.7rem; padding:0 1.4rem; bottom:clamp(38px,7vh,70px); }
  .hero__full-btns .btn{ width:100%; justify-content:center; }

  /* newsletter / let's-talk form stacks cleanly */
  .talk__form{ flex-direction:column; gap:.55rem; background:none; border:0; box-shadow:none; padding:0; }
  .talk__form input{ border:1px solid var(--line); border-radius:6px; background:#fff; padding:.85rem 1rem; }
  .talk__form .btn{ width:100%; justify-content:center; }

  /* cards / meters breathe a little less */
  .smeter{ padding:1.2rem 1.15rem 1.05rem; }
  .smeter__top{ margin-bottom:1.4rem; }
  .sm-lb{ font-size:.6rem; max-width:8ch; }
  .fstrip__c{ padding:1.15rem 1.15rem; }
  .glance__row{ padding:1rem 1.15rem; }
  .disclaimer{ padding:1rem 1.1rem; }

  /* let numbered eyebrows + leads sit tighter */
  .lead-2{ font-size:1.02rem; }
  .cta2{ padding:1.8rem 1.4rem; }
}

/* small tablets: keep two-column intros from feeling cramped */
@media (min-width:576px) and (max-width:767px){
  .section{ padding:clamp(56px,10vw,84px) 0; }
}

/* mobile: shorter video hero (full-screen feels too tall on phones/small tablets) */
@media (max-width:767px){
  .hero--full{ min-height:72vh; min-height:clamp(440px, 72svh, 620px); }
  .hero--full .hero__scrim{ background:linear-gradient(180deg, rgba(9,16,28,.3) 0%, transparent 30%, transparent 55%, rgba(9,16,28,.66) 100%); }
}

/* =====================================================================
   MAIDER-STYLE HOME REDESIGN — image-first, minimal text, big counters,
   full-bleed image bands, horizontal-scroll portfolio. (v14)
   ===================================================================== */

/* --- Hero: short statement over full-screen video --- */
.hero__lede{ position:relative; z-index:3; width:100%; text-align:center; color:#fff; padding:0 1.2rem; }
.hero__kick{ display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1.3rem;
  font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero__kick .bar{ width:30px; height:2px; background:#5fd0c4; display:inline-block; }
.hero__lede h1{ color:#fff; font-size:clamp(2.4rem,6vw,4.7rem); line-height:1.03; letter-spacing:-.015em;
  margin:0 auto 2rem; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.4); }
.hero__lede .hero__full-btns{ position:static; justify-content:center; bottom:auto; padding:0; }

/* --- Slim stage rail band --- */
.railband{ padding:1.5rem 0; border-bottom:1px solid var(--line); background:var(--paper); }

/* --- Centered intro statement --- */
.mstate{ max-width:1000px; margin:0 auto; text-align:center; }
.mstate .statement{ margin:0 auto; }

/* --- Big qualitative counters --- */
.mstat{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 30px 62px -48px rgba(16,31,51,.42); }
.mstat__c{ background:var(--paper); padding:clamp(1.9rem,3.6vw,2.9rem) 1.4rem; text-align:center; }
.mstat__n{ font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5.4vw,4.3rem);
  line-height:1; letter-spacing:-.02em; color:var(--ink); }
.mstat__n .u{ color:var(--accent); }
.mstat__k{ margin-top:.85rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
@media (max-width:640px){ .mstat{ grid-template-columns:1fr 1fr; } }

/* --- Full-bleed image band (image jyada, text kam) --- */
.fband{ position:relative; display:flex; align-items:flex-end; overflow:hidden; background:#0b1420;
  min-height:clamp(440px,64vh,660px); }
.fband.reveal{ transform:none; }   /* full-bleed: fade only, ken-burns supplies motion */
.fband__img{ position:absolute; inset:0; z-index:0; }
.fband__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 7s var(--slow); }
.fband.in .fband__img img{ transform:scale(1); }
.fband__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,16,28,.22) 0%, rgba(9,16,28,.34) 44%, rgba(9,16,28,.86) 100%); }
.fband .container{ position:relative; z-index:2; width:100%; }
.fband__inner{ padding:clamp(3.2rem,7vw,5.2rem) 0 clamp(2.6rem,5vw,4rem); max-width:760px; color:#fff; }
.fband__inner .eyebrow, .fband__inner .eyebrow .en{ color:#93C5FD; }
.fband__inner .display{ color:#fff; }
.fband__inner p{ color:rgba(255,255,255,.85); font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.6; max-width:54ch; margin:0; }

/* --- Horizontal-scroll portfolio --- */
.hrail__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.2rem; }
.hnav{ display:inline-flex; gap:.6rem; flex:0 0 auto; }
.hnav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); display:grid; place-items:center; font-size:1.1rem; cursor:pointer; transition:.3s var(--ease); }
.hnav button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }

.hrail{ position:relative; }
.htrack{ display:flex; gap:1.3rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:.6rem max((100vw - 1200px)/2 + .75rem, 1.15rem) 1.7rem; }
.htrack::-webkit-scrollbar{ height:6px; }
.htrack::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.htrack::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }
.htrack::-webkit-scrollbar-track{ background:transparent; }

.hcard{ position:relative; scroll-snap-align:start; flex:0 0 clamp(258px,78vw,336px); display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  padding:28px 28px 26px; box-shadow:0 26px 52px -42px rgba(16,31,51,.38);
  transition:transform .5s var(--slow), box-shadow .5s var(--slow), border-color .35s; }
.hcard::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .5s var(--ease); }
.hcard--g::before{ background:var(--green); }
.hcard:hover{ transform:translateY(-6px); box-shadow:0 38px 66px -40px rgba(16,31,51,.4); border-color:transparent; }
.hcard:hover::before{ width:100%; }
.hcard__no{ position:absolute; top:24px; right:26px; font-family:var(--serif); font-size:1.05rem; color:var(--line); transition:color .35s; }
.hcard:hover .hcard__no{ color:var(--accent); }
.hcard > .stage{ align-self:flex-start; margin-bottom:1.4rem; }
.hcard h5{ font-weight:700; font-size:1.22rem; letter-spacing:-.015em; margin:0 0 .55rem; padding-right:2rem; }
.hcard p{ color:var(--muted); font-size:.94rem; line-height:1.55; margin:0 0 1.6rem; flex:1; }
.hcard__go{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.9rem; color:var(--accent); }
.hcard__go .ti{ transition:transform .35s var(--ease); }
.hcard:hover .hcard__go .ti{ transform:translateX(4px); }
@media (max-width:640px){ .hrail__head{ margin-bottom:1.6rem; } .hnav{ display:none; } }

/* --- Approach: principle cells --- */
.prow{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-top:clamp(2.4rem,4vw,3.4rem); }
.pcell{ position:relative; padding:1.7rem 1.35rem; border:1px solid var(--line); border-radius:11px; background:var(--paper);
  transition:transform .45s var(--slow), box-shadow .45s var(--slow), border-color .3s; }
.pcell:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -34px rgba(16,31,51,.3); border-color:var(--sand-2); }
.pcell__ic{ width:52px; height:52px; border-radius:10px; display:grid; place-items:center; font-size:1.45rem;
  background:var(--accent-soft); color:var(--accent); margin-bottom:1rem; transition:.4s var(--slow); }
.pcell:hover .pcell__ic{ background:var(--accent); color:#fff; }
.pcell:nth-child(even) .pcell__ic{ background:var(--green-soft); color:#2f6a33; }
.pcell:nth-child(even):hover .pcell__ic{ background:var(--green); color:#fff; }
.pcell__no{ position:absolute; top:1.5rem; right:1.5rem; font-family:var(--serif); font-size:1.05rem; color:var(--line); }
.pcell h6{ font-weight:700; font-size:1rem; margin:0 0 .4rem; letter-spacing:-.01em; }
.pcell p{ color:var(--muted); font-size:.86rem; line-height:1.5; margin:0; }
@media (max-width:1100px){ .prow{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .prow{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .prow{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){
  .fband__img img{ transform:none!important; }
}

/* =====================================================================
   LENIS smooth scroll + PINNED HORIZONTAL SCROLL (v15)
   ===================================================================== */

/* Lenis: let it own the scroll (disable native smooth while active) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* --- Pinned horizontal card-carousel --- */
.hpin{ position:relative; background:#0a141f; }
.hpin__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:radial-gradient(110% 70% at 16% 6%, rgba(37,99,235,.16), transparent 58%),
             radial-gradient(90% 80% at 92% 100%, rgba(76,154,81,.1), transparent 60%),
             linear-gradient(160deg, #0a1622 0%, #091722 60%, #0a1f1d 100%); }
.hpin__track{ display:flex; width:max-content; height:100%; align-items:center; gap:2vw; padding:0 8vw; will-change:transform; }

.hpanel{ position:relative; flex:0 0 80vw; height:76vh; max-height:760px; overflow:hidden; display:flex; align-items:center;
  border-radius:22px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(150deg, #0e2531 0%, #0b1a2b 58%, #0a2622 100%);
  box-shadow:0 60px 120px -55px rgba(0,0,0,.75); }
.hpanel:nth-child(even){ background:linear-gradient(150deg, #12272c 0%, #0b1a2b 58%, #0c2622 100%); }
.hpanel__bignum{ position:absolute; z-index:0; right:2%; top:50%; transform:translateY(-50%); line-height:.7;
  font-family:var(--serif); font-weight:600; font-size:min(66vh,620px); color:rgba(255,255,255,.045);
  pointer-events:none; user-select:none; }
.hpanel__inner{ position:relative; z-index:2; max-width:560px; padding:0 clamp(1.8rem,6vw,5.5rem); color:#fff; }
.hpanel__no{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#93C5FD; margin-bottom:1.4rem; }
.hpanel__inner h2{ color:#fff; font-size:clamp(2.6rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.018em; margin:0 0 1.4rem; }
.hpanel__inner p{ color:rgba(255,255,255,.8); font-size:clamp(1.05rem,1.4vw,1.28rem); line-height:1.6; max-width:42ch; margin:0; }

/* persistent section label */
.hpin__head{ position:absolute; z-index:5; top:clamp(3rem,7vh,5rem); left:clamp(1.4rem,6vw,6rem); pointer-events:none; max-width:60vw; }
.hpin__head .eyebrow, .hpin__head .eyebrow .en{ color:#93C5FD; }
.hpin__head h3{ color:#fff; font-family:var(--serif); font-weight:500; font-size:clamp(1.35rem,2.4vw,2.05rem);
  line-height:1.12; letter-spacing:-.01em; margin:.55rem 0 0; max-width:18ch; }

/* live number rail */
.hpin__rail{ position:absolute; z-index:5; left:clamp(1.4rem,6vw,6rem); right:clamp(1.4rem,6vw,6rem);
  bottom:clamp(1.8rem,4.5vh,3rem); display:flex; justify-content:space-between; align-items:center; }
.hpin__rail-line{ position:absolute; left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%);
  background:rgba(255,255,255,.14); overflow:hidden; }
.hpin__rail-fill{ position:absolute; left:0; top:0; height:100%; width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,#93C5FD,var(--green)); transition:width .1s linear; }
.hpin__rail-dot{ position:relative; z-index:1; font-family:var(--serif); font-size:1rem; line-height:1; color:rgba(255,255,255,.4);
  background:#0a141f; padding:.35rem .6rem; border-radius:7px; transition:color .35s var(--ease), transform .35s var(--ease); }
.hpin__rail-dot.on{ color:#fff; transform:scale(1.3); }

/* phones / reduced-motion: normal vertical stack, no scroll-jack */
@media (max-width:767px){
  .hpin{ height:auto !important; }
  .hpin__sticky{ position:static; height:auto; overflow:visible; padding-bottom:clamp(2rem,7vw,3rem); }
  .hpin__head{ position:static; max-width:none; padding:clamp(2.4rem,8vw,3rem) 1.15rem .6rem; }
  .hpin__head h3{ max-width:22ch; }
  .hpin__track{ width:auto !important; flex-direction:column; gap:1.1rem; padding:0 1.15rem; transform:none !important; }
  .hpanel{ flex:0 0 auto; width:100%; height:auto; max-height:none; min-height:66vh; padding:clamp(2.4rem,9vw,3.4rem) 0; }
  .hpanel__bignum{ font-size:min(28vh,190px); right:0; }
  .hpin__rail{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hpin{ height:auto !important; }
  .hpin__sticky{ position:static; height:auto; overflow:visible; }
  .hpin__track{ width:auto !important; flex-direction:column; gap:1.1rem; transform:none !important; }
  .hpanel{ flex:0 0 auto; width:100%; height:auto; max-height:none; min-height:60vh; }
  .hpin__rail{ display:none; }
}

/* =====================================================================
   MAIDER-STYLE SIGNATURE SECTIONS (v16)
   A) Imagery-filled brand wordmark + scattered honest stats
   B) Oversized headline + flowing wave + circular photo nodes
   ===================================================================== */

/* --- A) Brand wordmark filled with imagery --- */
.bmark{ position:relative; overflow:hidden; }
.bmark__wrap{ position:relative; min-height:clamp(440px,60vh,700px); display:flex; align-items:center; justify-content:center; }
.bmark__word{ margin:0; text-align:center; user-select:none; line-height:.84; letter-spacing:-.045em;
  font-family:var(--serif); font-weight:600; font-size:clamp(4.4rem,24vw,19rem);
  background:linear-gradient(135deg, rgba(11,26,44,.62), rgba(37,99,235,.5)), url("/assets/img/about.jpg") center 34%/cover no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.bstat{ position:absolute; max-width:240px; z-index:2; }
.bstat__n{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,4.4vw,3.8rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.bstat__n .u{ color:var(--accent); }
.bstat__k{ display:block; margin-top:.45rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.bstat--tr{ top:6%; right:1%; text-align:right; }
.bstat--l{ top:38%; left:1%; }
.bstat--b{ bottom:6%; left:50%; transform:translateX(-50%); text-align:center; }
@media (max-width:767px){
  .bmark{ text-align:center; }
  .bmark__wrap{ min-height:0; display:block; padding:1rem 0; }
  .bmark__word{ font-size:clamp(3.4rem,19vw,6rem); margin-bottom:2.4rem; }
  .bstat{ position:static; max-width:none; text-align:center !important; transform:none; margin:1.5rem auto 0; }
}

/* --- B) Wave section: oversized headline + flowing line + photo nodes --- */
.wave{ position:relative; overflow:hidden; background:var(--sand); padding:clamp(4.5rem,11vw,8rem) 0 clamp(4rem,9vw,7rem); }
.wave__lines{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.wave__lines svg{ width:100%; height:100%; display:block; }
.wg{ will-change:transform; }
.wg1{ animation:wflow 17s linear infinite; }
.wg2{ animation:wflow 24s linear infinite reverse; }
.wg3{ animation:wflow 20s linear infinite; }
@keyframes wflow{ from{ transform:translateX(0) } to{ transform:translateX(-400px) } }
.wl{ fill:none; stroke-linecap:round; }
.wl1{ stroke:var(--accent); stroke-width:1.5; opacity:.42; }
.wl2{ stroke:var(--green); stroke-width:1.5; opacity:.34; }
.wl3{ stroke:#7fb4ad; stroke-width:1.2; opacity:.5; }

.wave .container{ position:relative; z-index:2; }
.wave__giant{ font-family:var(--serif); font-weight:600; font-size:clamp(4rem,15vw,12rem); line-height:.92;
  letter-spacing:-.03em; color:var(--ink); white-space:nowrap; margin:0 0 clamp(1.5rem,4vw,3rem); will-change:transform; }
.wave__body{ max-width:620px; }
.wave__body .statement{ margin:.8rem 0 1rem; }
.wave__body p{ color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.62; max-width:52ch; margin:0; }

.wnode{ position:absolute; z-index:1; border-radius:50%; overflow:hidden; border:4px solid #fff;
  box-shadow:0 26px 48px -24px rgba(16,31,51,.5); animation:orb-bob 7s ease-in-out infinite; }
.wnode img{ width:100%; height:100%; object-fit:cover; }
.wnode--1{ width:clamp(84px,10vw,150px); aspect-ratio:1; top:14%; left:9%; }
.wnode--2{ width:clamp(64px,7vw,104px); aspect-ratio:1; bottom:20%; left:30%; animation-delay:1.2s; }
.wnode--3{ width:clamp(72px,8vw,120px); aspect-ratio:1; top:20%; right:11%; animation-delay:2.2s; }
.wnode--4{ width:clamp(56px,6vw,86px); aspect-ratio:1; bottom:16%; right:26%; animation-delay:3s; }
@media (max-width:900px){
  .wnode--2,.wnode--4{ display:none; }
  .wave__giant{ font-size:clamp(3.2rem,16vw,6rem); }
}
@media (max-width:575px){
  .wnode--3{ top:6%; right:4%; }
  .wnode--1{ top:8%; left:4%; }
}
@media (prefers-reduced-motion: reduce){
  .wg1,.wg2,.wg3,.wnode{ animation:none !important; }
  .wave__giant{ transform:none !important; }
}

/* =====================================================================
   HERO v2 — full-bleed motion + editorial statement (v19)
   ===================================================================== */
.hero--v2{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:#08111c; padding:0; }
.hero--v2 .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.04); }
.hero--v2__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(8,15,26,.88) 0%, rgba(8,15,26,.62) 46%, rgba(8,15,26,.34) 100%),
    linear-gradient(180deg, rgba(8,15,26,.6) 0%, rgba(8,15,26,.42) 30%, rgba(8,15,26,.4) 56%, rgba(8,15,26,.86) 100%),
    rgba(8,15,26,.32); }
.hero--v2__inner{ position:relative; z-index:2; width:100%;
  padding-top:calc(var(--nav-h) + 6vh); padding-bottom:clamp(5rem,13vh,9.5rem); }
.hero--v2__kick{ display:inline-flex; align-items:center; gap:.9rem; margin:0 0 1.6rem;
  font-size:.75rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero--v2__kick::before{ content:""; width:36px; height:1.5px; background:#5fd0c4; display:inline-block; }
.hero--v2__title{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.02em;
  font-size:clamp(2.7rem,6.6vw,5.6rem); line-height:1.01; margin:0 0 1.6rem; max-width:17ch;
  text-shadow:0 2px 50px rgba(0,0,0,.45); }
.hero--v2__sub{ color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6;
  max-width:54ch; margin:0 0 2.4rem; }
.hero--v2__cta{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.hero--v2__link{ color:#fff; font-weight:600; font-size:1.04rem; display:inline-flex; align-items:center; gap:.5rem;
  padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.42); transition:.3s var(--ease); }
.hero--v2__link:hover{ border-bottom-color:#fff; }
.hero--v2__link .ti{ transition:transform .35s var(--ease); }
.hero--v2__link:hover .ti{ transform:translateX(4px); }
@media (max-width:767px){
  .hero--v2{ min-height:88vh; min-height:clamp(560px,88svh,760px); }
  .hero--v2__scrim{ background:
    linear-gradient(180deg, rgba(8,15,26,.5) 0%, transparent 34%, transparent 40%, rgba(8,15,26,.86) 100%),
    rgba(8,15,26,.3); }
  .hero--v2__cta{ gap:1.3rem; }
  .hero--v2__cta .btn{ width:100%; justify-content:center; }
  .hero--v2__link{ width:100%; justify-content:center; }
}

/* =====================================================================
   HERO (image crossfade) + WAVE cohesion (v22)
   ===================================================================== */
.hero--img{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#08111c; padding:0; }
.hero--img__slides{ position:absolute; inset:0; z-index:0; }
.hero--img__slide{ position:absolute; inset:0; opacity:0; animation:heroCF 21s ease-in-out infinite; }
.hero--img__slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:heroKB 21s ease-in-out infinite; filter:saturate(1.02); }
.hero--img__slide.s1, .hero--img__slide.s1 img{ animation-delay:0s; }
.hero--img__slide.s2, .hero--img__slide.s2 img{ animation-delay:7s; }
.hero--img__slide.s3, .hero--img__slide.s3 img{ animation-delay:14s; }
@keyframes heroCF{ 0%{opacity:0} 4%{opacity:1} 30%{opacity:1} 34%{opacity:0} 100%{opacity:0} }
@keyframes heroKB{ 0%{transform:scale(1.04)} 34%{transform:scale(1.15)} 100%{transform:scale(1.15)} }
.hero--img__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(8,15,26,.8) 0%, rgba(8,15,26,.42) 46%, rgba(8,15,26,.1) 100%),
    linear-gradient(180deg, rgba(8,15,26,.44) 0%, transparent 26%, transparent 48%, rgba(8,15,26,.7) 100%); }

/* hero editorial overlay */
.hero--img__inner{ position:relative; z-index:2; width:100%; padding-top:calc(var(--nav-h) + 6vh); padding-bottom:clamp(4.5rem,12vh,8.5rem); }
.hero--img__kick{ display:inline-flex; align-items:center; gap:.9rem; margin:0 0 1.5rem; font-size:.75rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero--img__kick::before{ content:""; width:36px; height:1.5px; background:#5fd0c4; display:inline-block; }
.hero--img__title{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.02em; font-size:clamp(2.7rem,6.6vw,5.6rem); line-height:1.01; margin:0 0 1.5rem; max-width:17ch; text-shadow:0 2px 50px rgba(0,0,0,.45); }
.hero--img__sub{ color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.6; max-width:52ch; margin:0 0 2.3rem; }
.hero--img__cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
@media (max-width:767px){
  .hero--img__scrim{ background:linear-gradient(180deg, rgba(8,15,26,.4) 0%, transparent 30%, transparent 46%, rgba(8,15,26,.82) 100%); }
  .hero--img__cta{ width:100%; gap:.7rem; }
  .hero--img__cta .btn{ width:100%; justify-content:center; }
}

/* ---------- Approach: sticky read-along ---------- */
.appx{ background:var(--paper); }
.appx__grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.appx__sticky{ position:sticky; top:calc(var(--nav-h) + 9vh); align-self:start; }
.appx__title{ font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.08; letter-spacing:-.015em; margin:1rem 0 2rem; max-width:15ch; }
.appx__meter{ display:flex; align-items:baseline; gap:.6rem; }
.appx__idx{ font-family:var(--serif); font-weight:500; font-size:clamp(4rem,9vw,8rem); line-height:.9; color:var(--accent); letter-spacing:-.02em; }
.appx__of{ font-family:var(--serif); font-size:1.5rem; color:var(--muted-2); }
.appx__list{ display:flex; flex-direction:column; }
.appx__item{ display:flex; gap:clamp(1.1rem,2.5vw,2.2rem); padding:clamp(2.4rem,5.5vw,4.2rem) 0; border-top:1px solid var(--line); opacity:.34; transition:opacity .55s var(--ease); }
.appx__item:first-child{ border-top:0; }
.appx__item.active{ opacity:1; }
.appx__num{ font-family:var(--serif); font-size:1.05rem; color:var(--muted-2); flex:0 0 auto; padding-top:.5rem; transition:color .4s var(--ease); }
.appx__item.active .appx__num{ color:var(--accent); }
.appx__tx h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.06; letter-spacing:-.015em; margin:0 0 .7rem; color:var(--ink); }
.appx__tx p{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.6; max-width:46ch; margin:0; }
@media (max-width:860px){
  .appx__grid{ grid-template-columns:1fr; gap:1rem; }
  .appx__sticky{ position:static; }
  .appx__title{ margin-bottom:.6rem; max-width:none; }
  .appx__meter{ display:none; }
  .appx__item{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero--img__slide{ animation:none; } .hero--img__slide.s1{ opacity:1; }
  .hero--img__slide img{ animation:none; transform:none; }
}

/* wave: light variant + a clean fact row (no icons) */
.wave--light{ background:var(--paper); }
.wave__facts{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:1.8rem 3rem; margin-top:2.6rem; }
.wave__facts span{ display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.wave__facts b{ font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem,1.6vw,1.32rem); color:var(--ink); letter-spacing:-.01em; text-transform:none; }
@media (max-width:640px){ .wave__facts{ grid-template-columns:1fr 1fr; gap:1.5rem 2rem; } }

/* =====================================================================
   WHO WE ARE — text + India reach map (v24)
   ===================================================================== */
.whois__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5.5rem); align-items:center; }
.whois__facts{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2rem; margin-top:.5rem; }
.whois__facts span{ display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.whois__facts b{ font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink); letter-spacing:-.01em; text-transform:none; }

.indiamap{ position:relative; width:100%; max-width:430px; margin:0 auto; aspect-ratio:1/1; }
.indiamap__shape{ position:absolute; inset:0;
  background:linear-gradient(158deg, var(--accent-soft) 0%, #b9e0d9 52%, var(--green-soft) 100%);
  -webkit-mask:url(/assets/img/india.svg) center/contain no-repeat; mask:url(/assets/img/india.svg) center/contain no-repeat;
  filter:drop-shadow(0 22px 42px rgba(37,99,235,.28)); }
.indiamap__cap{ position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .95rem; border-radius:100px; background:#fff; border:1px solid var(--line);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); box-shadow:0 14px 30px -18px rgba(16,31,51,.45); }
.indiamap__cap .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite; }

.rdot{ position:absolute; z-index:2; width:11px; height:11px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(37,99,235,.14), 0 0 12px 2px rgba(37,99,235,.5); animation:pulse 2.8s infinite; }
.rdot.g{ background:var(--green); box-shadow:0 0 0 4px rgba(76,154,81,.14), 0 0 12px 2px rgba(76,154,81,.5); }
.rdot:nth-of-type(3){ animation-delay:.5s } .rdot:nth-of-type(5){ animation-delay:1s } .rdot:nth-of-type(7){ animation-delay:1.5s }

.indiamap__hub{ position:absolute; z-index:4; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.indiamap__pin{ width:16px; height:16px; border-radius:50%; background:var(--ink); border:3px solid #fff;
  box-shadow:0 5px 14px -4px rgba(16,31,51,.6), 0 0 0 6px rgba(16,39,46,.1); }
.indiamap__lbl{ font-size:.72rem; font-weight:700; color:var(--ink); background:#fff; padding:.16rem .52rem; border-radius:5px; border:1px solid var(--line); white-space:nowrap; box-shadow:0 8px 18px -10px rgba(16,31,51,.4); }
@media (max-width:860px){ .whois__grid{ grid-template-columns:1fr; } .indiamap{ max-width:320px; margin-top:1.5rem; } }

/* =====================================================================
   HERO — cinematic single scene (V2, v25)
   ===================================================================== */
.herocx{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#06090f; padding:0; }
.herocx__media{ position:absolute; inset:0; z-index:0; }
.herocx__media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); animation:cxzoom 26s ease-in-out infinite alternate;
  filter:saturate(.9) contrast(1.06) brightness(.82); }
@keyframes cxzoom{ from{ transform:scale(1.06) } to{ transform:scale(1.18) } }
/* slow light sweep */
.herocx__sweep{ position:absolute; top:-10%; bottom:-10%; left:0; width:45%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(150,225,222,.07) 48%, transparent 100%);
  transform:skewX(-8deg) translateX(-160%); animation:cxsweep 11s ease-in-out 2s infinite; }
@keyframes cxsweep{ 0%{ transform:skewX(-8deg) translateX(-160%) } 60%,100%{ transform:skewX(-8deg) translateX(420%) } }
/* cinematic grade: vignette (DOF) + directional darkening for text */
.herocx__grade{ position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(130% 100% at 72% 42%, transparent 34%, rgba(6,9,15,.58) 100%),
    linear-gradient(90deg, rgba(6,9,15,.78) 0%, rgba(6,9,15,.32) 46%, rgba(6,9,15,.02) 82%),
    linear-gradient(180deg, rgba(6,9,15,.52) 0%, transparent 30%, transparent 48%, rgba(6,9,15,.86) 100%); }
.herocx__inner{ position:relative; z-index:2; width:100%; padding-top:calc(var(--nav-h) + 6vh); padding-bottom:clamp(5rem,13vh,9.5rem); }
.herocx__kick{ display:inline-flex; align-items:center; gap:.9rem; margin:0 0 1.7rem; font-size:.74rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#7fe3d6; }
.herocx__kick::before{ content:""; width:38px; height:1.5px; background:#5fd3c4; display:inline-block; }
.herocx__title{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.022em; font-size:clamp(2.9rem,7vw,6rem); line-height:1.0; margin:0 0 1.5rem; max-width:15ch; text-shadow:0 4px 60px rgba(0,0,0,.5); }
.herocx__sub{ color:rgba(255,255,255,.82); font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.55; max-width:40ch; margin:0 0 2.6rem; font-weight:400; }
.herocx__cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:767px){
  .herocx{ min-height:92vh; min-height:clamp(580px,92svh,820px); }
  .herocx__grade{ background:radial-gradient(140% 100% at 60% 40%, transparent 30%, rgba(6,9,15,.6) 100%), linear-gradient(180deg, rgba(6,9,15,.5) 0%, transparent 34%, transparent 44%, rgba(6,9,15,.88) 100%); }
  .herocx__cta .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .herocx__media img{ animation:none; transform:scale(1.04); }
  .herocx__sweep{ display:none; }
}

/* =====================================================================
   MORE MOTION (v27) — India reach lines + image-band parallax headroom
   ===================================================================== */
.indiamap__net{ position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }
.indiamap__net line{ stroke:var(--accent); stroke-width:.4; opacity:.3; stroke-linecap:round; stroke-dasharray:1.4 3; animation:orb-flow 22s linear infinite; }
@media (prefers-reduced-motion: reduce){ .indiamap__net line{ animation:none; } }

/* image bands: JS drives a subtle vertical parallax; give it headroom + no transition fight */
.fband__img.px img{ transition:none; }

/* =====================================================================
   WHO WE ARE — pinned horizontal row (brand + reach) (v29)
   ===================================================================== */
.pinrow{ position:relative; background:var(--sand); }
.pinrow__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; }
.pinrow__track{ display:flex; align-items:center; height:100%; width:max-content;
  gap:clamp(3.5rem,9vw,10rem); padding:0 max((100vw - 1200px)/2 + .75rem, 1.4rem); will-change:transform; }
.pinrow__bar{ position:absolute; z-index:3; left:clamp(1.4rem,6vw,6rem); right:clamp(1.4rem,6vw,6rem);
  bottom:clamp(1.8rem,4.5vh,3rem); height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.pinrow__fill{ display:block; height:100%; width:calc(var(--p,0)*100%); background:linear-gradient(90deg,var(--accent),var(--green)); transition:width .1s linear; }

/* item 1 — intro */
.whor__intro{ flex:0 0 auto; width:min(560px,86vw); }
.whor__facts{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; margin-top:.4rem; }
.whor__facts span{ display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.whor__facts b{ font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink); letter-spacing:-.01em; text-transform:none; }

/* item 2 — giant BIQADX wordmark, one row, outlined (a different treatment) */
.whor__brand{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1.4rem,3vh,2.4rem); }
.whor__brand-ey{ font-size:.76rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.whor__word{ font-family:var(--serif); font-weight:600; white-space:nowrap; line-height:.86; letter-spacing:-.03em;
  font-size:clamp(7rem,27vh,22rem); color:transparent; -webkit-text-stroke:2px var(--ink); }
.whor__stats{ display:flex; gap:clamp(2rem,4vw,3.4rem); flex-wrap:wrap; }
.whor__stats > span{ display:flex; flex-direction:column; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); max-width:15ch; }
.whor__stats b{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.2vw,3rem); color:var(--ink); line-height:1; margin-bottom:.3rem; letter-spacing:-.01em; text-transform:none; }

/* item 3 — india reach map */
.whor__map{ flex:0 0 auto; width:min(460px,78vh); }
.whor__map .indiamap{ max-width:none; margin:0; }

@media (max-width:767px){
  .pinrow{ height:auto !important; }
  .pinrow__sticky{ position:static; height:auto; overflow:visible; display:block; padding:clamp(3rem,10vw,4rem) 0; }
  .pinrow__track{ width:auto !important; flex-direction:column; align-items:stretch; gap:clamp(2.6rem,9vw,4rem); padding:0 1.15rem; transform:none !important; }
  .whor__intro, .whor__brand, .whor__map{ width:100%; }
  .whor__word{ font-size:clamp(3.4rem,20vw,6rem); white-space:normal; -webkit-text-stroke:1.5px var(--ink); }
  .whor__map{ max-width:320px; margin:0 auto; }
  .pinrow__bar{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .pinrow{ height:auto !important; }
  .pinrow__sticky{ position:static; height:auto; overflow:visible; display:block; }
  .pinrow__track{ width:auto !important; flex-direction:column; transform:none !important; }
  .pinrow__bar{ display:none; }
}

/* =====================================================================
   Realistic detailed India map (states) (v30)
   ===================================================================== */
.indiamap{ aspect-ratio:612 / 696; }
.indiamap__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 24px 46px rgba(37,99,235,.3)) drop-shadow(0 0 36px rgba(147,197,253,.16)); }
/* dots get a soft ripple over the real map */
.rdot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.5; animation:rripple 2.8s ease-out infinite; }
.rdot{ color:var(--accent); } .rdot.g{ color:var(--green); }
@keyframes rripple{ 0%{ transform:scale(.6); opacity:.6 } 100%{ transform:scale(2.4); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .rdot::after{ animation:none; opacity:0; } }

/* =====================================================================
   PROBLEM — editorial split (v31)
   ===================================================================== */
.prob2__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,6vw,5.5rem); align-items:center; }
.prob2__media{ position:relative; }
.prob2__img{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--sand-2);
  box-shadow:0 60px 100px -55px rgba(16,31,51,.55); }
.prob2__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.4s var(--slow); filter:saturate(.8) contrast(1.06) brightness(.95); }
.prob2__media:hover .prob2__img img{ transform:scale(1.06); }
.prob2__img::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg, rgba(37,99,235,.34) 0%, transparent 46%), linear-gradient(0deg, rgba(9,26,30,.55) 0%, transparent 42%); }
.prob2__chip{ position:absolute; z-index:2; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .95rem; border-radius:100px; background:rgba(9,16,28,.5); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.76rem; font-weight:600; }
.prob2__chip .dot{ width:8px; height:8px; border-radius:50%; background:#e0a53a; animation:apulse 2.6s infinite; }
@keyframes apulse{ 0%{ box-shadow:0 0 0 0 rgba(224,165,58,.55) } 70%{ box-shadow:0 0 0 8px rgba(224,165,58,0) } 100%{ box-shadow:0 0 0 0 rgba(224,165,58,0) } }
.prob2__tag{ position:absolute; z-index:2; top:16px; left:16px; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(9,16,28,.4); border:1px solid rgba(255,255,255,.2); padding:.34rem .7rem; border-radius:6px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.prob2__points{ margin-top:2.2rem; border-top:1px solid var(--line); }
.prob2__pt{ display:flex; gap:1.5rem; padding:1.45rem 0; border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease); }
.prob2__pt:hover{ padding-left:.4rem; }
.prob2__n{ font-family:var(--serif); font-size:1.05rem; color:var(--accent); flex:0 0 auto; padding-top:.2rem; }
.prob2__pt b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.12rem,1.6vw,1.28rem); color:var(--ink); margin-bottom:.3rem; letter-spacing:-.01em; }
.prob2__pt p{ color:var(--muted); font-size:.95rem; line-height:1.55; margin:0; max-width:46ch; }
@media (max-width:860px){
  .prob2__grid{ grid-template-columns:1fr; gap:2rem; }
  .prob2__img{ aspect-ratio:16/10; }
}

/* =====================================================================
   PROBLEM — full-screen cinematic (v32)
   ===================================================================== */
.probx{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#06110f; }
.probx__media{ position:absolute; inset:0; z-index:0; }
.probx__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06);
  animation:cxzoom 28s ease-in-out infinite alternate; filter:saturate(.82) contrast(1.06) brightness(.9); }
.probx__grade{ position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(130% 100% at 78% 36%, transparent 36%, rgba(6,14,17,.5) 100%),
    linear-gradient(90deg, rgba(6,14,17,.72) 0%, rgba(6,14,17,.28) 52%, transparent 100%),
    linear-gradient(180deg, rgba(6,14,17,.42) 0%, transparent 26%, transparent 40%, rgba(6,14,17,.9) 100%); }
.probx__inner{ position:relative; z-index:2; width:100%; padding-top:calc(var(--nav-h) + 6vh); padding-bottom:clamp(3rem,7vh,5.5rem); }
.probx .eyebrow, .probx .eyebrow .en{ color:#7fe3d6; }
.probx__title{ color:#fff; font-size:clamp(2.4rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.018em; max-width:19ch; margin:1rem 0 clamp(2rem,4vw,3rem); text-shadow:0 4px 50px rgba(0,0,0,.5); }
.probx__points{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,3rem); max-width:960px; border-top:1px solid rgba(255,255,255,.2); padding-top:1.7rem; }
.probx__pt b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem,1.5vw,1.35rem); color:#fff; margin-bottom:.4rem; letter-spacing:-.01em; }
.probx__pt span{ color:rgba(255,255,255,.72); font-size:.92rem; line-height:1.5; }
@media (max-width:767px){
  .probx{ min-height:92vh; min-height:clamp(560px,92svh,820px); }
  .probx__points{ grid-template-columns:1fr; gap:1.1rem; }
  .probx__title{ font-size:clamp(2.05rem,8vw,3rem); }
  .probx__grade{ background:linear-gradient(180deg, rgba(6,14,17,.42) 0%, transparent 30%, transparent 42%, rgba(6,14,17,.92) 100%); }
}
@media (prefers-reduced-motion: reduce){ .probx__media img{ animation:none; transform:scale(1.04); } }

/* =====================================================================
   APPROACH — horizontal one-row, professional panels (v33)
   ===================================================================== */
#approach.pinrow{ background:var(--paper); }
.apr__intro{ flex:0 0 auto; width:min(500px,86vw); }
.apr__panel{ position:relative; flex:0 0 auto; width:min(400px,84vw); padding-top:2.5rem; }
.apr__bignum{ position:absolute; z-index:0; top:-3.4rem; left:-.6rem; line-height:.72; pointer-events:none; user-select:none;
  font-family:var(--serif); font-weight:600; font-size:clamp(11rem,20vh,17rem); letter-spacing:-.04em; color:var(--sand); }
.apr__no{ position:relative; z-index:1; display:block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1.1rem; }
.apr__panel h3{ position:relative; z-index:1; font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.1vw,2.7rem); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:0 0 1rem; }
.apr__panel p{ position:relative; z-index:1; color:var(--muted); font-size:1rem; line-height:1.6; margin:0; max-width:34ch; }
@media (max-width:767px){
  .apr__intro, .apr__panel{ width:100%; }
  .apr__panel{ padding-top:1.6rem; border-top:1px solid var(--line); }
  .apr__bignum{ font-size:clamp(6rem,26vw,9rem); top:-1.2rem; left:auto; right:0; color:var(--sand-2); }
}

/* =====================================================================
   APPROACH — fixed scene, content scrolls up over it (v34)
   ===================================================================== */
.apv{ position:relative; background:#081613; }
.apv__bg{ position:sticky; top:0; height:100vh; height:100svh; z-index:0; overflow:hidden; }
.apv__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08);
  animation:cxzoom 32s ease-in-out infinite alternate; filter:saturate(.78) contrast(1.05) brightness(.66); }
.apv__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,22,19,.72) 0%, rgba(8,22,19,.46) 42%, rgba(8,22,19,.74) 100%),
             linear-gradient(90deg, rgba(8,22,19,.6) 0%, transparent 72%); }
.apv__content{ position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; color:#fff; }
.apv .eyebrow, .apv .eyebrow .en{ color:#7fe3d6; }
.apv__head{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.apv__head .display{ color:#fff; max-width:16ch; text-shadow:0 4px 50px rgba(0,0,0,.5); }
.apv__lead{ color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; max-width:52ch; margin:1.6rem 0 0; }
.apv__item{ min-height:74vh; display:flex; flex-direction:column; justify-content:center; max-width:640px; }
.apv__no{ display:block; font-family:var(--serif); font-size:1.1rem; letter-spacing:.05em; color:#7fe3d6; margin-bottom:1rem; }
.apv__no i{ font-style:normal; color:rgba(255,255,255,.35); margin:0 .25rem; }
.apv__item h3{ color:#fff; font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.03; letter-spacing:-.018em; margin:0 0 1.2rem; }
.apv__item p{ color:rgba(255,255,255,.8); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; max-width:42ch; margin:0; }
@media (max-width:767px){
  .apv__item{ min-height:66vh; }
  .apv__head{ min-height:92vh; }
}
@media (prefers-reduced-motion: reduce){ .apv__bg img{ animation:none; transform:scale(1.04); } }

/* =====================================================================
   APPROACH — imagery-filled mark + scattered principles (v35)
   ===================================================================== */
.apm{ padding:clamp(4rem,9vw,7.5rem) 0; overflow:hidden; }
.apm__head{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,5vw,3.5rem); }
.apm__stage{ position:relative; min-height:clamp(470px,60vh,660px); display:flex; align-items:center; justify-content:center; }
.apm__word{ margin:0; text-align:center; user-select:none; line-height:.82; letter-spacing:-.045em;
  font-family:var(--serif); font-weight:600; font-size:clamp(3.6rem,13vw,11rem);
  background:linear-gradient(135deg, rgba(11,26,44,.58), rgba(37,99,235,.46)), url("/assets/img/about.jpg") center 32%/cover no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.apm__pt{ position:absolute; max-width:220px; z-index:2; }
.apm__n{ display:block; font-family:var(--serif); font-size:1rem; color:var(--accent); margin-bottom:.4rem; }
.apm__pt b{ display:block; font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; margin-bottom:.25rem; }
.apm__pt > span:last-child{ display:block; color:var(--muted); font-size:.85rem; line-height:1.5; }
.apm__pt--1{ top:3%; left:0; }
.apm__pt--2{ top:3%; right:0; text-align:right; }
.apm__pt--3{ top:43%; left:0; }
.apm__pt--4{ top:43%; right:0; text-align:right; }
.apm__pt--5{ bottom:1%; left:50%; width:240px; margin-left:-120px; text-align:center; }
@media (max-width:860px){
  .apm__stage{ display:block; min-height:0; text-align:center; }
  .apm__word{ font-size:clamp(3rem,18vw,6rem); margin-bottom:2.2rem; }
  .apm__pt{ position:static; max-width:none; width:auto; margin:1.5rem auto 0; text-align:center !important; }
}

/* =====================================================================
   APPROACH — imagery-filled BIQADX inside the horizontal row (v36)
   ===================================================================== */
.apr__mark{ flex:0 0 auto; display:flex; align-items:center; }
.apr__word{ font-family:var(--serif); font-weight:600; white-space:nowrap; line-height:.82; letter-spacing:-.045em;
  font-size:clamp(8rem,31vh,22rem);
  background:linear-gradient(135deg, rgba(11,26,44,.5), rgba(37,99,235,.42)), url("/assets/img/about.jpg") center 30% / 118% no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:apword 22s ease-in-out infinite alternate; }
@keyframes apword{ from{ background-position:center 26%; background-size:114%; } to{ background-position:center 40%; background-size:132%; } }
@media (max-width:767px){
  .apr__word{ font-size:clamp(3.4rem,20vw,6rem); white-space:normal; text-align:center; display:block; }
  .apr__mark{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .apr__word{ animation:none; } }

/* =====================================================================
   APPROACH — huge imagery BIQADX, principles above & below (v37)
   ===================================================================== */
.apw{ overflow:hidden; padding:clamp(5rem,12vw,11rem) 0; }
.apw__head{ text-align:center; max-width:660px; margin:0 auto clamp(4rem,8vw,7rem); }
.apw__row{ display:flex; justify-content:space-between; gap:clamp(2rem,5vw,5rem); max-width:1240px; margin:0 auto; position:relative; z-index:2; }
.apw__row--top{ margin-bottom:clamp(2rem,5vw,4.5rem); }
.apw__row--bottom{ margin-top:clamp(2rem,5vw,4.5rem); }
.apw__pt{ flex:0 1 auto; max-width:270px; }
.apw__n{ display:block; font-family:var(--serif); font-size:1.05rem; color:var(--accent); margin-bottom:.4rem; }
.apw__pt b{ display:block; font-weight:700; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; margin-bottom:.28rem; }
.apw__pt > span:last-child{ display:block; color:var(--muted); font-size:.88rem; line-height:1.5; }
.apw__row--top .apw__pt:last-child{ text-align:right; }
.apw__row--bottom .apw__pt:nth-child(2){ text-align:center; }
.apw__row--bottom .apw__pt:last-child{ text-align:right; }

.apw__word{ display:block; margin:0; text-align:center; user-select:none; line-height:.78; letter-spacing:-.05em;
  font-family:var(--serif); font-weight:700; font-size:clamp(6rem,27vw,28rem);
  background:linear-gradient(135deg, rgba(11,26,44,.46), rgba(37,99,235,.4)), url("/assets/img/about.jpg") center 30% / 118% no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:apword 22s ease-in-out infinite alternate; }
@media (max-width:767px){
  .apw__row{ flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
  .apw__row--top{ margin-bottom:1.4rem; } .apw__row--bottom{ margin-top:1.4rem; }
  .apw__pt{ max-width:none; text-align:center !important; }
  .apw__word{ font-size:clamp(3.6rem,22vw,7rem); }
}
@media (prefers-reduced-motion: reduce){ .apw__word{ animation:none; } }

/* =====================================================================
   APPROACH — circular process (v39)
   ===================================================================== */
.apc{ overflow:hidden; }
.apc__head{ text-align:center; max-width:660px; margin:0 auto clamp(1.5rem,3vw,2.5rem); }
.apc__stage{ position:relative; width:100%; max-width:700px; aspect-ratio:1; margin:0 auto; }
.apc__ring{ position:absolute; inset:6%; border-radius:50%; border:2px dotted var(--line); }
.apc__ring::before{ content:""; position:absolute; inset:9%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(37,99,235,.08), rgba(76,154,81,.05) 55%, transparent 72%); }
.apc__spin{ position:absolute; inset:6%; z-index:1; animation:apc-spin 16s linear infinite; }
.apc__trav{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(37,99,235,.14), 0 0 16px 3px rgba(37,99,235,.55); }
@keyframes apc-spin{ to{ transform:rotate(360deg); } }
.apc__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44%; aspect-ratio:1; border-radius:50%;
  overflow:hidden; z-index:2; border:6px solid #fff; box-shadow:0 44px 84px -44px rgba(16,31,51,.55); }
.apc__center img{ width:100%; height:100%; object-fit:cover; }

.apc__item{ position:absolute; width:230px; z-index:3; }
.apc__n{ font-family:var(--serif); font-size:1.1rem; color:var(--accent); margin-right:.45rem; }
.apc__item b{ font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; }
.apc__item > span:last-child{ display:block; color:var(--muted); font-size:.85rem; line-height:1.5; margin-top:.4rem; }
.apc__item--1{ top:5%; left:61%; }
.apc__item--2{ top:41%; left:72%; }
.apc__item--3{ top:77%; left:61%; }
.apc__item--4{ top:77%; right:61%; text-align:right; }
.apc__item--5{ top:5%; right:61%; text-align:right; }
.apc__item--4 .apc__n, .apc__item--5 .apc__n{ margin-right:0; margin-left:.45rem; }

@media (max-width:820px){
  .apc__stage{ max-width:none; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
  .apc__ring, .apc__spin{ display:none; }
  .apc__center{ position:static; transform:none; width:min(200px,54vw); margin-bottom:.6rem; }
  .apc__item{ position:static; width:100%; max-width:420px; text-align:center !important; }
  .apc__item--4 .apc__n, .apc__item--5 .apc__n{ margin:0 .45rem 0 0; }
}
@media (prefers-reduced-motion: reduce){ .apc__spin{ animation:none; } }

/* =====================================================================
   APPROACH — circular scroll sequence (v40)
   ===================================================================== */
.apc--seq{ position:relative; }
.apc__sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; }
.apc--seq .apc__head{ margin-bottom:clamp(1rem,2.5vh,2rem); }
.apc--seq .apc__stage{ max-width:min(640px,64vh); }
/* rotating arm carrying the travelling dot (JS sets rotation) */
.apc__arm{ position:absolute; inset:6%; z-index:1; transform-origin:50% 50%; will-change:transform; }
.apc__arm .apc__trav{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(37,99,235,.16), 0 0 18px 4px rgba(37,99,235,.6); }
/* stage states: dim → on (revealed) → now (current, accented) */
.apc__item{ opacity:.24; transition:opacity .55s var(--ease), transform .45s var(--ease); }
.apc__item.on{ opacity:1; }
.apc__item.now{ transform:scale(1.04); }
.apc__item.now .apc__n{ color:var(--accent); }
.apc__item.now b{ color:var(--accent-ink); }
@media (max-width:820px){
  .apc--seq{ height:auto !important; }
  .apc__sticky{ position:static; height:auto; display:block; padding:clamp(2rem,6vw,3rem) 0; }
  .apc--seq .apc__stage{ max-width:none; }
  .apc__arm{ display:none; }
  .apc__item{ opacity:1 !important; transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .apc--seq{ height:auto !important; }
  .apc__sticky{ position:static; height:auto; }
  .apc__arm{ display:none; }
  .apc__item{ opacity:1 !important; }
}

/* =====================================================================
   APPROACH — clean principle row (v41)
   ===================================================================== */
.apr2{ background:var(--sand); }
.apr2__head{ text-align:center; max-width:660px; margin:0 auto clamp(2.6rem,5vw,4.2rem); }
.apr2__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.apr2__col{ padding:0 clamp(1rem,1.7vw,2rem); border-left:1px solid var(--line); }
.apr2__col:first-child{ border-left:0; padding-left:0; }
.apr2__col:last-child{ padding-right:0; }
.apr2__num{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3vw,2.9rem); line-height:1; color:var(--accent); letter-spacing:-.02em; }
.apr2__col h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.12rem,1.5vw,1.32rem); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:clamp(1rem,2vw,1.4rem) 0 .6rem; }
.apr2__col p{ color:var(--muted); font-size:.9rem; line-height:1.55; margin:0; }
@media (max-width:960px){
  .apr2__grid{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem); }
  .apr2__col{ border-left:0; padding:0; }
}
@media (max-width:520px){ .apr2__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   APPROACH — horizontal polish (v42)
   ===================================================================== */
#approach.pinrow{ background:var(--sand); }
.apr__bignum{ color:var(--sand-2); }
.apr__no{ position:relative; }
.apr__no::before{ content:""; display:block; width:34px; height:2px; border-radius:2px; background:var(--accent); margin-bottom:1.1rem; }
.apr__panel{ transition:transform .5s var(--slow); }

/* =====================================================================
   APPROACH — Evidence-First wave line behind the horizontal row (v43)
   ===================================================================== */
.pinrow__track{ position:relative; z-index:1; }
.pinrow__wave{ position:absolute; left:0; right:0; top:50%; height:56vh; transform:translateY(-50%);
  z-index:0; inset:auto 0; pointer-events:none; }
.pinrow__wave svg{ width:100%; height:100%; display:block; }

/* =====================================================================
   APPROACH — refined flowing wave (v44)
   ===================================================================== */
.apwave{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:56vh; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); }
.apwave svg{ width:100%; height:100%; display:block; overflow:visible; }
.apwave__p{ fill:none; stroke-width:2.4; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(37,99,235,.22)); }
.apwave__p1{ stroke:var(--accent); opacity:.5; }
.apwave__p2{ stroke:var(--green); opacity:.36; }
.apwave__p3{ stroke:#7fb4ad; opacity:.5; stroke-width:1.5; }
.apwave__g{ will-change:transform; }
.apwave__g1{ animation:apwflow 22s linear infinite; }
.apwave__g2{ animation:apwflow 30s linear infinite reverse; }
.apwave__g3{ animation:apwflow 26s linear infinite; }
@keyframes apwflow{ from{ transform:translateX(0) } to{ transform:translateX(-800px) } }
@media (prefers-reduced-motion: reduce){ .apwave__g{ animation:none; } }

/* =====================================================================
   APPROACH — subtle technical grid (v45)
   ===================================================================== */
.apr__grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(16,39,46,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(16,39,46,.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(92% 78% at 50% 50%, #000 55%, transparent 88%);
          mask-image:radial-gradient(92% 78% at 50% 50%, #000 55%, transparent 88%); }

/* =====================================================================
   INTERACTIVITY LAYER (v46) — scroll progress, magnetic btns, cursor glow
   ===================================================================== */
.scrollprog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:2000; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), var(--green)); box-shadow:0 0 12px -2px rgba(37,99,235,.6); }
.btn, .hnav button{ will-change:transform; }
.cursorglow{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .35s ease; mix-blend-mode:screen;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%), rgba(147,197,253,.16), rgba(147,197,253,.05) 40%, transparent 70%); }
@media (prefers-reduced-motion: reduce){ .scrollprog{ display:none; } }

/* ===== About — vertical operating-principles timeline (bright band) ===== */
.vprin{ position:relative; max-width:760px; margin:0 auto; }
.vprin::before{ content:""; position:absolute; left:28px; top:24px; bottom:24px; width:2px; z-index:0;
  background:linear-gradient(180deg, var(--accent), var(--accent-soft));
  transform:scaleY(0); transform-origin:top center; transition:transform 1.1s var(--ease) .1s; }
.vprin.in::before, .vprin:has(.reveal.in)::before{ transform:scaleY(1); }
.vprin__row{ position:relative; display:flex; gap:1.4rem; align-items:flex-start; padding:1.05rem 0; }
.vprin__node{ position:relative; z-index:1; flex:none; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:1.5rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), #1e40af);
  box-shadow:0 0 0 6px var(--sand), 0 16px 30px -14px rgba(37,99,235,.55);
  transition:transform .4s var(--ease); }
.vprin__row:hover .vprin__node{ transform:scale(1.08); }
.vprin__body{ padding-top:.4rem; }
.vprin__no{ display:inline-block; font-family:var(--serif); font-size:.85rem; color:var(--accent-ink); letter-spacing:.1em; margin-bottom:.1rem; }
.vprin__t{ font-size:1.32rem; color:var(--ink); margin:0 0 .35rem; font-weight:600; letter-spacing:-.01em; }
.vprin__d{ color:var(--muted); font-size:1rem; line-height:1.6; margin:0; max-width:54ch; }
@media (max-width:560px){
  .vprin::before{ left:23px; }
  .vprin__node{ width:48px; height:48px; font-size:1.25rem; box-shadow:0 0 0 5px var(--sand), 0 16px 30px -14px rgba(37,99,235,.55); }
  .vprin__row{ gap:1rem; }
  .vprin__t{ font-size:1.18rem; }
}

/* About founder image — ken-burns reveal on scroll */
.reveal .who-rv img{ transform:scale(1.16); transition:transform 1.4s var(--ease); }
.reveal.in .who-rv img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .reveal .who-rv img{ transform:none; } }

/* ===== Scroll-in animation for diagram visuals (Flow / GapCompare / SDG) =====
   Keyframe-based so content stays FULLY VISIBLE by default (even if JS never
   adds .in); the entrance animation plays only when the block is revealed. */
.flow.reveal{ opacity:1; transform:none; filter:none; }
/* line draws left→right */
.flow.in::before{ transform-origin:left center; animation:flowLine 1s var(--ease) .1s backwards; }
@keyframes flowLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* steps rise + fade in, staggered */
.flow.in .flow__step{ animation:flowStepIn .6s var(--ease) backwards; }
@keyframes flowStepIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.flow.in .flow__step:nth-child(1){ animation-delay:.06s; }
.flow.in .flow__step:nth-child(2){ animation-delay:.18s; }
.flow.in .flow__step:nth-child(3){ animation-delay:.30s; }
.flow.in .flow__step:nth-child(4){ animation-delay:.42s; }
.flow.in .flow__step:nth-child(5){ animation-delay:.54s; }
.flow.in .flow__step:nth-child(6){ animation-delay:.66s; }
/* icon circles pop in (scale) — clearly visible motion, staggered */
.flow.in .flow__no{ animation:flowNodeIn .55s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes flowNodeIn{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
.flow.in .flow__step:nth-child(1) .flow__no{ animation-delay:.14s; }
.flow.in .flow__step:nth-child(2) .flow__no{ animation-delay:.26s; }
.flow.in .flow__step:nth-child(3) .flow__no{ animation-delay:.38s; }
.flow.in .flow__step:nth-child(4) .flow__no{ animation-delay:.50s; }
.flow.in .flow__step:nth-child(5) .flow__no{ animation-delay:.62s; }
.flow.in .flow__step:nth-child(6) .flow__no{ animation-delay:.74s; }
.flow__step:hover .flow__no{ transform:translateY(-5px) scale(1.04); }

/* GapCompare — the two columns converge from the sides */
.gap2.reveal{ opacity:1; transform:none; filter:none; }
.gap2.in .gap-col.a{ animation:gapInL .7s var(--ease) backwards; }
.gap2.in .gap-col.b{ animation:gapInR .7s var(--ease) .12s backwards; }
@keyframes gapInL{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }
@keyframes gapInR{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }

/* SDG mission-alignment cards — staggered rise */
.reveal.in .sdg{ animation:flowStepIn .55s var(--ease) backwards; }
.reveal.in .sdg:nth-child(1){ animation-delay:.02s; }
.reveal.in .sdg:nth-child(2){ animation-delay:.14s; }
.reveal.in .sdg:nth-child(3){ animation-delay:.26s; }

@media (prefers-reduced-motion: reduce){
  .flow.in .flow__step, .flow.in .flow__no, .flow.in::before,
  .gap2.in .gap-col, .reveal.in .sdg{ animation:none!important; }
  .flow__step, .gap2 .gap-col, .sdg, .flow__no{ opacity:1!important; transform:none!important; }
  .flow::before, .vprin::before{ transform:none!important; }
}

/* ===== Platform — "what it stands for" icon grid (dark band, readable, animated) ===== */
.pstands{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,32px); }
.pstands__c{ position:relative; padding-top:1.5rem; border-top:1px solid rgba(147,197,253,.22);
  transition:transform .4s var(--ease); }
.pstands__c:hover{ transform:translateY(-4px); }
.pstands__ic{ display:inline-grid; place-items:center; width:52px; height:52px; border-radius:13px;
  background:rgba(147,197,253,.12); border:1px solid rgba(147,197,253,.26); color:#93C5FD; font-size:1.4rem; margin-bottom:1.05rem; }
.pstands__k{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#93C5FD; margin-bottom:.5rem; }
.pstands__t{ font-size:1.2rem; color:#fff; margin:0 0 .5rem; font-weight:600; letter-spacing:-.01em; }
.pstands__d{ color:rgba(255,255,255,.72); font-size:.92rem; line-height:1.6; margin:0; }
@media (max-width:900px){ .pstands{ grid-template-columns:1fr 1fr; gap:32px 24px; } }
@media (max-width:520px){ .pstands{ grid-template-columns:1fr; } }