/* =========================================================
   Remarkable Marketing & Ad Solutions — Design System
   colors_and_type.css
   =========================================================

   Locked palette per founder direction:

     • Remarkable Blue  — primary. Headlines, CTAs, key accents,
                          link color, the wordmark stroke.
     • White            — dominant background.
     • Charcoal         — body copy + UI text.
     • Orange           — single accent. Used SPARINGLY for
                          highlight pills, persona anchors,
                          tier badges, editorial underlines.

   Three-tier business model drives theming:
     • Tier 1 — Lux Clients      (Lydia)   → blue + charcoal "elevated"
     • Tier 2 — Education        (Renee)   → blue + orange "energetic"
     • Tier 3 — Shop / Templates (Destiny) → blue + soft "accessible"
   ========================================================= */


/* -----------------------------
   FONT FACES
   -----------------------------
   Headlines: Clash Display — bold, distinctive, confident.
   Body:      General Sans  — clean, refined, professional.
   Mono:      JetBrains Mono — meta, system labels, mono CTAs.

   Both display + body via Fontshare (free, commercial-use). */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap');
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/58de09d1-b4be-421b-986a-e11dd7f988aa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5b054210-035b-4d74-869d-f56d8b2b1dc4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/136e1a52-4e02-459c-9e85-5b048a087ae0.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b469056a-25d2-4b17-a48f-d132705f7552.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b24c40d3-c3ea-4ee6-9ba1-27c6738057e0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cb4e6176-ed1e-4d22-8803-5843fdf914ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/58de09d1-b4be-421b-986a-e11dd7f988aa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5b054210-035b-4d74-869d-f56d8b2b1dc4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/136e1a52-4e02-459c-9e85-5b048a087ae0.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b469056a-25d2-4b17-a48f-d132705f7552.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b24c40d3-c3ea-4ee6-9ba1-27c6738057e0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cb4e6176-ed1e-4d22-8803-5843fdf914ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
  /* =========================================================
     BASE TOKENS — palette
     ========================================================= */

  /* BLUE — Remarkable Blue. Eyedropped from the logomark
     (#0040F0) and reweighted into a usable 10-stop scale.
     600 is the canonical brand value. */
  --blue-50:  #EEF2FF;
  --blue-100: #DDE5FF;
  --blue-200: #B8C6FF;
  --blue-300: #8AA0FF;
  --blue-400: #5A78FF;
  --blue-500: #2C50FA;
  --blue-600: #0040F0; /* signature */
  --blue-700: #0032C2;
  --blue-800: #00258F;
  --blue-900: #001A66;
  --blue-950: #000F3D;

  /* ORANGE — the single warm accent. Used sparingly:
     persona/tier callouts, editorial underlines, the lead-magnet
     band, hover state on the secondary CTA. Sits opposite the
     blue on the color wheel so it carries real visual weight
     even at small sizes. */
  --orange-50:  #FFF4ED;
  --orange-100: #FFE3CC;
  --orange-200: #FFC499;
  --orange-300: #FFA266;
  --orange-400: #FF843D;
  --orange-500: #F26430; /* signature */
  --orange-600: #D74F1F;
  --orange-700: #B23E17;
  --orange-800: #8A2E10;
  --orange-900: #5F1F0B;

  /* CHARCOAL — body copy + UI text. Slightly cool to sit with
     the electric blue without going neutral grey. */
  --charcoal-900: #14171C; /* canonical body */
  --charcoal-800: #232830;
  --charcoal-700: #353B45;
  --charcoal-600: #4F555F;
  --charcoal-500: #6B717A;
  --charcoal-400: #94999F;
  --charcoal-300: #C5C8CC;
  --charcoal-200: #E1E3E6;
  --charcoal-100: #EEF0F2;
  --charcoal-50:  #F7F8FA;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Status — separated from brand so a "success" green never
     gets confused with the brand. */
  --success: #1B7A4B;
  --warning: #B86C00;
  --danger:  #B4253A;


  /* =========================================================
     SEMANTIC TOKENS — what the colors MEAN
     ========================================================= */

  /* Foreground */
  --fg-1:        var(--charcoal-900); /* primary body + headings */
  --fg-2:        var(--charcoal-700); /* secondary body */
  --fg-3:        var(--charcoal-500); /* muted, captions, meta */
  --fg-4:        var(--charcoal-400); /* disabled, placeholder */
  --fg-on-brand: var(--white);
  --fg-on-dark:  var(--white);
  --fg-on-orange:var(--charcoal-900);

  /* Background */
  --bg-page:      var(--white);          /* dominant */
  --bg-surface:   var(--white);          /* cards on page */
  --bg-sunken:    var(--charcoal-50);    /* alternate sections */
  --bg-soft:      var(--blue-50);        /* tinted brand section */
  --bg-soft-warm: var(--orange-50);      /* tinted accent section, used once per page max */
  --bg-inverse:   var(--charcoal-900);   /* dark sections, footer */
  --bg-brand:     var(--blue-600);       /* big CTA bands, lead-magnet bar */

  /* Borders */
  --border-1:      var(--charcoal-200); /* hairline */
  --border-2:      var(--charcoal-300); /* input rest */
  --border-strong: var(--charcoal-900); /* editorial frames, testimonial cards */
  --border-brand:  var(--blue-600);
  --border-accent: var(--orange-500);

  /* Brand interactive (the PRIMARY button color) */
  --brand:        var(--blue-600);
  --brand-hover:  var(--blue-700);
  --brand-press:  var(--blue-800);
  --brand-soft:   var(--blue-50);

  /* Accent (orange) — secondary CTA hover, persona anchors,
     pull-quote underline, the "5 Signs..." lead-magnet band. */
  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-600);
  --accent-soft:   var(--orange-50);

  /* Tier accents — what color marks a tier section visually. */
  --tier-lux:    var(--charcoal-900); /* Lux = elevated, ink-on-white */
  --tier-edu:    var(--blue-600);     /* Education = energetic blue */
  --tier-shop:   var(--orange-500);   /* Shop = warm, approachable */

  /* Links */
  --link:        var(--blue-600);
  --link-hover:  var(--blue-700);
  --link-visited:var(--blue-800);


  /* =========================================================
     TYPOGRAPHY — primitives
     ========================================================= */

  --font-display:  'Clash Display', 'Geist', system-ui, sans-serif;
  --font-sans:     'General Sans', 'Geist', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-wordmark: 'Clash Display', system-ui, sans-serif;

  /* Type scale — 1.250 (major third). Confident at desktop. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  124px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:  1.04;
  --lh-snug:   1.16;
  --lh-normal: 1.45;
  --lh-relaxed:1.62;

  /* Tracking */
  --tracking-tight:    -0.025em;
  --tracking-display:  -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-eyebrow:   0.14em;
}


/* =========================================================
   SEMANTIC TYPE
   ========================================================= */

.t-display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(48px, 7.5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(40px, 5.5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* Eyebrow — small all-caps label that introduces sections. */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand);
  margin: 0;
}
.t-eyebrow.accent  { color: var(--accent); }
.t-eyebrow.on-dark { color: var(--blue-200); }
.t-eyebrow.muted   { color: var(--fg-3); }

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

/* Lede — under the hero headline */
.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Meta — mono, all-caps, for dates, cohort tags */
.t-meta {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* Persona / pull-quote — italic display, anchored by a 2px
   orange underline on the first word. */
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Wordmark — REMARKABLE, all caps, tight tracking. */
.t-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

/* Tier label — small badge text for "TIER 1 — LUX" etc. */
.t-tier {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* =========================================================
   SPACING + RADII + SHADOWS + MOTION
   ========================================================= */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(20,23,28,0.04), 0 1px 2px rgba(20,23,28,0.05);
  --shadow-2: 0 2px 6px rgba(20,23,28,0.06), 0 12px 28px rgba(20,23,28,0.08);
  --shadow-3: 0 24px 64px rgba(20,23,28,0.14);
  --shadow-lux: 0 2px 0 var(--charcoal-900), 0 12px 32px rgba(0, 26, 102, 0.16);
  --shadow-focus: 0 0 0 3px var(--blue-200);

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-quick: 120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;
}


/* =========================================================
   BASE RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
::selection { background: var(--blue-600); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   BOLD DESIGN — Ashely Franklin Marketing Site
   Oversized typography, layered color blocks, proof marquee,
   three-move cards, manifesto band, and work grid.
   ========================================================= */

/* =========================================================
   Remarkable Marketing & Ad Solutions — Design System
   colors_and_type.css
   =========================================================

   Locked palette per founder direction:

     • Remarkable Blue  — primary. Headlines, CTAs, key accents,
                          link color, the wordmark stroke.
     • White            — dominant background.
     • Charcoal         — body copy + UI text.
     • Orange           — single accent. Used SPARINGLY for
                          highlight pills, persona anchors,
                          tier badges, editorial underlines.

   Three-tier business model drives theming:
     • Tier 1 — Lux Clients      (Lydia)   → blue + charcoal "elevated"
     • Tier 2 — Education        (Renee)   → blue + orange "energetic"
     • Tier 3 — Shop / Templates (Destiny) → blue + soft "accessible"
   ========================================================= */


/* -----------------------------
   FONT FACES
   -----------------------------
   Headlines: Clash Display — bold, distinctive, confident.
   Body:      General Sans  — clean, refined, professional.
   Mono:      JetBrains Mono — meta, system labels, mono CTAs.

   Both display + body via Fontshare (free, commercial-use). */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap');
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/58de09d1-b4be-421b-986a-e11dd7f988aa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5b054210-035b-4d74-869d-f56d8b2b1dc4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/136e1a52-4e02-459c-9e85-5b048a087ae0.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b469056a-25d2-4b17-a48f-d132705f7552.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b24c40d3-c3ea-4ee6-9ba1-27c6738057e0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cb4e6176-ed1e-4d22-8803-5843fdf914ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/58de09d1-b4be-421b-986a-e11dd7f988aa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5b054210-035b-4d74-869d-f56d8b2b1dc4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/136e1a52-4e02-459c-9e85-5b048a087ae0.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b469056a-25d2-4b17-a48f-d132705f7552.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b24c40d3-c3ea-4ee6-9ba1-27c6738057e0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cb4e6176-ed1e-4d22-8803-5843fdf914ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
  /* =========================================================
     BASE TOKENS — palette
     ========================================================= */

  /* BLUE — Remarkable Blue. Eyedropped from the logomark
     (#0040F0) and reweighted into a usable 10-stop scale.
     600 is the canonical brand value. */
  --blue-50:  #EEF2FF;
  --blue-100: #DDE5FF;
  --blue-200: #B8C6FF;
  --blue-300: #8AA0FF;
  --blue-400: #5A78FF;
  --blue-500: #2C50FA;
  --blue-600: #0040F0; /* signature */
  --blue-700: #0032C2;
  --blue-800: #00258F;
  --blue-900: #001A66;
  --blue-950: #000F3D;

  /* ORANGE — the single warm accent. Used sparingly:
     persona/tier callouts, editorial underlines, the lead-magnet
     band, hover state on the secondary CTA. Sits opposite the
     blue on the color wheel so it carries real visual weight
     even at small sizes. */
  --orange-50:  #FFF4ED;
  --orange-100: #FFE3CC;
  --orange-200: #FFC499;
  --orange-300: #FFA266;
  --orange-400: #FF843D;
  --orange-500: #F26430; /* signature */
  --orange-600: #D74F1F;
  --orange-700: #B23E17;
  --orange-800: #8A2E10;
  --orange-900: #5F1F0B;

  /* CHARCOAL — body copy + UI text. Slightly cool to sit with
     the electric blue without going neutral grey. */
  --charcoal-900: #14171C; /* canonical body */
  --charcoal-800: #232830;
  --charcoal-700: #353B45;
  --charcoal-600: #4F555F;
  --charcoal-500: #6B717A;
  --charcoal-400: #94999F;
  --charcoal-300: #C5C8CC;
  --charcoal-200: #E1E3E6;
  --charcoal-100: #EEF0F2;
  --charcoal-50:  #F7F8FA;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Status — separated from brand so a "success" green never
     gets confused with the brand. */
  --success: #1B7A4B;
  --warning: #B86C00;
  --danger:  #B4253A;


  /* =========================================================
     SEMANTIC TOKENS — what the colors MEAN
     ========================================================= */

  /* Foreground */
  --fg-1:        var(--charcoal-900); /* primary body + headings */
  --fg-2:        var(--charcoal-700); /* secondary body */
  --fg-3:        var(--charcoal-500); /* muted, captions, meta */
  --fg-4:        var(--charcoal-400); /* disabled, placeholder */
  --fg-on-brand: var(--white);
  --fg-on-dark:  var(--white);
  --fg-on-orange:var(--charcoal-900);

  /* Background */
  --bg-page:      var(--white);          /* dominant */
  --bg-surface:   var(--white);          /* cards on page */
  --bg-sunken:    var(--charcoal-50);    /* alternate sections */
  --bg-soft:      var(--blue-50);        /* tinted brand section */
  --bg-soft-warm: var(--orange-50);      /* tinted accent section, used once per page max */
  --bg-inverse:   var(--charcoal-900);   /* dark sections, footer */
  --bg-brand:     var(--blue-600);       /* big CTA bands, lead-magnet bar */

  /* Borders */
  --border-1:      var(--charcoal-200); /* hairline */
  --border-2:      var(--charcoal-300); /* input rest */
  --border-strong: var(--charcoal-900); /* editorial frames, testimonial cards */
  --border-brand:  var(--blue-600);
  --border-accent: var(--orange-500);

  /* Brand interactive (the PRIMARY button color) */
  --brand:        var(--blue-600);
  --brand-hover:  var(--blue-700);
  --brand-press:  var(--blue-800);
  --brand-soft:   var(--blue-50);

  /* Accent (orange) — secondary CTA hover, persona anchors,
     pull-quote underline, the "5 Signs..." lead-magnet band. */
  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-600);
  --accent-soft:   var(--orange-50);

  /* Tier accents — what color marks a tier section visually. */
  --tier-lux:    var(--charcoal-900); /* Lux = elevated, ink-on-white */
  --tier-edu:    var(--blue-600);     /* Education = energetic blue */
  --tier-shop:   var(--orange-500);   /* Shop = warm, approachable */

  /* Links */
  --link:        var(--blue-600);
  --link-hover:  var(--blue-700);
  --link-visited:var(--blue-800);


  /* =========================================================
     TYPOGRAPHY — primitives
     ========================================================= */

  --font-display:  'Clash Display', 'Geist', system-ui, sans-serif;
  --font-sans:     'General Sans', 'Geist', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-wordmark: 'Clash Display', system-ui, sans-serif;

  /* Type scale — 1.250 (major third). Confident at desktop. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  124px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:  1.04;
  --lh-snug:   1.16;
  --lh-normal: 1.45;
  --lh-relaxed:1.62;

  /* Tracking */
  --tracking-tight:    -0.025em;
  --tracking-display:  -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-eyebrow:   0.14em;
}


/* =========================================================
   SEMANTIC TYPE
   ========================================================= */

.t-display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(48px, 7.5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(40px, 5.5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* Eyebrow — small all-caps label that introduces sections. */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand);
  margin: 0;
}
.t-eyebrow.accent  { color: var(--accent); }
.t-eyebrow.on-dark { color: var(--blue-200); }
.t-eyebrow.muted   { color: var(--fg-3); }

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

/* Lede — under the hero headline */
.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Meta — mono, all-caps, for dates, cohort tags */
.t-meta {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* Persona / pull-quote — italic display, anchored by a 2px
   orange underline on the first word. */
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Wordmark — REMARKABLE, all caps, tight tracking. */
.t-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

/* Tier label — small badge text for "TIER 1 — LUX" etc. */
.t-tier {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* =========================================================
   SPACING + RADII + SHADOWS + MOTION
   ========================================================= */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(20,23,28,0.04), 0 1px 2px rgba(20,23,28,0.05);
  --shadow-2: 0 2px 6px rgba(20,23,28,0.06), 0 12px 28px rgba(20,23,28,0.08);
  --shadow-3: 0 24px 64px rgba(20,23,28,0.14);
  --shadow-lux: 0 2px 0 var(--charcoal-900), 0 12px 32px rgba(0, 26, 102, 0.16);
  --shadow-focus: 0 0 0 3px var(--blue-200);

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-quick: 120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;
}


/* =========================================================
   BASE RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
::selection { background: var(--blue-600); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   HEADER
   ========================================================= */
header {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-5) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: all var(--dur-base) var(--ease-standard);
}

header.scrolled {
  box-shadow: var(--shadow-2);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}

.logo {
  font-family: var(--font-wordmark);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  transition: color var(--dur-quick) var(--ease-standard);
}

.logo:hover {
  color: var(--brand);
}

nav {
  display: flex;
  gap: var(--space-7);
  align-items: center;
}

nav a {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
  position: relative;
}

nav a:hover {
  color: var(--brand);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width var(--dur-base) var(--ease-standard);
}

nav a:hover::after {
  width: 100%;
}

/* =========================================================
   HERO — BOLD VERSION
   ========================================================= */
.bhero {
  padding: var(--space-9) 0 var(--space-7);
  background: linear-gradient(135deg, var(--bg-page) 0%, var(--blue-50) 100%);
  position: relative;
  overflow: hidden;
}

.bhero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 64, 240, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.bhero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}

.bhero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  margin-bottom: var(--space-4);
}

.bhero-kicker .dot {
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  display: block;
}

.bhero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  margin: 0 0 var(--space-5) 0;
}

.bhero h1 .mark-hi {
  background: linear-gradient(135deg, var(--brand) 0%, var(--blue-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bhero-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
  max-width: 650px;
  text-wrap: pretty;
  margin-bottom: var(--space-6);
}

.bhero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.bhero-reassure {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-7);
  display: block;
}

.bhero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-7);
  border-top: 1.5px solid var(--border-1);
}

.bhero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bhero-stat .n {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.bhero-stat .n .accent {
  background: linear-gradient(135deg, var(--brand) 0%, var(--blue-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bhero-stat .l {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

.bhero-stat.wix-badge {
  justify-content: center;
  align-items: center;
}

.bhero-stat.wix-badge img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 80px;
  height: 80px;
}

.bhero-figure {
  position: relative;
}

.frameline {
  position: absolute;
  bottom: -12px;
  left: -12px;
  right: -12px;
  top: -12px;
  border: 2px solid var(--charcoal-900);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 2px solid var(--border-1);
  box-shadow: var(--shadow-lux);
  transition: all var(--dur-base) var(--ease-emphasized);
}

.photo:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 0 var(--charcoal-900), 0 24px 56px rgba(0, 64, 240, 0.2);
  transform: translateY(-8px);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.photo .name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

.photo .role {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
  overflow: hidden;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-page);
}

.marquee-track {
  display: flex;
  gap: var(--space-6);
  width: fit-content;
  animation: scroll-left 40s linear infinite;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--brand);
  white-space: nowrap;
  padding: 0 var(--space-4);
}

.marquee-item.mono {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: normal;
  color: var(--brand);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn.lg {
  font-size: var(--fs-md);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
}

.btn-primary {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 64, 240, 0.25);
}

.btn-primary:active {
  background: var(--brand-press);
  border-color: var(--brand-press);
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--charcoal-900);
}

.btn-secondary:hover {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 64, 240, 0.15);
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  padding: var(--space-9) 0;
  background: var(--bg-page);
  position: relative;
}

.section.sunken {
  background: linear-gradient(180deg, var(--bg-sunken) 0%, var(--white) 100%);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* =========================================================
   SECTION HEAD
   ========================================================= */
.bhead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}

.bhead > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bhead h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

.bhead p {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 600px;
  text-wrap: pretty;
  margin: 0;
}

/* =========================================================
   EYEBROW
   ========================================================= */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand);
  padding: var(--space-2) var(--space-4);
  background: var(--blue-50);
  border-radius: var(--radius-pill);
  width: fit-content;
}

.eyebrow.accent {
  color: var(--accent);
  background: var(--orange-50);
}

.eyebrow.on-dark {
  color: var(--blue-200);
  background: rgba(200, 210, 255, 0.15);
}

/* =========================================================
   THREE MOVES CARDS
   ========================================================= */
.bserve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.bserve-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: linear-gradient(135deg, var(--white) 0%, rgba(238, 242, 255, 0.4) 100%);
  border: 1.5px solid var(--border-1);
  border-radius: var(--radius-lg);
  transition: all var(--dur-base) var(--ease-emphasized);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  gap: var(--space-5);
}

.bserve-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--blue-700) 100%);
}

.bserve-card.t2::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--orange-600) 100%);
}

.bserve-card.t1::before {
  background: linear-gradient(90deg, var(--blue-400) 0%, var(--blue-600) 100%);
}

.bserve-card.t1 {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc(50% - var(--space-3));
}

.bserve-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-3);
  transform: translateY(-8px);
}

.bserve-card .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bserve-card .tier {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

.bserve-card .glyph {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--brand);
  opacity: 0.15;
}

.bserve-card .body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}

.bserve-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fg-1);
}

.bserve-card p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0;
  text-wrap: pretty;
}

.bserve-card .offer {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
}

.bserve-card .cta {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.bserve-card .arrow {
  transition: transform var(--dur-quick) var(--ease-standard);
}

.bserve-card:hover .arrow {
  transform: translateX(4px);
}

/* =========================================================
   MANIFESTO BAND
   ========================================================= */
.manifesto {
  background: linear-gradient(135deg, var(--charcoal-900) 0%, var(--charcoal-800) 100%);
  color: var(--fg-on-dark);
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}

.manifesto::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 64, 240, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.manifesto-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.manifesto blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--accent);
  margin: 0;
  text-wrap: balance;
}

.manifesto em {
  font-style: italic;
  color: var(--accent);
}

.manifesto .sign {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-medium);
}

/* =========================================================
   WORK SECTION
   ========================================================= */
.stage {
  background: linear-gradient(135deg, var(--charcoal-900) 0%, var(--charcoal-800) 100%);
  color: var(--fg-on-dark);
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}

.stage-aura {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 64, 240, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.stage-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.stage-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--white);
  margin: 0;
}

.stage-head p {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
  margin: 0;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  position: relative;
  z-index: 1;
}

.work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: all var(--dur-base) var(--ease-emphasized);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.work-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-8px);
}

.work-visual {
  height: 240px;
  width: 100%;
}

.work-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.work-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}

.work-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.work-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.work-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.metric {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  background: rgba(255, 108, 47, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .bhero-inner {
    grid-template-columns: 1fr;
  }

  .bhero h1 {
    font-size: var(--fs-4xl);
  }

  .bhero-stats {
    grid-template-columns: 1fr;
  }

  .bhead {
    grid-template-columns: 1fr;
  }

  .bserve-grid {
    grid-template-columns: 1fr;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  nav {
    gap: var(--space-4);
  }

  .marquee-track {
    animation: scroll-left 20s linear infinite;
  }
}



/* =========================================================
   LOGO ALIGNMENT LAYER
   Matches the site's type + accents to the Remarkable
   logomark: geometric Montserrat letterforms, the pale-sky →
   electric-blue gradient, and the crossbar-less "peak" motif.
   Toggled via body[data-*] attributes (driven by Tweaks).
   ========================================================= */

body[data-display="logo"] {
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-wordmark: 'Montserrat', system-ui, sans-serif;
  --tracking-display: 0.01em;
}

body[data-display="logo"] .bhero h1 {
  font-weight: 800;
  font-size: clamp(44px, 7vw, 104px);
  letter-spacing: 0.005em;
}

body[data-display="logo"] h2,
body[data-display="logo"] .bhead h2,
body[data-display="logo"] .stage-head h2 {
  font-weight: 700;
}

body[data-bodyfont="montserrat"] {
  --font-sans: 'Montserrat', system-ui, sans-serif;
}

/* Logo gradient — pale sky to electric blue, same axis as the R-mark */
body[data-gradient="logo"] .bhero h1 .mark-hi,
body[data-gradient="logo"] .bhero-stat .n .accent {
  background: linear-gradient(150deg, #8AA0FF 0%, #2C50FA 55%, #0040F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Kicker dot becomes the logo's crossbar-less peak (Λ) */
body[data-gradient="logo"] .bhero-kicker .dot {
  width: 13px;
  height: 12px;
  border-radius: 0;
  background: linear-gradient(180deg, #8AA0FF 0%, #0040F0 100%);
  clip-path: polygon(50% 0%, 100% 100%, 71% 100%, 50% 36%, 29% 100%, 0% 100%);
}

/* =========================================================
   LAUNCH / MOBILE PASS
   ========================================================= */
.logo img { height: 120px; width: auto; display: block; }
.about-cols { grid-template-columns: 1fr 1fr; }
.about-h2 { font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1.1; }

@media (max-width: 900px) {
  .logo img { height: 60px; }
  header { padding: var(--space-3) 0; }
  header .container { gap: var(--space-4); }
  nav { gap: var(--space-4); }
  nav a { font-size: var(--fs-sm); padding: var(--space-2) 0; }
}

@media (max-width: 768px) {
  header .container { flex-wrap: wrap; row-gap: var(--space-2); }
  nav { flex-wrap: wrap; row-gap: var(--space-1); }
  nav .btn, nav a.btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }

  .bhero { padding-top: var(--space-7); }
  body[data-display="logo"] .bhero h1,
  .bhero h1 { font-size: clamp(38px, 11vw, 56px); }
  .bhero-lede { font-size: var(--fs-md); }
  .bhero-cta .btn.lg { width: 100%; }
  .bhero-figure { max-width: 420px; margin: var(--space-4) auto 0; }

  .bserve-card { padding: var(--space-6); }
  .bserve-card.t1 { max-width: 100%; }

  .about-cols { grid-template-columns: 1fr; }
  .about-h2 { font-size: clamp(28px, 9vw, 40px); }
  .about-h2 br { display: none; }

  .manifesto blockquote { font-size: var(--fs-xl); }
  .bhead h2, .stage-head h2 { font-size: var(--fs-2xl); }
  .section { padding: var(--space-8) 0; }
  .stage { padding: var(--space-8) 0; }
}

/* =========================================================
   PATHWAY QUESTIONNAIRE MODAL
   ========================================================= */
.pw-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 28, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.pw-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pw-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.pw-head .tier {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  display: block;
  margin-bottom: var(--space-2);
}

.pw-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

.pw-close {
  background: transparent;
  border: 1.5px solid var(--border-1);
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
}

.pw-close:hover { border-color: var(--border-strong); color: var(--fg-1); }

.pw-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  display: block;
  margin-bottom: var(--space-2);
}

.pw-label .opt { font-weight: var(--fw-regular); color: var(--fg-3); }

.pw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pw-chip {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--charcoal-300);
  background: var(--white);
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
}

.pw-chip:hover { border-color: var(--brand); color: var(--brand); }

.pw-chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.pw-field input,
.pw-field select,
.pw-field textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-1);
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--charcoal-300);
  border-radius: var(--radius-md);
  background: var(--white);
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}

.pw-field textarea { resize: vertical; min-height: 110px; }

.pw-field input:focus,
.pw-field select:focus,
.pw-field textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

.pw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pw-note {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  max-width: 280px;
}

.pw-sent {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) 0;
}

.pw-sent h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: 0;
}

.pw-sent p { max-width: 420px; }

@media (max-width: 768px) {
  .pw-modal { padding: var(--space-5); max-height: 86vh; }
  .pw-row { grid-template-columns: 1fr; }
  .pw-foot .btn { width: 100%; }
  .pw-note { max-width: 100%; }
}


/* =========================================================
   MOBILE REPLICA PASS — small screens mirror the desktop
   composition: compact one-row header, side-by-side CTAs,
   3-across stats, tightened section rhythm. Placed last in
   the cascade so it wins over earlier mobile rules.
   ========================================================= */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  html { scroll-padding-top: 76px; }

  /* Header: one compact row; the logo acts as Home */
  header { padding: 10px 0; }
  header .container { flex-wrap: nowrap; gap: 12px; }
  .logo img { height: 44px; }
  header nav { gap: 10px; flex-wrap: nowrap; }
  header nav a { font-size: 13px; padding: 8px 0; white-space: nowrap; }
  header nav a.btn, header nav .btn { padding: 9px 12px; font-size: 13px; }

  /* Hero — same order and proportions as desktop, scaled */
  .bhero { padding: 44px 0 8px; }
  .bhero-kicker { font-size: 11px; margin-bottom: 12px; }
  body[data-display="logo"] .bhero h1,
  .bhero h1 { font-size: clamp(34px, 10.5vw, 46px); margin-bottom: 16px; }
  .bhero-lede { font-size: 16px; margin-bottom: 20px; }
  .bhero-cta { gap: 10px; flex-wrap: nowrap; margin-bottom: 16px; }
  .bhero-cta .btn.lg { width: auto; flex: 1 1 0; font-size: 14px; padding: 13px 10px; border-radius: 10px; }
  .bhero-reassure { font-size: 10px; letter-spacing: 0.04em; margin-bottom: 28px; }
  .bhero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; align-items: center; }
  .bhero-stat .n { font-size: 26px; }
  .bhero-stat .l { font-size: 11px; }
  .bhero-stat.wix-badge img { height: 56px !important; width: auto !important; }
  .bhero-figure { max-width: 100%; margin: 28px 6px 0; }
  .photo .name { font-size: 18px; }
  .photo .role { font-size: 12px; }

  /* Marquee */
  .marquee { padding: 10px 0; }
  .marquee-item { font-size: 13px; padding: 0 10px; }

  /* Section rhythm */
  .section, .stage, .manifesto { padding: 56px 0; }
  .bhead { gap: 12px; margin-bottom: 32px; }
  .bhead h2, .stage-head h2 { font-size: 30px; }
  .bhead p { font-size: 16px; }
  .eyebrow { font-size: 11px; }
  .stage-head { gap: 16px; margin-bottom: 40px; }
  .stage-head p { font-size: 16px; }

  /* About — restore breathing room lost to inline padding */
  #about { padding: 56px 0 !important; }
  #about .container > div:first-child { margin-bottom: 36px !important; }
  .about-cols { gap: 24px !important; }

  /* Three paths */
  .bserve-grid { gap: 16px; }
  .bserve-card { padding: 24px; gap: 16px; }
  .bserve-card h3 { font-size: 22px; }

  /* Manifesto */
  .manifesto blockquote { font-size: 24px; }

  /* Work */
  .work-grid { gap: 16px; margin-bottom: 40px; }
  .work-visual { height: 200px; }
  .work-content { padding: 20px; gap: 10px; }
  .work-card h3 { font-size: 24px; }

  /* Footer */
  footer { padding: 48px 0 !important; }
  footer img { height: 88px !important; }

  /* Services page */
  .page-hero { padding: 48px 0 40px; }
  .page-hero h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .page-hero .lede { font-size: 16px; }
  .svc-row h2 { font-size: 26px; }
  .svc-row p { font-size: 16px; }
}

/* Meet the CEO band */
.manifesto .ceo-photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.manifesto .ceo-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.manifesto .ceo-blurb {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin: 0;
  text-wrap: pretty;
}

/* "What We've Built" — gradient stat band on the About section */
.built-band { margin-bottom: var(--space-7); }

.built-title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  margin: 0 0 var(--space-5) 0;
}

.built-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.built-stat {
  position: relative;
  border-top: 2px solid var(--border-1);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.built-stat::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #8AA0FF 0%, #0040F0 100%);
}

.built-stat .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: 0;
  background: linear-gradient(150deg, #8AA0FF 0%, #2C50FA 55%, #0040F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: fit-content;
}

.built-stat .l {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .built-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .built-stat .n { font-size: 36px; }
}

/* Marquee sits flush against the About section — no gap below the hero */
.bhero { padding-bottom: 0; }

/* ...but give the About eyebrow + title room below the marquee line */
#about { padding-top: 72px !important; }

/* =========================================================
   MOBILE HERO — photo as a small box beside the title
   (mirrors the desktop side-by-side composition)
   ========================================================= */
@media (max-width: 768px) {
  /* Promote the text column's children to grid items */
  .bhero-inner > div:first-child { display: contents; }

  .bhero-inner {
    grid-template-columns: minmax(0, 1fr) clamp(104px, 31vw, 136px);
    gap: 0 var(--space-4); /* element margins handle vertical rhythm */
    align-items: start;
  }

  .bhero-kicker { grid-column: 1; }
  .bhero h1 { grid-column: 1; }

  .bhero-lede,
  .bhero-cta,
  .bhero-reassure,
  .bhero-stats { grid-column: 1 / -1; }

  .bhero-figure {
    grid-column: 2;
    grid-row: 1 / 3; /* beside the kicker + headline */
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 4px 0 var(--space-5);
  }

  .bhero-figure .photo {
    aspect-ratio: 4 / 5;
  }

  .bhero-figure .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* Compact caption: name only at this size */
  .bhero-figure .photo .caption { padding: 8px 10px 9px; }
  .bhero-figure .photo .name { font-size: 12px; line-height: 1.2; }
  .bhero-figure .photo .role { display: none; }

  .bhero-figure .frameline { bottom: -8px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  header nav { gap: 8px; }
  header nav a { font-size: 12px; }
  header nav a.btn, header nav .btn { padding: 8px 10px; font-size: 12px; }
  .logo img { height: 38px; }
  header nav a.btn, header nav .btn { padding: 8px 10px; font-size: 12px; }
  .logo img { height: 38px; }
}