/* ==========================================================================
   Vanesh Nadar & Co. — Chartered Accountants
   site.css — design system + components
   Palette : navy / royal blue / white / orange (accent) / green (secondary)
   Type    : Source Serif 4 (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   Edit tokens in :root to re-skin the whole site.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* sampled directly from the supplied logo */
  --navy:        #00254E;   /* primary brand — dark sections, footer */
  --royal:       #003A7D;   /* logo blue — headings, links, brand elements */
  --royal-soft:  #E6EDF6;   /* royal tint */
  --orange:      #FA8B23;   /* logo orange — rules, markers, decoration */
  --orange-cta:  #B85A0B;   /* accessible orange — buttons and link text */
  --orange-soft: #FDF1E3;
  --green:       #4EB44B;   /* logo green — decoration */
  --green-deep:  #2E7D51;   /* accessible green — text and buttons */
  --green-soft:  #E9F5E9;
  --ink:         #16202E;   /* body text */
  --muted:       #55657A;   /* secondary text */
  --line:        #DFE5EE;   /* hairlines */
  --line-strong: #C6D0DF;
  --mist:        #F4F7FB;   /* section background */
  --white:       #FFFFFF;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Type scale. --lead sits deliberately between body and h3: previously .lead
     and h3 were both --step-2, so lead paragraphs competed with subheadings. */
  --step-0: 1rem;
  --lead:   clamp(1.08rem, 0.3vw + 1.02rem, 1.2rem);
  --step-1: 1.125rem;
  --step-2: clamp(1.3rem, 0.5vw + 1.18rem, 1.5rem);
  --step-3: clamp(1.5rem, 1vw + 1.25rem, 1.85rem);
  --step-4: clamp(1.85rem, 1.8vw + 1.4rem, 2.5rem);
  --step-5: clamp(2.2rem, 3vw + 1.5rem, 3.4rem);

  --header-h: 76px;
}

/* --------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
/* Long unbroken strings — email addresses, URLs, GSTINs, form codes — must wrap
   rather than push the layout sideways on a narrow screen. */
body { overflow-wrap: break-word; }
a, code, td, th { overflow-wrap: anywhere; }
a { color: var(--royal); text-underline-offset: 3px; }
a:hover { color: var(--orange-cta); }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); font-weight: 600; line-height: 1.18; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.28; letter-spacing: -0.005em; }
h4 { font-size: var(--step-1); line-height: 1.35; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--orange-cta); outline-offset: 2px; border-radius: 2px; }

/* --------------------------------------------------------------- 3. Layout */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section-mist { background: var(--mist); }
.section-navy { background: var(--navy); color: #D8E2F0; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy a { color: #FFD9B8; }

/* A dark section's light-on-dark colours must not leak into the light surfaces
   sitting on top of it — a white card inherited white headings and rendered
   them invisible. Anything with its own pale background resets to normal ink. */
.section-navy .card:not(.stat),
.section-navy .callout,
.section-navy .note,
.section-navy .table-wrap,
.section-navy .figure-frame { color: var(--ink); }
.section-navy .card:not(.stat) h2,
.section-navy .card:not(.stat) h3,
.section-navy .card:not(.stat) h4,
.section-navy .callout h3,
.section-navy .table-wrap th { color: var(--navy); }
.section-navy .card:not(.stat) a,
.section-navy .callout a,
.section-navy .note a { color: var(--royal); }
.section-navy .card:not(.stat) a:hover,
.section-navy .callout a:hover,
.section-navy .note a:hover { color: var(--orange-cta); }
.section-navy .card:not(.stat) .muted,
.section-navy .card:not(.stat) .small { color: var(--muted); }
/* Buttons that render a pale surface inside a dark section. */
.section-navy .btn-light,
.section-navy .btn-light:hover,
.section-navy .btn-ghost { color: var(--navy); }
.section-line { border-top: 1px solid var(--line); }
.lead { font-size: var(--lead); line-height: 1.6; color: var(--muted); }
.measure { max-width: 68ch; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: 1.5rem; }
.grid > *, .founder > *, .hero-slide-grid > *, .form-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
/* Grid items default to min-width:auto, so a wide child — the code panel, a
   table — pushes the column past its track instead of scrolling inside itself. */
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; align-items: start; } }
@media (min-width: 900px) { .split-sidebar { grid-template-columns: 1fr 340px; } }

/* ------------------------------------------------------------ 4. Eyebrows */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); flex: none; }
.eyebrow-green::before { background: var(--green-deep); }
.eyebrow-royal::before { background: var(--royal); }
.section-navy .eyebrow { color: #9FB3CE; }

/* -------------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  font-weight: 600; font-size: .95rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange-cta); color: #fff; }
.btn-primary:hover { background: #94480A; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--royal); color: #fff; }
.btn-ghost { border-color: var(--line-strong); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--mist); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #F0F4FA; color: var(--navy); }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- 6. Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card h3 { margin-bottom: .55rem; font-size: var(--step-1); line-height: 1.35; }
/* Icon plate. Colour follows the card's discipline accent. */
.card-icon {
  width: 44px; height: 44px; border-radius: var(--radius); margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--royal-soft); color: var(--royal);
}
.card-tech .card-icon { background: var(--green-soft); color: var(--green-deep); }
.card-advisory .card-icon { background: var(--orange-soft); color: var(--orange-cta); }
.card-mist .card-icon { background: #fff; }
.icon { display: block; }
/* Inline icon sitting alongside a line of text. */
.icon-inline { display: inline-block; vertical-align: -.18em; margin-right: .45rem; color: var(--royal); }
.card p:last-child { margin-bottom: 0; }
.card-link:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(10,37,64,.07); transform: translateY(-2px); }
.card-link a { text-decoration: none; }
/* discipline colour coding: finance = royal, technology = green, advisory/learning = orange */
.card-finance { border-top: 3px solid var(--royal); }
.card-tech { border-top: 3px solid var(--green-deep); }
.card-advisory { border-top: 3px solid var(--orange); }
.card-mist { background: var(--mist); border-color: transparent; }
.card-flat { border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: .2rem 0 .2rem 1.25rem; }
.card-flat h3 { font-size: var(--step-1); }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--royal);
  background: var(--royal-soft); padding: .3rem .55rem; border-radius: 3px; margin-bottom: .9rem;
}
.tag-green { color: var(--green-deep); background: var(--green-soft); }
.tag-orange { color: var(--orange-cta); background: var(--orange-soft); }

/* ----------------------------------------------------------- 7. Ticked list */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--orange);
}
.ticks-green li::before { border-color: var(--green-deep); }
.ticks-royal li::before { border-color: var(--royal); }
.cols-2 { columns: 2; column-gap: 2.5rem; }
@media (max-width: 640px) { .cols-2 { columns: 1; } }
.cols-2 li { break-inside: avoid; }

/* --------------------------------------------------------------- 8. Header */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.brand img { height: 46px; width: auto; }
.nav { margin-left: auto; display: none; }
@media (min-width: 1024px) { .nav { display: block; } }
.nav ul { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav > ul > li > a, .nav-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .75rem; border-radius: var(--radius);
  font-size: .93rem; font-weight: 500; color: var(--navy);
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav > ul > li > a:hover, .nav-toggle:hover { background: var(--mist); color: var(--royal); }
.nav a[aria-current="page"] { color: var(--royal); box-shadow: inset 0 -2px 0 var(--orange); }
.nav-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.header-cta { display: none; flex: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

/* mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(10,37,64,.09);
  padding: 2rem 0 2.2rem;
  display: none;
}
.mega[data-open="true"] { display: block; }
.mega-grid { display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); }
.mega h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; font-weight: 500; }
.mega ul { list-style: none; margin: 0; padding: 0; display: block; }
.mega li { margin-bottom: .1rem; }
/* :not(.btn) so this menu-link styling does not capture the button in the note
   panel — it was overriding .btn-navy's white text with --ink, leaving a navy
   label on a navy button, and forcing display:block. */
.mega a:not(.btn) { display: block; padding: .38rem .5rem; margin-left: -.5rem; border-radius: var(--radius); font-size: .93rem; text-decoration: none; color: var(--ink); }
.mega a:not(.btn):hover { background: var(--mist); color: var(--royal); }
.mega-note { background: var(--mist); border-radius: var(--radius-lg); padding: 1.25rem; }
.mega-note p { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; }

/* mobile menu */
.burger { margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0 11px; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger span { display: block; height: 2px; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: #fff; overflow-y: auto; padding: 1.5rem 0 4rem;
  border-top: 1px solid var(--line);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .wrap > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav a { display: block; padding: .85rem .25rem; text-decoration: none; color: var(--navy); font-weight: 500; }
.mobile-nav details > summary { padding: .85rem .25rem; font-weight: 500; color: var(--navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mobile-nav details > summary::-webkit-details-marker { display: none; }
.mobile-nav details > summary::after { content: "+"; font-family: var(--font-mono); color: var(--orange-cta); }
.mobile-nav details[open] > summary::after { content: "–"; }
.mobile-nav details ul { padding: 0 0 .75rem .9rem; border-left: 2px solid var(--line); margin-left: .25rem; }
.mobile-nav details a { padding: .5rem .25rem; font-weight: 400; color: var(--ink); font-size: .95rem; }
/* Services groups nest one level deeper. Without this the indent and the rule
   compound, and the second-level +/- reads as loudly as the first. */
.mobile-nav details details > summary {
  padding: .55rem .25rem; font-weight: 500; font-size: .88rem;
  color: var(--muted); font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.mobile-nav details details > summary::after { font-size: .9rem; }
.mobile-nav details details ul { border-left: 0; margin-left: 0; padding-left: .6rem; }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 1.5rem; }
body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------- 9. Breadcrumbs */
.crumbs { padding: 1rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; font-size: .82rem; color: var(--muted); }
.crumbs li { margin: 0; display: flex; gap: .45rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--royal); }

/* ----------------------------------------------------------- 10. Page head */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }

/* Page head carrying a background video. Same scrim discipline as the home
   hero: contrast over moving footage changes frame to frame, so the text sits
   on a gradient rather than directly on the video. */
.page-head-video {
  position: relative; overflow: hidden; border-bottom: 0;
  background: var(--navy); color: #D8E2F0;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-head-video > .wrap { position: relative; z-index: 2; }
.page-head-video h1 { color: #fff; }
.page-head-video .lead { color: #C3D2E6; }
.page-head-video .eyebrow { color: #9FB3CE; }
.page-head-video .eyebrow::before { background: var(--green); }
.page-head-video .btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.page-head-video .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.page-head-video .hero-video::after {
  background: linear-gradient(90deg, rgba(0,37,78,.95) 0%, rgba(0,37,78,.86) 50%, rgba(0,37,78,.62) 100%);
}
/* 20ch was forcing long headings into five short lines with a wall of empty
   space beside them. The grid column already constrains width where artwork is
   present, so the cap only needs to stop a heading running the full 1180px. */
.page-head h1 { max-width: 26ch; }
.page-head .lead { max-width: 62ch; margin-bottom: 0; }

/* The page head previously stacked heading, lead and buttons down the left,
   leaving the right half of every page empty. On wide screens the call to
   action moves into that space.

   Done in CSS rather than in markup because 34 page heads are written across 18
   source files. Text children stay in column one; the button row spans the
   rows they occupy so it centres against the whole block. grid-auto-rows:
   min-content lets the spare rows in that span collapse to zero height. */
/* When a head carries a service illustration, that fills the right-hand side and
   the buttons stay under the text where they read naturally. :has() scopes it so
   heads without artwork keep their full text width. Browsers without :has() get
   the stacked layout, which is a fine fallback. */
@media (min-width: 900px) {
  .page-head > .wrap:has(> .service-art) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    grid-auto-rows: min-content;
    align-items: center;
  }
  .page-head > .wrap:has(> .service-art) > * { grid-column: 1; }
  .page-head > .wrap > .service-art {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: center;
    width: 100%;
    height: auto;
  }
}
.page-head > .service-art { display: none; }
@media (max-width: 899px) { .page-head .service-art { display: none; } }

/* ---------------------------------------------------------------- 11. Hero */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero h1 { font-size: clamp(2.3rem, 4.4vw + 1rem, 4rem); letter-spacing: -0.022em; margin-bottom: .5em; }
.hero h1 .u { display: inline-block; box-shadow: inset 0 -0.14em 0 var(--u, var(--orange)); }
.hero .lead { max-width: 56ch; }
.hero-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.hero-panel-head { background: var(--navy); color: #fff; padding: 1.1rem 1.4rem; }
.hero-panel-head p { margin: 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9FB3CE; }
.hero-panel-head strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-top: .2rem; }
.glance { list-style: none; margin: 0; padding: 0; }
.glance li { display: grid; grid-template-columns: 116px 1fr; gap: 1rem; padding: .85rem 1.4rem; border-bottom: 1px solid var(--line); margin: 0; font-size: .93rem; }
.glance li:last-child { border-bottom: 0; }
.glance dt, .glance .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }

/* -------------------------------------------------------------- 12. Ribbon */
/* ------------------------------------------------------- 12b. Hero slider */
.hero-slider {
  position: relative; background: var(--navy); color: #E4ECF7; overflow: hidden;
  --accent: var(--orange);
}
.hero-slider::after {           /* subtle depth, keeps text off a flat field */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 85% at 82% 18%, rgba(255,255,255,.09), transparent 60%);
  z-index: 1;
}
/* Optional background video. The scrim is what makes the headline legible over
   moving footage — without it, contrast changes frame to frame. */
.hero-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,37,78,.94) 0%, rgba(0,37,78,.82) 45%, rgba(0,37,78,.55) 100%);
}
@media (max-width: 899px) { .hero-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-track { display: grid; }
.hero-slide {
  grid-area: 1 / 1; display: flex; align-items: center;
  min-height: clamp(460px, 62vh, 620px);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  opacity: 0; visibility: hidden; transition: opacity .55s ease;
}
.hero-slide[data-active="true"] { opacity: 1; visibility: visible; }
.hero-slide-inner { position: relative; z-index: 2; max-width: 62ch; }
.hero-slide-grid { position: relative; z-index: 2; display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .hero-slide-split .hero-slide-grid { grid-template-columns: 1.15fr .85fr; }
}
/* Portrait on a hero slide. Masked to a soft column so it reads as a designed
   element rather than a photo dropped onto navy. */
.hero-portrait { position: relative; justify-self: center; max-width: 340px; width: 100%; }
.hero-portrait img {
  width: 100%; height: auto; border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
  border: 3px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero-portrait-cap {
  margin: .9rem 0 0; text-align: center; line-height: 1.35;
}
.hero-portrait-cap strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.hero-portrait-cap span { display: block; font-family: var(--font-mono); font-size: .76rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-top: .3rem; }
@media (max-width: 899px) { .hero-portrait { display: none; } }
.hero-slide .eyebrow { color: #9FB3CE; }
.hero-slide .eyebrow::before { background: var(--accent); }
/* Only the first slide carries the page's <h1>; later slides are promotional
   copy, not document headings, so they are paragraphs styled to match. */
.hero-slide h1, .hero-slide .hero-h {
  color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 3.8vw + 1rem, 3.5rem); line-height: 1.18;
  letter-spacing: -0.022em; margin: 0 0 .45em;
}
.hero-slide h1 em, .hero-slide .hero-h em { font-style: normal; box-shadow: inset 0 -0.14em 0 var(--accent); }
.hero-slide .lead { color: #C3D2E6; max-width: 54ch; }

/* Decorative motif. aria-hidden in the markup — purely atmosphere. */
.hero-art { position: absolute; right: -6%; top: 50%; translate: 0 -50%; width: min(46%, 520px);
  opacity: .5; z-index: 1; pointer-events: none; }
@media (max-width: 900px) { .hero-art { display: none; } }

.hero-controls {
  position: relative; z-index: 3; display: flex; align-items: center; gap: .75rem;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.38); background: transparent; color: #fff;
  border-radius: 50%; cursor: pointer; transition: background-color .18s ease, border-color .18s ease;
}
.hero-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero-btn svg { width: 15px; height: 15px; }
.hero-dots { display: flex; gap: .15rem; margin-left: .25rem; }
/* The visible mark stays a slim bar, but the button itself is a full 44x44
   target — a 30x4 hit area is essentially untappable on a phone. */
.hero-dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  position: relative; cursor: pointer;
}
.hero-dot::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%;
  height: 4px; transform: translateY(-50%); border-radius: 2px;
  background: rgba(255,255,255,.3); transition: background-color .2s ease;
}
.hero-dot[aria-current="true"]::before { background: var(--accent); }
.hero-count { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; color: #9FB3CE; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

.ribbon { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); }
.ribbon-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; padding: 1.1rem 0; }
.ribbon p { margin: 0; font-size: .9rem; color: var(--muted); }
.ribbon strong { color: var(--navy); }

/* affiliation block */
.alliance {
  border: 1px solid var(--line); border-left: 3px solid var(--royal);
  border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; background: #fff;
}
.alliance p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- 13. Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; border-top: 2px solid var(--navy); padding-top: 1rem; margin: 0; }
.steps li::before { content: "Step " counter(step); display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-cta); margin-bottom: .5rem; }
.steps h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.steps p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------- 14. People */
.person { display: grid; gap: 1.25rem; }
.person-photo {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-align: center; padding: 1rem; overflow: hidden;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: .1rem; }
.person .role { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-cta); margin-bottom: .8rem; }
.founder { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 860px) { .founder { grid-template-columns: 360px 1fr; } }

/* ----------------------------------------------------------------- 15. FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.5rem;
  width: 9px; height: 9px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq .faq-body { padding: 0 2.5rem 1.3rem 0; color: var(--muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- 16. CTA band */
.cta-band { background: var(--navy); color: #D8E2F0; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { max-width: 58ch; }
.cta-inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .cta-inner { grid-template-columns: 1.2fr auto; } }

/* ---------------------------------------------------------------- 17. Form */
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-full { grid-column: 1 / -1; } }
.field label { display: block; font-size: .84rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--royal); outline: 2px solid rgba(20,65,126,.18); outline-offset: 0; }
.field-hint { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 0; }
legend { font-size: .84rem; font-weight: 600; color: var(--navy); padding: 0 .35rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .93rem; margin: 0; }
.radio-row input { width: auto; }

/* -------------------------------------------------------------- 18. Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--mist); }
tr:last-child td { border-bottom: 0; }
/* Leading column carries the row's identity, so give it weight. */
tbody th[scope="row"] { background: transparent; font-family: var(--font-body); font-size: .93rem;
  letter-spacing: 0; text-transform: none; color: var(--navy); font-weight: 600; }
tbody tr:hover td, tbody tr:hover th[scope="row"] { background: var(--mist); }
.table-wrap caption { caption-side: top; text-align: left; padding: 1rem 1rem .25rem;
  font-size: .85rem; color: var(--muted); }
td .muted, td small { color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-due { font-family: var(--font-mono); font-size: .85rem; color: var(--navy); white-space: nowrap; }

/* --------------------------------------------------- 18b. Stats & figures */
.stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { border-top: 3px solid var(--royal); background: #fff; padding: 1.25rem 1.3rem; border-radius: var(--radius-lg);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat-green { border-top-color: var(--green-deep); }
.stat-orange { border-top-color: var(--orange); }
.stat .k { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 2.2vw + 1.2rem, 2.6rem);
  line-height: 1.05; color: var(--navy); font-weight: 600; letter-spacing: -0.02em; }
.stat .v { display: block; margin-top: .45rem; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.section-navy .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section-navy .stat .k { color: #fff; }
.section-navy .stat .v { color: #B9C8DC; }

/* Diagram wrapper. The SVG scales to the column; the caption explains it. */
.figure { margin: 0; }
.figure-frame { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.5vw, 2rem); overflow-x: auto; }
/* The diagram scales to its column. min-width stops it shrinking to the point
   where the labels stop being readable — below that the frame scrolls instead. */
.figure-frame svg { width: 100%; height: auto; display: block; min-width: 860px; }
/* Diagrams placed in a side column are narrower by design and carry less text,
   so they can shrink further before the frame needs to scroll. */
.figure-narrow .figure-frame svg { min-width: 520px; }

/* Below the breakpoint the drawing is replaced by the same content as a stacked
   list. A 860px-wide diagram in a 375px viewport shows about a third of itself
   and has to be dragged sideways; the list simply reflows.
   The list stays in the DOM at every width — visually hidden on wide screens —
   so assistive technology always gets a real list rather than a picture. */
.figure-steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: figstep;
}
.figure-steps li {
  position: relative; padding-left: 2.6rem; margin-bottom: 1rem;
}
ol.figure-steps li::before {
  counter-increment: figstep; content: counter(figstep);
  position: absolute; left: 0; top: -.1em;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--royal); background: var(--royal-soft);
}
ul.figure-steps li::before {
  content: ""; position: absolute; left: .5rem; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--orange);
}
.figure-steps strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: .15rem; }
.figure-steps span { display: block; color: var(--muted); font-size: .93rem; line-height: 1.55; }

@media (min-width: 900px) {
  .figure-steps {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 899px) {
  .figure-frame { display: none; }
  .figure figcaption { margin-top: 1rem; }
}
.figure figcaption { margin-top: .85rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.figure-plain .figure-frame { background: #fff; }

/* Callout for a single point that must not be missed. */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--royal); background: var(--royal-soft);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-green { border-left-color: var(--green-deep); background: var(--green-soft); }
.callout-orange { border-left-color: var(--orange); background: var(--orange-soft); }
.callout h3 { font-size: var(--step-1); margin-bottom: .4rem; }

/* ------------------------------------------------------------- 19. Article */
.article-body { font-size: 1.05rem; }
.article-body h2 { margin-top: 2.2rem; }
.article-body h3 { margin-top: 1.8rem; }
.article-meta { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-bottom: 1.5rem; }
.note {
  border-left: 3px solid var(--orange); background: var(--orange-soft);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .93rem;
}
.note p:last-child { margin-bottom: 0; }
.note-royal { border-left-color: var(--royal); background: var(--royal-soft); }
.placeholder {
  border: 1px dashed var(--line-strong); background: var(--mist); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-family: var(--font-mono); font-size: .82rem; color: var(--muted);
}
.map-placeholder { min-height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; }

/* -------------------------------------------------------------- 20. Footer */
.site-footer { background: var(--navy); color: #B9C8DC; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; font-size: .92rem; }
/* Explicit tracks, not auto-fit: the brand block plus four link columns must
   resolve to one row. With auto-fit the track count varied with viewport width
   and the last column (Contact) dropped to a row of its own. */
.footer-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.7fr repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 1000px) { .footer-brand { grid-column: auto; padding-right: 2rem; } }

/* The logo may only ever sit on white, so it gets its own plate in dark sections. */
.logo-plate {
  display: inline-block; background: #fff; border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: 1.25rem; line-height: 0;
}
.logo-plate img { height: 46px; width: auto; display: block; }
.site-footer h2 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #7E93B0; font-weight: 500; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #DCE6F3; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .84rem; color: #8FA3BE; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom li { margin: 0; }

/* ------------------------------------------------------- 21. Float actions */
.whatsapp-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green-deep); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: .7rem 1rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(10,37,64,.18);
}
.whatsapp-float:hover { background: #226240; color: #fff; }
.whatsapp-float span { display: none; }
@media (min-width: 600px) { .whatsapp-float span { display: inline; } }

/* ------------------------------------------------------------ 22. Reveal */
/* Reveal only runs when JS is available, so content is never hidden without it. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- 23. Utils */
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.small { font-size: .88rem; }
.muted { color: var(--muted); }
/* ------------------------------------------------- 20b. Phone tuning */
@media (max-width: 599px) {
  /* Tables still scroll, but tighter cells mean far less of it. */
  table { font-size: .86rem; }
  th, td { padding: .65rem .7rem; }
  .table-wrap caption { padding: .8rem .7rem .2rem; }

  /* The hero is the first thing seen; give it back some height on a phone. */
  .hero-slide { min-height: auto; padding: 2.5rem 0 1.5rem; }
  .hero-controls { padding-bottom: 1.25rem; }
  .hero-count { display: none; }          /* dots already convey position */

  /* Keep the floating action clear of the footer's last row. */
  .site-footer { padding-bottom: 5rem; }

  /* Stacked cards do not need desktop padding at this width. */
  .card { padding: 1.35rem; }
  .gate-panel { padding: 1.25rem; }
  .gate-list { font-size: .9rem; }
}
@media (max-width: 420px) {
  .code-body { font-size: .74rem; }
  .code-line { padding: 0 .8rem; }
  .code-n { width: 1.8em; margin-right: .7em; }
}

/* -------------------------------------------------- 21b. Code window */
.code-window { margin: 0; }
.code-window .code-chrome {
  display: flex; align-items: center; gap: .75rem;
  background: #0B1B30; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: .7rem 1rem; border: 1px solid #14263F; border-bottom: 0;
}
.code-dots { display: inline-flex; gap: .35rem; }
.code-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2B3F5C; display: block; }
.code-dots i:first-child { background: #B85A0B; }
.code-file { font-family: var(--font-mono); font-size: .76rem; color: #9FB3CE; }
.code-lang {
  margin-left: auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7E93B0; border: 1px solid #24374F; border-radius: 3px;
  padding: .15rem .45rem;
}
.code-body {
  margin: 0; background: #0F2238; color: #D8E2F0;
  border: 1px solid #14263F; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1.1rem 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.75;
}
.code-body code { display: block; min-width: max-content; }
.code-line { display: block; padding: 0 1.25rem; white-space: pre; }
.code-n {
  display: inline-block; width: 2.2em; margin-right: 1.1em; text-align: right;
  color: #7E97B4; user-select: none;   /* AA against the #0F2238 panel */
}
/* Highlight roles — tuned for contrast on the #0F2238 panel. */
.t-kw  { color: #FF9E4A; }
.t-fn  { color: #7FC4FF; }
.t-str { color: #8FD69B; }
.t-num { color: #F2C46B; }
.t-com { color: #7A90AC; font-style: italic; }
.t-cls { color: #C9A6FF; }
.t-op  { color: #A9BCD4; }
.code-window figcaption { margin-top: .85rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.section-navy .code-window figcaption { color: #B9C8DC; }

/* ------------------------------------------------ 22. Disclaimer gate */
.gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(0, 20, 44, .72); backdrop-filter: blur(3px);
}
.gate[hidden] { display: none; }
.gate-panel {
  background: #fff; border-radius: var(--radius-lg);
  width: min(100%, 720px); max-height: min(88vh, 780px); overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(0, 20, 44, .35);
  border-top: 4px solid var(--orange);
}
.gate-panel h2 { font-size: var(--step-3); margin-bottom: .6rem; }
.gate-intro { font-size: .96rem; }
.gate-list { margin: 1.1rem 0; font-size: .93rem; }
.gate-list li { margin-bottom: .7rem; }
.gate-note { font-size: .88rem; color: var(--muted); }
.gate-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
/* Page must not scroll behind the dialog. */
body.gate-open { overflow: hidden; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  .site-header, .site-footer, .whatsapp-float, .cta-band { display: none; }
  body { color: #000; }
}