/* ============================================================
   KWO — kwo.css  ·  "THE ASCENT"  (v3, 2026-06-29)
   Ken Wee Organisation — recruitment-first site for young
   financial planners (agency unit of HSBC Life).
   Direction: dark-dominant navy base + flame→amber energy.
   Decisively NOT the failed cream/serif look, and NOT the
   acid-green-on-black AI default.
     Display  Clash Display · Body  Inter · Utility  JetBrains Mono
   ACCENT RULE: amber/flame = the CANDIDATE action ONLY.
   Client links = ghost / text, never accent.
   ============================================================ */

/* ── Tokens ── */
:root {
  /* surfaces */
  --ink:      #0B1B33;   /* deep navy — primary canvas (brand-anchored) */
  --ink-2:    #13294B;   /* raised navy — cards / surfaces on dark */
  --ink-3:    #1B355C;   /* hover / hairline-lift */
  --line:     rgba(255,255,255,0.10);
  --line-2:   rgba(255,255,255,0.16);

  /* energy */
  --flame:    #FF3B2E;   /* brand red, pushed hot — CANDIDATE action */
  --flame-2:  #E22A1F;
  --ascent:   #FFB020;   /* growth amber/gold — the differentiator */
  --ascent-2: #FFC75A;
  --ascent-grad: linear-gradient(105deg, #FF3B2E 0%, #FF6A2C 45%, #FFB020 100%);

  /* text on dark */
  --cloud:    #EEF2F8;   /* primary text on dark */
  --mist:     #9DAEC6;   /* muted text on dark */
  --mist-2:   #6E809B;   /* faint */

  /* warm reading band (long-form only) */
  --paper:    #F6F4EF;
  --paper-ink:#16233A;
  --paper-mut:#5A6577;

  --radius:   16px;
  --radius-sm:12px;
}

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--ink);
  color: var(--cloud);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Clash Display', system-ui, sans-serif;
  color: #fff;
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.015em;
}
a { color: var(--cloud); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Inline-icon safety net: any unscoped SVG defaults to text size so a stray
   icon can never blow up to fill its container. Component rules (.link-arrow svg,
   .footer-socials svg, .myth-ic svg, etc.) override this by specificity. */
svg { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
::selection { background: var(--flame); color: #fff; }
:focus-visible { outline: 3px solid var(--ascent); outline-offset: 3px; border-radius: 4px; }

/* ── Layout ── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 820px; }
.container-wide { max-width: 1320px; }

/* ── Type helpers ── */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ascent);
  display: inline-block;
  margin-bottom: 1rem;
}
.eyebrow--muted { color: var(--mist); }

.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1rem; }
.section-head p { font-size: 1.12rem; color: var(--mist); }

.lead { font-size: 1.25rem; color: var(--cloud); line-height: 1.7; }

.prose p { margin-bottom: 1.15rem; color: var(--mist); }
.prose p:last-child { margin-bottom: 0; }
.prose--lg p { font-size: 1.1rem; line-height: 1.85; }

/* Long-form sub-elements — sub-headings, lists, tables (used by article.php). */
.prose h2 { font-family:'Clash Display',system-ui,sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 2.6rem 0 1rem; }
.prose h3 { font-family:'Clash Display',system-ui,sans-serif; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.25; margin: 2rem 0 0.85rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.3rem 1.3rem; }
.prose li { margin-bottom: 0.6rem; line-height: 1.75; }
.prose--lg li { font-size: 1.05rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.1rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 7px; height: 7px; border-radius: 2px; background: var(--ascent-grad); }
.prose ol { list-style: decimal; }
.prose ol li { padding-left: 0.3rem; }
.band-paper .prose li { color: var(--paper-mut); }
.band-paper .prose ol li::marker { color: var(--flame); font-weight: 700; }

/* Inline links inside long-form body copy — flame underline on the warm
   paper band, legible against paper-ink/paper-mut body text. */
.prose a { color: var(--flame); text-decoration: underline; text-decoration-color: rgba(255,59,46,0.35); text-underline-offset: 2px; font-weight: 600; transition: text-decoration-color .18s; }
.prose a:hover { text-decoration-color: var(--flame); }

/* Pull quotes from source documents (MAS notices, SCI text) — same accent
   rail as .article-disclaimer for a consistent "verbatim citation" idiom. */
.prose blockquote { margin: 1.7rem 0; padding: 1.1rem 1.4rem; border: 1px solid rgba(22,35,58,0.14); border-left: 3px solid var(--flame); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(22,35,58,0.035); font-style: italic; }
.prose blockquote p { margin: 0; }
.band-paper .prose blockquote { color: var(--paper-mut); }

/* Citation markers — numbered superscript linking straight to the primary
   source, opening in a new tab. Mono numerals match the site's data/label
   type treatment (see .article-meta, .prose-table th). */
.prose sup.cite { font-size: 0.68em; line-height: 0; margin-left: 1px; }
.prose sup.cite a { font-family:'JetBrains Mono',ui-monospace,monospace; color: var(--flame); text-decoration: none; font-weight: 700; padding: 0 1px; }
.prose sup.cite a:hover { text-decoration: underline; }

/* Comparison table (Trust vs Will, etc.) */
.table-wrap { overflow-x: auto; margin: 0 0 1.6rem; border-radius: 12px; }
.prose-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.6; min-width: 460px; }
.prose-table th { text-align: left; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.85rem 1rem; background: rgba(255,59,46,0.06); color: var(--flame); border-bottom: 2px solid rgba(255,59,46,0.25); }
.prose-table td { padding: 0.95rem 1rem; vertical-align: top; border-bottom: 1px solid rgba(22,35,58,0.12); }
.band-paper .prose-table td { color: var(--paper-mut); }
.prose-table tr:last-child td { border-bottom: 0; }
.prose-table td:first-child, .prose-table th:first-child { border-right: 1px solid rgba(22,35,58,0.10); }

/* Article meta line (date) */
.article-meta { font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--mist); margin-top: 1rem; }
/* Article hero (featured image) — framed on the dark page-head */
.article-hero { margin: 2.25rem 0 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 70px -34px rgba(0,0,0,.8); }
.article-hero img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
/* Inline image inside the warm reading column */
.prose-figure { margin: 1.9rem 0; border: 1px solid rgba(22,35,58,0.14); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.prose-figure img { width: 100%; display: block; }
.article-body { max-width: 720px; }

/* Per-article personal-opinion disclaimer — visually distinct from the
   site-wide footer compliance block; scoped to the individual article
   and its named author. */
.article-disclaimer {
  max-width: 720px;
  margin: 2.75rem 0 0;
  padding: 1.15rem 1.4rem;
  border: 1px solid rgba(22,35,58,0.14);
  border-left: 3px solid var(--ascent);
  border-radius: var(--radius-sm);
  background: rgba(22,35,58,0.035);
}
.article-disclaimer .ad-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mut);
  margin-bottom: 0.55rem;
}
.article-disclaimer p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--paper-mut);
}

/* The recurring signature accent — a flame→amber rule */
.rule-red, .rule-accent {
  width: 56px; height: 4px; border: 0; border-radius: 2px;
  background: var(--ascent-grad);
}

/* ── Sections / bands ── */
.section { padding: 6rem 0; position: relative; }
.section--tight { padding: 4rem 0; }
.band-paper {              /* warm reading inset for long-form */
  background: var(--paper);
  color: var(--paper-ink);
}
.band-paper h1, .band-paper h2, .band-paper h3, .band-paper h4 { color: var(--paper-ink); }
.band-paper .prose p, .band-paper p { color: var(--paper-mut); }
.band-paper .eyebrow { color: var(--flame); }
.band-raise { background: var(--ink-2); }
.band-line { border-top: 1px solid var(--line); }

/* Inner-page header */
.page-head { padding: 9rem 0 2.5rem; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 1rem; }
.page-head .lead { max-width: 640px; color: var(--mist); }

/* ============================================================
   BUTTONS — flame = candidate · ghost = client
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.7rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 0.96rem; font-weight: 700;
  letter-spacing: 0.005em; text-align: center; cursor: pointer;
  border: 1.5px solid transparent; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }

/* CANDIDATE — flame */
.btn-accent { background: var(--flame); color: #fff; box-shadow: 0 8px 22px -10px rgba(255,59,46,.7); }
.btn-accent:hover { color:#fff; transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(255,59,46,.8); }
.btn-accent::after { /* amber sweep on hover — paints above flame bg, below label */
  content:''; position:absolute; inset:0; background: var(--ascent-grad); opacity:0; transition: opacity .25s ease; z-index:-1;
}
.btn-accent:hover::after { opacity: 1; }

/* legacy alias — primary maps to candidate flame so old pages still pop */
.btn-primary { background: var(--flame); color: #fff; box-shadow: 0 8px 22px -10px rgba(255,59,46,.7); }
.btn-primary:hover { color:#fff; transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(255,59,46,.8); }

/* CLIENT — ghost (never accent) */
.btn-ghost { background: transparent; color: var(--cloud); border-color: var(--line-2); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color:#fff; transform: translateY(-2px); }

.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }

/* Text link with arrow + animated gradient underline */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 0.95rem; color: var(--cloud);
  padding-bottom: 3px; background-image: var(--ascent-grad);
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: gap .2s ease, color .2s ease, background-size .3s cubic-bezier(.2,.8,.2,1);
}
.link-arrow:hover { gap: 0.8rem; color: #fff; background-size: 100% 2px; }
.link-arrow svg { width: 1rem; height: 1rem; }
/* quiet client text link */
.link-quiet { color: var(--mist); font-weight: 600; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.link-quiet:hover { color: var(--cloud); border-color: var(--mist); }
/* quiet back link (inner-page "← All Advisers") */
.link-back { display:inline-flex; align-items:center; gap:0.45rem; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--mist); transition: color .18s, gap .18s; }
.link-back:hover { color: var(--ascent); gap:0.7rem; }
.link-back svg { width:1rem; height:1rem; }

/* ============================================================
   ASCENT RAIL — global scroll-progress spine (signature, part 1).
   Fixed left edge; fill grows as you climb. Decorative:
   pointer-events none; visible-by-default if JS off.
   ============================================================ */
.ascent-rail { position: fixed; top: 0; left: 0; width: 3px; height: 100vh; z-index: 150; pointer-events: none; background: rgba(255,255,255,.06); }
.ascent-rail-fill {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  background: var(--ascent-grad); transform-origin: bottom center; transform: scaleY(1);
  box-shadow: 0 0 14px rgba(255,140,40,.55);
}
@media (max-width: 760px) { .ascent-rail { width: 2px; } }

/* ============================================================
   NAV — scroll-reactive: transparent/minimal over the hero,
   solid blurred dark backing once you climb. No chip — the mono
   KW mark is white-treated and tied into the page with a single
   flame→amber slash that echoes the Ascent Line.
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem;
  background: transparent; border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(11,27,51,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(0,0,0,.35);
  padding-top: 0.45rem; padding-bottom: 0.45rem;
}
.nav-inner { width: 100%; max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* White mono KW mark + flame→amber slash + system-type wordmark.
   The mark is the single-colour brand silhouette, white-treated for dark
   (its intended use) — NOT a recolour of the official navy+red colour mark. */
.nav-logo { display: inline-flex; align-items: center; gap: 0.62rem; flex-shrink: 0; padding: 0; background: none; }
.nav-logo-mark {
  height: 26px; width: auto; display: block;
  filter: brightness(0) invert(1);          /* black silhouette → clean white */
  transition: height .3s ease, opacity .3s ease;
}
.nav-logo-slash {
  width: 2px; height: 24px; border-radius: 2px;
  background: var(--ascent-grad); transform: skewX(-20deg);
  box-shadow: 0 0 10px rgba(255,140,40,.55);
  transition: height .3s ease, opacity .3s ease;
}
/* Single clean wordmark line: "Ken Wee Organisation" (Organisation lighter). */
.nav-logo-word { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.nlw-org { font-weight: 500; color: var(--mist); margin-left: 0.12em; transition: opacity .25s ease; }
/* Scrolled → compact the mark only. Keep the FULL "Ken Wee Organisation"
   wordmark — never collapse to "Ken Wee" alone (that isn't the brand name). */
/* Sticky = just the KW mark: drop the slash + the full wordmark, shrink the mark. */
.site-nav.is-scrolled .nav-logo-mark  { height: 22px; }
.site-nav.is-scrolled .nav-logo-slash,
.site-nav.is-scrolled .nav-logo-word  { display: none; }

.nav-links { display: flex; align-items: center; list-style: none; gap: 2rem; }
.nav-links a { position: relative; font-size: 0.92rem; font-weight: 600; color: var(--cloud); padding: 0.25rem 0; transition: color .15s ease; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0; background: var(--ascent-grad); transition: width .28s cubic-bezier(.2,.8,.2,1); }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after, .nav-links a.nav-active::after { width: 100%; }
.nav-links a.nav-active { color: #fff; }
.nav-cta { padding: 0.55rem 1.3rem; font-size: 0.9rem; }

.nav-hamburger {
  /* 44x44 minimum tap target (WCAG 2.5.5). Was 40x32 - the primary mobile
     nav control sat under the threshold. align-items keeps the bars centred
     now that the button is wider than its content. */
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; background:none; border:none; cursor:pointer;
  padding:0.5rem; min-width:44px; min-height:44px;
}
.hamburger-line { display:block; width:24px; height:2px; background:#fff; border-radius:2px; }

.nav-mobile {
  /* .site-nav is display:flex, so this panel would otherwise become a flex
     sibling of .nav-inner and sit BESIDE the bar. Take it out of flow and
     drop it full-width directly under the header. */
  position: absolute; top: 100%; left: 0; right: 0; width: 100%;
  background: var(--ink-2); border-top: 1px solid var(--line);
}
/* No base display:none - Alpine x-show toggles the INLINE style, so a
   stylesheet display:none would win the moment x-show clears it and the
   panel could never open. Initial hide is handled by x-cloak + the inline
   style in the markup; desktop is hidden by the media query below. */
@media (min-width: 901px) { .nav-mobile { display: none !important; } }
.nav-mobile .nav-mobile-inner { max-width:1320px; margin:0 auto; padding:1.25rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:0.25rem; }
.nav-mobile a { font-size:1.05rem; font-weight:600; color: var(--cloud); padding:0.7rem 0; border-bottom:1px solid var(--line); }
.nav-mobile a.nav-active { color: var(--ascent); }
.nav-mobile .btn { margin-top: 1rem; }
@media (max-width: 900px) { .nav-links { display:none; } .nav-cta { display:none; } .nav-hamburger { display:flex; } }
main { padding-top: 0; }

/* ============================================================
   HERO — full-bleed dark, ambient founder video behind scrim
   ============================================================ */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 9rem 0 5rem; overflow: hidden; }
/* Clean cut-out of Ken, flipped to face into the page, anchored bottom-right.
   Cut-out = transparent, so he sits ON the navy with the amber glow behind
   him; the bottom mask dissolves the cropped chest into the canvas. */
.hero-portrait {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: 52%; height: 100%; max-width: none;
  object-fit: cover; object-position: 34% 26%;
  filter: grayscale(.12) contrast(1.03) saturate(1.05) brightness(.9);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 55%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 55%);
  pointer-events: none;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,27,51,.55) 0%, rgba(11,27,51,.28) 40%, rgba(11,27,51,.92) 100%),
    linear-gradient(90deg, rgba(11,27,51,.97) 0%, rgba(11,27,51,.90) 30%, rgba(11,27,51,.52) 62%, rgba(11,27,51,.10) 100%);
}
@media (max-width: 900px) {
  .hero-portrait { width: 100%; height: 100%; max-width: none; right: 0; opacity: 0.26; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(11,27,51,.70) 0%, rgba(11,27,51,.55) 40%, rgba(11,27,51,.96) 100%);
  }
}
.hero-glow { position:absolute; z-index:1; right:-10%; top:-10%; width:60vw; height:60vw; background: radial-gradient(circle, rgba(255,120,40,.20), transparent 60%); pointer-events:none; }
.hero-inner {
  /* Was max-width:760px on the .container element itself, which centred the
     whole copy block and pushed the headline over the portrait's face.
     Now it spans the normal page width and the copy is capped below. */
  position: relative; z-index: 2; max-width: 1180px;
}
.hero h1, .hero .eyebrow, .hero-actions, .hero-clientlink { max-width: 700px; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); line-height: 1.02; margin: 0.6rem 0 0; }
.hero h1 em { font-style: normal; background: var(--ascent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-mask { display: block; overflow: hidden; }
.hero-sub { font-size: 1.2rem; color: var(--cloud); line-height: 1.65; margin: 1.6rem 0 2.1rem; max-width: 33rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.hero-clientlink { margin-top: 2.2rem; font-size: 0.95rem; color: var(--mist); }
.hero-clientlink a { color: var(--mist); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.hero-clientlink a:hover { color: var(--cloud); border-color: var(--mist); }
/* Hero "Watch Ken's story" — opens the expand-to-play lightbox */
.btn-watch {
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  background: rgba(255,255,255,.06); border:1.5px solid var(--line-2); color: var(--cloud);
  border-radius:999px; padding:.85rem 1.4rem;
  font-family:'Inter',sans-serif; font-size:.96rem; font-weight:700;
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}
.btn-watch:hover { border-color:#fff; background: rgba(255,255,255,.12); color:#fff; transform: translateY(-2px); }
.btn-watch .bw-play { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background: var(--ascent-grad); color: var(--ink); }
.btn-watch .bw-play svg { width:13px; height:13px; margin-left:1px; }
@media (max-width: 760px) { .hero { min-height: 86vh; } }
/* QA-only: ?shot caps the hero so full-page screenshots aren't vh-inflated. Inert in prod. */
body.shotmode .hero { min-height: auto; padding: 8rem 0 4rem; }

/* ============================================================
   CREDIBILITY STRIP — mono chips
   ============================================================ */
/* Quiet trust signals — a centered mono row, amber dot + hairline dividers.
   No pill borders (those read as floating buttons). Reads as credibility,
   not CTAs. Same markup powers advisory.php. */
.cred-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.cred-strip .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 0.55rem 2.25rem; padding: 1.15rem 1.5rem; }
.cred-chip { position:relative; display:inline-flex; align-items:center; gap:0.6rem; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:0.74rem; letter-spacing:0.12em; color: var(--mist); text-transform: uppercase; border:0; background:none; border-radius:0; padding:0; }
.cred-chip strong { color:#fff; font-weight:700; }
.cred-chip .dot { width:5px; height:5px; border-radius:50%; background: var(--ascent); flex-shrink:0; box-shadow:0 0 7px rgba(255,176,32,.85); }
/* hairline divider sits centered in the row gap, before every chip but the first */
.cred-chip:not(:first-child)::before { content:''; position:absolute; left:-1.125rem; top:50%; transform:translateY(-50%); width:1px; height:13px; background: var(--line-2); }
@media (max-width: 720px) {
  .cred-strip .container { gap: 0.5rem 1.25rem; }
  .cred-chip:not(:first-child)::before { display:none; }
}

/* ============================================================
   CARD SYSTEM (dark)
   ============================================================ */
.kwo-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.kwo-card:hover { border-color: var(--line-2); box-shadow: 0 18px 50px -28px rgba(0,0,0,.7); transform: translateY(-3px); background: var(--ink-3); }
.kwo-card .card-body { padding: 1.6rem; }

/* ── Why-build-here benefit cards ── */
.benefit-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.benefit-card { padding: 1.9rem 1.8rem; border:1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); position: relative; transition: border-color .25s, transform .25s, box-shadow .25s; }
.benefit-card::before { content:''; position:absolute; left:0; top:1.9rem; width:3px; height:0; background: var(--ascent-grad); border-radius:0 3px 3px 0; transition: height .3s cubic-bezier(.2,.8,.2,1); }
.benefit-card:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 24px 60px -32px rgba(0,0,0,.75); }
.benefit-card:hover::before { height: calc(100% - 3.8rem); }
.benefit-num { font-family:'JetBrains Mono',monospace; font-size:0.8rem; color: var(--ascent); letter-spacing:.1em; margin-bottom:1rem; }
.benefit-card h3 { font-size: 1.45rem; margin-bottom: 0.55rem; }
.benefit-card p { color: var(--mist); font-size: 0.98rem; }
@media (max-width: 760px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MYTH-BUSTER — "What this is / isn't" (kills the MLM fear)
   ============================================================ */
.myth-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.myth-col { padding: 2rem 1.9rem; border-radius: var(--radius); border:1px solid var(--line); }
.myth-col.is   { background: linear-gradient(180deg, rgba(255,176,32,.08), rgba(255,176,32,.02)); border-color: rgba(255,176,32,.28); }
.myth-col.isnt { background: rgba(255,255,255,.02); }
.myth-col h3 { font-size: 1.2rem; margin-bottom: 1.25rem; display:flex; align-items:center; gap:.6rem; }
.myth-col.is h3 { color: var(--ascent); }
.myth-col.isnt h3 { color: var(--mist); }
.myth-list { list-style:none; display:grid; gap: 0.9rem; }
.myth-list li { display:grid; grid-template-columns: auto 1fr; gap:0.75rem; align-items:start; font-size:0.98rem; color: var(--cloud); line-height:1.55; }
.myth-col.isnt .myth-list li { color: var(--mist); }
.myth-ic { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.myth-col.is .myth-ic { background: rgba(255,176,32,.16); color: var(--ascent); }
.myth-col.isnt .myth-ic { background: rgba(255,255,255,.06); color: var(--mist-2); }
.myth-ic svg { width:13px; height:13px; }
.myth-foot { margin-top: 1.75rem; font-size: 0.92rem; color: var(--mist); border-top: 1px solid var(--line); padding-top: 1.25rem; }
.myth-foot strong { color: #fff; }
@media (max-width: 760px) { .myth-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURE SPLIT (founder + rowena video blocks)
   ============================================================ */
.feature-split { display:grid; grid-template-columns: 0.92fr 1.08fr; gap: 3.5rem; align-items: center; }
.feature-split.reverse { grid-template-columns: 1.08fr 0.92fr; }
.feature-split.reverse .feature-media { order: 2; }
.feature-body h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin-bottom: 0.35rem; }
.feature-role { font-family:'JetBrains Mono',monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ascent); margin-bottom: 1.25rem; }
.feature-fromto { display:inline-flex; align-items:center; gap:.6rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; color: var(--cloud); background: rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; margin-bottom:1.25rem; }
.feature-fromto .arr { color: var(--ascent); }
.pullquote { font-family:'Clash Display',sans-serif; font-weight:500; font-size:1.5rem; line-height:1.35; color:#fff; border-left:3px solid var(--ascent); padding-left:1.25rem; margin: 1.5rem 0; }
@media (max-width: 900px) {
  .feature-split, .feature-split.reverse { grid-template-columns: 1fr; gap: 2.25rem; }
  .feature-split.reverse .feature-media { order: 0; }
}
.feature-photo { border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--ink-2); }
.feature-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position: top center; }

/* ============================================================
   MEDIA / VIDEO FRAME
   ============================================================ */
.media-frame { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 70px -34px rgba(0,0,0,.8); }
.media-frame::after { content:''; position:absolute; inset:0; border-radius: var(--radius); pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.media-frame video, .media-frame > img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: top center; background: var(--ink); }
.media-frame .play-cue { position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:0.55rem; padding:0.55rem 1rem; background: rgba(255,59,46,.92); border-radius:999px; color:#fff; font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; pointer-events:none; transition:opacity .25s ease; z-index:3; }
.media-frame .play-cue svg { width:0.85rem; height:0.85rem; }
.media-frame.is-playing .play-cue { opacity: 0; }

/* ── Expand-to-play THUMBNAIL (button) — founder + Rowena blocks ── */
.video-trigger {
  display:block; width:100%; aspect-ratio: 4/5; padding:0; margin:0;
  border:1px solid var(--line-2); cursor:pointer; color:inherit; font:inherit; text-align:left;
  -webkit-appearance:none; appearance:none;
}
.video-trigger.is-cutout { background: radial-gradient(110% 75% at 68% 32%, rgba(255,140,40,.18), transparent 62%), var(--ink-2); }
.video-trigger .vt-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: top center; }
/* cut-outs fill the frame (cover/top); their transparent areas reveal the
   navy + amber glow behind, so the subject reads big with no dead space. */
.vt-play {
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%; background: var(--flame); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:3;
  box-shadow: 0 12px 32px -8px rgba(255,59,46,.7);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s;
}
.vt-play svg { width:22px; height:22px; margin-left:3px; }
.vt-play::before { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(255,59,46,.45); animation: vtPulse 2.6s ease-out infinite; }
@keyframes vtPulse { 0%{box-shadow:0 0 0 0 rgba(255,59,46,.45)} 70%{box-shadow:0 0 0 20px rgba(255,59,46,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,46,0)} }
.video-trigger:hover .vt-play, .video-trigger:focus-visible .vt-play { transform: translate(-50%,-50%) scale(1.08); background: linear-gradient(135deg, #FF3B2E, #FFB020); }
.video-trigger:hover .vt-thumb { transform: none; }

/* ── VIDEO LIGHTBOX — shared expand-to-play overlay ── */
.kv-lightbox { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding: clamp(1rem, 4vw, 3rem); }
.kv-lightbox[hidden] { display:none; }
.kv-backdrop { position:absolute; inset:0; background: rgba(4,10,22,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity:0; transition: opacity .3s ease; }
.kv-lightbox.is-open .kv-backdrop { opacity:1; }
.kv-dialog { position:relative; width: min(1100px, 100%); opacity:0; transition: opacity .3s ease; }
.kv-lightbox.is-open .kv-dialog { opacity:1; }
.kv-stage { position:relative; width:100%; aspect-ratio:16/9; max-height:82vh; background:#000; border-radius:14px; overflow:hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line-2); }
.kv-video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.kv-close { position:absolute; top:-3rem; right:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-2); background: rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition: border-color .2s, background .2s, transform .25s; }
.kv-close:hover { border-color:#fff; background: rgba(255,255,255,.16); transform: rotate(90deg); }
.kv-close svg { width:18px; height:18px; }
@media (max-width:760px){ .kv-close { top:-2.8rem; } }
body.kv-lock { overflow:hidden; }

/* ============================================================
   THE PATH — career trajectory = the Ascent Line (signature, part 2)
   Vertical drawing spine; nodes climb; gradient brightens toward
   the summit; each node carries a growth-bar glyph that grows.
   ============================================================ */
.path { position: relative; }
.path-track { position: relative; padding-left: 3.25rem; }
.path-track::before { content:''; position:absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.path-line {
  position:absolute; left:14px; top:0; width:2px; height:100%;
  background: linear-gradient(180deg, var(--flame) 0%, #FF6A2C 50%, var(--ascent) 100%);
  transform-origin: top center; transform: scaleY(1); /* full by default (no-JS safe) */
  box-shadow: 0 0 12px rgba(255,140,40,.5);
}
.path-node { position: relative; padding: 0 0 2.5rem 0; }
.path-node:last-child { padding-bottom: 0; }
.path-dot { position:absolute; left: -3.25rem; top: 2px; width: 30px; height: 30px; border-radius:50%; background: var(--ink); border:2px solid var(--ascent); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:700; color: var(--ascent); z-index:2; box-shadow: 0 0 0 6px var(--ink), 0 0 16px rgba(255,176,32,.5); }
.path-node.is-summit .path-dot { background: var(--ascent); color: var(--ink); border-color: var(--ascent-2); }
.path-step { font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--mist); margin-bottom:0.35rem; }
.path-node h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.path-node p { color: var(--mist); font-size: 0.98rem; max-width: 38rem; }
.path-node.is-summit h3 { color: var(--ascent); }
.path-bars { display:inline-flex; align-items:flex-end; gap:3px; height:20px; margin-bottom:0.6rem; }
.path-bars span { width:5px; background: var(--ascent-grad); border-radius:2px; opacity:.85; }
@media (max-width: 600px) { .path-track { padding-left: 2.85rem; } .path-dot { left:-2.85rem; width:26px; height:26px; } }

/* ============================================================
   FIRST 90 DAYS — stepper
   ============================================================ */
.days-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.day-card { padding: 1.8rem; border:1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); position:relative; }
.day-tag { font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ascent); margin-bottom:0.85rem; display:inline-block; }
.day-card h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.day-card p { color: var(--mist); font-size:0.95rem; }
@media (max-width: 820px) { .days-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INCOME REALITY — single historical stat, framed
   ============================================================ */
.income-band { background: radial-gradient(700px 360px at 15% 0%, rgba(255,176,32,.12), transparent 60%), var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.income-inner { display:grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items:center; max-width: 940px; margin:0 auto; }
.income-stat { font-family:'Clash Display',sans-serif; font-weight:700; font-size: clamp(4rem, 11vw, 8rem); line-height:0.9; background: var(--ascent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.income-copy h2 { font-size: clamp(1.5rem,3vw,2.2rem); margin-bottom:0.6rem; }
.income-copy p { color: var(--mist); }
.income-note { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color: var(--mist-2); letter-spacing:0.06em; margin-top:1rem; }
@media (max-width: 700px) { .income-inner { grid-template-columns: 1fr; gap:1.25rem; text-align:left; } }

/* ============================================================
   ADVISERS TWO-UP — real people, from→to hooks
   ============================================================ */
.advisers-2up { max-width: 900px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.adviser-card { display:block; }
.adviser-card .adviser-photo { aspect-ratio: 4/5; overflow:hidden; background: var(--ink-3); }
.adviser-card .adviser-photo img { width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .6s ease; }
.adviser-card:hover .adviser-photo img { transform: scale(1.05); }
.adviser-card h3 { font-size: 1.55rem; margin-bottom: 0.15rem; }
.adviser-card .adviser-role { font-family:'JetBrains Mono',monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--mist); margin-bottom: 0.75rem; }
.adviser-card .fromto { display:inline-flex; align-items:center; gap:.5rem; font-size:0.86rem; color: var(--cloud); margin-bottom: 1rem; }
.adviser-card .fromto .arr { color: var(--ascent); font-weight:700; }
.advisers-2up .adviser-card .card-body { padding: 1.6rem 1.6rem 1.8rem; }
@media (max-width: 760px) { .advisers-2up { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   CANDIDATE ENQUIRY BAND — the primary conversion
   ============================================================ */
.enquiry-band { background: radial-gradient(800px 420px at 85% -10%, rgba(255,59,46,.14), transparent 60%), var(--ink-2); border:1px solid var(--line); border-radius: 22px; padding: 3rem 2.5rem; position:relative; overflow:hidden; }
.enquiry-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items:start; }
.enquiry-grid h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 0.85rem; }
.enquiry-grid .lead { color: var(--mist); font-size: 1.05rem; }
.enquiry-trust { margin-top:1.5rem; display:grid; gap:0.6rem; }
.enquiry-trust li { list-style:none; display:flex; gap:.6rem; align-items:center; color: var(--cloud); font-size:0.92rem; }
.enquiry-trust .tick { color: var(--ascent); }
.enquiry-trust svg { width:1rem; height:1rem; }

.field { margin-bottom: 1.1rem; }
.field label { display:block; font-family:'JetBrains Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; color: var(--mist); margin-bottom:0.45rem; }
.field input, .field select, .field textarea { width:100%; font-family:'Inter',sans-serif; font-size:0.98rem; color: #fff; background: rgba(255,255,255,.04); border:1.5px solid var(--line-2); border-radius: 10px; padding:0.8rem 0.95rem; transition: border-color .18s, background .18s; }
.field input::placeholder, .field textarea::placeholder { color: var(--mist-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--ascent); background: rgba(255,255,255,.07); }
.field select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239DAEC6' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 1rem center; padding-right:2.5rem; }
.field select option { background: var(--ink-2); color:#fff; }
.field textarea { resize: vertical; min-height: 96px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field-hint { font-size:0.82rem; color: var(--mist-2); margin-top:0.4rem; }
.form-micro { font-size:0.85rem; color: var(--mist); margin-top: 0.9rem; text-align:center; }

/* thank-you / share state */
.enquiry-thanks { text-align:center; padding: 1rem 0; }
.enquiry-thanks .tick-big { width:64px; height:64px; border-radius:50%; margin:0 auto 1.25rem; display:flex; align-items:center; justify-content:center; background: rgba(255,176,32,.16); color: var(--ascent); }
.enquiry-thanks .tick-big svg { width:30px; height:30px; }
.enquiry-thanks h3 { font-size:1.6rem; margin-bottom:0.6rem; }
.enquiry-thanks p { color: var(--mist); margin-bottom: 1.5rem; }
.share-row { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center; }
.share-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:0.9rem; font-weight:700; padding:0.7rem 1.2rem; border-radius:999px; border:1.5px solid var(--line-2); color: var(--cloud); background: transparent; cursor:pointer; transition: border-color .2s, color .2s, background .2s; }
.share-btn:hover { border-color: var(--ascent); color:#fff; background: rgba(255,176,32,.08); }
.share-btn svg { width:1.05rem; height:1.05rem; }
@media (max-width: 820px) {
  .enquiry-band { padding: 2.25rem 1.5rem; }
  .enquiry-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   CLOSING DUAL-PATH CTA — candidate (accent) + client (ghost)
   ============================================================ */
.cta-band { background: radial-gradient(700px 380px at 50% -20%, rgba(255,140,40,.18), transparent 60%), var(--ink-2); border:1px solid var(--line); border-radius: 22px; padding: 4rem 2rem; text-align:center; position:relative; overflow:hidden; }
.cta-band > .rule-accent { margin: 0 auto 1.5rem; }
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 0.85rem; }
.cta-band > p { color: var(--mist); font-size: 1.12rem; max-width: 40rem; margin: 0 auto 2.5rem; }
.cta-paths { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 800px; margin: 0 auto; text-align:left; }
.cta-path { padding: 2rem 1.9rem; border-radius: var(--radius); border:1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color .2s, transform .2s, background .2s; }
.cta-path.is-candidate { border-color: rgba(255,59,46,.4); background: linear-gradient(180deg, rgba(255,59,46,.08), rgba(255,176,32,.03)); }
.cta-path:hover { transform: translateY(-4px); }
.cta-path.is-candidate:hover { border-color: var(--flame); }
.cta-path.is-client:hover { border-color: var(--line-2); }
.cta-path .cp-label { font-family:'JetBrains Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.16em; font-weight:700; margin-bottom:0.6rem; }
.cta-path.is-candidate .cp-label { color: var(--ascent); }
.cta-path.is-client .cp-label { color: var(--mist); }
.cta-path h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.cta-path p { color: var(--mist); font-size: 0.96rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .cta-paths { grid-template-columns: 1fr; } }

/* slim client strip → advisory */
.client-strip { border-top:1px solid var(--line); }
.client-strip .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding: 2.25rem 1.5rem; }
.client-strip p { color: var(--mist); font-size: 1rem; }
.client-strip strong { color: #fff; font-weight: 600; }

/* ============================================================
   ADVISER DETAIL + CONTACT (inner pages, dark)
   ============================================================ */
.adviser-detail-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; align-items:start; }
.adviser-detail-photo { position: sticky; top: 100px; }
.adviser-detail-photo .photo-frame, .adviser-detail-photo .media-frame { border:1px solid var(--line-2); border-radius: var(--radius); overflow:hidden; background: var(--ink-2); margin-bottom: 1.25rem; }
.adviser-detail-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position: top center; }
.adviser-social { display:flex; gap:0.6rem; flex-wrap:wrap; }
.adviser-social a { font-family:'JetBrains Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color: var(--cloud); border:1px solid var(--line-2); border-radius:999px; padding:0.45rem 0.95rem; transition: border-color .18s, color .18s; }
.adviser-social a:hover { border-color: var(--ascent); color: var(--ascent); }
.adviser-detail-body h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 0.35rem; }
.next-card { display:flex; align-items:center; justify-content:space-between; padding: 1.75rem 2rem; }
.next-card .nc-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--mist); margin-bottom:0.3rem; }
.next-card .nc-name { font-family:'Clash Display',sans-serif; font-size:1.5rem; color:#fff; }
.next-card:hover .nc-name { color: var(--ascent); }
.next-card .nc-arrow { color: var(--ascent); transition: transform .18s; }
.next-card:hover .nc-arrow { transform: translateX(5px); }
.next-card .nc-arrow svg { width:1.4rem; height:1.4rem; }

.contact-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items:start; }
.contact-info-card { padding: 1.75rem 2rem; margin-bottom: 1.25rem; }
.contact-info-card .ci-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--mist); margin-bottom:0.65rem; }
.contact-info-card p, .contact-info-card a { color: #fff; }
.contact-phone { font-family:'Clash Display',sans-serif; font-size:1.6rem; transition: color .18s; }
.contact-phone:hover { color: var(--ascent); }
.contact-form { padding: 2rem; }

/* ── Resource / value cards (inner pages) ── */
.resource-card { padding: 1.75rem; display:block; }
.resource-card .res-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.75rem; }
.resource-icon { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(255,176,32,.1); color: var(--ascent); }
.resource-icon svg { width:1.2rem; height:1.2rem; }
.resource-card h3 { font-size:1.3rem; line-height:1.3; transition: color .2s; }
.resource-card:hover h3 { color: var(--ascent); }
.resource-card .res-meta { font-size:0.85rem; color: var(--mist); margin-top:0.85rem; }
.res-arrow { color: var(--mist); transition: transform .2s, color .2s; }
.resource-card:hover .res-arrow { color: var(--ascent); transform: translate(3px,-3px); }
.res-arrow svg { width:1.15rem; height:1.15rem; }
/* Resource card thumbnail — bleeds to card edges above the padding */
.resource-card.has-thumb { padding-top: 0; }
.res-thumb { margin: 0 -1.75rem 1.5rem; aspect-ratio: 16/9; overflow: hidden; background: var(--ink-3); border-bottom: 1px solid var(--line); }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.resource-card:hover .res-thumb img { transform: scale(1.045); }
.resource-card .res-top--end { justify-content: flex-end; margin-bottom: 1.1rem; }
.value-card { padding: 2rem; }
.value-dot { width:40px; height:40px; border-radius:50%; background: rgba(255,176,32,.1); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.value-dot span { width:9px; height:9px; border-radius:50%; background: var(--ascent); display:block; }
.value-card h3 { font-size:1.25rem; margin-bottom:0.5rem; }
.value-card p { color: var(--mist); }

@media (max-width: 900px) {
  .adviser-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .adviser-detail-photo { position: static; max-width: 360px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #081427; color: var(--mist); margin-top: 0; border-top: 1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding: 4rem 0 3rem; }
.footer-logo { background: #F6F8F4; border-radius: 12px; padding: 0.6rem 0.85rem; display:inline-flex; margin-bottom: 1.25rem; }
.footer-logo img { height: 34px; width:auto; }
.footer-blurb { font-size:0.95rem; line-height:1.7; color: var(--mist-2); max-width: 22rem; }
.footer-col h4 { color:#fff; font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.16em; margin-bottom:1.25rem; font-weight:700; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:0.7rem; }
.footer-col a { color: var(--mist); font-size:0.95rem; transition: color .15s; }
.footer-col a:hover { color:#fff; }
.footer-contact p { font-size:0.95rem; line-height:1.6; color: var(--mist); margin-bottom:0.6rem; }
.footer-socials { display:flex; gap:1rem; margin-top:1.25rem; }
.footer-socials a {
  /* 44x44 tap target (WCAG 2.5.5). Icons render 19x26; these are standalone
     icon controls, not inline text links, so the inline exception does not
     apply. Negative margin keeps the visual spacing unchanged. */
  color: var(--mist-2); transition: color .15s;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; margin:-9px;
}
.footer-socials a:hover { color: var(--ascent); }
.footer-socials svg { width:1.2rem; height:1.2rem; }
.footer-compliance { border-top:1px solid var(--line); padding: 2.25rem 0 3rem; }
.footer-compliance p { font-size:0.78rem; line-height:1.65; color: var(--mist-2); max-width: 64rem; margin-bottom:0.85rem; }
.footer-compliance p:first-child { color: var(--mist); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap:2.25rem; padding: 3rem 0 2rem; } }

/* ── Grid utils ── */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (min-width: 861px) and (max-width: 1080px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   ASCENT PHOTO — duotone lifestyle imagery in the dark system.
   Navy-DOMINANT duotone so a raw white-bg studio shot dissolves
   into the canvas; a LOW-opacity amber highlight grade + soft
   glow are the ONLY warm note — a photographic grade + signature
   accent, NOT a candidate action (the flame/amber accent rule is
   preserved: nothing here reads as a button). Source PNGs are
   pre-cropped parallelograms (transparent corners) whose angle
   echoes the Ascent motion. Static + visible by default; no JS
   required (optional [data-parallax] rides the existing safe hook).
   --ap-cx / --ap-cy position the grade over each subject's face.
   ============================================================ */
.ascent-photo {
  --ap-cx: 42%; --ap-cy: 36%;
  position: relative; isolation: isolate; display: block; margin: 0;
}
.ascent-photo img {
  position: relative; z-index: 1; width: 100%; display: block;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
/* Navy duotone: multiply pushes the bright studio bg down toward
   navy; the radial keeps it light over the subject so the face
   stays read. Strongest (near-opaque) at the edges = dissolve. */
.ascent-photo .ap-tint {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: multiply;
  background: radial-gradient(135% 125% at var(--ap-cx) var(--ap-cy),
              rgba(11,27,51,0.12) 0%,
              rgba(11,27,51,0.50) 40%,
              rgba(11,27,51,0.97) 100%);
}
/* The single warm note: amber lifts the highlights only (screen),
   very low opacity = a grade, never a glowing CTA. */
.ascent-photo .ap-warm {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(85% 75% at var(--ap-cx) var(--ap-cy),
              rgba(255,176,32,0.13), transparent 62%);
}
/* Soft amber halo bleeding OUTSIDE the crop into the navy section,
   peeking through the transparent angled corners = ascent accent. */
.ascent-photo .ap-glow {
  position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at var(--ap-cx) calc(var(--ap-cy) + 6%),
              rgba(255,140,40,0.22), transparent 70%);
  filter: blur(8px);
}
.ascent-photo .ap-cap { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 4; margin: 0; max-width: 80%; }
.ascent-photo .ap-cap-eye { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--ascent); margin-bottom:0.32rem; }
.ascent-photo .ap-cap-line { font-family:'Clash Display',system-ui,sans-serif; font-weight:500; font-size:1.08rem; line-height:1.2; color:#fff; text-shadow:0 2px 14px rgba(4,10,22,.7); }
/* energy shot is already warm/dark — keep a hint of life under the duotone */
.ascent-photo--energy img { filter: grayscale(0.82) contrast(1.05) brightness(1.0) saturate(1.05); }
/* aspire shot is on a bright studio wall — push the duotone harder so the
   white dissolves fully into navy and matches its pair (subject stays read,
   radial centred left-of-frame on her face). */
.ascent-photo--aspire img { filter: grayscale(1) contrast(1.08) brightness(1.05); }
.ascent-photo--aspire .ap-tint {
  background: radial-gradient(120% 115% at 34% 34%,
              rgba(11,27,51,0.22) 0%,
              rgba(11,27,51,0.66) 36%,
              rgba(11,27,51,0.99) 72%);
}

/* Careers intro: section copy + the energy photo, side by side */
.careers-intro { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; margin-bottom: 3.25rem; }
.careers-intro .section-head { margin-bottom: 0; }
@media (max-width: 900px) { .careers-intro { grid-template-columns: 1fr; gap: 2.25rem; } }

/* The Path: climbing track + a sticky aspirational portrait */
.path-layout { display:grid; grid-template-columns: 1.3fr 0.7fr; gap: 3.5rem; align-items: start; }
.path-layout .ascent-photo--aspire { position: sticky; top: 110px; align-self: start; }
@media (max-width: 900px) {
  .path-layout { grid-template-columns: 1fr; }
  /* keep the dense climbing track clean on small screens — the energy
     photo above carries mobile warmth; this one is a desktop accent. */
  .path-layout .ascent-photo--aspire { display: none; }
}

/* ============================================================
   REVEAL — progressive enhancement ONLY. END-STATE VISIBLE BY
   DEFAULT. Hidden state lives ONLY inside this guarded block, so
   JS-off / reduced-motion / failed-load = fully visible page,
   zero blank gaps. (This bug blanked the site twice — do NOT
   move the hidden rule outside this media query.)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-ready .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  html.js-ready .reveal.is-visible { opacity: 1; transform: none; }
}
[x-cloak] { display: none !important; }

/* Reduced-motion: kill transforms/animation, freeze signatures fully drawn */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .ascent-rail-fill, .path-line { transform: scaleY(1) !important; }
  /* hero is a still cut-out (no motion) + the video lightbox degrades to a
     plain instant-open modal in kwo.js — nothing to suppress here. */
}

/* ── Article column (added 2026-07-21) ──────────────────────────────
   .article-body is capped at 720px; without auto side margins it pinned
   hard-left and left a dead gutter on desktop. scroll-margin-top keeps
   Contents jump-links clear of the fixed header. */
.article-body { margin-inline: auto; }
.article-body h2, .article-body h3 { scroll-margin-top: 6rem; }
.article-body .prose-toc a,
.article-body ol a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(11,27,51,.18); }
.article-body ol a:hover { border-bottom-color: #FF3B2E; color: #FF3B2E; }

/* ── Long-URL wrapping (added 2026-07-21) ───────────────────────────
   The Sources list prints raw https:// URLs. With overflow-wrap:normal a
   50-char URL cannot break, so it forced document scrollWidth to 673px on
   a 375px viewport = horizontal scroll across the whole article. */
.article-body a, .prose a { overflow-wrap: anywhere; word-break: break-word; }
.article-body li, .prose li { overflow-wrap: anywhere; }