/*!
 * Ascend Solutions : Immersive homepage bundle (generated)
 * Source: design-handoff/ (design-system tokens + styles + polish + refine).
 * Regenerate with: node tools/_staging/build-immersive-assets.cjs
 * Fonts (Plus Jakarta Sans + Inter) are enqueued by the theme, not imported here.
 * Climb-section styles live separately in immersive-ascent.css.
 */

/* ====================================================================
   design-system/tokens/colors.css
   ==================================================================== */
/* ============================================================
   Ascend - Color tokens
   Core: deep navy authority. Solutions accent: teal (growth).
   Advisory accent: gold (premium vCFO). Cool-tinted neutrals.
   ============================================================ */

:root {
  /* ---- Brand navy (core) ---- */
  --navy-950: #06122A;
  --navy-900: #0B1D3A; /* brand core / theme-color */
  --navy-800: #162B52; /* deep navy (canonical, gradients) */
  --navy-700: #1B3A6B;
  --navy-600: #244B85;
  --navy-500: #335F9E;
  --navy-400: #5A82BE;
  --navy-300: #8EA9D4;
  --navy-200: #C0D0E8;
  --navy-100: #E2EAF5;
  --navy-50:  #F2F6FC;

  /* ---- Teal - Solutions accent (canonical #0FA3B1) ---- */
  --teal-700: #0B7F8A; /* dark teal */
  --teal-600: #0C8E9A;
  --teal-500: #0FA3B1; /* primary teal */
  --teal-400: #14C4D4; /* light teal (gradient end) */
  --teal-300: #35D0DE; /* aqua */
  --teal-200: #8FE4EC;
  --teal-100: #D4F4F7;
  --teal-50:  #ECFAFB;

  /* ---- Gold - Advisory accent (canonical #D4A843) ---- */
  --gold-700: #8A6A1F;
  --gold-600: #B8902E; /* dark gold */
  --gold-500: #D4A843; /* primary gold */
  --gold-400: #E8C46A; /* light gold */
  --gold-300: #EFD391;
  --gold-200: #F4E3BB;
  --gold-100: #FAF2DD;
  --gold-50:  #FDF9EF;

  /* ---- Neutrals (cool, navy-tinted) ---- */
  --gray-950: #0C1119;
  --gray-900: #161C28;
  --gray-800: #232B3A;
  --gray-700: #3A4456;
  --gray-600: #586275;
  --gray-500: #7B8597;
  --gray-400: #A2ABBA;
  --gray-300: #C7CDD8;
  --gray-200: #E1E5EC;
  --gray-150: #EBEEF3;
  --gray-100: #F2F4F8;
  --gray-50:  #F8FAFC;
  --white:    #FFFFFF;

  /* ---- Semantic status ---- */
  --success-600: #0C8268;
  --success-500: #16A37F;
  --success-100: #DBF4EE;
  --warning-600: #B6781A;
  --warning-500: #E0962A;
  --warning-100: #FBEFD8;
  --danger-600:  #B4332B;
  --danger-500:  #DA4A40;
  --danger-100:  #FBE4E2;
  --info-600:    #244B85;
  --info-500:    #335F9E;
  --info-100:    #E2EAF5;

  /* ============================================================
     Semantic aliases - reference these in components
     ============================================================ */

  /* Brand */
  --brand:            var(--navy-900);
  --brand-strong:     var(--navy-950);
  --brand-soft:       var(--navy-50);
  --accent:           var(--teal-500);   /* Solutions */
  --accent-strong:    var(--teal-600);
  --accent-soft:      var(--teal-50);
  --premium:          var(--gold-500);   /* Advisory */
  --premium-strong:   var(--gold-600);
  --premium-soft:     var(--gold-50);

  /* Text */
  --text-strong:      var(--navy-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-faint:       var(--gray-400);
  --text-on-brand:    #EAF1FB;
  --text-on-accent:   var(--white);
  --text-link:        var(--teal-600);

  /* Surfaces */
  --surface-page:     var(--gray-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--gray-100);
  --surface-brand:    var(--navy-900);
  --surface-brand-2:  var(--navy-800);
  --surface-inverse:  var(--navy-950);

  /* Borders / lines */
  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-brand:     color-mix(in srgb, var(--navy-300) 40%, transparent);
  --ring:             color-mix(in srgb, var(--teal-500) 45%, transparent);

  /* Focus */
  --focus-ring:       0 0 0 3px var(--ring);
}


/* ====================================================================
   design-system/tokens/typography.css
   ==================================================================== */
/* ============================================================
   Ascend - Typography tokens
   ============================================================ */

:root {
  /* ---- Families (canonical: Plus Jakarta Sans + Inter) ---- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* No serif/mono in the brand. Aliases kept for back-compat; eyebrows are
     display-cased Plus Jakarta Sans, numerics are Inter with tabular figures. */
  --font-serif: var(--font-display);
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  /* ---- Type scale (1.250 major-third, 16px base) ---- */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.625rem;  /* 58 */
  --text-5xl:  4.5rem;    /* 72 */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.14em; /* mono eyebrows, all-caps */

  /* ---- Semantic roles ---- */
  --display-font: var(--font-display);
  --display-weight: var(--fw-black);
  --display-tracking: var(--tracking-tight);

  --heading-font: var(--font-display);
  --heading-weight: var(--fw-bold);

  --body-font: var(--font-sans);
  --eyebrow-font: var(--font-display);  /* uppercase + tracked, per brand wordmark */
  --quote-font: var(--font-display);
  --numeric-font: var(--font-sans);     /* Inter, with font-feature-settings: 'tnum' */
}


/* ====================================================================
   design-system/tokens/spacing.css
   ==================================================================== */
/* ============================================================
   Ascend - Spacing & radius tokens (4px base grid)
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* Layout */
  --container:    1200px;
  --container-wide: 1320px;
  --gutter:       max(1.25rem, 4vw); /* @kind spacing */
  --section-y:    var(--space-11);

  /* Radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Borders */
  --border-w: 1px;
  --border-w-2: 1.5px;
}


/* ====================================================================
   design-system/tokens/elevation.css
   ==================================================================== */
/* ============================================================
   Ascend - Elevation (cool, navy-tinted soft shadows)
   ============================================================ */

:root {
  --shadow-xs: 0 1px 2px rgba(11, 29, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 29, 58, 0.08), 0 1px 2px rgba(11, 29, 58, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 29, 58, 0.08), 0 2px 4px rgba(11, 29, 58, 0.05);
  --shadow-lg: 0 12px 28px rgba(11, 29, 58, 0.12), 0 4px 8px rgba(11, 29, 58, 0.06);
  --shadow-xl: 0 24px 56px rgba(11, 29, 58, 0.16), 0 8px 16px rgba(11, 29, 58, 0.07);
  --shadow-accent: 0 10px 24px rgba(15, 158, 132, 0.25);
  --shadow-brand:  0 16px 40px rgba(11, 29, 58, 0.28);

  /* Inset / hairline */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* ====================================================================
   design-system/tokens/motion.css
   ==================================================================== */
/* ============================================================
   Ascend - Motion tokens
   Confident, smooth. Gentle rise + fade. No bounce.
   ============================================================ */

:root {
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --dur-slower: 560ms; /* @kind other */

  --hover-lift: -2px; /* @kind other */
  --press-scale: 0.98; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
  }
}


/* ====================================================================
   design-system/tokens/base.css
   ==================================================================== */
/* ============================================================
   Ascend - Base reset + helpers (kept minimal)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }

img { max-width: 100%; display: block; }

/* Eyebrow label - display font, uppercase + tracked (per brand wordmark) */
.ascend-eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Tabular figures for any financial number */
.ascend-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::selection { background: var(--teal-200); color: var(--navy-900); }


/* ====================================================================
   design/styles.css
   ==================================================================== */
/* ============================================================
   Ascend Solutions - Homepage styles
   Built on the Ascend Design System tokens (navy/teal/gold).
   ============================================================ */

:root{
  --nav-h: 76px;
  --ease: var(--ease-out);
}

html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
body{ overflow-x:hidden; background:var(--surface-page); }
.wrap{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Type helpers ---------- */
.eyebrow{ font-family:var(--eyebrow-font); font-size:var(--text-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent-strong); margin:0 0 var(--space-4); }
.eyebrow--onbrand{ color:var(--teal-300); }
.grad-teal{ background:linear-gradient(120deg,var(--teal-400),var(--teal-300)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-gold{ background:linear-gradient(120deg,var(--gold-500),var(--gold-300)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-sub{ font-size:var(--text-md); color:var(--text-muted); max-width:54ch; line-height:var(--leading-relaxed); }
.section-sub--light{ color:rgba(234,241,251,.78); }

h2{ font-size:clamp(2rem, 4vw, var(--text-3xl)); letter-spacing:var(--tracking-tight); }
h3{ font-size:var(--text-lg); }

/* ---------- Buttons ---------- */
.btn{ --b:0; display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-display);
  font-weight:var(--fw-bold); font-size:var(--text-sm); border-radius:var(--radius-pill); padding:.85em 1.5em;
  cursor:pointer; border:1.5px solid transparent; text-decoration:none; transition:transform var(--dur-base) var(--ease),
  box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); white-space:nowrap; }
.btn:hover{ transform:translateY(var(--hover-lift)); }
.btn:active{ transform:scale(var(--press-scale)); }
.btn--sm{ padding:.6em 1.1em; }
.btn--lg{ padding:1em 1.9em; font-size:var(--text-base); }
.btn--primary{ background:linear-gradient(120deg,var(--teal-600),var(--teal-400)); color:#fff; box-shadow:var(--shadow-accent); }
.btn--primary:hover{ box-shadow:0 16px 34px rgba(15,158,132,.36); }
.btn--gold{ background:linear-gradient(120deg,var(--gold-600),var(--gold-400)); color:var(--navy-950); box-shadow:0 10px 24px rgba(212,168,67,.32); }
.btn--ghost{ background:transparent; border-color:color-mix(in srgb, var(--teal-300) 50%, transparent); color:var(--teal-200); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--teal-300); }
.btn .arr{ transition:transform var(--dur-base) var(--ease); }
.btn:hover .arr{ transform:translateY(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  transition:background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), backdrop-filter var(--dur-slow); }
.nav__inner{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--space-6); }
.nav__brand{ display:flex; align-items:center; }
.nav__logo{ height:34px; width:auto; display:block; }
/* Inline-SVG wordmark: uses the page font, colour swaps for the scrolled nav. */
.nav__logo-name{ font-family:var(--font-display); fill:#fff; }
.nav__logo-sub{ font-family:var(--font-display); fill:#0FA3B1; }
.nav__links{ display:flex; gap:var(--space-6); margin-left:auto; }
.nav__links a{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-sm);
  color:rgba(234,241,251,.82); position:relative; padding:.3em 0; white-space:nowrap; transition:color var(--dur-base); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--teal-400); transition:width var(--dur-base) var(--ease); }
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; }

/* primary-nav dropdowns (Services / CFO Advisory / Software) so the immersive
   header exposes the same sub-pages as the classic header. Dark panel works
   over both the transparent hero and the scrolled white nav. */
.nav__item--has-children{ position:relative; display:flex; align-items:center; }
.nav__link--parent{ display:inline-flex; align-items:center; gap:.32em; }
.nav__caret{ transition:transform var(--dur-base) var(--ease); opacity:.7; }
.nav__item--has-children:hover .nav__caret,
.nav__item--has-children:focus-within .nav__caret{ transform:rotate(180deg); }
.nav__item--has-children::after{ content:""; position:absolute; top:100%; left:0; right:0; height:14px; } /* hover bridge over the gap */
.nav__dropdown{ position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:232px; margin:0; padding:.5rem;
  list-style:none; background:var(--navy-900,#0B1D3A); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); z-index:60; }
.nav__item--has-children:hover .nav__dropdown,
.nav__item--has-children:focus-within .nav__dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,4px); }
.nav__dropdown li{ margin:0; }
.nav__links .nav__dropdown a{ display:block; padding:.6em .85em; border-radius:9px; color:rgba(234,241,251,.82); }
.nav__links .nav__dropdown a::after{ display:none; } /* cancel underline-grow */
.nav__links .nav__dropdown a:hover{ background:rgba(20,196,212,.12); color:#fff; }
.nav__links .nav__dropdown a[aria-current="page"]{ color:var(--teal-300); }
/* When the nav scrolls to its white state, a dark dropdown reads as a heavy
   block over bright sections (e.g. the ascent summit). Switch it to a light
   panel that matches the white nav bar. */
.nav.is-stuck .nav__dropdown{ background:#fff; border-color:rgba(11,29,58,.08); box-shadow:0 20px 44px -18px rgba(11,29,58,.28); }
.nav.is-stuck .nav__links .nav__dropdown a{ color:var(--navy-800,#162B52); }
.nav.is-stuck .nav__links .nav__dropdown a:hover{ background:rgba(15,163,177,.12); color:var(--navy-900,#0B1D3A); }
.nav.is-stuck .nav__links .nav__dropdown a[aria-current="page"]{ color:var(--teal-600,#0B7F8A); }

/* scrolled state */
.nav.is-stuck{ background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px); box-shadow:var(--shadow-sm); }
.nav.is-stuck .nav__logo-name{ fill:var(--navy-900); }
.nav.is-stuck .nav__links a{ color:var(--text-body); }
.nav.is-stuck .nav__links a:hover{ color:var(--navy-900); }

/* burger */
.nav__burger{ display:none; margin-left:auto; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s var(--ease); }
.nav.is-stuck .nav__burger span{ background:var(--navy-900); }
.nav__mobile{ position:fixed; top:var(--nav-h); left:0; right:0; background:var(--navy-900); padding:var(--space-5) var(--gutter) var(--space-7);
  display:flex; flex-direction:column; gap:var(--space-4); z-index:99; box-shadow:var(--shadow-lg); }
.nav__mobile a{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:rgba(234,241,251,.9); font-size:var(--text-md); }
.nav__mobile[hidden]{ display:none; }
/* mobile dropdown groups (native <details> accordion, no JS) */
.nav__mobile-group{ display:flex; flex-direction:column; }
.nav__mobile-group summary{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:var(--fw-semibold); color:rgba(234,241,251,.9); font-size:var(--text-md); padding:.15em 0; }
.nav__mobile-group summary::-webkit-details-marker{ display:none; }
.nav__mobile-group .nav__caret{ transition:transform var(--dur-base) var(--ease); opacity:.7; }
.nav__mobile-group[open] > summary .nav__caret{ transform:rotate(180deg); }
.nav__mobile .nav__mobile-child{ display:block; padding:.45em 0 .45em 1rem; font-size:var(--text-sm); color:rgba(234,241,251,.7); }
.nav__mobile .nav__mobile-child--all{ color:rgba(234,241,251,.92); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-10); background:var(--navy-900); color:#fff; isolation:isolate; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__mesh{ position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(15,163,177,.30), transparent 60%),
    radial-gradient(48% 44% at 88% 8%, rgba(212,168,67,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(11,127,138,.30), transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 45%, var(--navy-800));
  animation:meshDrift 18s ease-in-out infinite alternate; }
@keyframes meshDrift{ from{ transform:translate3d(0,0,0) scale(1.02);} to{ transform:translate3d(-2%,1.5%,0) scale(1.06);} }
.hero__range{ position:absolute; inset:0; width:100%; height:100%; }
.range{ transition:transform .15s linear; }
.range--far{ fill:var(--navy-700); opacity:.5; }
.range--mid{ fill:var(--navy-600); opacity:.6; }
.range--gold{ opacity:.9; filter:drop-shadow(0 -6px 24px rgba(212,168,67,.25)); }
.range--near{ filter:drop-shadow(0 -10px 40px rgba(15,196,212,.35)); }
/* draw-in on load */
.range{ transform-origin:50% 100%; }
.hero.loaded .range--near{ animation:peakRise 1.1s var(--ease) both .15s; }
.hero.loaded .range--gold{ animation:peakRise 1.1s var(--ease) both .05s; }
@keyframes peakRise{ from{ transform:translateY(70px) scaleY(.6); opacity:0;} to{ transform:translateY(0) scaleY(1); opacity:.9;} }
.hero__stars{ position:absolute; inset:0; }
.hero__stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.5; animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.15;} 50%{opacity:.7;} }

.hero__content{ position:relative; width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }
.hero__title{ font-size:clamp(2.6rem, 6.6vw, var(--text-5xl)); line-height:1.02; letter-spacing:var(--tracking-tight);
  color:#fff; font-weight:var(--fw-black); max-width:16ch; }
.hero__sub{ margin-top:var(--space-5); font-size:clamp(1.05rem,1.6vw,var(--text-lg)); color:rgba(234,241,251,.8);
  max-width:60ch; line-height:var(--leading-relaxed); }
.hero__cta{ margin-top:var(--space-7); display:flex; gap:var(--space-4); flex-wrap:wrap; }
.hero__creds{ list-style:none; margin:var(--space-7) 0 0; padding:0; display:flex; gap:var(--space-6); flex-wrap:wrap;
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-sm); color:rgba(234,241,251,.75); }
.hero__creds li{ display:flex; align-items:center; gap:.5em; }
.tick{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(15,196,212,.18); color:var(--teal-300); font-size:11px; }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:8px; color:rgba(234,241,251,.6); font-family:var(--font-display); font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; }
.hero__scroll-dot{ width:24px; height:38px; border:1.5px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
.hero__scroll-dot::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px;
  border-radius:2px; background:var(--teal-300); animation:scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 80%{opacity:0; transform:translate(-50%,12px);} 100%{opacity:0;} }

/* ============================================================
   INTRO BAND
   ============================================================ */
.band--intro{ background:var(--surface-card); padding:var(--space-11) 0; }
.lead{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(1.5rem,3.2vw,var(--text-2xl));
  line-height:var(--leading-snug); letter-spacing:var(--tracking-snug); color:var(--text-strong); max-width:24ch; }
.lead__muted{ color:var(--text-muted); font-weight:var(--fw-medium); }

/* ============================================================
   THE ASCENT
   ============================================================ */
.ascent{ background:linear-gradient(180deg, var(--navy-950), var(--navy-900)); color:#fff; padding:var(--section-y) 0; position:relative; overflow:hidden; }
.ascent::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 40% at 80% 0%, rgba(15,163,177,.16), transparent 60%); pointer-events:none; }
.ascent__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-9); }
.ascent__head h2{ color:#fff; }
.ascent__head .section-sub{ color:rgba(234,241,251,.72); }
.ascent__grid{ display:grid; grid-template-columns:minmax(280px,1fr) 1.3fr; gap:var(--space-8); align-items:start; }

.stages{ list-style:none; margin:0; padding:0; position:relative; }
.stages__path{ position:absolute; left:21px; top:14px; bottom:14px; width:4px; height:auto; overflow:visible; }
.stages__path path{ fill:none; stroke-width:2.4; vector-effect:non-scaling-stroke; }
#stagePath{ stroke:rgba(255,255,255,.14); }
#stagePathFill{ stroke:url(#peakTeal); stroke-dasharray:1 1; }
.stage{ position:relative; display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-4) var(--space-4) 0;
  cursor:pointer; border-radius:var(--radius-lg); transition:background var(--dur-base) var(--ease); outline:none; }
.stage:hover{ background:rgba(255,255,255,.03); }
.stage:focus-visible{ box-shadow:var(--focus-ring); }
.stage__alt{ flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:50%; z-index:2;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-sm); color:rgba(234,241,251,.6);
  background:var(--navy-800); border:1.5px solid rgba(255,255,255,.14); transition:.3s var(--ease); }
.stage__body{ display:flex; flex-direction:column; gap:2px; }
.stage__name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-md); color:#fff; }
.stage__svc{ font-size:var(--text-sm); color:rgba(234,241,251,.6); }
.stage.is-active{ background:rgba(255,255,255,.05); }
.stage.is-active .stage__alt{ background:linear-gradient(120deg,var(--teal-600),var(--teal-400)); color:#fff; border-color:transparent; box-shadow:var(--shadow-accent); transform:scale(1.06); }
.stage.is-active .stage__svc{ color:var(--teal-200); }
.stage--summit.is-active .stage__alt{ background:linear-gradient(120deg,var(--gold-600),var(--gold-400)); color:var(--navy-950); box-shadow:0 10px 24px rgba(212,168,67,.3); }
.stage--summit.is-active .stage__svc{ color:var(--gold-300); }

/* panel */
.panel{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl);
  padding:var(--space-8); min-height:420px; position:relative; overflow:hidden; }
.panel__inner{ animation:panelIn .5s var(--ease) both; }
@keyframes panelIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.panel__alt{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-4xl); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.18); margin-bottom:var(--space-4); }
.panel__tag{ display:inline-block; font-family:var(--font-display); font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--teal-300); background:rgba(15,196,212,.12); padding:.4em .8em; border-radius:var(--radius-pill); margin-bottom:var(--space-4); }
.panel--gold .panel__tag{ color:var(--gold-300); background:rgba(212,168,67,.14); }
.panel--gold .panel__alt{ -webkit-text-stroke-color:rgba(232,196,106,.3); }
.panel h3{ font-size:var(--text-2xl); color:#fff; margin-bottom:var(--space-3); }
.panel__desc{ color:rgba(234,241,251,.78); font-size:var(--text-md); line-height:var(--leading-relaxed); max-width:50ch; margin-bottom:var(--space-6); }
.panel__feats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.panel__feats li{ display:flex; gap:.7em; align-items:flex-start; font-size:var(--text-sm); color:rgba(234,241,251,.82); line-height:1.45; }
.panel__feats .pk{ flex:0 0 auto; margin-top:2px; color:var(--teal-300); }
.panel--gold .panel__feats .pk{ color:var(--gold-300); }
.panel__viz{ position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; opacity:.12; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--surface-card); padding:var(--space-10) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
.stat{ text-align:center; padding:var(--space-5) var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface-card); box-shadow:var(--shadow-xs); }
.stat__num{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:clamp(2.2rem,4vw,var(--text-3xl));
  letter-spacing:var(--tracking-tight); background:linear-gradient(120deg,var(--navy-900),var(--teal-600)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.stat__label{ margin-top:var(--space-2); font-size:var(--text-sm); color:var(--text-muted); }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services{ background:var(--surface-page); padding:var(--section-y) 0; }
.services__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.card{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-7);
  display:flex; flex-direction:column; gap:var(--space-3); transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--teal-500),var(--teal-300)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.card:hover::before{ transform:scaleX(1); }
.card--gold::before{ background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); }
.card__ic{ width:52px; height:52px; }
.card h3{ font-size:var(--text-lg); color:var(--text-strong); }
.card p{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--leading-relaxed); }
.card__tag{ margin-top:auto; font-family:var(--font-display); font-size:var(--text-2xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent-strong); }
.card--gold .card__tag{ color:var(--premium-strong); }

/* ============================================================
   ADVISORY
   ============================================================ */
.advisory{ position:relative; background:var(--navy-950); color:#fff; padding:var(--section-y) 0; overflow:hidden; isolation:isolate; }
.advisory__bg{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 60% at 85% 20%, rgba(212,168,67,.22), transparent 60%),
            radial-gradient(60% 50% at 0% 100%, rgba(184,144,46,.16), transparent 60%),
            linear-gradient(180deg,var(--navy-950),var(--navy-900)); }
.advisory__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-9); align-items:center; }
.advisory__logo{ height:42px; width:auto; margin-bottom:var(--space-5); opacity:1; }
.advisory h2{ color:#fff; max-width:18ch; }
.advisory__list{ list-style:none; margin:var(--space-6) 0; padding:0; display:grid; gap:var(--space-3); }
.advisory__list li{ position:relative; padding-left:1.7em; color:rgba(234,241,251,.85); font-size:var(--text-base); }
.advisory__list li::before{ content:"▲"; position:absolute; left:0; top:.1em; color:var(--gold-400); font-size:.7em; }
.advisory__viz{ display:flex; justify-content:center; }
.ph--dash{ width:100%; aspect-ratio:4/3.2; border-radius:var(--radius-xl); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(212,168,67,.25); box-shadow:var(--shadow-xl); position:relative; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-5); overflow:hidden; }
.ph__tag{ font-family:var(--font-display); font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:rgba(232,196,106,.7); }
.ph__chart{ display:flex; align-items:flex-end; gap:8px; height:46%; }
.ph__chart span{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--gold-400),rgba(212,168,67,.25)); }
.ph__chart span:nth-child(1){height:40%}.ph__chart span:nth-child(2){height:62%}.ph__chart span:nth-child(3){height:48%}
.ph__chart span:nth-child(4){height:78%}.ph__chart span:nth-child(5){height:66%}.ph__chart span:nth-child(6){height:92%}.ph__chart span:nth-child(7){height:74%}
.ph__rows{ display:grid; gap:10px; }
.ph__rows i{ height:10px; border-radius:5px; background:rgba(255,255,255,.1); }
.ph__rows i:nth-child(2){ width:80%; } .ph__rows i:nth-child(3){ width:60%; }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ background:var(--surface-card); padding:var(--section-y) 0; }
.process__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.step{ position:relative; padding:var(--space-6); border-radius:var(--radius-lg); background:var(--surface-page); border:1px solid var(--border); }
.step__n{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-2xl); color:transparent; -webkit-text-stroke:1.5px var(--teal-400); display:block; margin-bottom:var(--space-3); }
.step h3{ color:var(--text-strong); margin-bottom:var(--space-2); }
.step p{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--leading-relaxed); }

/* ============================================================
   PROOF
   ============================================================ */
.proof{ background:var(--surface-page); padding:var(--section-y) 0; }
.proof__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-bottom:var(--space-9); }
.why{ padding:var(--space-6); border-left:2px solid var(--teal-400); }
.why h3{ color:var(--text-strong); margin-bottom:var(--space-2); }
.why p{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--leading-relaxed); }
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.quote{ margin:0; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-7); box-shadow:var(--shadow-sm); }
.quote blockquote{ margin:0 0 var(--space-5); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-lg); line-height:var(--leading-snug); color:var(--text-strong); letter-spacing:var(--tracking-snug); }
.quote figcaption{ display:flex; flex-direction:column; gap:2px; }
.quote__who{ font-weight:var(--fw-bold); color:var(--navy-800); font-family:var(--font-display); font-size:var(--text-sm); }
.quote__co{ font-size:var(--text-xs); color:var(--text-muted); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; background:var(--navy-900); color:#fff; padding:var(--section-y) 0; overflow:hidden; isolation:isolate; }
.cta__bg{ position:absolute; inset:0; z-index:-1; }
.cta__range{ position:absolute; inset:0; width:100%; height:100%; }
.cta__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.cta__title{ color:#fff; font-size:clamp(2.2rem,5vw,var(--text-4xl)); letter-spacing:var(--tracking-tight); }
.cta__sub{ color:rgba(234,241,251,.78); max-width:48ch; font-size:var(--text-md); }
/* Visible confirmation of the service a visitor arrived with, so a pre-tagged
   booking never reads as a generic enquiry. */
.cta__chosen{ margin-top:var(--space-4); display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius:var(--radius-pill); background:rgba(20,196,212,.12);
  border:1px solid rgba(20,196,212,.35); color:var(--teal-300);
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-sm); }
.cta__chosen::before{ content:"\2713"; font-size:.9em; }
.cta__chosen[hidden]{ display:none; }
.cta__form{ margin-top:var(--space-5); display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; width:100%; max-width:720px; }
.cta__form input{ flex:1 1 200px; padding:1em 1.2em; border-radius:var(--radius-pill); border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; font-family:var(--font-sans); font-size:var(--text-base); transition:.2s var(--ease); }
.cta__form input::placeholder{ color:rgba(234,241,251,.5); }
.cta__form input:focus{ outline:none; border-color:var(--teal-400); background:rgba(255,255,255,.1); box-shadow:var(--focus-ring); }
.cta__note{ flex-basis:100%; color:var(--teal-300); font-size:var(--text-sm); margin-top:var(--space-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-950); color:rgba(234,241,251,.7); padding:var(--space-10) 0 var(--space-6); }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-7); padding-bottom:var(--space-8); border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand img{ height:34px; width:auto; margin-bottom:var(--space-4); }
.footer__brand p{ font-size:var(--text-sm); max-width:30ch; line-height:var(--leading-relaxed); }
.footer__creds{ margin-top:var(--space-3) !important; color:var(--teal-300) !important; font-family:var(--font-display); font-size:var(--text-xs) !important; letter-spacing:.04em; }
.footer__col h4{ color:#fff; font-size:var(--text-sm); font-family:var(--font-display); margin-bottom:var(--space-4); }
.footer__col a{ display:block; color:rgba(234,241,251,.7); font-size:var(--text-sm); padding:.35em 0; transition:color var(--dur-base); }
.footer__col a:hover{ color:var(--teal-300); }
.footer__col .btn--ghost{ margin-top:var(--space-2); }
.footer__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding-top:var(--space-5); font-size:var(--text-xs); color:rgba(234,241,251,.45); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .nav__links, .nav__actions{ display:none; }
  .nav__burger{ display:flex; }
  .ascent__grid{ grid-template-columns:1fr; gap:var(--space-7); }
  .stages__path{ display:none; }
  .advisory__inner{ grid-template-columns:1fr; gap:var(--space-7); }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .process__grid{ grid-template-columns:repeat(2,1fr); }
  .proof__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  :root{ --section-y:var(--space-9); }
  .cards, .quotes, .stats__grid, .process__grid, .proof__grid{ grid-template-columns:1fr; }
  .panel{ padding:var(--space-6); min-height:0; }
  .panel__feats{ grid-template-columns:1fr; }
  .hero__creds{ gap:var(--space-4); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .btn--lg{ padding:.9em 1.5em; }
}


/* ====================================================================
   design/polish.css
   ==================================================================== */
/* ============================================================
   Ascend - Alpine "winner" polish layer (loads after styles.css)
   Cohesion + finish: seam into stats, framed stats, a convincing
   Advisory dashboard, scroll-progress, small premium touches.
   ============================================================ */

/* ---- top scroll-progress bar ---- */
.scrollprog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; pointer-events:none; background:transparent; }
.scrollprog__bar{ height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-300)); box-shadow:0 0 10px rgba(15,196,212,.5); }

/* ---- seam: the climb resolves into a daylit numbers band ---- */
.stats{ background:linear-gradient(180deg, #E7EEFA 0%, var(--surface-card) 26%) !important; padding-top:var(--space-11) !important; }
.stats__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.stats__head h2{ font-size:clamp(1.8rem,3.4vw,var(--text-2xl)); letter-spacing:var(--tracking-tight); }
.stat{ transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }

/* ---- Advisory: a convincing mini dashboard (replaces the bare placeholder) ---- */
.dash{ width:100%; border-radius:var(--radius-xl); padding:var(--space-6);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(212,168,67,.28); box-shadow:var(--shadow-xl); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--space-5); }
.dash::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 80% 0%, rgba(212,168,67,.14), transparent 60%); }
.dash__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); position:relative; }
.dash__k{ display:block; font-family:var(--font-display); font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:rgba(234,241,251,.6); }
.dash__v{ display:block; margin-top:6px; font-family:var(--font-display); font-weight:var(--fw-black);
  font-size:var(--text-2xl); letter-spacing:var(--tracking-tight); color:#fff; font-variant-numeric:tabular-nums; }
.dash__trend{ flex:0 0 auto; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-sm);
  color:var(--success-500); background:rgba(22,163,127,.16); border:1px solid rgba(22,163,127,.3);
  padding:.35em .7em; border-radius:var(--radius-pill); white-space:nowrap; }
.dash__chart{ position:relative; height:120px; }
.dash__chart svg{ width:100%; height:100%; display:block; overflow:visible; }
.dash__grid{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.dash__legend{ display:grid; gap:10px; position:relative; }
.dash__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.08); }
.dash__row:last-child{ border-bottom:0; padding-bottom:0; }
.dash__row span{ font-size:var(--text-sm); color:rgba(234,241,251,.72); display:inline-flex; align-items:center; gap:.6em; }
.dash__row span i{ width:8px; height:8px; border-radius:2px; background:var(--gold-400); display:inline-block; }
.dash__row span i.teal{ background:var(--teal-400); }
.dash__row b{ font-family:var(--font-display); font-weight:var(--fw-bold); color:#fff; font-variant-numeric:tabular-nums; }
.dash__tag{ position:absolute; top:var(--space-5); right:var(--space-6); font-family:var(--font-display);
  font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:rgba(232,196,106,.55); }
.dash__foot{ font-size:var(--text-2xs); color:rgba(234,241,251,.4); letter-spacing:.04em; }

/* a touch more lift on service cards + advisory CTA */
.card:hover .card__ic{ transform:translateY(-2px) scale(1.04); transition:transform var(--dur-base) var(--ease-out); }

/* ---- intro band: make the interlude feel intentional ---- */
.band--intro{ position:relative; }
.band--intro .lead{ max-width:30ch; }
.band--intro .wrap::before{ content:""; display:block; width:46px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-300)); margin-bottom:var(--space-5); }

@media (max-width: 600px){
  .dash__chart{ height:96px; }
}


/* ====================================================================
   design/refine.css
   ==================================================================== */
/* ============================================================
   Ascend - Refinement layer (loads last)
   Mobile/responsive polish · micro-interactions · accessibility.
   ============================================================ */

/* ---------------- Accessibility ---------------- */
.skiplink{ position:fixed; top:-60px; left:12px; z-index:300; background:var(--teal-500); color:#fff;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-sm);
  padding:.7em 1.1em; border-radius:var(--radius-md); transition:top var(--dur-base) var(--ease-out); }
.skiplink:focus{ top:12px; outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.6); }

/* ghost button variant for light backgrounds (shared by home + services) */
.btn--ghost--dark{ background:transparent; border-color:var(--border-strong); color:var(--text-body); }
.btn--ghost--dark:hover{ background:var(--surface-sunken); border-color:var(--teal-400); color:var(--navy-900); }
.services__more{ display:flex; justify-content:center; margin-top:var(--space-8); }

/* Consistent, visible focus rings everywhere (keyboard only) */
a:focus-visible, button:focus-visible, input:focus-visible,
.stage:focus-visible, .fa-chap a:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:var(--radius-sm);
}
.btn:focus-visible{ box-shadow:0 0 0 3px var(--ring), var(--shadow-accent); }
/* on dark sections, make the ring read against navy */
.hero a:focus-visible, .ascent a:focus-visible, .advisory a:focus-visible, .cta a:focus-visible,
.cta input:focus-visible, .footer a:focus-visible, .nav a:focus-visible{
  box-shadow:0 0 0 3px rgba(53,208,222,.65);
}

/* ---------------- Micro-interactions ---------------- */
/* nav links: animated underline already exists; add subtle lift to brand */
.nav__brand{ transition:transform var(--dur-base) var(--ease-out); }
.nav__brand:hover{ transform:translateY(-1px); }

/* credential ticks gently pulse-in on hover of the row */
.hero__creds li{ transition:color var(--dur-base) var(--ease-out); }
.hero__creds li:hover{ color:#fff; }
.hero__creds li:hover .tick{ transform:scale(1.12); }
.tick{ transition:transform var(--dur-base) var(--ease-spring, var(--ease-out)); }

/* stage rows: slide the active marker, nudge on hover */
.stage{ transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.stage:hover{ transform:translateX(3px); }

/* service cards: icon + tag shift, link-like affordance */
.card{ cursor:default; }
.card__tag{ transition:color var(--dur-base) var(--ease-out), letter-spacing var(--dur-base) var(--ease-out); }
.card:hover .card__tag{ letter-spacing:calc(var(--tracking-wide) + .02em); }

/* process steps lift slightly */
.step{ transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.step:hover .step__n{ -webkit-text-stroke-color:var(--teal-500); }

/* why cells: border grows on hover */
.why{ transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.why:hover{ border-left-width:3px; transform:translateX(2px); }

/* quotes lift */
.quote{ transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* footer links shift right on hover */
.footer__col a{ transition:color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.footer__col a:hover{ transform:translateX(3px); }

/* form inputs: smoother focus float */
.cta__form input{ transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.cta__form input:focus{ transform:translateY(-1px); }

/* ---------------- Tablet ---------------- */
@media (max-width: 980px){
  .hero__title{ max-width:18ch; }
  .advisory__inner{ gap:var(--space-7); }
}

/* ---------------- Mobile (≤640px) ---------------- */
@media (max-width: 640px){
  :root{ --gutter:1.25rem; }

  /* Nav: keep the CTA reachable but compact; logo a touch smaller */
  .nav{ height:64px; }
  .nav__logo{ height:28px; }
  .nav__burger{ padding:10px; min-width:44px; min-height:44px; align-items:center; }

  .nav__mobile{ top:64px; gap:var(--space-2); padding-top:var(--space-4); }
  .nav__mobile a{ padding:.75em 0; font-size:var(--text-lg); }
  .nav__mobile .btn{ margin-top:var(--space-3); justify-content:center; }

  /* Hero: comfortable rhythm, full-width CTAs that meet 44px */
  .hero{ padding-top:calc(64px + var(--space-7)); padding-bottom:var(--space-9); }
  .hero__title{ font-size:clamp(2.3rem,10vw,3rem); line-height:1.04; }
  .hero__sub{ font-size:1.0625rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:var(--space-3); width:100%; }
  .hero__cta .btn{ width:100%; min-height:48px; }
  .hero__creds{ gap:var(--space-3) var(--space-5); font-size:var(--text-xs); }
  .hero__scroll{ display:none; }

  /* Climb: give chapter text room, drop it lower, smaller head */
  .fa-head{ top:12vh; }
  .fa-head h2{ font-size:clamp(1.7rem,7.4vw,2.2rem); }
  .fa-head__sub{ font-size:var(--text-base); }
  .fa-chap{ bottom:9vh; }
  .fa-chap__h{ font-size:clamp(2rem,9.4vw,2.8rem); line-height:1.04; }
  .fa-chap__sub{ font-size:var(--text-base); }
  .fa-summit__line{ font-size:clamp(1.7rem,8vw,2.4rem); }

  /* Stats: 2-up reads better than 1-up on phones */
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
  .stat{ padding:var(--space-4) var(--space-3); }
  .stat__num{ font-size:clamp(1.9rem,9vw,2.4rem); }
  .stat__label{ font-size:var(--text-xs); }

  /* Sections: tighten vertical rhythm */
  .services__head, .process__head, .proof__head, .stats__head{ margin-bottom:var(--space-6); }
  .card{ padding:var(--space-6); }

  /* Advisory: dashboard breathes */
  .advisory__logo{ height:36px; }
  .dash{ padding:var(--space-5); }

  /* CTA form: stacked, big tap targets */
  .cta__form{ gap:var(--space-3); }
  .cta__form input{ flex-basis:100%; min-height:48px; }
  .cta__form .btn{ width:100%; min-height:50px; }

  /* Footer: brand on top, links 2-up below */
  .footer__inner{ grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-5); }
  .footer__brand{ grid-column:1 / -1; }
  .footer__base{ flex-direction:column; align-items:flex-start; gap:var(--space-2); }
}

/* Very small phones */
@media (max-width: 380px){
  .stats__grid{ grid-template-columns:1fr; }
  .hero__creds{ gap:var(--space-2) var(--space-4); }
}

/* Coarse-pointer: ensure tap targets & disable hover-lift jitter */
@media (hover: none){
  .card:hover, .step:hover, .quote:hover, .stat:hover{ transform:none; }
  .nav__links a, .footer__col a{ padding-block:.5em; }
}

/* ---------------- Trust strip (accreditations + platforms) ---------------- */
.trust{ margin-top:var(--space-9); padding:var(--space-8); border-radius:var(--radius-xl);
  background:linear-gradient(180deg, var(--navy-50), var(--surface-card) 60%); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:var(--space-7); }

/* accreditation badge cards - the authority signal, led first */
.trust__creds{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.cred{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5);
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.cred:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-300); }
.cred__seal{ flex:0 0 auto; width:56px; height:56px; display:grid; place-items:center; border-radius:var(--radius-md);
  background:var(--teal-50); border:1px solid var(--teal-100); }
.cred__name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-md); color:var(--text-strong); margin:0; }
.cred__desc{ margin:.25em 0 0; font-size:var(--text-sm); color:var(--text-muted); line-height:1.4; }

/* platforms - supporting integration row with monogram tiles */
.trust__platforms{ padding-top:var(--space-6); border-top:1px solid var(--border); }
.trust__label{ font-family:var(--eyebrow-font); font-size:var(--text-2xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-4); }
.trust__marks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.pmark{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-sm); color:var(--text-body); padding:.45em .9em .45em .45em; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface-card);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pmark:hover{ border-color:var(--teal-400); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.pmark__tile{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-600)); color:#fff;
  font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.02em; }
.pmark--more{ color:var(--text-muted); font-weight:var(--fw-semibold); border-style:dashed; padding-inline:.9em; }
.pmark--more:hover{ color:var(--navy-800); }

@media (max-width: 880px){
  .trust__creds{ grid-template-columns:1fr; gap:var(--space-3); }
  .cred{ padding:var(--space-4); }
}
@media (max-width: 640px){
  .trust{ margin-top:var(--space-7); padding:var(--space-6); gap:var(--space-6); }
}

/* ---------------- Reduced motion: belt & braces ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .hero__mesh{ animation:none !important; }
  .fa-summit__mark{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}


/* ====================================================================
   local additions (immersive homepage)
   ==================================================================== */

:root{
  /* Advisory gold aligned to theme.ts / style.css brand gold (#C6A35B) */
  --gold-500: #C6A35B; /* theme --color-gold (was #D4A843) */
  --gold-400: #D4B878; /* theme --color-gold-light (was #E8C46A) */
  --gold-300: #E0CBA0; /* lighter tint (was #EFD391) */
  --gold-600: #B8902E; /* theme --color-gold-dark (unchanged) */
}
.stats__pending{ text-align:center; margin-top:var(--space-5); color:var(--text-muted); font-size:var(--text-sm); }

/* Funnel integration: service cards are links into their service pages. */
.card{ text-decoration:none; color:inherit; cursor:pointer; }
.card__more{ margin-top:var(--space-3); font-family:var(--font-display); font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--teal-500); }
.card--gold .card__more{ color:var(--premium-strong); }
.card:hover .card__more{ text-decoration:underline; }

/* "What can we help with?" select matches the booking-form inputs. */
.cta__select{ flex:1 1 200px; padding:1em 1.2em; border-radius:var(--radius-pill); border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.cta__select:focus{ outline:none; border-color:var(--teal-400); background:rgba(255,255,255,.1); box-shadow:var(--focus-ring); }
.cta__select option{ color:#0B1D3A; }
.services__more{ display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }