/* ==================================================================
   Dop & Bud Consultants — Premium Shared Stylesheet
   Theme: White + Purple, elevated
   Fonts: Playfair Display (display serif) + Inter (body sans)
   ================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
::selection { background: #6D3AE0; color: #fff; }

/* ---------- Design tokens ---------- */
:root {
  /* Purple scale */
  --d900: #0F0724;
  --d800: #170C38;
  --d700: #221349;
  --d600: #33206B;
  --v600: #5B2EBE;
  --v500: #6D3AE0;
  --v400: #8B5CF6;
  --v300: #A78BFA;
  --v200: #C4B5FD;
  --mauve: #A0459B;
  --mauve-l: #C97BC4;

  /* Surfaces */
  --bg0: #FDFCFF;
  --bg1: #F7F4FC;
  --bg2: #EFEAF9;
  --line: #E6DFF4;
  --line-2: #D8CDEF;

  /* Text */
  --ink: #170B33;
  --ink-2: #4A3C6E;
  --ink-3: #6E6390;
  --w-1: rgba(255,255,255,.92);
  --w-2: rgba(255,255,255,.62);
  --w-3: rgba(255,255,255,.38);
  --w-line: rgba(255,255,255,.12);

  /* Gradients */
  --grad: linear-gradient(120deg, #6D3AE0 0%, #A0459B 100%);
  --grad-soft: linear-gradient(120deg, #8B5CF6 0%, #C97BC4 100%);
  --grad-dark: linear-gradient(160deg, #170C38 0%, #2A1560 60%, #3D1878 100%);

  /* Shadows (purple-tinted) */
  --sh-xs: 0 1px 3px rgba(35, 16, 84, .07);
  --sh-s: 0 3px 12px rgba(35, 16, 84, .08);
  --sh-m: 0 12px 36px rgba(35, 16, 84, .12);
  --sh-l: 0 32px 80px rgba(35, 16, 84, .18);
  --sh-glow: 0 8px 32px rgba(109, 58, 224, .32);

  /* Shape & rhythm */
  --r1: 8px; --r2: 14px; --r3: 22px; --r4: 32px;
  --nh: 76px;
  --sp: clamp(84px, 10vw, 148px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Typography ---------- */
h1, h2, .display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: inherit;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.9rem); line-height: 1.08; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.14; }
h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.3; }
h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: .04em;
}
.s-dark h1 em, .s-dark h2 em {
  background: linear-gradient(120deg, #B794FF 0%, #E0A3DB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
p { line-height: 1.8; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--v600); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--grad); border-radius: 2px; }
.eyebrow.lt { color: var(--v200); }
.eyebrow.lt::before { background: linear-gradient(90deg, #8B5CF6, #C97BC4); }
.eyebrow.ctr::after { content: ""; width: 34px; height: 1.5px; background: var(--grad); border-radius: 2px; }
.eyebrow.lt.ctr::after { background: linear-gradient(90deg, #8B5CF6, #C97BC4); }

.sec-hdr { max-width: 640px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-hdr.ctr { margin-left: auto; margin-right: auto; text-align: center; }
.sec-hdr p { color: var(--ink-3); margin-top: 18px; font-size: 1.02rem; }
.s-dark .sec-hdr p { color: var(--w-2); }

/* ---------- Sections ---------- */
section, .band { position: relative; }
.s-off  { padding: var(--sp) 0; background: var(--bg0); }
.s-tint { padding: var(--sp) 0; background: var(--bg1); }
.s-dark { padding: var(--sp) 0; background: var(--grad-dark); color: #fff; }

/* ---------- Buttons ---------- */
.btn-p, .btn-ghost, .btn-lt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 100px;
  font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s, color .25s;
  min-height: 48px;
}
.btn-p { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.btn-p::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease);
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(109,58,224,.42); }
.btn-p:hover::after { transform: translateX(110%); }
.btn-ghost { border: 1.5px solid var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--v500); color: var(--v600); background: rgba(109,58,224,.05); }
.btn-lt { border: 1.5px solid var(--w-line); color: #fff; background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn-lt:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.btn-p:focus-visible, .btn-ghost:focus-visible, .btn-lt:focus-visible,
a:focus-visible, button:focus-visible { outline: 2.5px solid var(--v400); outline-offset: 3px; border-radius: 6px; }

/* ---------- Navigation ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .35s var(--ease-io), box-shadow .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(253, 252, 255, .86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-xs);
}
#nav.on-dark:not(.scrolled) .nav-firm { color: #fff; }
#nav.on-dark:not(.scrolled) .nav-type { color: var(--w-3); }
#nav.on-dark:not(.scrolled) .nav-links > li > a:not(.nav-cta) { color: var(--w-2); }
#nav.on-dark:not(.scrolled) .nav-links > li > a:not(.nav-cta):hover { color: #fff; background: rgba(255,255,255,.08); }
#nav.on-dark:not(.scrolled) .nav-links > li > a.active:not(.nav-cta) { color: #fff; }
#nav.on-dark:not(.scrolled) .hamburger span { background: #fff; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nh); }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-img { height: 42px; width: auto; }

/* Infinity star orbit (injected by main.js around the nav logo) */
.logo-orbit { position: relative; display: inline-flex; flex: none; }
.logo-orbit .orbit-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .logo-orbit .orbit-svg { display: none; }
}
.nav-logo-fb {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: .82rem;
  box-shadow: var(--sh-glow);
}
.nav-firm { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.2rem, 3.6vw, 1.55rem); line-height: 1.1; color: var(--ink); transition: color .35s; text-transform: uppercase; letter-spacing: .06em; }
.nav-firm .amp { font-style: italic; font-weight: 500; text-transform: none; padding: 0 1px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border-radius: 100px;
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
  transition: color .2s, background-color .2s;
}
.nav-links > li > a:not(.nav-cta):hover { color: var(--v600); background: rgba(109,58,224,.06); }
.nav-links > li > a.active:not(.nav-cta) { color: var(--v600); font-weight: 600; }
.dd-arrow { width: 11px; height: 11px; transition: transform .25s var(--ease); }
.nav-dd:hover .dd-arrow, .nav-dd:focus-within .dd-arrow { transform: rotate(180deg); }
.nav-cta {
  background: var(--grad); color: #fff !important;
  padding: 11px 24px !important; margin-left: 8px;
  box-shadow: var(--sh-glow);
  transition: transform .25s var(--ease), box-shadow .25s !important;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(109,58,224,.45); }

.dd-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 10px) scale(.98);
  min-width: 288px; padding: 10px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--sh-l);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.dd-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r2);
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .18s, color .18s;
}
.dd-item:hover { background: var(--bg1); color: var(--v600); }
.dd-ico {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: var(--bg2); color: var(--v600);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.dd-item:hover .dd-ico { background: var(--grad); color: #fff; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 12px 10px; z-index: 70; position: relative; }
.hamburger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s, background-color .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.menu-open { overflow: hidden; }
body.menu-open #nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom-color: transparent; }

#mob-menu {
  position: fixed; inset: 0; z-index: 45;
  background: linear-gradient(180deg, #FDFCFF 0%, #F5F0FC 60%, #ECE4F9 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px clamp(28px, 8vw, 60px) 48px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
#mob-menu.open { opacity: 1; visibility: visible; }
#mob-menu a {
  color: var(--ink-2); font-size: 1.3rem; font-weight: 500;
  font-family: 'Playfair Display', serif;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
  display: block;
  transform: translateY(18px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s, color .2s;
}
#mob-menu.open a { transform: translateY(0); opacity: 1; }
#mob-menu a:nth-child(1) { transition-delay: .06s; } #mob-menu a:nth-child(2) { transition-delay: .1s; }
#mob-menu a:nth-child(3) { transition-delay: .14s; } #mob-menu a:nth-child(4) { transition-delay: .18s; }
#mob-menu a:nth-child(5) { transition-delay: .22s; } #mob-menu a:nth-child(6) { transition-delay: .26s; }
#mob-menu a:nth-child(7) { transition-delay: .3s; }  #mob-menu a:nth-child(8) { transition-delay: .34s; }
#mob-menu a:nth-child(9) { transition-delay: .38s; } #mob-menu a:nth-child(10) { transition-delay: .42s; }
#mob-menu a:hover { color: var(--v600); }
#mob-menu .msub { font-family: 'Inter', sans-serif; font-size: .92rem; padding-left: 18px; color: var(--ink-3); }
#mob-menu .mcta {
  margin-top: 28px; border: none; text-align: center;
  background: var(--grad); color: #fff; border-radius: 100px;
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
  padding: 16px 24px;
}

/* ---------- Home hero ---------- */
#hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nh) + 48px) 0 96px;
  background: linear-gradient(180deg, #FDFCFF 0%, #F5F0FC 55%, #ECE4F9 100%);
  color: var(--ink); overflow: hidden;
}
.h-bg { position: absolute; inset: 0; pointer-events: none; }
.h-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(109,58,224,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(109,58,224,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 78%);
}
.h-orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.h-orb1 { width: 560px; height: 560px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(139,92,246,.2), transparent 65%); animation: drift1 16s ease-in-out infinite alternate; }
.h-orb2 { width: 460px; height: 460px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(160,69,155,.16), transparent 65%); animation: drift2 20s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px, 60px) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px, -50px) scale(1.08); } }

.h-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: center; position: relative; }
.h-eye {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v600); margin-bottom: 30px;
}
.h-eye .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #B794FF; box-shadow: 0 0 0 0 rgba(183,148,255,.6); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(183,148,255,.55); } 70% { box-shadow: 0 0 0 9px rgba(183,148,255,0); } 100% { box-shadow: 0 0 0 0 rgba(183,148,255,0); } }
.h-tag { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--v600); margin: 26px 0 18px; }
.h-desc { max-width: 540px; color: var(--ink-3); font-size: 1.02rem; margin-bottom: 40px; }
.h-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 60px; }

.h-stats { display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; padding-top: 34px; border-top: 1px solid var(--line-2); }
.h-sv { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; color: var(--ink); line-height: 1; display: block; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.h-sv .sfx { color: var(--v500); }
.h-sl { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; }

/* Hero entrance */
.h-in { opacity: 0; transform: translateY(26px); animation: rise .9s var(--ease) forwards; }
.h-in.hd1 { animation-delay: .08s; } .h-in.hd2 { animation-delay: .2s; }
.h-in.hd3 { animation-delay: .32s; } .h-in.hd4 { animation-delay: .44s; }
.h-in.hd5 { animation-delay: .56s; } .h-in.hd6 { animation-delay: .68s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Hero panel card */
.h-panel { position: relative; }
.panel-card {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r4);
  padding: 30px;
  box-shadow: var(--sh-l);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.pc-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.pc-ttl { display: flex; align-items: center; gap: 11px; }
.pc-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-glow); flex: none; }
.pc-txt { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.05rem; }
.pc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #157A47; background: rgba(72,205,140,.13);
  border: 1px solid rgba(27,122,72,.28);
  padding: 6px 12px; border-radius: 100px;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #48CD8C; animation: pulse-g 2s infinite; flex: none; }
@keyframes pulse-g { 0% { box-shadow: 0 0 0 0 rgba(72,205,140,.5); } 70% { box-shadow: 0 0 0 7px rgba(72,205,140,0); } 100% { box-shadow: 0 0 0 0 rgba(72,205,140,0); } }
.svc-rows { display: flex; flex-direction: column; }
.svc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { padding-left: 10px; }
.row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v400); flex: none; }
.row-nm { font-size: .87rem; font-weight: 600; flex: 1; }
.row-bg { font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.pc-ftr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pc-ftr-t { font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.pc-loc { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--ink-3); }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--ink-3); font-size: .62rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
}
.scroll-ms { width: 22px; height: 34px; border: 1.5px solid var(--line-2); border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-dt { width: 3px; height: 7px; border-radius: 3px; background: var(--v300); animation: scrolldot 1.9s var(--ease-io) infinite; }
@keyframes scrolldot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- Marquee trust strip ---------- */
.marquee-band { background: var(--bg0); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-band:hover .marquee { animation-play-state: paused; }
.mq-set { display: flex; align-items: center; flex: none; }
.mq-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 30px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.mq-item svg { color: var(--v500); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Service cards (home) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r3); padding: 34px 30px;
  cursor: pointer; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.svc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-ico {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--bg1); border: 1px solid var(--line);
  color: var(--v600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; flex: none;
  transition: background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.svc-card:hover .svc-ico { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-glow); }
.svc-title { margin-bottom: 12px; }
.svc-desc { font-size: .9rem; color: var(--ink-3); line-height: 1.75; flex: 1; margin-bottom: 22px; }
.svc-lnk { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--v600); }
.svc-lnk svg { transition: transform .25s var(--ease); }
.svc-card:hover .svc-lnk svg { transform: translateX(5px); }

/* ---------- Global reach ---------- */
.reach-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.reach-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r3);
  padding: 26px 18px 22px;
  text-align: center;
  transition: transform .35s var(--ease), background-color .35s, border-color .35s;
}
.reach-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.reach-code {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; color: var(--v200);
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.reach-card:hover .reach-code { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.reach-name { font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.reach-std { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--w-3); margin-bottom: 14px; }
.reach-time {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; color: var(--w-2);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 6px 13px; border-radius: 100px;
}
.reach-time svg { color: var(--v300); flex: none; }
.reach-note { margin-top: 44px; text-align: center; }
.reach-note p {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: .86rem; color: var(--w-2);
  border: 1px solid var(--w-line); background: rgba(255,255,255,.04);
  padding: 13px 26px; border-radius: 100px;
}
.reach-note svg { color: #9FE8C4; flex: none; }

/* ---------- Why points ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(44px, 6vw, 90px); align-items: center; }
.why-pts { display: flex; flex-direction: column; gap: 14px; }
.why-pt {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--r3);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.why-pt:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2); transform: translateX(6px); }
.wp-ico {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-glow);
}
.wp-title { font-weight: 600; font-size: .98rem; margin-bottom: 5px; }
.wp-desc { font-size: .85rem; color: var(--w-2); line-height: 1.7; }
.why-lead { color: var(--w-2); line-height: 1.88; font-size: .98rem; margin-bottom: 36px; }

/* Light variant (inner pages) */
.why-pt.on-lt { background: #fff; border-color: var(--line); }
.why-pt.on-lt:hover { border-color: var(--line-2); box-shadow: var(--sh-s); }
.why-pt.on-lt .wp-desc { color: var(--ink-3); }

/* ---------- Stats band ---------- */
.stats-band { padding: clamp(56px, 7vw, 84px) 0; background: var(--bg1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-v { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.stat-s { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }

/* ---------- Testimonials ---------- */
.tst-wrap { max-width: 820px; margin: 0 auto; position: relative; }
.tst-track { position: relative; }
.tst-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(16px); visibility: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.tst-slide.active { opacity: 1; transform: translateY(0); visibility: visible; position: relative; }
.tst-mark { font-family: 'Playfair Display', serif; font-size: 4.4rem; line-height: .6; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 26px; user-select: none; }
.tst-quote { font-family: 'Playfair Display', serif; font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-style: italic; font-weight: 500; line-height: 1.55; color: var(--ink); max-width: 700px; margin-bottom: 30px; }
.tst-who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tst-name { font-weight: 700; font-size: .95rem; }
.tst-role { font-size: .8rem; color: var(--ink-3); }
.tst-ctl { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 38px; }
.tst-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line-2); color: var(--ink-2); background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, color .25s, background-color .25s, transform .25s var(--ease);
}
.tst-btn:hover { border-color: var(--v500); color: var(--v600); transform: translateY(-2px); }
.tst-dots { display: flex; gap: 9px; }
.tst-dot { width: 9px; height: 9px; border-radius: 100px; background: var(--line-2); padding: 0; transition: background-color .3s, width .3s var(--ease); }
.tst-dot.active { width: 26px; background: var(--v500); }

/* Trust signals strip */
.trust-sig { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(44px, 6vw, 64px); }
.sig-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 100px;
  background: #fff; border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.sig-chip:hover { border-color: var(--line-2); box-shadow: var(--sh-s); transform: translateY(-2px); }
.sig-chip svg { color: var(--v600); flex: none; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r3);
  padding: 34px 26px 30px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.step-num {
  font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--bg2);
  position: absolute; top: 18px; right: 22px;
}
.step-t { font-weight: 700; font-size: 1.02rem; margin-bottom: 10px; font-family: 'Inter', sans-serif; color: var(--ink); position: relative; }
.step-t::before { content: ""; display: block; width: 30px; height: 3px; border-radius: 3px; background: var(--grad); margin-bottom: 16px; }
.step p { font-size: .86rem; color: var(--ink-3); line-height: 1.75; position: relative; }

/* ---------- CTA strip ---------- */
.cta-strip { padding: clamp(80px, 10vw, 130px) 0; background: var(--grad-dark); color: #fff; position: relative; overflow: hidden; }
.cta-strip::before {
  content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.28), transparent 65%);
  top: -300px; left: 50%; transform: translateX(-50%);
  filter: blur(70px); pointer-events: none;
}
.cta-inner { position: relative; text-align: center; max-width: 660px; margin: 0 auto; }
.cta-inner h2 { color: #fff; margin-bottom: 18px; }
.cta-inner p { color: var(--w-2); font-size: 1.02rem; margin-bottom: 38px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Page hero (inner pages) ---------- */
.pg-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nh) + clamp(64px, 9vw, 110px)) 0 clamp(64px, 8vw, 96px);
  background: linear-gradient(180deg, #FDFCFF 0%, #F5F0FC 60%, #EDE6FA 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.pg-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.pg-orb-1 { width: 430px; height: 430px; top: -170px; right: -90px; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 65%); }
.pg-orb-2 { width: 340px; height: 340px; bottom: -180px; left: -80px; background: radial-gradient(circle, rgba(160,69,155,.14), transparent 65%); }
.pg-hero-inner { position: relative; max-width: 780px; }
.pg-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); margin-bottom: 20px; }
.pg-hero p { color: var(--ink-3); font-size: 1.05rem; max-width: 640px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 500; color: var(--ink-3); margin-bottom: 26px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-2); transition: color .2s; }
.breadcrumb a:hover { color: var(--v600); }
.bc-sep { color: var(--ink-3); }

/* ---------- About page ---------- */
.story-lay { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(44px, 6vw, 88px); align-items: center; }
.lead-p { color: var(--ink-2); font-size: 1.04rem; margin-bottom: 20px; line-height: 1.85; }
.story-lay .body-p { color: var(--ink-3); font-size: .95rem; margin-bottom: 18px; }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 30px; }
.chip {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 15px 17px; font-size: .84rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.chip:hover { border-color: var(--line-2); box-shadow: var(--sh-s); transform: translateY(-2px); }
.chip svg { color: var(--v600); flex: none; }

.hq-card {
  background: var(--grad-dark); color: #fff;
  border-radius: var(--r4); padding: clamp(30px, 4vw, 44px);
  position: relative; overflow: hidden;
  box-shadow: var(--sh-l);
}
.hq-card::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.35), transparent 65%);
  top: -130px; right: -110px; filter: blur(50px);
}
.hq-eyebrow { position: relative; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--v200); margin-bottom: 14px; }
.hq-city { position: relative; font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 600; margin-bottom: 6px; }
.hq-sub { position: relative; font-size: .84rem; color: var(--w-2); margin-bottom: 28px; }
.hq-rows { position: relative; display: flex; flex-direction: column; }
.hq-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
.hq-row:last-child { border-bottom: none; }
.hq-row .cn { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; }
.hq-row .cn svg { color: var(--v300); flex: none; }
.hq-row .st { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FE8C4; display: inline-flex; align-items: center; gap: 7px; }
.hq-row .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #48CD8C; }

.appr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.appr-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 34px 28px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.appr-card:hover { transform: translateY(-5px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.appr-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background .3s, color .3s, border-color .3s; }
.appr-card:hover .appr-ico { background: var(--grad); border-color: transparent; color: #fff; }
.appr-t { font-weight: 700; font-size: 1rem; font-family: 'Inter', sans-serif; margin-bottom: 10px; }
.appr-card p { font-size: .87rem; color: var(--ink-3); line-height: 1.75; }

/* ---------- Services overview page ---------- */
.svl { display: flex; flex-direction: column; gap: 26px; }
.svl-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(22px, 4vw, 44px);
  align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: clamp(26px, 4vw, 42px);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.svl-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.svl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.svl-card:hover::before { transform: scaleY(1); }
.svl-ico {
  width: 68px; height: 68px; border-radius: 20px; flex: none;
  background: var(--bg1); border: 1px solid var(--line); color: var(--v600);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.svl-card:hover .svl-ico { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-glow); }
.svl-body h3 { margin-bottom: 10px; }
.svl-body p { font-size: .92rem; color: var(--ink-3); max-width: 640px; margin-bottom: 16px; }
.svl-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.svl-tag { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--v600); background: var(--bg1); border: 1px solid var(--line); padding: 5px 12px; border-radius: 100px; }
.svl-arr {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-2); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.svl-card:hover .svl-arr { background: var(--grad); border-color: transparent; color: #fff; transform: translateX(4px); }

/* ---------- Service detail pages ---------- */
.sd-lay { display: grid; grid-template-columns: 1fr 330px; gap: clamp(40px, 5vw, 72px); align-items: start; }
.sd-intro { font-size: 1.06rem; color: var(--ink-2); line-height: 1.85; margin-bottom: clamp(40px, 5vw, 56px); }
.sd-h { margin-bottom: 28px; }
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.inc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 24px 22px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.inc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.inc-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.inc-t { font-weight: 700; font-size: .93rem; font-family: 'Inter', sans-serif; margin-bottom: 8px; }
.inc-card p { font-size: .84rem; color: var(--ink-3); line-height: 1.7; }
.who-panel {
  margin-top: clamp(40px, 5vw, 56px);
  background: var(--bg1); border: 1px solid var(--line);
  border-left: 3px solid var(--v500);
  border-radius: var(--r2); padding: 28px 30px;
}
.who-panel .wt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; margin-bottom: 12px; }
.who-panel .wt svg { color: var(--v600); flex: none; }
.who-panel p { font-size: .92rem; color: var(--ink-2); line-height: 1.8; }

.sd-side { position: sticky; top: calc(var(--nh) + 28px); display: flex; flex-direction: column; gap: 22px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 26px; }
.side-t { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.side-lnk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; margin: 0 -12px; border-radius: 10px;
  font-size: .86rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.side-lnk:hover { background: var(--bg1); color: var(--v600); }
.side-lnk.current { color: var(--v600); font-weight: 700; background: var(--bg1); }
.side-lnk svg { flex: none; opacity: .55; }
.side-cta { background: var(--grad-dark); color: #fff; border: none; position: relative; overflow: hidden; }
.side-cta::before { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.4), transparent 65%); top: -90px; right: -70px; filter: blur(40px); }
.side-cta .t { position: relative; font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; margin-bottom: 10px; }
.side-cta p { position: relative; font-size: .85rem; color: var(--w-2); margin-bottom: 20px; line-height: 1.7; }
.side-cta .btn-p { position: relative; width: 100%; padding: 14px 20px; }

/* ---------- Contact page ---------- */
.contact-lay { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 6vw, 88px); align-items: start; }
.ci-hd { margin: 6px 0 18px; }
.ci-p { color: var(--ink-3); font-size: .98rem; margin-bottom: 38px; max-width: 420px; }
.ci-dets { display: flex; flex-direction: column; gap: 10px; }
.ci-row {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 17px 20px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.ci-row:hover { border-color: var(--line-2); box-shadow: var(--sh-s); transform: translateX(4px); }
.ci-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; }
.ci-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.ci-val { font-size: .93rem; font-weight: 600; color: var(--ink); }
.ci-val a { transition: color .2s; }
.ci-val a:hover { color: var(--v600); }

.form-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r4);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--sh-m);
}
.form-hd { font-size: 1.4rem; margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fg { margin-bottom: 20px; }
.fg label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r1);
  background: var(--bg0);
  font: inherit; font-size: .92rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  appearance: none; -webkit-appearance: none;
}
.fg select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6390' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  cursor: pointer;
}
.fg textarea { min-height: 130px; resize: vertical; }
.fg input::placeholder, .fg textarea::placeholder { color: #A79BC4; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none; border-color: var(--v500); background: #fff;
  box-shadow: 0 0 0 4px rgba(109,58,224,.1);
}
.btn-sub {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--grad); color: #fff;
  padding: 17px 24px; border-radius: 100px;
  font-size: .95rem; font-weight: 600;
  box-shadow: var(--sh-glow);
  transition: transform .25s var(--ease), box-shadow .25s, opacity .25s;
  min-height: 50px;
}
.btn-sub:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(109,58,224,.42); }
.btn-sub:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.form-note { font-size: .74rem; color: var(--ink-3); text-align: center; margin-top: 16px; }
.form-msg { display: none; padding: 14px 18px; border-radius: var(--r1); font-size: .88rem; font-weight: 500; margin-bottom: 20px; }
.form-msg.ok { display: block; background: #EDFAF2; color: #14683C; border: 1px solid #BEE8CF; }
.form-msg.err { display: block; background: #FDF0F0; color: #9B2C2C; border: 1px solid #F2CACA; }

/* ---------- Footer ---------- */
#footer { background: var(--d900); color: var(--w-2); padding: clamp(64px, 8vw, 96px) 0 0; position: relative; overflow: hidden; }
#footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), transparent);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(44px, 6vw, 64px); }
.fbrand p { font-size: .88rem; line-height: 1.8; color: var(--w-3); max-width: 300px; margin-bottom: 24px; }
.f-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.f-mark { height: 42px; width: auto; flex: none; filter: drop-shadow(0 0 14px rgba(139,92,246,.4)); }
.f-brand { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; line-height: 1.1; }
.f-brand .amp { font-style: italic; font-weight: 500; text-transform: none; padding: 0 1px; }
.f-sub { font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--w-3); margin-top: 3px; }
.f-socials { display: flex; gap: 10px; }
.f-soc {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--w-line); color: var(--w-2);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.f-soc:hover { background: var(--v500); border-color: transparent; color: #fff; transform: translateY(-3px); }
.f-col-t { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.f-links li { margin-bottom: 11px; }
.f-links a { font-size: .88rem; color: var(--w-3); transition: color .2s, padding-left .25s var(--ease); }
.f-links a:hover { color: #fff; padding-left: 5px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.08);
}
.f-copy, .f-addr { font-size: .76rem; color: var(--w-3); }

/* ---------- Service page v2 components ---------- */
.slim { --sp: clamp(56px, 7vw, 88px); }

/* Hero chips */
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.hchip {
  padding: 9px 18px; border-radius: 100px;
  background: rgba(255,255,255,.65); border: 1px solid var(--line-2);
  font-size: .76rem; font-weight: 600; color: var(--ink-2);
}

/* Stat chips */
.schips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.schip { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 16px 20px; flex: 1; min-width: 150px; }
.schip .v { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.schip .l { font-size: .74rem; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

/* Chart card */
.viz-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 26px 26px 20px; box-shadow: var(--sh-m); }
.viz-title { font-size: .98rem; font-weight: 700; }
.viz-sub { font-size: .78rem; color: var(--ink-3); margin: 3px 0 14px; }
.viz-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.viz-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.viz-note { font-size: .7rem; color: var(--ink-3); font-style: italic; margin-top: 10px; }
.viz-svg { width: 100%; height: auto; display: block; }
.viz-svg text { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink-3); }
.viz-svg .lbl-end { font-weight: 700; fill: var(--ink-2); }
.viz-svg .axis { stroke: var(--line-2); stroke-width: 1; }
.viz-svg .gridl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.line-a, .line-b { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.line-a { stroke: #6D3AE0; }
.line-b { stroke: #B0588A; }
.reveal.in .line-a { animation: drawline 1.7s .35s var(--ease-io) forwards; }
.reveal.in .line-b { animation: drawline 1.7s .15s var(--ease-io) forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.dot-a { fill: #6D3AE0; stroke: #fff; stroke-width: 2; }
.dot-b { fill: #B0588A; stroke: #fff; stroke-width: 2; }
.reveal .dot-a, .reveal .dot-b, .reveal .lbl-end { opacity: 0; transition: opacity .5s var(--ease-io) 1.8s; }
.reveal.in .dot-a, .reveal.in .dot-b, .reveal.in .lbl-end { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .line-a, .line-b { stroke-dashoffset: 0 !important; }
  .dot-a, .dot-b, .lbl-end { opacity: 1 !important; }
}

/* Tabs */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.tab-btn {
  padding: 12px 26px; border-radius: 100px;
  border: 1.5px solid var(--line-2); background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .25s, color .25s, background-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.tab-btn:hover { border-color: var(--v500); color: var(--v600); transform: translateY(-2px); }
.tab-btn.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: rise .5s var(--ease); }
.tp-tag { font-family: 'Playfair Display', serif; font-style: italic; color: var(--v600); font-size: 1.08rem; margin-bottom: 22px; }

/* Checklist grid */
.ck { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.ck li {
  display: flex; gap: 11px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r1);
  padding: 13px 16px; font-size: .88rem; color: var(--ink-2);
  transition: border-color .25s, box-shadow .25s;
}
.ck li:hover { border-color: var(--line-2); box-shadow: var(--sh-xs); }
.ck li svg { color: var(--v600); flex: none; margin-top: 3px; }

/* Flow diagram */
.flow { display: flex; align-items: flex-start; justify-content: center; }
.flow-node { flex: 1; text-align: center; padding: 0 8px; max-width: 190px; }
.fn-ico {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px;
  background: #fff; border: 1px solid var(--line); color: var(--v600);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-s);
  transition: transform .3s var(--ease);
}
.flow-node:hover .fn-ico { transform: translateY(-4px); }
.flow-node.hl .fn-ico { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.fn-t { font-size: .86rem; font-weight: 700; color: var(--ink); }
.fn-s { font-size: .72rem; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.flow-arr { flex: none; width: 42px; height: 2px; margin-top: 29px; overflow: hidden; }
.flow-arr::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-image: linear-gradient(90deg, var(--v400) 62%, transparent 0);
  background-size: 9px 2px;
  animation: dashmove 1s linear infinite;
}
@keyframes dashmove { to { background-position: 9px 0; } }
.flow-result {
  margin-top: 40px; text-align: center;
}
.flow-result p {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: 13px 26px; border-radius: 100px;
}
.flow-result svg { color: var(--v600); flex: none; }

/* Duo cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* Engagement model tag */
.mc-best {
  display: inline-block; font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 12px; margin-top: 16px;
}
.models-note { text-align: center; margin-top: 36px; }
.models-note p { display: inline-block; font-size: .86rem; color: var(--ink-2); background: var(--bg1); border: 1px solid var(--line); padding: 13px 26px; border-radius: 100px; }

/* Timeline */
.tl { position: relative; max-width: 800px; margin: 0 auto; }
.tl::before {
  content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--v400), var(--mauve));
  opacity: .3; border-radius: 2px;
}
.tl-step { position: relative; padding: 0 0 34px 74px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  position: absolute; left: 0; top: -2px;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line-2);
  color: var(--v600); font-family: 'Playfair Display', serif; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.tl-step:hover .tl-num { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.tl-t { font-weight: 700; font-size: 1rem; margin: 12px 0 6px; color: var(--ink); }
.tl-step p { font-size: .88rem; color: var(--ink-3); line-height: 1.72; max-width: 620px; }
.tl-note { text-align: center; margin-top: 44px; }
.tl-note p {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: 13px 26px; border-radius: 100px;
}
.tl-note svg { color: var(--v600); flex: none; }

/* Dark-section chips */
.sig-chip.dk { background: rgba(255,255,255,.05); border-color: var(--w-line); color: var(--w-2); }
.sig-chip.dk:hover { border-color: rgba(255,255,255,.3); box-shadow: none; }
.sig-chip.dk svg { color: #9FE8C4; }

/* Why compact cards */
.why5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.w5 {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 24px 20px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.w5:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.w5 svg { color: var(--v600); margin-bottom: 14px; }
.w5 .t { font-weight: 700; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.w5 p { font-size: .78rem; color: var(--ink-3); line-height: 1.65; }

/* FAQ accordion */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); transition: box-shadow .25s, border-color .25s; }
.faq-item[open] { box-shadow: var(--sh-s); border-color: var(--line-2); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 22px; font-weight: 600; font-size: .95rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); position: relative; transition: transform .3s var(--ease), border-color .3s; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; background: var(--v600); top: 50%; left: 50%; }
.faq-x::before { width: 10px; height: 1.6px; transform: translate(-50%,-50%); }
.faq-x::after { width: 1.6px; height: 10px; transform: translate(-50%,-50%); }
.faq-item[open] .faq-x { transform: rotate(45deg); border-color: var(--v500); }
.faq-item .fa-body { padding: 0 22px 20px; font-size: .9rem; color: var(--ink-3); line-height: 1.75; max-width: 680px; }

/* CTA contact line */
.cta-contact { margin-top: 26px; font-size: .88rem; color: var(--w-2); }
.cta-contact a { color: #fff; font-weight: 600; transition: color .2s; }
.cta-contact a:hover { color: var(--v200); }

@media (max-width: 900px) {
  .flow { flex-direction: column; align-items: center; gap: 4px; }
  .flow-node { max-width: 300px; }
  .flow-arr { width: 2px; height: 32px; margin: 6px 0; }
  .flow-arr::before { background-image: linear-gradient(180deg, var(--v400) 62%, transparent 0); background-size: 2px 9px; animation: dashmove-v 1s linear infinite; }
  .why5 { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
}
@keyframes dashmove-v { to { background-position: 0 9px; } }
@media (max-width: 640px) {
  .ck { grid-template-columns: 1fr; }
  .why5 { grid-template-columns: 1fr; }
  .schips { flex-direction: column; }
}

/* ---------- Bar visual (where a skilled week goes) ---------- */
.bv { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; }
.bv-label { font-size: .72rem; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.bv-row { display: flex; gap: 3px; height: 36px; }
.seg {
  width: 0; min-width: 0; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 9px; font-size: .68rem; font-weight: 700; color: #fff;
  transition: width 1.3s var(--ease) .25s;
  white-space: nowrap;
}
.reveal.in .seg { width: var(--w); }
.s-exec { background: #B0588A; }
.s-judg { background: #6D3AE0; }
@media (prefers-reduced-motion: reduce) { .seg { width: var(--w) !important; } }

/* ---------- Tier ladder cards ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 30px 26px; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.tier-badge {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1); border: 1px solid var(--line);
  border-radius: 100px; padding: 6px 14px; margin-bottom: 18px;
}
.tbars { display: inline-flex; gap: 2.5px; align-items: flex-end; }
.tbars i { width: 4px; border-radius: 2px; background: var(--line-2); display: block; }
.tbars i:nth-child(1) { height: 5px; } .tbars i:nth-child(2) { height: 8px; } .tbars i:nth-child(3) { height: 11px; }
.tbars.f1 i:nth-child(1) { background: var(--v500); }
.tbars.f2 i:nth-child(-n+2) { background: var(--v500); }
.tbars.f3 i { background: var(--v500); }
.tier h3 { font-size: 1.15rem; margin-bottom: 4px; }
.tier-role { font-family: 'Playfair Display', serif; font-style: italic; color: var(--v600); font-size: .95rem; margin-bottom: 14px; }
.tier p { font-size: .855rem; color: var(--ink-3); line-height: 1.72; }
.tier.t3 { background: var(--grad-dark); border-color: transparent; color: #fff; }
.tier.t3 h3 { color: #fff; }
.tier.t3 .tier-badge { background: rgba(255,255,255,.08); border-color: var(--w-line); color: var(--v200); }
.tier.t3 .tbars i { background: #B794FF; }
.tier.t3 .tier-role { color: var(--v200); }
.tier.t3 p { color: var(--w-2); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- Futuristic circuit hero background ---------- */
.circuit-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.65) 62%, #000 82%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.65) 62%, #000 82%);
}
.circuit-bg .trace { fill: none; stroke: rgba(109,58,224,.13); stroke-width: 1.5; }
.circuit-bg .trace-flow { fill: none; stroke: rgba(139,92,246,.28); stroke-width: 1.5; stroke-dasharray: 4 12; animation: cflow 1.4s linear infinite; }
@keyframes cflow { to { stroke-dashoffset: -16; } }
.circuit-bg .pad { fill: #FDFCFF; stroke: rgba(109,58,224,.32); stroke-width: 1.5; }
.circuit-bg .chip {
  fill: rgba(255,255,255,.5); stroke: rgba(109,58,224,.22); stroke-width: 1.5; rx: 6;
}
.h-grid.pan { animation: gridpan 9s linear infinite; }
@keyframes gridpan { to { background-position: 56px 56px; } }
@media (prefers-reduced-motion: reduce) {
  .circuit-bg .mv { display: none; }
  .h-grid.pan { animation: none; }
}

/* ---------- Model spotlight (ICE vs POD) ---------- */
.mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.model-xl {
  position: relative; overflow: hidden;
  border-radius: var(--r4); padding: clamp(28px, 4vw, 42px);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.model-xl:hover { transform: translateY(-6px); }
.model-xl.ice {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.model-xl.pod { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-l); }
.mx-kicker { font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.ice .mx-kicker { color: var(--v200); }
.pod .mx-kicker { color: var(--v600); }
.mx-name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.1rem); line-height: 1; letter-spacing: .02em; }
.ice .mx-name { color: #fff; }
.mx-expand { font-size: .86rem; font-weight: 600; margin: 6px 0 18px; }
.ice .mx-expand { color: var(--w-2); }
.pod .mx-expand { color: var(--ink-3); }
.mx-p { font-size: .89rem; line-height: 1.75; margin-bottom: 18px; }
.ice .mx-p { color: var(--w-2); }
.pod .mx-p { color: var(--ink-3); }
.mx-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; }
.mx-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.6; }
.ice .mx-list li { color: var(--w-2); }
.pod .mx-list li { color: var(--ink-2); }
.mx-list svg { flex: none; margin-top: 3px; }
.ice .mx-list svg { color: #B794FF; }
.pod .mx-list svg { color: var(--v600); }
.mc-best.dk { background: rgba(255,255,255,.07); border-color: var(--w-line); color: var(--v200); }
.mx-orbit { position: absolute; top: -46px; right: -46px; width: 190px; height: 190px; pointer-events: none; opacity: .55; }
.mx-orbit .ring { fill: none; stroke: var(--v300); stroke-width: 1.4; stroke-dasharray: 10 9; transform-origin: center; animation: orbitspin 16s linear infinite; }
.mx-orbit .sat { fill: #C4B5FD; }
@keyframes orbitspin { to { transform: rotate(360deg); } }
.mx-pod-ico { position: absolute; top: 26px; right: 26px; width: 52px; height: 52px; pointer-events: none; color: var(--v400); opacity: .8; animation: float 5.5s ease-in-out infinite; }
.models-note.dk p { background: rgba(255,255,255,.05); border-color: var(--w-line); color: var(--w-2); }

/* Comparison table */
.cmp { margin-top: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--r3); overflow: hidden; background: rgba(255,255,255,.03); }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.cmp-row + .cmp-row { border-top: 1px solid rgba(255,255,255,.1); }
.cmp-cell { padding: 14px 18px; font-size: .82rem; color: var(--w-2); line-height: 1.55; }
.cmp-cell:nth-child(2), .cmp-cell:nth-child(3) { border-left: 1px solid rgba(255,255,255,.1); }
.cmp-row.head .cmp-cell { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.06); }
.cmp-row.head .cmp-cell:nth-child(2) { color: var(--v200); }
.cmp-row.head .cmp-cell:nth-child(3) { color: #E0A3DB; }
.cmp-lbl { font-weight: 700; color: var(--w-1); }
@media (max-width: 860px) {
  .mx-grid { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-cell:nth-child(2), .cmp-cell:nth-child(3) { border-left: none; border-top: 1px dashed rgba(255,255,255,.1); }
  .cmp-lbl { background: rgba(255,255,255,.05); }
}

/* ---------- Tier staircase + motion ---------- */
@media (min-width: 901px) {
  .tier.t1 { margin-top: 56px; }
  .tier.t2 { margin-top: 28px; }
}
.fx {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg1); border: 1px solid var(--line); color: var(--v600);
  position: relative; overflow: hidden;
}
.tier.t3 .fx { background: rgba(255,255,255,.08); border-color: var(--w-line); color: #B794FF; }
.fx-gear svg { animation: spin 10s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fx-scan::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 10px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .65;
  animation: scanline 2.4s ease-in-out infinite alternate;
}
@keyframes scanline { to { transform: translateY(24px); } }
.fx-spark svg { animation: sparkpulse 2.6s ease-in-out infinite; }
@keyframes sparkpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .7; } }
.tier.t3 { box-shadow: 0 24px 64px rgba(109,58,224,.3); animation: t3glow 3.5s ease-in-out infinite alternate; }
@keyframes t3glow {
  from { box-shadow: 0 24px 64px rgba(109,58,224,.28); }
  to   { box-shadow: 0 24px 76px rgba(139,92,246,.5); }
}

.why5.cols4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .why5.cols4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why5.cols4 { grid-template-columns: 1fr; } }

/* ---------- Dense service-page layout ---------- */
.dense .s-off, .dense .s-tint, .dense .s-dark { --sp: clamp(46px, 6vw, 78px); }
.dense .sec-hdr { margin-bottom: clamp(24px, 4vw, 40px); }
.dense .pg-hero { padding: calc(var(--nh) + clamp(44px, 6vw, 72px)) 0 clamp(38px, 5vw, 56px); }
.dense .cta-strip { padding: clamp(60px, 7vw, 92px) 0; }
.dense .schips { margin-top: 26px; }
.dense .trust-sig { margin-top: clamp(26px, 4vw, 38px); }
.dense .tl-note, .dense .flow-result, .dense .models-note { margin-top: 28px; }

/* Sticky in-page jump bar */
.jump {
  position: sticky; top: var(--nh); z-index: 40;
  background: rgba(253,252,255,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.jump-in { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.jump-in::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; font-size: .75rem; font-weight: 600; color: var(--ink-2);
  padding: 8px 16px; border-radius: 100px; border: 1px solid transparent;
  transition: color .2s, background-color .2s, border-color .2s;
}
.jump a:hover { color: var(--v600); background: var(--bg1); border-color: var(--line); }

/* Sub-heading divider inside merged sections */
.mini-h {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(34px, 5vw, 52px) 0 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--v600);
}
.mini-h::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.mini-p { font-size: .9rem; color: var(--ink-3); line-height: 1.75; max-width: 720px; margin-bottom: 24px; }

/* Two-column onboarding grid */
.tl.grid2 { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 36px; }
.tl.grid2::before { display: none; }
.tl.grid2 .tl-step { padding: 0 0 26px 66px; }
.tl.grid2 .tl-num { width: 46px; height: 46px; }
.tl.grid2 .tl-t { margin-top: 9px; }

/* Two-column FAQ */
.faq.cols2 { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

@media (max-width: 860px) {
  .tl.grid2 { grid-template-columns: 1fr; }
  .faq.cols2 { grid-template-columns: 1fr; }
}

/* ==================================================================
   Virtual CFO page — bespoke components (vc-)
   Motifs: the cockpit (live view), the self-check (diagnosis),
   the cadence (rhythm). Palette & fonts stay on site tokens.
   ================================================================== */

/* --- Hero split with cockpit card --- */
.vc-hgrid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; }
.vc-alias { font-size: .8rem; color: var(--ink-3); margin-top: 18px; }
.vc-alias b { color: var(--v600); font-weight: 600; }

.vc-cockpit {
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line); border-radius: var(--r4);
  padding: 24px; box-shadow: var(--sh-l);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: float 7s ease-in-out infinite;
}
.vc-ck-hdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.vc-ck-t { font-weight: 700; font-size: .9rem; display: inline-flex; gap: 9px; align-items: center; }
.vc-ck-t svg { color: var(--v600); flex: none; }
.vc-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #157A47; background: rgba(72,205,140,.12);
  border: 1px solid rgba(27,122,72,.25); padding: 5px 11px; border-radius: 100px;
}
.vc-live i { width: 6px; height: 6px; border-radius: 50%; background: #48CD8C; animation: pulse-g 2s infinite; flex: none; }
.vc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.vc-kpi { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 13px; min-width: 0; }
.vc-kpi .v { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(.98rem, 1.6vw, 1.18rem); color: var(--ink); white-space: nowrap; }
.vc-kpi .l { font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.vc-bars-t { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.vc-bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; }
.vc-bars i {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--v400), var(--v500));
  transform: scaleY(0); transform-origin: bottom;
  animation: vcgrow .8s var(--ease) forwards;
}
.vc-bars i.warn { background: linear-gradient(180deg, #C97BC4, #B0588A); }
@keyframes vcgrow { to { transform: scaleY(1); } }
.vc-bars-x { display: flex; justify-content: space-between; font-size: .6rem; color: var(--ink-3); margin-top: 6px; }
.vc-ck-note { font-size: .68rem; font-style: italic; color: var(--ink-3); margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }

/* --- The missing layer (finance stack) --- */
.vc-stack { display: flex; flex-direction: column; gap: 11px; }
.vc-layer {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 17px 22px;
}
.vc-layer .nm { font-weight: 700; font-size: .95rem; }
.vc-layer .rl { font-size: .78rem; color: var(--ink-3); margin-top: 2px; }
.vc-layer .tag {
  flex: none; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg1); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.vc-layer.top {
  background: var(--grad-dark); border-color: transparent; color: #fff;
  box-shadow: 0 18px 48px rgba(109,58,224,.32);
  animation: t3glow 3.5s ease-in-out infinite alternate;
}
.vc-layer.top .rl { color: var(--w-2); }
.vc-layer.top .tag { background: rgba(255,255,255,.1); border-color: var(--w-line); color: var(--v200); }
.vc-stack-cap { font-size: .74rem; color: var(--ink-3); font-style: italic; margin-top: 12px; }

/* --- Self-check quiz --- */
.vc-quiz { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.vc-sign {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 15px 18px; font-size: .92rem; line-height: 1.6; color: var(--ink-2);
  cursor: pointer; width: 100%;
  transition: border-color .25s, background-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.vc-sign:hover { border-color: var(--v400); transform: translateY(-1px); box-shadow: var(--sh-xs); }
.vc-sign .bx {
  width: 21px; height: 21px; flex: none; margin-top: 2px;
  border-radius: 7px; border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background-color .25s, border-color .25s;
}
.vc-sign .bx svg { opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s var(--ease); }
.vc-sign[aria-pressed="true"] { border-color: var(--v500); background: #FBF9FF; }
.vc-sign[aria-pressed="true"] .bx { background: var(--grad); border-color: transparent; }
.vc-sign[aria-pressed="true"] .bx svg { opacity: 1; transform: scale(1); }
.vc-meterwrap {
  max-width: 780px; margin: 24px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 20px 24px; box-shadow: var(--sh-s);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.vc-meter { flex: 1 1 170px; height: 10px; border-radius: 100px; background: var(--bg2); overflow: hidden; }
.vc-meter i { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--grad); transition: width .55s var(--ease); }
.vc-verdict { flex: 2 1 240px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.vc-quiz-cta { display: none; }
.vc-quiz-cta.show { display: inline-flex; }

/* --- Industry bento --- */
.vc-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vc-ind {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 24px 24px 22px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.vc-ind:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.vc-ind .in-nm {
  display: flex; align-items: center; gap: 8px;
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v600); margin-bottom: 14px;
}
.vc-ind .in-nm svg { flex: none; }
.vc-mini { width: 100%; height: auto; margin-bottom: 14px; }
.vc-mini text { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; fill: var(--ink-3); }
.vc-ind p { font-size: .82rem; color: var(--ink-3); line-height: 1.68; }
.vc-ind .stat { margin-top: auto; padding-top: 16px; }
.vc-ind .stat .v {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.45rem; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block;
}
.vc-ind .stat .l { font-size: .72rem; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.vc-bento-note { font-size: .72rem; color: var(--ink-3); font-style: italic; margin-top: 18px; }

/* --- Cadence board --- */
.vc-cadgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.vc-cad {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  border-top: 3px solid var(--v500); overflow: hidden; padding-bottom: 8px;
}
.vc-cad.q { border-top-color: var(--mauve); }
.vc-cad.a { border-top-color: var(--v300); }
.vc-cad .hd {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: .92rem;
}
.vc-cad .hd svg { color: var(--v600); flex: none; }
.vc-cad li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 20px; font-size: .85rem; line-height: 1.6; color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}
.vc-cad li:last-child { border-bottom: none; }
.vc-cad li svg { color: var(--v600); flex: none; margin-top: 4px; }
.vc-not { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.vc-not .k { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.vc-not .itm {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--ink-3);
  background: var(--bg1); border: 1px dashed var(--line-2);
  padding: 9px 16px; border-radius: 100px;
}
.vc-not .itm svg { color: var(--mauve); flex: none; }
.vc-not-note { text-align: center; font-size: .78rem; color: var(--ink-3); margin-top: 14px; }
.vc-not-note a { color: var(--v600); font-weight: 600; }

/* --- Engagement dial (stage band) --- */
.vc-band { max-width: 940px; margin: 0 auto; }
.vc-track { position: relative; height: 12px; border-radius: 100px; background: linear-gradient(90deg, var(--bg2) 0%, var(--v300) 55%, var(--v500) 100%); }
.vc-track .dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--v500);
  box-shadow: var(--sh-s);
}
.vc-bandgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 26px; }
.vc-stage.mid { text-align: center; }
.vc-stage.end { text-align: right; }
.vc-stage .t { font-weight: 700; font-size: .95rem; }
.vc-stage .amt { font-family: 'Playfair Display', serif; font-style: italic; color: var(--v600); font-size: .92rem; margin: 3px 0 8px; }
.vc-stage p { font-size: .82rem; color: var(--ink-3); line-height: 1.68; }
.vc-band-cap { text-align: center; margin-top: 30px; }
.vc-band-cap p {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: 13px 26px; border-radius: 100px;
}
.vc-band-cap svg { color: var(--v600); flex: none; }

/* --- First thirty days path --- */
.vc-path { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 18px; }
.vc-path::before {
  content: ""; position: absolute; top: 10px; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, var(--v400), var(--mauve));
  opacity: .3; border-radius: 2px;
}
.vc-step { position: relative; }
.vc-step .pt {
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--v500);
  margin-bottom: 14px; position: relative;
}
.vc-step .wk { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v600); margin-bottom: 6px; }
.vc-step .t { font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.vc-step p { font-size: .78rem; color: var(--ink-3); line-height: 1.62; padding-right: 6px; }

/* --- Security keyword rows --- */
.vc-sec { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.vc-sec .row {
  display: grid; grid-template-columns: 230px 1fr; gap: 8px 24px; align-items: center;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r3); padding: 22px 28px;
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.vc-sec .row:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); transform: translateX(6px); }
.vc-sec .kw { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 1.35rem; color: #fff; }
.vc-sec p { font-size: .88rem; color: var(--w-2); line-height: 1.7; }

/* --- vc responsive --- */
@media (max-width: 1080px) {
  .vc-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .vc-cockpit { max-width: 540px; }
}
@media (max-width: 900px) {
  .vc-bento { grid-template-columns: 1fr 1fr; }
  .vc-cadgrid { grid-template-columns: 1fr; }
  .vc-path { grid-template-columns: 1fr; gap: 24px; padding-left: 34px; }
  .vc-path::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--v400), var(--mauve)); }
  .vc-step .pt { position: absolute; left: -34px; top: 0; margin: 0; }
  .vc-sec .row { grid-template-columns: 1fr; }
  .vc-bandgrid { grid-template-columns: 1fr; gap: 16px; }
  .vc-stage.mid, .vc-stage.end { text-align: left; }
}
@media (max-width: 640px) {
  .vc-bento { grid-template-columns: 1fr; }
  .vc-kpis { gap: 7px; }
  .vc-kpi { padding: 10px 10px; }
  .vc-cockpit { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-cockpit { animation: none; }
  .vc-bars i { transform: scaleY(1) !important; animation: none; }
  .vc-layer.top { animation: none; }
  .vc-meter i { transition: none; }
}

/* ==================================================================
   Fundraising page — bespoke components (fr-)
   Motifs: the tie-out (consistency), the jury (scrutiny),
   the deal rail (process), the vault (controlled access).
   ================================================================== */

/* --- Hero split with tie-out documents --- */
.fr-hgrid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; }
.fr-tie { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 30px; }
.fr-tie::before {
  content: ""; position: absolute; left: 10px; top: 30px; bottom: 64px; width: 2px;
  background: linear-gradient(180deg, var(--v400), var(--mauve));
  opacity: .4; border-radius: 2px;
}
.fr-doc {
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: var(--r3);
  padding: 15px 18px; box-shadow: var(--sh-m); position: relative;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fr-doc .dt {
  display: flex; align-items: center; gap: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.fr-doc .dt svg { color: var(--v600); flex: none; }
.fr-ln { height: 7px; border-radius: 4px; background: var(--bg2); margin: 7px 0; }
.fr-ln.s { width: 62%; }
.fr-fig {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--bg1); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 8px 13px; font-size: .78rem; font-weight: 600; color: var(--ink-2);
  margin: 9px 0 2px; position: relative;
}
.fr-fig b { color: var(--v600); font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-fig::before {
  content: ""; position: absolute; left: -37px; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--v500);
}
.fr-stamp {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  background: var(--grad); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 9px 18px; border-radius: 100px; box-shadow: var(--sh-glow);
}
.fr-stamp svg { flex: none; }

/* --- The jury (reviewer cards) --- */
.fr-jury { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fr-juror {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 22px 20px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.fr-juror:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.fr-juror .who {
  display: flex; align-items: center; gap: 9px;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v600); margin-bottom: 12px;
}
.fr-juror .who svg { flex: none; }
.fr-juror .q { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.02rem; color: var(--ink); line-height: 1.5; }
.fr-oneq { text-align: center; margin-top: 30px; }
.fr-oneq p {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: var(--grad-dark); color: #fff; font-size: .9rem; font-weight: 600;
  padding: 15px 30px; border-radius: 100px; box-shadow: var(--sh-m);
}
.fr-oneq em { font-family: 'Playfair Display', serif; font-weight: 500; }

/* --- Two tracks on one base --- */
.fr-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 36px; }
.fr-track {
  background: #fff; border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--r3) var(--r3) 0 0; padding: 26px 26px 22px;
}
.fr-track .tt { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.fr-track .tt svg { color: var(--v600); flex: none; }
.fr-track p { font-size: .85rem; color: var(--ink-3); line-height: 1.7; }
.fr-base {
  grid-column: 1 / -1;
  background: var(--bg1); border: 1px solid var(--line-2);
  border-radius: 0 0 var(--r3) var(--r3);
  padding: 13px 20px; text-align: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--v600);
}

/* --- Readiness working paper --- */
.fr-ledger { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-m); overflow: hidden; }
.fr-ledger .lh {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 15px 22px; background: var(--bg1); border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: .9rem;
}
.fr-ledger .lh .tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v600); background: #fff; border: 1px solid var(--line);
  padding: 4px 11px; border-radius: 100px;
}
.fr-lrow {
  display: flex; gap: 13px; align-items: flex-start; flex-wrap: wrap;
  padding: 13px 22px; border-bottom: 1px dashed var(--line);
  font-size: .86rem; line-height: 1.6; color: var(--ink-2);
}
.fr-lrow:last-child { border-bottom: none; }
.fr-lrow > span { flex: 1; min-width: 200px; }
.fr-lrow .tick {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  border-radius: 6px; background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.fr-lrow .st {
  flex: none; margin-top: 3px; margin-left: auto;
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 10px; white-space: nowrap;
}
.fr-ledger-cap { font-size: .74rem; color: var(--ink-3); font-style: italic; margin-top: 12px; }

/* --- Materials (folded-corner document cards) --- */
.fr-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fr-mat {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r2); border-top-right-radius: 0;
  padding: 24px 22px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.fr-mat::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 24px; height: 24px;
  background: linear-gradient(225deg, var(--bg1) 50%, var(--bg2) 50%);
  border-bottom-left-radius: 8px;
}
.fr-mat:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.fr-mat .mi { color: var(--v600); margin-bottom: 14px; }
.fr-mat .mt { font-weight: 700; font-size: .95rem; margin-bottom: 7px; }
.fr-mat p { font-size: .82rem; color: var(--ink-3); line-height: 1.68; }
.fr-mat.key { background: var(--grad-dark); color: #fff; border-color: transparent; box-shadow: 0 20px 52px rgba(109,58,224,.3); }
.fr-mat.key::after { background: linear-gradient(225deg, #221349 50%, #33206B 50%); }
.fr-mat.key .mi { color: #B794FF; }
.fr-mat.key p { color: var(--w-2); }

/* --- IPO flagship panel --- */
.fr-flagship {
  position: relative; overflow: hidden;
  background: var(--grad-dark); color: #fff;
  border-radius: var(--r4); padding: clamp(28px, 4.5vw, 52px);
  box-shadow: var(--sh-l);
}
.fr-flagship::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.32), transparent 65%);
  top: -200px; right: -140px; filter: blur(60px); pointer-events: none;
}
.fr-flagship > * { position: relative; }
.fr-fs-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--v200); margin-bottom: 14px; }
.fr-fs-h { font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin-bottom: 14px; }
.fr-fs-p { font-size: .92rem; color: var(--w-2); line-height: 1.75; max-width: 760px; }
.fr-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 30px 0 0; }
.fr-pillar { background: rgba(255,255,255,.05); border: 1px solid var(--w-line); border-radius: var(--r2); padding: 18px 16px; }
.fr-pillar svg { color: #B794FF; margin-bottom: 10px; }
.fr-pillar .t { font-weight: 700; font-size: .84rem; margin-bottom: 5px; line-height: 1.4; }
.fr-pillar p { font-size: .73rem; color: var(--w-2); line-height: 1.62; }
.fr-scale { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; border-top: 1px solid var(--w-line); margin-top: 30px; padding-top: 26px; }
.fr-scale .sv {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.1;
  background: linear-gradient(120deg, #B794FF 0%, #E0A3DB 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block;
}
.fr-scale .sl { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--w-3); margin-top: 6px; max-width: 230px; line-height: 1.55; }
.fr-outcome { margin-top: 26px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.02rem; color: var(--v200); }

/* --- Debt fit chart & items --- */
.fr-fitcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 24px 24px 18px; box-shadow: var(--sh-m); }
.fr-fitcard .ft { font-size: .95rem; font-weight: 700; }
.fr-fitcard .fs { font-size: .78rem; color: var(--ink-3); margin: 3px 0 14px; }
.fr-fitcard svg { width: 100%; height: auto; display: block; }
.fr-fitcard svg text { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; fill: var(--ink-3); }
.fr-fit-cap { font-size: .72rem; color: var(--ink-3); font-style: italic; margin-top: 10px; }
.fr-debt-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.fr-di { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 19px 20px; }
.fr-di .t { display: flex; gap: 9px; align-items: center; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.fr-di .t svg { color: var(--v600); flex: none; }
.fr-di p { font-size: .8rem; color: var(--ink-3); line-height: 1.66; }

/* --- Deal rail --- */
.fr-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.fr-stage { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 20px 18px; }
.fr-stage::after {
  content: ""; position: absolute; right: -9px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 15px; height: 15px; background: #fff;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.fr-stage:last-child::after { display: none; }
.fr-stage .sn {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block; margin-bottom: 10px;
}
.fr-stage .t { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.fr-stage p { font-size: .76rem; color: var(--ink-3); line-height: 1.62; }

/* --- Vault (dark security artifacts) --- */
.fr-vault { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.fr-room, .fr-vers { background: rgba(255,255,255,.05); border: 1px solid var(--w-line); border-radius: var(--r3); padding: 20px 22px; }
.fr-room .rh, .fr-vers .rh { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.fr-room .rh svg, .fr-vers .rh svg { color: #B794FF; flex: none; }
.fr-person, .fr-vrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .82rem; color: var(--w-1);
}
.fr-person:last-child, .fr-vrow:last-child { border-bottom: none; }
.fr-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.1); border: 1px solid var(--w-line);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: var(--v200);
}
.fr-acc {
  margin-left: auto; flex: none;
  font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
  background: rgba(72,205,140,.12); color: #9FE8C4; border: 1px solid rgba(72,205,140,.25);
}
.fr-acc.rv { background: rgba(176,88,138,.16); color: #E0A3DB; border-color: rgba(176,88,138,.35); }
.fr-vrow.old { color: var(--w-3); }
.fr-vrow.old .vn { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.fr-note-dk { font-size: .7rem; color: var(--w-3); font-style: italic; margin-top: 10px; }
.fr-clauses { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fr-clause { display: flex; gap: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r2); padding: 18px 20px; }
.fr-clause .cn { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--v200); flex: none; line-height: 1.2; }
.fr-clause .t { font-weight: 600; font-size: .9rem; margin-bottom: 4px; color: #fff; }
.fr-clause p { font-size: .8rem; color: var(--w-2); line-height: 1.66; }

/* --- fr responsive --- */
@media (max-width: 1080px) {
  .fr-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .fr-tie { max-width: 480px; }
  .fr-pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .fr-jury { grid-template-columns: 1fr 1fr; }
  .fr-tracks { grid-template-columns: 1fr; }
  .fr-track + .fr-track { border-top: 1px dashed var(--line); border-radius: 0; }
  .fr-track { border-radius: var(--r3) var(--r3) 0 0; }
  .fr-rail { grid-template-columns: 1fr; }
  .fr-stage::after { right: auto; top: auto; left: 28px; bottom: -9px; transform: rotate(135deg); }
  .fr-vault { grid-template-columns: 1fr; }
  .fr-clauses { grid-template-columns: 1fr; }
  .fr-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fr-jury { grid-template-columns: 1fr; }
  .fr-mats { grid-template-columns: 1fr; }
  .fr-debt-items { grid-template-columns: 1fr; }
  .fr-pillars { grid-template-columns: 1fr; }
  .fr-lrow .st { display: none; }
}

/* ==================================================================
   Assurance & Risk page — bespoke components (ar-)
   Motifs: the signature and the system behind it (quality gates),
   the audit file (index, workpapers), the evidence chain.
   ================================================================== */

/* --- Hero: behind the signature --- */
.ar-hgrid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; }
.ar-sig { position: relative; max-width: 470px; margin-left: auto; padding-top: 150px; }
.ar-layerb {
  position: absolute; left: 0; right: 0;
  background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 9px 16px;
  font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--v600); box-shadow: var(--sh-xs);
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ar-layerb svg { flex: none; }
.ar-layerb.b1 { top: 0;    margin: 0 54px; }
.ar-layerb.b2 { top: 37px; margin: 0 36px; }
.ar-layerb.b3 { top: 74px; margin: 0 18px; }
.ar-layerb.b4 { top: 111px; margin: 0; }
.ar-opinion {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--sh-l); padding: 24px 26px 20px;
}
.ar-op-k {
  display: flex; align-items: center; gap: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.ar-op-k svg { color: var(--v600); flex: none; }
.ar-ln { height: 7px; border-radius: 4px; background: var(--bg2); margin: 8px 0; }
.ar-ln.s { width: 64%; }
.ar-op-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #157A47; background: rgba(72,205,140,.12); border: 1px solid rgba(27,122,72,.25);
  border-radius: 100px; padding: 5px 12px; margin: 8px 0 2px;
}
.ar-sign {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
  border-top: 1px dashed var(--line-2); margin-top: 14px; padding-top: 12px;
}
.ar-sign .scr path { fill: none; stroke: #3D1878; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ar-draw 1.1s var(--ease-io) 1.2s forwards; }
@keyframes ar-draw { to { stroke-dashoffset: 0; } }
.ar-sign .nm { font-size: .68rem; font-weight: 600; color: var(--ink-2); }
.ar-sign .dt2 { font-size: .62rem; color: var(--ink-3); }
.ar-sig-cap { font-size: .72rem; color: var(--ink-3); font-style: italic; margin-top: 12px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ar-sign .scr path { stroke-dashoffset: 0 !important; animation: none; } }

/* --- Engagement index --- */
.ar-index { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.ar-ix {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  padding: 18px 20px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.ar-ix:hover { transform: translateY(-3px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.ar-ix .no {
  flex: none; min-width: 34px;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.25rem; line-height: 1.15;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ar-ix .bd { flex: 1; min-width: 180px; }
.ar-ix .t { font-weight: 700; font-size: .93rem; }
.ar-ix p { font-size: .8rem; color: var(--ink-3); line-height: 1.65; margin-top: 4px; }
.ar-ix .lvl {
  flex: none; margin-left: auto; margin-top: 3px;
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 10px; white-space: nowrap;
}

/* --- Jurisdiction plates --- */
.ar-juris { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ar-j {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 20px 17px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.ar-j:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.ar-j .code {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 12px;
  border: 1.5px dashed var(--v400); color: var(--v600);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: .85rem; letter-spacing: .04em;
}
.ar-j .cn { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.ar-j p { font-size: .74rem; color: var(--ink-3); line-height: 1.62; flex: 1; }
.ar-j .fw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ar-j .fw span {
  font-size: .55rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 100px;
}

/* --- Quality gates pipeline --- */
.ar-gates { display: grid; grid-template-columns: repeat(4, 1fr) .92fr; gap: 15px; align-items: stretch; }
.ar-gate {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--v500);
  border-radius: var(--r3); padding: 20px 19px;
}
.ar-gate .g {
  display: flex; align-items: center; gap: 8px;
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v600); margin-bottom: 10px;
}
.ar-gate .g svg { flex: none; }
.ar-gate .t { font-weight: 700; font-size: .93rem; margin-bottom: 7px; line-height: 1.4; }
.ar-gate p { font-size: .77rem; color: var(--ink-3); line-height: 1.64; }
.ar-gate .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.ar-gate .chips span {
  font-size: .55rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--v600); background: var(--bg1); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 100px;
}
.ar-seal {
  background: var(--grad-dark); color: #fff; border-radius: var(--r3);
  padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 11px;
  box-shadow: 0 18px 44px rgba(109,58,224,.3);
}
.ar-seal svg { color: #B794FF; }
.ar-seal .t { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1.45; }
.ar-note { font-size: .74rem; color: var(--ink-3); font-style: italic; line-height: 1.7; max-width: 820px; margin: 20px auto 0; text-align: center; }

/* --- Engagement phases (ticked spine) --- */
.ar-steps { max-width: 720px; margin: 0 auto; position: relative; }
.ar-steps::before {
  content: ""; position: absolute; left: 13px; top: 8px; bottom: 14px;
  border-left: 2px dashed var(--line-2);
}
.ar-step { position: relative; padding: 0 0 26px 52px; }
.ar-step:last-child { padding-bottom: 0; }
.ar-step .mk {
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-glow);
}
.ar-step .ph { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v600); margin-bottom: 4px; }
.ar-step .t { font-weight: 700; font-size: .98rem; margin-bottom: 5px; color: var(--ink); }
.ar-step p { font-size: .86rem; color: var(--ink-3); line-height: 1.7; }

/* --- Forensic vault (dark) --- */
.ar-vaultgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-bottom: 22px; }
.ar-custody, .ar-sealed {
  background: rgba(255,255,255,.05); border: 1px solid var(--w-line);
  border-radius: var(--r3); padding: 22px;
}
.ar-custody .rh {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-weight: 700; font-size: .88rem;
}
.ar-custody .rh svg { color: #B794FF; flex: none; }
.ar-custody .rh .sub { font-size: .6rem; color: var(--w-3); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ar-chain { display: flex; align-items: flex-start; gap: 6px; margin-top: 18px; }
.ar-cnode { flex: 1; text-align: center; min-width: 0; }
.ar-cnode .ci {
  width: 38px; height: 38px; border-radius: 12px; margin: 0 auto 8px;
  background: rgba(255,255,255,.08); border: 1px solid var(--w-line); color: #B794FF;
  display: flex; align-items: center; justify-content: center;
}
.ar-cnode .cl { font-size: .68rem; font-weight: 700; color: var(--w-1); }
.ar-cnode .cs { font-size: .58rem; color: var(--w-3); margin-top: 2px; line-height: 1.45; }
.ar-carr { flex: none; width: 20px; height: 2px; margin-top: 18px; border-radius: 2px; background: linear-gradient(90deg, rgba(183,148,255,.55), rgba(224,163,219,.55)); }
.ar-note-dk { font-size: .7rem; color: var(--w-3); font-style: italic; margin-top: 16px; }
.ar-sealed { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ar-sealed .stamp {
  position: absolute; top: 22px; right: -38px; transform: rotate(35deg);
  font-size: .58rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  color: #E0A3DB; border: 1.5px solid rgba(224,163,219,.5);
  background: rgba(176,88,138,.12); padding: 6px 44px;
}
.ar-sealed .t { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 8px; max-width: 82%; }
.ar-sealed p { font-size: .84rem; color: var(--w-2); line-height: 1.72; }
.ar-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ar-kv > div { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r2); padding: 18px 20px; }
.ar-kv svg { color: #9FE8C4; }
.ar-kv .t { font-weight: 600; font-size: .9rem; color: #fff; margin: 10px 0 4px; }
.ar-kv p { font-size: .78rem; color: var(--w-2); line-height: 1.66; }

/* --- ar responsive --- */
@media (max-width: 1080px) {
  .ar-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .ar-sig { margin-left: 0; }
  .ar-gates { grid-template-columns: 1fr 1fr; }
  .ar-seal { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .ar-juris { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ar-index { grid-template-columns: 1fr; }
  .ar-vaultgrid { grid-template-columns: 1fr; }
  .ar-kv { grid-template-columns: 1fr; }
  .ar-juris { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ar-layerb { font-size: .55rem; letter-spacing: .08em; padding: 9px 12px; white-space: nowrap; }
  .ar-layerb.b1 { margin: 0 36px; }
  .ar-layerb.b2 { margin: 0 24px; }
  .ar-layerb.b3 { margin: 0 12px; }
  .ar-gates { grid-template-columns: 1fr; }
  .ar-seal { flex-direction: column; align-items: flex-start; }
  .ar-juris { grid-template-columns: 1fr; }
  .ar-ix { flex-wrap: wrap; }
  .ar-ix .lvl { margin-left: 50px; order: 3; }
  .ar-chain { flex-wrap: wrap; gap: 10px; }
  .ar-carr { display: none; }
  .ar-cnode { flex: 1 1 40%; }
}

/* ==================================================================
   About page — bespoke components (ab-)
   Motifs: technology inside the work (not bolted on), two disciplines
   merged, one team holding context, the people behind it.
   ================================================================== */

/* --- Hero: inside vs bolted-on thesis --- */
.ab-hgrid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; }
.ab-thesis {
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: var(--r4);
  padding: 28px; box-shadow: var(--sh-l);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: float 7s ease-in-out infinite;
}
.ab-trow + .ab-trow { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
.ab-tlabel { display: flex; flex-direction: column; margin-bottom: 15px; }
.ab-tlabel b { font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.ab-tlabel.on b { color: var(--v600); }
.ab-tlabel span { font-family: 'Playfair Display', serif; font-style: italic; font-size: .95rem; color: var(--ink-2); margin-top: 3px; }
.ab-pipe { display: flex; align-items: center; }
.ab-cell {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  background: var(--bg1); border: 1px solid var(--line); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.ab-conn { flex: 1; height: 2px; min-width: 12px; background: var(--line-2); border-radius: 2px; }
.ab-conn.dash { background: none; border-top: 2px dashed var(--line-2); height: 0; }
.ab-chip {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-glow);
}
.ab-chip.ext { background: var(--bg2); color: var(--ink-3); border: 1px dashed var(--line-2); box-shadow: none; opacity: .7; }
.ab-thesis-cap { text-align: center; margin-top: 22px; font-family: 'Playfair Display', serif; font-style: italic; color: var(--v600); font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .ab-thesis { animation: none; } }

/* --- Promise pull-quote --- */
.ab-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.ab-quote .big {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.3;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: .1em;
}
.ab-quote .gloss { color: var(--ink-3); font-size: 1rem; line-height: 1.8; margin-top: 18px; }
.ab-seq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.ab-seq .s { font-size: .78rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 9px 18px; }
.ab-seq .s.hl { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.ab-seq svg { color: var(--v400); flex: none; }

/* --- Two disciplines merge --- */
.ab-merge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 26px); }
.ab-mcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 26px 24px; }
.ab-mcard .mi { width: 46px; height: 46px; border-radius: 13px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.ab-mcard .t { font-weight: 700; font-size: 1rem; margin-bottom: 7px; }
.ab-mcard p { font-size: .85rem; color: var(--ink-3); line-height: 1.7; }
.ab-mcard .lack { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: .74rem; font-weight: 600; color: var(--mauve); }
.ab-mcard .lack svg { flex: none; }
.ab-core { display: flex; flex-direction: column; align-items: center; text-align: center; flex: none; width: clamp(120px, 15vw, 168px); }
.ab-core .orb {
  width: clamp(74px, 9vw, 96px); height: clamp(74px, 9vw, 96px); border-radius: 50%;
  background: var(--grad-dark); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 44px rgba(109,58,224,.34); position: relative;
  animation: t3glow 3.5s ease-in-out infinite alternate;
}
.ab-core .orb::before, .ab-core .orb::after {
  content: ""; position: absolute; top: 50%; width: clamp(10px, 2vw, 24px); height: 2px; background: var(--line-2);
}
.ab-core .orb::before { left: -1px; transform: translateX(-100%); }
.ab-core .orb::after { right: -1px; transform: translateX(100%); }
.ab-core .t { font-weight: 700; font-size: .92rem; margin-top: 16px; }
.ab-core .s { font-size: .74rem; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ab-core .orb { animation: none; } }

.ab-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.ab-tc { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 20px 22px; }
.ab-tc .k { font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ab-tc p { font-size: .86rem; color: var(--ink-2); line-height: 1.6; }
.ab-tc.win { background: var(--grad-dark); border-color: transparent; box-shadow: 0 16px 40px rgba(109,58,224,.28); }
.ab-tc.win .k { color: var(--v200); }
.ab-tc.win p { color: #fff; font-weight: 500; }

/* --- Rigour: instincts + contrast --- */
.ab-instincts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.ab-inst { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 20px 18px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ab-inst:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.ab-inst svg { color: var(--v600); margin-bottom: 11px; }
.ab-inst .t { font-weight: 700; font-size: .88rem; line-height: 1.4; }
.ab-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-cc { border-radius: var(--r3); padding: 24px 26px; }
.ab-cc.good { background: var(--grad-dark); color: #fff; box-shadow: var(--sh-m); }
.ab-cc.bad { background: #fff; border: 1px solid var(--line); }
.ab-cc .ct { font-weight: 700; font-size: .98rem; margin-bottom: 14px; }
.ab-cc.good .ct { color: #fff; }
.ab-cc.bad .ct { color: var(--ink); }
.ab-cc li { display: flex; gap: 11px; align-items: flex-start; font-size: .84rem; line-height: 1.6; padding: 7px 0; }
.ab-cc.good li { color: var(--w-1); }
.ab-cc.bad li { color: var(--ink-3); }
.ab-cc li svg { flex: none; margin-top: 3px; }
.ab-cc.good li svg { color: #9FE8C4; }
.ab-cc.bad li svg { color: var(--mauve); }

/* --- One firm, one context (before/after) --- */
.ab-context { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ab-ctx { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 24px; }
.ab-ctx.aft { background: var(--grad-dark); border-color: transparent; color: #fff; box-shadow: var(--sh-m); }
.ab-ctx .ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ab-ctx .ch .lab { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ab-ctx.aft .ch .lab { color: var(--v200); }
.ab-ctx .ct { font-weight: 700; font-size: 1rem; margin-bottom: 14px; }
.ab-ctx.aft .ct { color: #fff; }
.ab-ctx svg.dia { width: 100%; height: auto; display: block; }
.ab-ctx .cap { font-size: .8rem; color: var(--ink-3); line-height: 1.6; margin-top: 12px; }
.ab-ctx.aft .cap { color: var(--w-2); }

/* --- What we stand for (principles) --- */
.ab-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-pr { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 22px 20px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ab-pr:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.ab-pr .pi { width: 40px; height: 40px; border-radius: 11px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; transition: background .3s, color .3s, border-color .3s; }
.ab-pr:hover .pi { background: var(--grad); border-color: transparent; color: #fff; }
.ab-pr .t { font-weight: 700; font-size: .92rem; line-height: 1.4; margin-bottom: 7px; }
.ab-pr p { font-size: .8rem; color: var(--ink-3); line-height: 1.65; }

/* --- Founders --- */
.ab-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 820px; margin: 0 auto; }
.ab-founder {
  display: flex; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 22px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.ab-founder:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.ab-photo { width: 122px; height: 150px; flex: none; border-radius: var(--r2); overflow: hidden; position: relative; background: var(--bg2); box-shadow: var(--sh-s); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ab-photo-fb {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2rem; letter-spacing: .04em;
}
.ab-fbody .fname { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.ab-fbody .fcred { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v600); background: var(--bg1); border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; margin: 10px 0 8px; }
.ab-fbody .frole { font-size: .86rem; color: var(--ink-3); }

/* --- ab responsive --- */
@media (max-width: 1080px) {
  .ab-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .ab-thesis { max-width: 520px; }
  .ab-principles { grid-template-columns: repeat(2, 1fr); }
  .ab-instincts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ab-merge { grid-template-columns: 1fr; gap: 16px; }
  .ab-core { width: 100%; flex-direction: row; gap: 16px; justify-content: center; }
  .ab-core .orb::before, .ab-core .orb::after { display: none; }
  .ab-core .t { margin-top: 0; }
  .ab-trio { grid-template-columns: 1fr; }
  .ab-contrast { grid-template-columns: 1fr; }
  .ab-context { grid-template-columns: 1fr; }
  .ab-founders { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ab-principles { grid-template-columns: 1fr; }
  .ab-instincts { grid-template-columns: 1fr 1fr; }
  .ab-founder { flex-direction: column; text-align: center; }
  .ab-photo { width: 140px; height: 168px; }
}

/* ==================================================================
   Why Choose Us page — bespoke components (wc-)
   Motif: three things clients want, the gap most firms leave,
   and Dop & Bud closing it (execute + finish, system, proof).
   ================================================================== */

/* --- Hero: the three needs card --- */
.wc-hgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; }
.wc-needs {
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: var(--r4);
  padding: 30px; box-shadow: var(--sh-l);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: float 7s ease-in-out infinite;
}
.wc-needs .nt { font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.wc-needs ul { display: flex; flex-direction: column; gap: 14px; }
.wc-needs li { display: flex; gap: 14px; align-items: center; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.wc-needs li .ck { width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-glow); }
.wc-needs .nc { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2); font-family: 'Playfair Display', serif; font-style: italic; color: var(--v600); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .wc-needs { animation: none; } }

/* --- The gap: three failure-mode cards --- */
.wc-gaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wc-gapcard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r3); padding: 26px 24px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.wc-gapcard:hover { transform: translateY(-4px); box-shadow: var(--sh-s); border-color: var(--line-2); }
.wc-gapcard .gi { width: 46px; height: 46px; border-radius: 13px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.wc-gapcard .gt { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.wc-gapcard p { font-size: .85rem; color: var(--ink-3); line-height: 1.68; flex: 1; margin-bottom: 16px; }
.wc-hold { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: .72rem; font-weight: 700; color: var(--mauve); background: rgba(176,88,138,.08); border: 1px solid rgba(176,88,138,.22); border-radius: 100px; padding: 8px 14px; }
.wc-hold svg { flex: none; }
.wc-gapline { margin-top: 24px; text-align: center; }
.wc-gapline p { display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; justify-content: center; background: var(--grad-dark); color: #fff; font-size: .92rem; font-weight: 600; padding: 15px 30px; border-radius: 100px; box-shadow: var(--sh-m); }
.wc-gapline em { font-family: 'Playfair Display', serif; font-weight: 500; color: #E0A3DB; }

/* --- One roof (two disciplines) --- */
.wc-roof { max-width: 720px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; box-shadow: var(--sh-m); }
.wc-roof-cols { display: grid; grid-template-columns: 1fr 1fr; }
.wc-half { padding: 26px 24px; text-align: center; background: #fff; }
.wc-half + .wc-half { border-left: 1px solid var(--line); }
.wc-half .hi { width: 44px; height: 44px; margin: 0 auto 13px; border-radius: 13px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; }
.wc-half .h { font-weight: 700; font-size: .98rem; }
.wc-half .s { font-size: .82rem; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.wc-roofbar { background: var(--grad); color: #fff; text-align: center; padding: 14px; font-weight: 700; font-size: .9rem; letter-spacing: .01em; }

/* --- Outcomes --- */
.wc-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.wc-oc { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 26px 28px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.wc-oc:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.wc-oc .seg { display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--v600); margin-bottom: 14px; }
.wc-oc .seg svg { flex: none; }
.wc-oc .v { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wc-oc p { font-size: .85rem; color: var(--ink-3); line-height: 1.68; margin-top: 8px; }
.wc-agg { margin-top: 22px; }
.wc-agg p { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: .92rem; font-weight: 600; color: var(--ink-2); background: var(--bg1); border: 1px solid var(--line); border-radius: 100px; padding: 14px 28px; }
.wc-agg b { font-family: 'Playfair Display', serif; color: var(--v600); }
.wc-agg svg { color: var(--v600); flex: none; }

/* --- Credentials (logo tiles) --- */
.wc-cred { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wc-crcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: clamp(24px, 3vw, 34px); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.wc-crcard:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.wc-logo { height: 60px; display: flex; align-items: center; margin-bottom: 20px; }
.wc-logo img { max-height: 100%; max-width: 230px; width: auto; object-fit: contain; display: block; }
.wc-crcard .ct { font-weight: 700; font-size: 1.05rem; margin-bottom: 9px; }
.wc-crcard p { font-size: .86rem; color: var(--ink-3); line-height: 1.72; }
.wc-crcard .disc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wc-crcard .disc span { font-size: .68rem; font-weight: 600; color: var(--v600); background: var(--bg1); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; }
.wc-crnote { font-size: .72rem; color: var(--ink-3); font-style: italic; margin-top: 16px; text-align: center; }

/* --- wc responsive --- */
@media (max-width: 1080px) {
  .wc-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .wc-needs { max-width: 520px; }
}
@media (max-width: 900px) {
  .wc-gaps { grid-template-columns: 1fr; }
  .wc-out { grid-template-columns: 1fr; }
  .wc-cred { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wc-roof-cols { grid-template-columns: 1fr; }
  .wc-half + .wc-half { border-left: none; border-top: 1px solid var(--line); }
}

/* ==================================================================
   Home page — bespoke components (hx-)
   Thesis: the problems we solve, and technology living inside the work.
   Techy but professional: flowing data, live panels, working diagrams.
   ================================================================== */

/* --- Hero --- */
.hx-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nh) + clamp(48px, 6.5vw, 86px)) 0 clamp(54px, 7vw, 86px);
  background: linear-gradient(180deg, #FDFCFF 0%, #F6F1FD 55%, #ECE5FA 100%);
  border-bottom: 1px solid var(--line);
}
/* Hero backdrop: drifting aurora over a fine precision grid */
.hx-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hx-grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(109,58,224,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,58,224,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 62% 42%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 68% at 62% 42%, #000 18%, transparent 76%);
  animation: hxpan 30s linear infinite;
}
@keyframes hxpan { to { background-position: 54px 54px; } }
.hx-aur { position: absolute; border-radius: 50%; filter: blur(76px); will-change: transform; }
.hx-aur.a1 {
  width: 48vw; height: 48vw; max-width: 660px; max-height: 660px; top: -20%; right: -8%;
  background: radial-gradient(circle, rgba(139,92,246,.42), rgba(139,92,246,0) 68%);
  animation: hxd1 21s ease-in-out infinite alternate;
}
.hx-aur.a2 {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; bottom: -26%; left: -10%;
  background: radial-gradient(circle, rgba(160,69,155,.34), rgba(160,69,155,0) 68%);
  animation: hxd2 26s ease-in-out infinite alternate;
}
.hx-aur.a3 {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; top: 28%; left: 34%;
  background: radial-gradient(circle, rgba(196,181,253,.4), rgba(196,181,253,0) 70%);
  animation: hxd3 18s ease-in-out infinite alternate;
}
@keyframes hxd1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-84px, 62px) scale(1.14); } }
@keyframes hxd2 { from { transform: translate(0,0) scale(1); } to { transform: translate(76px, -54px) scale(1.1); } }
@keyframes hxd3 { from { transform: translate(0,0) scale(1); } to { transform: translate(58px, 48px) scale(.88); } }
@media (prefers-reduced-motion: reduce) { .hx-grid, .hx-aur { animation: none; } }

.hx-hgrid { display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(36px, 4.6vw, 70px); align-items: center; position: relative; }
.hx-h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.1; margin-bottom: 20px; }
.hx-sub { color: var(--ink-3); font-size: 1.04rem; line-height: 1.8; max-width: 545px; }
.hx-sub b { color: var(--ink-2); font-weight: 600; }
.hx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hx-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; color: var(--ink-2);
  background: rgba(255,255,255,.72); border: 1px solid var(--line-2);
  border-radius: 100px; padding: 8px 15px; backdrop-filter: blur(6px);
}
.hx-tag svg { color: var(--v600); flex: none; }

/* --- Hero console (the matcher) --- */
.hx-console {
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: var(--r4);
  box-shadow: var(--sh-l); overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hx-cbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 20px; background: var(--bg1); border-bottom: 1px solid var(--line);
}
.hx-cbar .lt2 { display: inline-flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hx-cbar .lt2 svg { color: var(--v600); flex: none; }
.hx-dots { display: inline-flex; gap: 5px; }
.hx-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); display: block; }
.hx-dots i:first-child { background: var(--v400); }
.hx-cbody { padding: 22px 20px 20px; }
.hx-cq { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.14rem; margin-bottom: 4px; }
.hx-cs { font-size: .79rem; color: var(--ink-3); margin-bottom: 16px; }
.hx-opts { display: flex; flex-direction: column; gap: 7px; }
.hx-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-size: .845rem; font-weight: 600; color: var(--ink-2); text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 12px 15px; cursor: pointer;
  transition: border-color .22s, color .22s, background-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.hx-opt .ix { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; transition: background .22s, color .22s, border-color .22s; }
.hx-opt span { flex: 1; }
.hx-opt::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .3; transition: opacity .22s, transform .22s var(--ease);
}
.hx-opt:hover { border-color: var(--v400); color: var(--v600); transform: translateX(3px); box-shadow: var(--sh-xs); }
.hx-opt:hover::after { opacity: .85; }
.hx-opt[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-glow); transform: none; }
.hx-opt[aria-pressed="true"] .ix { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.hx-opt[aria-pressed="true"]::after { opacity: .9; transform: rotate(45deg); }
.hx-res { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); min-height: 150px; }
.hx-idle { font-size: .82rem; color: var(--ink-3); line-height: 1.7; display: flex; gap: 10px; align-items: flex-start; }
.hx-idle svg { color: var(--v400); flex: none; margin-top: 3px; }
.hx-card { display: none; }
.hx-card.on { display: block; animation: rise .45s var(--ease); }
.hx-card .rk { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v600); margin-bottom: 8px; }
.hx-card .rn { font-weight: 700; font-size: 1rem; margin-bottom: 7px; }
.hx-card p { font-size: .83rem; color: var(--ink-3); line-height: 1.7; margin-bottom: 12px; }
.hx-card .rl { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--v600); }
.hx-card .rl svg { transition: transform .25s var(--ease); }
.hx-card .rl:hover svg { transform: translateX(4px); }

/* --- Problem cards --- */
.hx-probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx-prob {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r3);
  padding: 24px 24px 22px; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.hx-prob:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.hx-prob .pq { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.hx-mini { width: 100%; height: auto; margin-bottom: 16px; }
.hx-mini text { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; fill: var(--ink-3); letter-spacing: .06em; }
.hx-prob .pf { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.hx-prob .pf .pl2 { font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--v600); margin-bottom: 5px; }
.hx-prob .pf p { font-size: .82rem; color: var(--ink-3); line-height: 1.65; }

/* bar that grows on reveal */
.hx-bar { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }
.reveal.in .hx-bar { transform: scaleX(1); }
.hx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.in .hx-draw { animation: drawline 1.4s var(--ease-io) .25s forwards; }
.hx-pop { opacity: 0; transition: opacity .5s var(--ease-io) 1.1s; }
.reveal.in .hx-pop { opacity: 1; }
.hx-spin { transform-origin: center; animation: spin 9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hx-bar { transform: scaleX(1) !important; }
  .hx-draw { stroke-dashoffset: 0 !important; animation: none; }
  .hx-pop { opacity: 1 !important; }
  .hx-spin { animation: none; }
}

/* --- Technology inside the work --- */
.hx-inside { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hx-way { border-radius: var(--r3); padding: 26px 26px 22px; }
.hx-way.old { background: #fff; border: 1px solid var(--line); }
.hx-way.ours { background: var(--grad-dark); color: #fff; box-shadow: 0 20px 52px rgba(109,58,224,.3); }
.hx-way .wk { font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.hx-way.old .wk { color: var(--ink-3); }
.hx-way.ours .wk { color: var(--v200); }
.hx-way .wt { font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.hx-way.ours .wt { color: #fff; }
.hx-pipe { display: flex; align-items: center; gap: 6px; margin: 4px 0 16px; }
.hx-pn {
  flex: 1; min-width: 0; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-align: center;
}
.hx-way.old .hx-pn { background: var(--bg1); border: 1px solid var(--line); color: var(--ink-3); }
.hx-way.ours .hx-pn { background: rgba(255,255,255,.08); border: 1px solid var(--w-line); color: var(--w-1); }
.hx-pn.ai { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: var(--sh-glow); }
.hx-pn.bolt { border-style: dashed !important; opacity: .55; }
.hx-lk { flex: none; width: 16px; height: 2px; border-radius: 2px; background: var(--line-2); }
.hx-way.ours .hx-lk { background: linear-gradient(90deg, #B794FF, #E0A3DB); }
.hx-way.old .hx-lk.d { background: none; border-top: 2px dashed var(--line-2); height: 0; }
.hx-way p { font-size: .84rem; line-height: 1.7; }
.hx-way.old p { color: var(--ink-3); }
.hx-way.ours p { color: var(--w-2); }
.hx-inside-note { margin-top: 24px; text-align: center; }
.hx-inside-note p {
  display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; justify-content: center;
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 14px 28px;
}
.hx-inside-note svg { color: var(--v600); flex: none; }

/* --- Service explorer --- */
.hx-svc { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.hx-slist { display: flex; flex-direction: column; gap: 8px; }
.hx-sbtn {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 15px 16px; cursor: pointer;
  transition: border-color .22s, background-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.hx-sbtn .si { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--bg1); border: 1px solid var(--line); color: var(--v600); display: flex; align-items: center; justify-content: center; transition: background .22s, color .22s, border-color .22s; }
.hx-sbtn .sn2 { font-weight: 700; font-size: .89rem; color: var(--ink); line-height: 1.35; }
.hx-sbtn:hover { border-color: var(--v400); transform: translateX(3px); box-shadow: var(--sh-xs); }
.hx-sbtn.active { background: var(--grad-dark); border-color: transparent; box-shadow: 0 14px 34px rgba(109,58,224,.28); }
.hx-sbtn.active .sn2 { color: #fff; }
.hx-sbtn.active .si { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.hx-spanel { display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: clamp(24px, 3vw, 34px); box-shadow: var(--sh-s); }
.hx-spanel.active { display: block; animation: rise .45s var(--ease); }
.hx-spanel .pk { font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--v600); margin-bottom: 10px; }
.hx-spanel .ph { font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; margin-bottom: 10px; }
.hx-spanel > p { font-size: .89rem; color: var(--ink-3); line-height: 1.75; max-width: 620px; }
.hx-splits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.hx-splits li { display: flex; gap: 10px; align-items: flex-start; font-size: .83rem; color: var(--ink-2); line-height: 1.6; }
.hx-splits svg { color: var(--v600); flex: none; margin-top: 3px; }
.hx-slink { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--v600); }
.hx-slink svg { transition: transform .25s var(--ease); }
.hx-slink:hover svg { transform: translateX(4px); }

/* --- Outcome metrics --- */
.hx-mets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx-met { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 28px 26px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.hx-met:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.hx-met .mv2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hx-met .ml2 { font-weight: 700; font-size: .89rem; margin: 10px 0 6px; }
.hx-met p { font-size: .81rem; color: var(--ink-3); line-height: 1.65; }

/* --- hx responsive --- */
@media (max-width: 1080px) {
  .hx-hgrid { grid-template-columns: 1fr; gap: 44px; }
  .hx-console { max-width: 560px; }
  .hx-probs { grid-template-columns: 1fr 1fr; }
  .hx-svc { grid-template-columns: 240px 1fr; }
}
@media (max-width: 900px) {
  .hx-inside { grid-template-columns: 1fr; }
  .hx-svc { grid-template-columns: 1fr; }
  .hx-slist { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .hx-slist::-webkit-scrollbar { display: none; }
  .hx-sbtn { flex: none; width: auto; }
  .hx-sbtn .sn2 { white-space: nowrap; }
  .hx-mets { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hx-probs { grid-template-columns: 1fr; }
  .hx-splits { grid-template-columns: 1fr; }
  .hx-res { min-height: 0; }
  .hx-pn { font-size: .55rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }  .reveal.d6 { transition-delay: .48s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .h-in { opacity: 1 !important; transform: none !important; }
  .marquee { animation: none !important; flex-wrap: wrap; }
  .panel-card { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .h-layout { grid-template-columns: 1fr; gap: 56px; }
  .h-panel { max-width: 520px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .reach-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .sd-lay { grid-template-columns: 1fr; }
  .sd-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .sd-side > * { flex: 1 1 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .story-lay { grid-template-columns: 1fr; gap: 48px; }
  .contact-lay { grid-template-columns: 1fr; gap: 52px; }
  .appr-grid { grid-template-columns: 1fr; }
  .svl-card { grid-template-columns: auto 1fr; }
  .svl-arr { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}

@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .reach-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .inc-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .chip-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .h-stats { gap: 24px 32px; }
  .h-btns .btn-p, .h-btns .btn-lt, .cta-btns .btn-p, .cta-btns .btn-lt { width: 100%; }
  .scroll-cue { display: none; }
  .svl-card { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .reach-grid { grid-template-columns: 1fr; }
}