/* ==========================================================================
   Mizenna Advisory — Meridian Design System
   Editorial consulting language: white canvas, near-black type, a single
   deep emerald used with discipline, hairline structure, generous air.
   Note: legacy token names are kept so inline styles keep resolving;
   values are remapped to the light system. Dark bands rescope the tokens.
   ========================================================================== */

/* Self-hosted (not loaded from Google's CDN): serving fonts from our own
   origin means a visitor's IP is never sent to a third party just to
   render text. Both are variable fonts, so weight ranges cover several
   static weights from one file each. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

:root {
  /* ── Core tokens (legacy names, light values) ────────────────────────── */
  --color-forest-depths:     #ffffff;  /* canvas */
  --color-midnight-tide:     #e4e7e5;  /* line */
  --color-shadow-teal:       #f4f5f3;  /* raised surface */
  --color-charcoal-hairline: #dfe3e0;  /* hairline */
  --color-abyss-green:       #0a3b2e;  /* deep emerald — dark bands, footer */
  --color-deep-lagoon:       #0d4536;  /* deep emerald 2 */
  --color-mist-gray:         #4c5754;  /* body text */
  --color-pure-light:        #131715;  /* headings (near-black on light) */
  --color-mint-glow:         #177b57;  /* accent green */
  --color-teal-pulse:        #177b57;  /* secondary accent */

  /* ── Semantic aliases ────────────────────────────────────────────────── */
  --paper:        #ffffff;
  --paper-raised: var(--color-shadow-teal);
  --ink:          #131715;
  --ink-soft:     var(--color-mist-gray);
  --ink-faint:    #6e7975;
  --accent:       var(--color-mint-glow);
  --accent-deep:  #0f5c41;
  --accent-wash:  #eaf3ee;
  --line:         var(--color-midnight-tide);
  --line-soft:    var(--color-charcoal-hairline);
  --measure:      66ch;
  --serif:        'Newsreader', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:         'Inter', 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-lg:   0 14px 40px rgba(16, 24, 21, 0.1);
  --shadow-glow: 0 8px 24px rgba(16, 24, 21, 0.08);

  /* ── Radii — pill CTAs, square cards (BCG's own split: rounded buttons, square content) ── */
  --radius-card: 0px;
  --radius-pill: 999px;
}

/* Dark sections rescope the shared tokens so inline styles stay legible */
.band--ink, .band--stakes, .site-footer {
  --color-mist-gray:  #a1a1a6;
  --color-pure-light: #ffffff;
  --color-mint-glow:  #d6a54d;
  --color-teal-pulse: #d6a54d;
  --ink-faint:        #86868b;
  --ink-soft:         #a1a1a6;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 140ms ease, opacity 140ms ease;
}
a:hover { color: var(--accent-deep); }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--color-pure-light);
}

/* Major display headlines: light editorial serif, not heavy sans —
   the single biggest lever in reading as consulting-editorial vs. SaaS. */
h1 {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 6.8vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.006em;
  font-weight: 400;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.004em;
  font-weight: 400;
}
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--measure);
  font-weight: 400;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #ffffff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.band--ink :focus-visible,
.band--stakes :focus-visible,
.site-footer :focus-visible { outline-color: #d6a54d; }

/* Anchored headings land below the sticky header, not under it */
[id] { scroll-margin-top: 5.5rem; }

/* ── Layout ──────────────────────────────────────────────────────────── */

.wrap {
  width: min(100% - 2.5rem, 70rem);
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2.5rem, 46rem); }

section { padding-block: clamp(4.5rem, 11vw, 8rem); }

.section-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.3rem;
}

/* ── Site header ──────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding-block: 0.85rem;
  pointer-events: none;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__inner > * { pointer-events: auto; }

/* Floating pills, BCG-style */
.header-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 0.45rem 0.95rem 0.45rem 0.45rem;
  box-shadow: 0 8px 26px rgba(16, 24, 21, 0.1);
}
.header-pill--actions { padding: 0.55rem 1.05rem; gap: 0.95rem; }

/* Mint hamburger square, always visible */
.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.5px;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: #d6a54d;
  cursor: pointer;
  flex: none;
  transition: background 160ms ease;
}
.nav-toggle-label:hover { background: #8ae0ba; }
.nav-toggle-label span {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-abyss-green);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle:focus-visible ~ .header-pill .nav-toggle-label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#nav-toggle:checked ~ .header-pill .nav-toggle-label span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-toggle:checked ~ .header-pill .nav-toggle-label span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .header-pill .nav-toggle-label span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Right pill contents */
.nav-search { display: flex; align-items: center; color: var(--ink); }
.nav-search svg { width: 1.15rem; height: 1.15rem; }
.nav-search:hover { color: var(--accent-deep); }
.header-cta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.header-cta:hover { color: var(--accent-deep); }
@media (max-width: 419px) { .header-cta { display: none; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 140ms ease;
}
.brand:hover { color: var(--ink); opacity: 0.8; }

.brand__mark { width: 1.55rem; height: 1.55rem; flex: none; }
.brand__mark rect,
.brand__mark path { fill: var(--color-abyss-green); }

.brand__name {
  font-family: var(--sans);
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* The menu panel: hamburger-opened at every viewport */
.site-nav {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  right: 0;
  display: none;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(16, 24, 21, 0.18);
  padding: 2rem 2.2rem 2.2rem;
  gap: 1.8rem 3rem;
  z-index: 120;
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
#nav-toggle:checked ~ .site-nav { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  #nav-toggle:checked ~ .site-nav { grid-template-columns: 1.3fr 1fr 1fr; }
}

.site-nav a { text-decoration: none; transition: color 140ms ease; }
.menu-col { display: grid; gap: 0.15rem; align-content: start; }
.menu-col--primary a {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--ink);
  padding: 0.4rem 0;
}
.menu-col--primary a:hover { color: var(--accent-deep); }
.menu-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.menu-col a { color: #1d1d1f; font-size: 0.95rem; padding: 0.3rem 0; }
.menu-col a:hover { color: var(--accent-deep); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 1.4rem;
  color: var(--ink-faint);
}
.breadcrumbs a { color: var(--ink-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-deep); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--ink-soft); font-weight: 500; }
.breadcrumbs span[aria-hidden] { opacity: 0.6; }

/* ── Nav toggle (hidden but focusable checkbox) ─────────────────────── */

.nav-toggle { position: absolute; top: 0; left: -9999px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}

.btn--primary {
  background: var(--accent);
  color: #ffffff;
}
.btn--primary:hover {
  background: var(--accent-deep);
  color: #ffffff;
}
.btn--primary:active { background: var(--color-abyss-green); }

/* Specificity guard — .site-nav a would otherwise recolor the nav CTA */
nav.site-nav a.btn.btn--primary {
  color: #ffffff !important;
  padding: 0.66rem 1.35rem;
  font-size: 0.78rem;
  font-weight: 700;
}
nav.site-nav a.btn.btn--primary:hover {
  color: #ffffff !important;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

.btn--quiet {
  color: var(--accent-deep);
  border: 1px solid rgba(169, 126, 44, 0.45);
  background: transparent;
}
.btn--quiet:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* White button variant inside dark bands */
.band--ink .btn--primary,
.band--stakes .btn--primary {
  background: #ffffff;
  color: var(--color-abyss-green);
}
.band--ink .btn--primary:hover,
.band--stakes .btn--primary:hover {
  background: #ddebe3;
  color: var(--color-abyss-green);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 13vw, 9.5rem);
  border-bottom: 1px solid var(--line-soft);
}

/* Ambient glow: full-bleed animated canvas, present at every viewport
   width (unlike the old positioned SVG motif this replaces, it has no
   literal edge that can collide with the headline — it's a soft
   atmosphere behind the text, not an object beside it). Drawn and
   animated in JS; this just pins it to fill the hero. */
.hero-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.hero .wrap { position: relative; z-index: 2; }

.hero h1 { max-width: 19ch; }

.hero .lede {
  margin-block: 1.7rem 2.4rem;
  max-width: 56ch;
}

/* Atmosphere retired in the light system */
.hero-atmosphere { display: none; }
.blob { display: none; }

/* ── Dark flagship hero (homepage) ───────────────────────────────────── */

.hero--dark { background: var(--color-abyss-green); border-bottom: 0; }
.hero--dark h1 { color: #ffffff; }
.hero--dark .lede { color: #a1a1a6; }
.hero--dark .trust-strip { border-top-color: rgba(255, 255, 255, 0.16); }
.hero--dark .trust-item { color: #a1a1a6; }
.hero--dark .trust-item::before { color: #d6a54d; }
.hero--dark .btn--primary { background: #ffffff; color: var(--color-abyss-green); }
.hero--dark .btn--primary:hover { background: #ddebe3; color: var(--color-abyss-green); }

/* ── Mizan balance divider ────────────────────────────────────────────── */

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  padding-block: 0;
  border: 0;
  margin: 0;
  opacity: 0.5;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  max-width: 4rem;
  height: 1px;
  background: var(--line-soft);
}
.divider svg { width: 2rem; height: auto; color: #86868b; flex: none; }

/* ── Card grids ───────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.4rem; }

@media (min-width: 720px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.6rem;
}

.card h3 { margin-bottom: 0.5em; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: 0.98rem; }

.card--glow { box-shadow: var(--shadow-glow); }

/* ── Numbered steps ───────────────────────────────────────────────────── */

.steps { display: grid; gap: 2.5rem; counter-reset: step; }

@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { counter-increment: step; position: relative; }

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--accent);
  width: fit-content;
}

.step h3 { color: var(--ink); font-size: 1.16rem; margin-bottom: 0.55em; }

.step h3 .step-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.45rem;
}

.step p { color: var(--ink-soft); line-height: 1.62; font-size: 0.96rem; }

/* ── Commitments list ─────────────────────────────────────────────────── */

.commitments {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: commitment;
  display: grid;
  gap: 0;
}

.commitments li {
  counter-increment: commitment;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: clamp(1.06rem, 2vw, 1.3rem);
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}
.commitments li:last-child { border-bottom: 1px solid var(--line-soft); }

.commitments li::before {
  content: counter(commitment, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 0.2em;
}

/* ── Band (tinted section) ────────────────────────────────────────────── */

.band { background: var(--paper-raised); border-block: 1px solid var(--line-soft); }

.band--ink {
  background: var(--color-abyss-green);
  border-block: 0;
}
.band--ink h2 { color: #ffffff; }
.band--ink .lede,
.band--ink p { color: #a1a1a6; }

/* ── Stakes band ──────────────────────────────────────────────────────── */

.band--stakes {
  background: var(--color-abyss-green);
  border-block: 0;
}
.band--stakes h2 { color: #ffffff; }
.band--stakes p { color: #a1a1a6; }
.band .section-kicker { color: var(--accent); }
.band--stakes .section-kicker,
.band--ink .section-kicker,
.band.band--stakes .section-kicker,
.band.band--ink .section-kicker { color: #d6a54d; }

.penalty-grid { display: grid; gap: 1.2rem; margin-top: 2.8rem; }
@media (min-width: 720px) { .penalty-grid { grid-template-columns: repeat(3, 1fr); } }

.penalty-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid #d6a54d;
  border-radius: var(--radius-card);
  padding: 1.9rem 1.6rem;
  transition: background 200ms ease, border-color 200ms ease;
}
.penalty-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Doubled selectors so these beat the band's descendant `p` rule */
.penalty-amt,
.band--stakes .penalty-amt,
.band--ink .penalty-amt {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 650;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0.7rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.penalty-label,
.band--stakes .penalty-label,
.band--ink .penalty-label {
  font-weight: 550;
  color: #ffffff;
  font-size: 0.93rem;
  margin-bottom: 0.3rem;
}
.penalty-sub,
.band--stakes .penalty-sub,
.band--ink .penalty-sub { color: #a1a1a6; font-size: 0.87rem; line-height: 1.55; }
.stakes-footnote,
.band--stakes .stakes-footnote { margin-top: 2.2rem; font-size: 0.8rem; color: #86868b; }

/* ── Persona grid ─────────────────────────────────────────────────────── */

.persona-grid { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
@media (min-width: 720px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }

.persona-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 2.6rem 1.8rem 2rem;
  background: #ffffff;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The heading link stretches over the whole card */
.persona-card h3 a::after { content: ''; position: absolute; inset: 0; }
.persona-card:hover {
  border-color: rgba(169, 126, 44, 0.45);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}

/* Ghost numeral: a large, quiet "chapter mark" in the corner, editorial-style */
.persona-num,
.persona-card .persona-num {
  position: absolute;
  top: 0.9rem;
  right: 1.3rem;
  z-index: 0;
  font-family: var(--sans);
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--line-soft);
  line-height: 1;
  margin-bottom: 0;
  pointer-events: none;
}

.persona-card h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 0.35em;
  max-width: 85%;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.32rem;
}
.persona-card h3 a { color: inherit; text-decoration: none; }
.persona-card:hover h3 a { color: var(--accent-deep); }

.persona-pain,
.persona-card .persona-pain {
  position: relative;
  z-index: 1;
  color: var(--accent-deep);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.65rem;
  margin-top: 0.3rem;
  margin-bottom: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

/* Flagship modifier: an asymmetric lead card for a "this is the one" segment */
.persona-card--flagship {
  background: var(--accent-wash);
  border-color: rgba(169, 126, 44, 0.3);
}
.persona-card--flagship .persona-num { color: rgba(169, 126, 44, 0.22); font-size: 4.4rem; }
.persona-card--flagship h3 { font-size: 1.5rem; max-width: 32ch; }
.persona-card--flagship .persona-pain { border-top-color: rgba(169, 126, 44, 0.3); }
.persona-card--flagship > p { max-width: 62ch; font-size: 1rem; }
@media (min-width: 720px) { .persona-card--flagship { padding: 2.8rem 2.6rem 2.4rem; } }

.persona-card > p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.62;
}

/* ── Testimonial carousel ─────────────────────────────────────────────── */

.testimonial-carousel {
  margin-top: 2.6rem;
}

.testimonial-viewport {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { transition: none; }
}

.testimonial-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 1rem 1.5rem 0;
  text-align: center;
}

.testimonial-stars {
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  margin: 0 0 1.6rem;
}
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  max-width: 42ch;
  margin: 0 auto 1.3rem;
}
.testimonial-attr {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 2rem;
}

.testimonial-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.testimonial-arrow svg { width: 1.1rem; height: 1.1rem; }
.testimonial-arrow:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.testimonial-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--line-soft);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.testimonial-dot[aria-selected="true"] {
  background: var(--accent);
  transform: scale(1.35);
}

/* ── Differentiator grid ──────────────────────────────────────────────── */

.diff-grid { display: grid; gap: 1.1rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }

.diff-item {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.5rem 1.4rem;
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  transition: border-color 200ms ease;
}
.diff-item:hover { border-color: rgba(169, 126, 44, 0.4); }

.diff-check {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.22em;
  line-height: 1;
}

.diff-item h4 {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.25em;
  line-height: 1.35;
}

.diff-item p { color: var(--ink-soft); font-size: 0.89rem; margin: 0; line-height: 1.58; }

/* ── Step outcome ─────────────────────────────────────────────────────── */

.step-outcome,
.step .step-outcome {
  margin-top: 0.95rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
  color: var(--accent-deep);
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.55;
}

/* ── Commitment detail ────────────────────────────────────────────────── */

.commitment-detail {
  display: block;
  grid-column: 2 / -1;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 0.4em;
  line-height: 1.6;
}

/* ── Trust strip ──────────────────────────────────────────────────────── */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.trust-item {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trust-item::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* ── Credentials strip ────────────────────────────────────────────────── */

.cred-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3.5rem;
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft);
}

.cred-num {
  font-family: var(--sans);
  font-size: 2.6rem;
  font-weight: 650;
  color: var(--accent-deep);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cred-label {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  font-weight: 450;
  line-height: 1.45;
}

/* ── What to expect ───────────────────────────────────────────────────── */

.expect-steps { display: grid; gap: 1.2rem; margin-top: 2rem; }
.expect-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: start; }
.expect-num {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--accent);
  line-height: 1.4;
}
.expect-step p { font-size: 0.96rem; color: var(--ink-soft); margin: 0; line-height: 1.62; }
.expect-step strong { color: var(--ink); font-weight: 600; }

/* ── Service blocks ───────────────────────────────────────────────────── */

.service {
  display: grid;
  gap: 0.5rem 4rem;
  padding-block: 3rem;
  border-top: 1px solid var(--line-soft);
}
.service:last-of-type { border-bottom: 1px solid var(--line-soft); }

@media (min-width: 820px) { .service { grid-template-columns: minmax(0, 22rem) 1fr; } }

.service h3 {
  font-size: clamp(1.25rem, 2.3vw, 1.5rem);
  color: var(--ink);
  margin-bottom: 0.5em;
}

.service ul { list-style: none; margin: 0; padding: 0; }

.service li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.58;
}
.service li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.65rem;
  height: 2px;
  background: var(--accent);
}

.service .service-note { color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.8rem; }

/* ── Insights post list ───────────────────────────────────────────────── */

.post-list { display: grid; gap: 0; }

.post-card {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  padding-block: 2.4rem;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 180ms ease;
  border-radius: 0;
}
@media (min-width: 700px) { .post-card { grid-template-columns: 250px 1fr; gap: 2.2rem; } }
.post-cover { display: block; width: 100%; }
.post-card:hover .post-cover { opacity: 0.9; }
.post-card:last-child { border-bottom: 1px solid var(--line-soft); }
.post-card:hover { border-top-color: var(--accent); }
.post-card:hover h3 { color: var(--accent-deep); }

.post-card h3 {
  transition: color 180ms ease;
  max-width: 40ch;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin-bottom: 0.5em;
  line-height: 1.28;
}

.post-card p {
  color: var(--ink-soft);
  max-width: var(--measure);
  font-size: 0.96rem;
}

.post-meta,
.post-card .post-meta {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* ── Article prose ────────────────────────────────────────────────────── */

.article-header {
  padding-block: clamp(3rem, 8vw, 5rem) 0;
}
.article-header h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  max-width: 28ch;
  line-height: 1.08;
}

.article-cover { display: block; width: 100%; margin-top: 2.2rem; }

.prose { max-width: var(--measure); }
.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  margin-top: 2.6em;
  margin-bottom: 0.5em;
}
.prose h3 { margin-top: 2em; font-size: 1.18rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.3em; }
.prose li { margin-bottom: 0.55em; line-height: 1.65; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 2em 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-raised);
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 450;
}
.prose strong { font-weight: 600; color: var(--ink); }

.article-disclaimer {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.875rem;
  color: var(--ink-faint);
  max-width: var(--measure);
  line-height: 1.6;
}

.article-footer-cta {
  margin-top: 3.5rem;
  padding: 2rem 1.8rem;
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-card);
  max-width: var(--measure);
}
.article-footer-cta h3 { color: var(--ink); font-size: 1.18rem; }
.article-footer-cta p { color: var(--ink-soft); font-size: 0.97rem; }

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact-grid { display: grid; gap: 3.5rem; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.embed-placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-raised);
  padding: 2.4rem 2rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.form-field { margin-bottom: 1.4rem; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px minimum prevents iOS focus zoom */
  font-weight: 400;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cdd3cf;
  border-radius: var(--radius-card);
  padding: 0.78rem 0.95rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-faint);
  opacity: 0.7;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169, 126, 44, 0.12);
}

/* ── Site footer ──────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-abyss-green);
  border-top: 0;
  padding-block: 3.5rem 2.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
  font-size: 0.92rem;
  color: #a1a1a6;
}

/* When the page's last section is already a dark band, the margin above
   shows the white body background between two dark blocks. Collapse it so
   the CTA band flows straight into the footer instead. Matches regardless
   of nesting depth (homepage nests it directly in main; templated pages
   nest it inside article.prose) — only the CTA band's own last-child
   position relative to its immediate parent matters. */
main:has(.band--ink:last-child) + .site-footer,
main:has(.band--stakes:last-child) + .site-footer {
  margin-top: 0;
}

.site-footer__inner { display: grid; gap: 2.5rem; }

@media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .site-footer__inner { grid-template-columns: 1.6fr 1.1fr 1.25fr 1fr 0.8fr; } }

.site-footer .brand,
.site-footer .brand:hover { color: #ffffff; }
.site-footer .brand__name { font-size: 1.2rem; color: #ffffff; }
.site-footer .brand__mark rect,
.site-footer .brand__mark path { fill: #d6a54d; }
.site-footer nav { display: grid; gap: 0.55rem; align-content: start; }
.site-footer a { color: #a1a1a6; text-decoration: none; transition: color 140ms ease; }
.site-footer a:hover { color: #ffffff; }
.site-footer nav a { font-size: 0.89rem; }

/* BCG-style assist strip at the top of the footer */
.footer-assist {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-assist-heading {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  color: #ffffff;
  margin: 0 0 0.3rem;
}
.footer-assist p { margin: 0; color: #a1a1a6; font-size: 0.95rem; }
.site-footer .btn--primary { background: #ffffff; color: var(--color-abyss-green); }
.site-footer .btn--primary:hover { background: #ddebe3; color: var(--color-abyss-green); }

.site-footer .footer-legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: #86868b;
  line-height: 1.65;
}
.site-footer .social-links { margin-top: 0.9rem; font-size: 0.82rem; }
.site-footer .social-links a { margin-right: 0.2rem; }

.footer-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d6a54d;
  margin: 0 0 0.85rem;
}

/* ── Statement (one idea per screen) ─────────────────────────────────── */

.statement {
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--ink);
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.statement em {
  font-style: normal;
  color: var(--accent-deep);
}

/* ── Scroll-driven reveals (compositor-run; static where unsupported) ── */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes scroll-rise {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: none; }
    }
    .penalty-card, .persona-card, .step, .diff-item, .post-card, .insight-card,
    .service, .commitments li, .cred-strip > div, figure.diagram, .statement {
      animation: scroll-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}

/* ── Hero entrance motion (pure CSS; content is never left hidden) ───── */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .hero h1            { animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero .lede         { animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both; }
  .hero .btn--primary { animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both; }
  .hero .trust-strip  { animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both; }
  .hero-glow          { animation: glow-in 1400ms ease-out both; }
  @keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ── Insight cards (homepage latest-thinking band) ───────────────────── */

.insight-grid { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .insight-grid { grid-template-columns: repeat(3, 1fr); } }

.insight-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--accent);
  padding: 1.7rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card:hover {
  border-color: rgba(169, 126, 44, 0.45);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}
.insight-cover {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  margin: -1.7rem -1.5rem 1.25rem;
}
.insight-card h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 0.5em; }
.insight-card > p:not(.post-meta) { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.1rem; }
.insight-more { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); }

/* ── Structure diagrams ──────────────────────────────────────────────── */

.diagram-grid { display: grid; gap: 1.4rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .diagram-grid { grid-template-columns: 1fr 1fr; } }

figure.diagram {
  margin: 0;
  border: 1px solid var(--line-soft);
  background: #ffffff;
  padding: 1.8rem 1.6rem 1.4rem;
}
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--ink-faint);
  line-height: 1.55;
}
.prose figure.diagram { margin: 2.4rem 0; }

/* ── Subscribe forms ─────────────────────────────────────────────────── */

.footer-subscribe { margin-top: 1.4rem; }
.footer-subscribe label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d6a54d;
  margin-bottom: 0.6rem;
}
.footer-subscribe .subscribe-row { display: flex; gap: 0.5rem; max-width: 22rem; }
.footer-subscribe input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.62rem 0.8rem;
}
.footer-subscribe input[type="email"]::placeholder { color: #86868b; }
.footer-subscribe input[type="email"]:focus { outline: none; border-color: #d6a54d; }
.footer-subscribe .btn { padding: 0.7rem 1.1rem; font-size: 0.85rem; }

.subscribe-inline { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.subscribe-inline input[type="email"] {
  font: inherit;
  font-size: 1rem;
  width: min(22rem, 100%);
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cdd3cf;
  padding: 0.78rem 0.95rem;
}
.subscribe-inline input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169, 126, 44, 0.12); }

/* ── Search page ─────────────────────────────────────────────────────── */

.search-box {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.6rem;
  max-width: 34rem;
}
.search-box input[type="search"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cdd3cf;
  padding: 0.85rem 1rem;
}
.search-box input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169, 126, 44, 0.12); }
.search-results { margin-top: 2.5rem; }
.search-count { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 1rem; }

/* ── Concierge (CSS-only greeting widget) ────────────────────────────── */

.concierge-toggle { position: absolute; top: 0; left: -9999px; }

.concierge {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

/* ── WhatsApp click-to-chat ───────────────────────────────────────────── */

.whatsapp-launcher {
  position: fixed;
  right: 5.6rem;
  bottom: 1.2rem;
  z-index: 90;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(16, 24, 21, 0.25);
  transition: transform 180ms ease, background 180ms ease;
}
.whatsapp-launcher:hover { background: #1ebe5a; transform: scale(1.05); }
.whatsapp-launcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.whatsapp-launcher svg { width: 1.8rem; height: 1.8rem; fill: #ffffff; }
@media (max-width: 640px) {
  .whatsapp-launcher { right: 1.2rem; bottom: 5.4rem; }
}

.concierge-teaser {
  background: #ffffff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px rgba(16, 24, 21, 0.14);
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 15rem;
  cursor: pointer;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .concierge-teaser { animation: concierge-teaser 9s ease 2.2s forwards; }
  @keyframes concierge-teaser {
    0%   { opacity: 0; transform: translateY(8px); visibility: visible; }
    7%   { opacity: 1; transform: none; }
    85%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }
}
@media (prefers-reduced-motion: reduce) { .concierge-teaser { display: none; } }

.concierge-launcher {
  width: 3.4rem;
  height: 3.4rem;
  background: var(--color-abyss-green);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(16, 24, 21, 0.25);
  transition: background 180ms ease;
}
.concierge-launcher:hover { background: var(--color-deep-lagoon); }
.concierge-launcher svg { width: 1.7rem; height: 1.7rem; }
.concierge-launcher svg rect,
.concierge-launcher svg path { fill: #d6a54d; }
.concierge-toggle:focus-visible ~ .concierge .concierge-launcher {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.concierge-panel {
  display: none;
  width: min(20rem, calc(100vw - 2.4rem));
  background: #ffffff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 20px 50px rgba(16, 24, 21, 0.18);
  padding: 1.3rem 1.2rem 1.1rem;
}
#concierge-toggle:checked ~ .concierge .concierge-panel { display: block; }
#concierge-toggle:checked ~ .concierge .concierge-teaser { display: none; animation: none; }

.concierge-hello { font-weight: 650; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.015em; margin: 0 0 0.25rem; }
.concierge-sub { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.95rem; line-height: 1.5; }
.concierge-links a {
  display: block;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--line-soft);
  margin-bottom: 0.45rem;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.concierge-links a:hover {
  border-color: rgba(169, 126, 44, 0.5);
  color: var(--accent-deep);
  background: var(--accent-wash);
}
.concierge-note { font-size: 0.75rem; color: var(--ink-faint); margin: 0.55rem 0 0; }

/* ── Utilities ────────────────────────────────────────────────────────── */

.mt-0 { margin-top: 0; }
.center { text-align: center; }
.measure { max-width: var(--measure); }
.mx-auto { margin-inline: auto; }