/* =============================================================
 * STRAFZA site.css — public component library  (v3)
 * ----------------------------------------------------------------
 * Loaded BEFORE the DB-rendered <style id="theme-tokens">.
 *
 * Token strategy
 * --------------
 *   1. site.css :root          — defaults for NEW tokens AND fallback
 *                                values matching the current DB row
 *                                for existing tokens (so a missing DB
 *                                style block doesn't fall back to
 *                                unrelated defaults).
 *   2. DB <style id="theme-tokens">  — :root { ... } overriding existing
 *                                tokens from the active theme.
 *   3. site.css :root[data-theme="dark"] — wins over both via specificity
 *                                (0,2,0). Owns ALL dark-mode token
 *                                overrides until 5e-d-4 ships a proper
 *                                Dark theme row in the DB.
 *
 * Critical: the dark-band-painting pseudo-elements use a SEPARATE
 *   --color-band-dark token (always dark in both themes), not
 *   --color-ink-strong. Reusing --color-ink-strong made the band invert
 *   to white in dark mode because that token correctly flips to white
 *   for heading text. Decoupling fixes the inversion bug.
 *
 * Structural discipline (unchanged):
 *   - Public views are NOT restructured. We adapt visual treatment
 *     to whatever shape the existing Razor produces.
 *   - Full-bleed dark sections use ::before painting a 100vw band
 *     behind the existing <section> — no new wrapper divs.
 *   - Card image slots are added to views via Html.MediaImage(null,
 *     "card-image"), which renders a .media-placeholder div until
 *     5e-d-4 wires the SectionImage admin system.
 * ============================================================= */


/* =============================================================
 * 1. TOKEN DEFAULTS (light theme)
 *
 * Fallbacks match the current DB row values where the DB defines
 * the token, so removing the DB style block doesn't shift the look.
 * ============================================================= */
:root {
    /* === Tokens the DB defines (mirrored here as fallbacks) === */
    /* color */
    --color-ink:              #2A2A2E;
    --color-ink-strong:       #1A1A1E;
    --color-ink-muted:        #6B5B47;
    --color-surface:          #FAF7F2;
    --color-surface-elevated: #FFFFFF;
    --color-accent:           #B58542;
    --color-accent-soft:      #D4A864;
    --color-line:             #E8E0D2;

    /* font */
    --font-display:           "Bricolage Grotesque", Georgia, serif;
    --font-body:              "Inter", system-ui, -apple-system, sans-serif;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-size-display:      clamp(2.5rem, 5vw, 4.5rem);
    --font-size-h1:           clamp(2rem, 3vw, 3rem);
    --font-size-h2:           clamp(1.5rem, 2.5vw, 2.25rem);
    --font-size-h3:           1.5rem;
    --font-size-body:         1rem;
    --font-size-small:        0.875rem;
    --font-size-eyebrow:      0.75rem;
    --font-line-tight:        1.15;
    --font-line-body:         1.6;
    --font-track-eyebrow:     0.18em;

    /* spacing */
    --space-xs:               0.5rem;
    --space-sm:               1rem;
    --space-md:               1.5rem;
    --space-lg:               2.5rem;
    --space-xl:               4rem;
    --space-xxl:              6rem;
    --space-3xl:              9rem;

    /* radius */
    --radius-sm:              4px;
    --radius-md:              8px;
    --radius-lg:              12px;
    --radius-pill:            999px;

    /* shadow */
    --shadow-sm:              0 1px 3px rgba(0,0,0,0.04);
    --shadow-md:              0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg:              0 24px 48px rgba(0,0,0,0.08);

    /* === New tokens (NOT in DB; site.css owns these) === */

    /* Background system */
    --color-bg-gradient:
        linear-gradient(135deg, #FAF7F2 0%, #F5F0E8 50%, #F8F4ED 100%);
    --color-bg-pattern:
        radial-gradient(ellipse at 20% 80%, rgba(181,133,66,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(181,133,66,0.03) 0%, transparent 50%);

    /* Glass surface for header/footer */
    --color-surface-glass:    rgba(255, 255, 255, 0.6);
    --color-surface-alt:      rgba(245, 240, 232, 0.9);

    /* Always-light text colour for content on the always-dark band */
    --color-ink-inverse:      #FAF7F2;
    --color-ink-on-dark:       rgba(250, 247, 242, 0.95);
    --color-ink-on-dark-muted: rgba(250, 247, 242, 0.72);

    /* Always-dark background for "dark band" sections. Stays dark in
       both themes — that's the whole point of this token. */
    --color-band-dark:        #1A1A1E;

    /* Accent depth */
    --color-accent-deep:        #8B6632;
    --color-accent-glow:        rgba(181, 133, 66, 0.12);
    --color-accent-glow-strong: rgba(181, 133, 66, 0.25);

    /* Line variants */
    --color-line-strong:      rgba(107, 91, 71, 0.25);
    --color-line-accent:      rgba(181, 133, 66, 0.30);

    /* Image slot */
    --color-image-bg:
        linear-gradient(135deg, #F5F2ED 0%, #EBE6DC 100%);
    --color-image-overlay:
        linear-gradient(180deg, transparent 60%, rgba(250,247,242,0.9) 100%);

    /* Hero atmospheric orbs */
    --color-hero-bg-1:        rgba(181, 133, 66, 0.08);
    --color-hero-bg-2:        rgba(181, 133, 66, 0.04);
    --color-hero-bg-3:        rgba(181, 133, 66, 0.06);

    /* Blur amounts */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;

    /* Easing + duration */
    --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:            cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring:            cubic-bezier(0.5, 0, 0.2, 1);
    --transition-fast:        180ms;
    --transition-medium:      320ms;
    --transition-slow:        600ms;

    /* Extended weights (DB has regular/medium/semibold only) */
    --font-weight-light: 300;
    --font-weight-bold:  700;
}


/* =============================================================
 * 2. DARK THEME OVERRIDES
 *
 * :root[data-theme="dark"] specificity (0,2,0) beats the DB's
 * :root (0,1,0) regardless of cascade order.
 *
 * IMPORTANT: --color-band-dark is NOT overridden here. The band
 * stays the same dark colour in both themes — that's how the
 * "dark inverted panel" pattern works without breaking text
 * inside it. The slight tonal difference between page bg
 * (~#0A0A0C in dark) and band (#1A1A1E) reads as an elevated
 * panel in dark mode.
 * ============================================================= */
:root[data-theme="dark"] {
    /* Existing tokens — dark variants */
    --color-surface:          #0A0A0C;
    --color-surface-elevated: #141418;
    --color-ink:              #E8E6E3;
    --color-ink-strong:       #FFFFFF;
    --color-ink-muted:        #A1A1AA;
    --color-accent:           #D4A864;
    --color-accent-soft:      #E8C68A;
    --color-line:             rgba(255, 255, 255, 0.12);

    /* Glass + alt surfaces */
    --color-surface-glass:    rgba(26, 26, 30, 0.55);
    --color-surface-alt:      rgba(20, 20, 24, 0.8);

    /* Accent depth */
    --color-accent-deep:        #A67C3A;
    --color-accent-glow:        rgba(212, 168, 100, 0.18);
    --color-accent-glow-strong: rgba(212, 168, 100, 0.35);

    /* Line variants */
    --color-line-strong:      rgba(255, 255, 255, 0.20);
    --color-line-accent:      rgba(212, 168, 100, 0.40);

    /* Page background — dark gradient + faint accent pattern */
    --color-bg-gradient:
        linear-gradient(135deg, #0A0A0C 0%, #0D0F14 50%, #0B0D11 100%);
    --color-bg-pattern:
        radial-gradient(ellipse at 20% 80%, rgba(212,168,100,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(212,168,100,0.06) 0%, transparent 50%);

    /* Image slot — dark gradient bg, dark overlay */
    --color-image-bg:
        linear-gradient(135deg, #141418 0%, #1A1A1E 100%);
    --color-image-overlay:
        linear-gradient(180deg, transparent 60%, rgba(10,10,12,0.95) 100%);

    /* Hero orbs — slightly stronger in dark for visibility */
    --color-hero-bg-1:        rgba(212, 168, 100, 0.12);
    --color-hero-bg-2:        rgba(212, 168, 100, 0.06);
    --color-hero-bg-3:        rgba(212, 168, 100, 0.09);

    /* Shadows — heavier in dark mode (paper-on-paper-effect needs more depth) */
    --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:              0 8px 32px rgba(0, 0, 0, 0.40);
    --shadow-lg:              0 24px 64px rgba(0, 0, 0, 0.50);

    /* DO NOT override --color-band-dark or --color-ink-on-dark* —
       those are intentionally theme-stable. */
}


/* =============================================================
 * 3. BASE STYLES
 * ============================================================= */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    background:
        var(--color-bg-pattern, transparent),
        var(--color-bg-gradient, var(--color-surface, #FAF7F2));
    background-attachment: fixed;
    transition: background var(--transition-medium, 320ms) var(--ease-in-out, ease);

    /* RTL safety: clip horizontal overflow at the document root so a
       wide child (full-bleed pseudo-element, fixed-position drawer
       offscreen, etc.) can never cause the viewport to scroll
       sideways. body has overflow-x:hidden too — that protects from
       overflow inside body, but it does not protect the html box
       itself, and in RTL contexts a wide element can push html to
       scroll the page right with the body sliding with it. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background: transparent;
    color: var(--color-ink, #2A2A2E);
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-line-body, 1.6);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: color var(--transition-fast, 180ms) ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    color: var(--color-ink-strong, #1A1A1E);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--font-line-tight, 1.15);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-sm, 1rem);
    transition: color var(--transition-fast, 180ms) ease;
}
h1 { font-size: var(--font-size-h1, clamp(2rem, 3vw, 3rem));     font-weight: var(--font-weight-semibold, 600); }
h2 { font-size: var(--font-size-h2, clamp(1.5rem, 2.5vw, 2.25rem)); }
h3 { font-size: var(--font-size-h3, 1.5rem); font-weight: var(--font-weight-semibold, 600); }

p {
    margin: 0 0 var(--space-sm, 1rem);
    color: var(--color-ink-muted, #6B5B47);
    transition: color var(--transition-fast, 180ms) ease;
}
p + p { margin-top: var(--space-sm, 1rem); }

a {
    color: var(--color-accent, #B58542);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    transition:
        color var(--transition-fast, 180ms) ease,
        opacity var(--transition-fast, 180ms) ease;
}
a:hover { color: var(--color-accent-soft, #D4A864); }

.container {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--space-md, 1.5rem);
}

main { flex: 1 0 auto; padding: 0 0 var(--space-xl, 4rem); position: relative; }

.eyebrow {
    font-size: var(--font-size-eyebrow, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--font-track-eyebrow, 0.18em);
    text-transform: uppercase;
    color: var(--color-accent, #B58542);
    margin: 0 0 var(--space-md, 1.5rem);
    display: block;
}


/* =============================================================
 * 4. HEADER
 *
 * The header is ALWAYS rendered left-to-right, even on RTL pages.
 * Two mechanisms keep it pinned:
 *   1. <header dir="ltr"> attribute in _Layout.cshtml
 *   2. .site-header { direction: ltr } below
 * Either alone would suffice; both together survive any future
 * specificity wars in component CSS or DB-rendered theme tokens.
 *
 * No [dir="rtl"] selectors inside this section — header internals
 * stay LTR. Content RTL flips happen in section 21 and individual
 * page sections.
 * ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-md, 1.5rem) 0;
    background: var(--color-surface-elevated, #FFFFFF);   /* opaque fallback */
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    direction: ltr;
    transition:
        background var(--transition-medium, 320ms) ease,
        border-color var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .site-header {
        background: var(--color-surface-glass, rgba(255,255,255,0.6));
        backdrop-filter: blur(var(--blur-md, 16px));
        -webkit-backdrop-filter: blur(var(--blur-md, 16px));
    }
}
.site-header.scrolled {
    background: var(--color-surface-elevated, #FFFFFF);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
    border-color: var(--color-line-strong, rgba(107,91,71,0.25));
}
.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 1.5rem);
    flex-wrap: wrap;
}

.wordmark {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.35rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-ink-strong, #1A1A1E);
    letter-spacing: 0.04em;
    text-decoration: none;
    position: relative;
    padding: 4px 0;
    flex: 0 0 auto;
    /* Inline-flex lets an optional logo img sit alongside the wordmark text
       with consistent vertical alignment. When the brand.logo.header slot
       is unassigned, the helper emits nothing and only the .wordmark-text
       span renders, so the layout reduces to a single text child without
       visible side effects. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.wordmark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-accent, #B58542),
        transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-medium, 320ms) var(--ease-out, ease);
    border-radius: 2px;
}
.wordmark:hover { color: var(--color-ink-strong, #1A1A1E); }
.wordmark:hover::after { transform: scaleX(1); }

/* -------------------------------------------------------------
 * NAV — list-based, with dropdown sub-menus
 *
 * Structure:
 *   <nav class="nav">
 *     <ul class="nav-list">
 *       <li class="nav-list__item nav-has-sub">
 *         <button class="nav-trigger">About <chevron/></button>
 *         <ul class="nav-sub">…</ul>
 *       </li>
 *       <li class="nav-list__item"><a>…</a></li>
 *     </ul>
 *     <div class="nav-controls">
 *       <span class="lang-switch">…</span>
 *       <button class="theme-toggle">…</button>
 *       <a class="signin-link">…</a>  OR  <div class="account-menu">…</div>
 *     </div>
 *   </nav>
 *
 * Dropdowns open on :hover (desktop) AND :focus-within (keyboard)
 * AND .is-open (JS-set after click). In drawer mode (under nav
 * breakpoint), dropdowns become inline expandable sections.
 * ------------------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1.5rem);
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
.nav-list__item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Top-level link/button styling — shared by <a> and .nav-trigger */
.nav-list__item > a,
.nav-list__item .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-ink-muted, #6B5B47);
    font-size: var(--font-size-small, 0.875rem);
    font-family: inherit;
    font-weight: var(--font-weight-medium, 500);
    background: none;
    border: 0;
    padding: 8px 0;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--transition-fast, 180ms) ease;
}
.nav-list__item > a::after,
.nav-list__item .nav-trigger::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent, #B58542);
    border-radius: 2px;
    transition: width var(--transition-fast, 180ms) ease;
}
.nav-list__item > a:hover,
.nav-list__item .nav-trigger:hover,
.nav-has-sub.is-open > .nav-trigger,
.nav-has-sub:focus-within > .nav-trigger { color: var(--color-ink-strong, #1A1A1E); }
.nav-list__item > a:hover::after,
.nav-list__item .nav-trigger:hover::after,
.nav-has-sub.is-open > .nav-trigger::after { width: 100%; }

.nav-chevron {
    color: currentColor;
    flex-shrink: 0;
    transition: transform var(--transition-fast, 180ms) ease;
}
.nav-has-sub.is-open > .nav-trigger .nav-chevron,
.nav-has-sub:hover > .nav-trigger .nav-chevron,
.nav-has-sub:focus-within > .nav-trigger .nav-chevron {
    transform: rotate(180deg);
}

/* The dropdown panel — desktop default */
.nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.45rem;
    min-width: 13rem;
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.06));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--transition-fast, 180ms) ease,
        transform var(--transition-fast, 180ms) ease,
        visibility 0s linear var(--transition-fast, 180ms);
    z-index: 105;
}

/* Dropdown OPEN — via JS click, CSS hover, or keyboard focus */
.nav-has-sub.is-open > .nav-sub,
.nav-has-sub:hover > .nav-sub,
.nav-has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity var(--transition-fast, 180ms) ease,
        transform var(--transition-fast, 180ms) ease,
        visibility 0s linear 0s;
}

.nav-sub li { margin: 0; }
.nav-sub a,
.nav-sub button {
    display: block;
    padding: 0.55rem 0.75rem;
    color: var(--color-ink, #2A2A2E);
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-align: start;
    width: 100%;
    transition:
        background var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease;
}
.nav-sub a:hover,
.nav-sub a:focus-visible,
.nav-sub button:hover,
.nav-sub button:focus-visible {
    background: var(--color-surface, #FAF7F2);
    color: var(--color-accent, #B58542);
    outline: none;
}

/* -------------------------------------------------------------
 * NAV CONTROLS (right group: lang, theme, account)
 * ------------------------------------------------------------- */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Language toggle — globe icon + abbreviation. The is-active link
   (current language) is hidden; only the link to the OTHER language
   shows, so the button reads as "switch to AR" / "switch to EN". */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 0.55rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-ink-muted, #6B5B47);
    transition: color var(--transition-fast, 180ms) ease, background var(--transition-fast, 180ms) ease;
}
.lang-switch:hover { color: var(--color-ink-strong, #1A1A1E); background: var(--color-surface, #FAF7F2); }
.lang-globe { color: currentColor; flex-shrink: 0; }
.lang-switch a {
    display: inline-block;
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}
.lang-switch a.is-active { display: none; }
.lang-switch a:hover { color: var(--color-ink-strong, #1A1A1E); }

/* Avatar icon — used for sign-in link AND authenticated account button */
.avatar-icon { color: currentColor; flex-shrink: 0; }
.signin-link,
.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #FAF7F2);
    border: 1px solid var(--color-line, #E8E0D2);
    color: var(--color-ink-muted, #6B5B47);
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease;
}
.signin-link:hover,
.account-trigger:hover,
.account-menu.is-open .account-trigger {
    border-color: var(--color-accent, #B58542);
    color: var(--color-accent, #B58542);
    background: var(--color-surface-elevated, #FFFFFF);
}
.account-trigger::after { display: none; }   /* no underline accent on the avatar */
.signin-link::after { display: none; }

.account-menu { position: relative; }
.account-sub { right: 0; left: auto; min-width: 12rem; }

.account-signout-item {
    border-top: 1px solid var(--color-line, #E8E0D2);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}
.signout-form { margin: 0; padding: 0; display: block; }
.signout-btn {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    text-align: start;
    color: var(--color-ink-muted, #6B5B47);
    font-size: var(--font-size-small, 0.875rem);
    font-family: inherit;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background var(--transition-fast, 180ms) ease, color var(--transition-fast, 180ms) ease;
}
.signout-btn:hover {
    background: var(--color-surface, #FAF7F2);
    color: var(--color-accent, #B58542);
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #FAF7F2);
    border: 1px solid var(--color-line, #E8E0D2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--color-ink-muted, #6B5B47);
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease,
        transform var(--transition-fast, 180ms) ease;
    flex: 0 0 auto;
}
.theme-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent-glow, transparent), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast, 180ms) ease;
}
.theme-toggle:hover {
    border-color: var(--color-accent, #B58542);
    color: var(--color-accent, #B58542);
    transform: rotate(8deg) scale(1.05);
}
.theme-toggle:hover::before { opacity: 1; }
.theme-toggle::after { display: none; }
.theme-toggle .theme-icon { position: relative; z-index: 1; line-height: 1; }

.logout-form { display: inline; margin: 0; padding: 0; }
.logout-btn  { color: var(--color-ink-muted, #6B5B47); }


/* =============================================================
 * 4b. NAV TOGGLE (hamburger) — desktop hidden, mobile shown
 * ============================================================= */
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-ink-strong, #1A1A1E);
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
    padding: 0;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease;
    z-index: 120;
    position: relative;
}
.nav-toggle:hover {
    border-color: var(--color-accent, #B58542);
    color: var(--color-accent, #B58542);
}
.nav-toggle .nav-toggle-icon {
    display: inline-block;
    line-height: 1;
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium, 320ms) var(--ease-out, ease);
    z-index: 99;        /* BELOW the sticky header (100) so the close-hamburger
                           stays visible and tappable through the cleared
                           stacking context when the drawer is open. */
}
.nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* =============================================================
 * 5. FOOTER
 * ============================================================= */
.site-footer {
    padding: var(--space-lg, 2.5rem) 0;
    border-top: 1px solid var(--color-line, #E8E0D2);
    color: var(--color-ink-muted, #6B5B47);
    font-size: var(--font-size-small, 0.875rem);
    background: var(--color-surface, #FAF7F2);
    transition:
        background var(--transition-medium, 320ms) ease,
        border-color var(--transition-fast, 180ms) ease;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .site-footer {
        background: var(--color-surface-glass, rgba(255,255,255,0.6));
        backdrop-filter: blur(var(--blur-sm, 8px));
        -webkit-backdrop-filter: blur(var(--blur-sm, 8px));
    }
}
.site-footer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md, 1.5rem);
    flex-wrap: wrap;
}
.site-footer__legal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-ink-muted, #6B5B47);
}
.site-footer__legal a {
    color: inherit;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    transition: color var(--transition-fast, 180ms) ease;
}
.site-footer__legal a:hover { color: var(--color-ink-strong, #1A1A1E); }
.site-footer__sep {
    color: var(--color-line, #E8E0D2);
    user-select: none;
    opacity: 0.6;
}


/* =============================================================
 * 6. BUTTONS
 * btn-primary: gradient ink+deep-accent, glow on hover.
 * btn-secondary: uses --color-surface-elevated for bg so it sits
 *   visibly above the page on BOTH light and dark themes.
 *   (Previously used --color-surface which equals page bg in
 *    dark mode → invisible. Fixed.)
 * ============================================================= */
a.btn-primary,
button.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg,
        var(--color-ink-strong, #1A1A1E),
        var(--color-accent-deep, #8B6632));
    color: var(--color-ink-inverse, #FAF7F2);
    padding: 0.95rem 1.85rem;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease,
        border-color var(--transition-fast, 180ms) ease;
}
a.btn-primary::before,
button.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--color-accent, #B58542),
        var(--color-accent-soft, #D4A864));
    opacity: 0;
    transition: opacity var(--transition-fast, 180ms) ease;
    z-index: -1;
}
a.btn-primary::after { display: none; }
a.btn-primary:hover,
button.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--color-accent-glow-strong, rgba(181,133,66,0.25));
    border-color: var(--color-accent, #B58542);
    color: var(--color-ink-inverse, #FAF7F2);
}
a.btn-primary:hover::before,
button.btn-primary:hover::before { opacity: 1; }
a.btn-primary:active,
button.btn-primary:active { transform: translateY(0); }

a.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-ink-muted, #6B5B47);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-body, 1rem);
    padding: 0.95rem 1.85rem;
    border: 1px solid var(--color-line-strong, rgba(107,91,71,0.25));
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-elevated, #FFFFFF);
    position: relative;
    overflow: hidden;
    transition:
        color var(--transition-fast, 180ms) ease,
        border-color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease;
}
a.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent-glow, transparent), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast, 180ms) ease;
}
a.btn-secondary::after { display: none; }
a.btn-secondary:hover {
    color: var(--color-ink-strong, #1A1A1E);
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
}
a.btn-secondary:hover::before { opacity: 1; }


/* =============================================================
 * 7. HOME-SECTION + EYEBROW + SECTION-HEADLINE / INTRO
 * ============================================================= */
.home-section {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-xl, 4rem) var(--space-lg, 2.5rem);
    position: relative;
}

.home-eyebrow {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--font-track-eyebrow, 0.18em);
    text-transform: uppercase;
    color: var(--color-accent, #B58542);
    margin: 0 0 var(--space-lg, 2.5rem);
    position: relative;
    padding-left: 28px;
}
.home-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-accent, #B58542),
        var(--color-accent-soft, #D4A864));
    border-radius: 2px;
}
[dir="rtl"] .home-eyebrow {
    padding-left: 0;
    padding-right: 28px;
}
[dir="rtl"] .home-eyebrow::before { left: auto; right: 0; }

.section-headline {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: var(--font-size-h2, clamp(1.5rem, 2.5vw, 2.25rem));
    color: var(--color-ink-strong, #1A1A1E);
    line-height: 1.2;
    margin: 0 0 var(--space-md, 1.5rem);
    max-width: 26ch;
    font-weight: var(--font-weight-semibold, 600);
    position: relative;
}
.section-headline::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-accent, #B58542),
        var(--color-accent-soft, #D4A864));
    border-radius: 3px;
}
[dir="rtl"] .section-headline::after { left: auto; right: 0; }

.section-intro {
    color: var(--color-ink, #2A2A2E);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: var(--space-md, 1.5rem) 0 0;
    max-width: 40ch;
    font-weight: var(--font-weight-light, 300);
}


/* =============================================================
 * 8. HERO SECTION (full-bleed atmosphere)
 * ============================================================= */
.hero-section {
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xl, 4rem);
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
}

.hero-section::before {
    /* Orbs — composed radial gradients, full-bleed.
       Three layers approximate the original design's three separate
       .hero-orb-N DOM elements: a larger soft glow in the upper-right,
       a mid-warmth in the lower-left, and a quiet pool near centre.
       Animation is the floatOrb 2D drift + scale from the original,
       composed with translateX(-50%) so the full-bleed centring is
       preserved through every keyframe. */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 20%, var(--color-hero-bg-1, rgba(181,133,66,0.08)) 0%, transparent 28%),
        radial-gradient(circle at 15% 75%, var(--color-hero-bg-3, rgba(181,133,66,0.06)) 0%, transparent 24%),
        radial-gradient(circle at 50% 50%, var(--color-hero-bg-2, rgba(181,133,66,0.04)) 0%, transparent 18%);
    filter: blur(40px);
    animation: heroOrb 20s ease-in-out infinite;
}

.hero-section::after {
    /* Subtle grid overlay — full-bleed.
       background-position animates diagonally so the lattice drifts
       slowly across the hero (one cell-period = seamless loop). The
       transform stays at translateX(-50%) for centring; gridShift only
       touches background-position, so there's no transform conflict. */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg,  transparent, transparent 49px, var(--color-line, #E8E0D2) 50px),
        repeating-linear-gradient(90deg, transparent, transparent 49px, var(--color-line, #E8E0D2) 50px);
    background-position: 0 0;
    opacity: 0.18;
    animation: gridShift 30s linear infinite;
}

@keyframes heroOrb {
    /* Each keyframe composes translateX(-50%) (centring) with a small
       2D drift and scale, matching the original design's floatOrb shape
       without losing the full-bleed positioning. */
    0%, 100% { transform: translateX(-50%) translate(0, 0)       scale(1); }
    25%      { transform: translateX(-50%) translate(20px, -15px) scale(1.04); }
    50%      { transform: translateX(-50%) translate(-15px, 25px) scale(0.97); }
    75%      { transform: translateX(-50%) translate(15px, 8px)   scale(1.02); }
}

@keyframes gridShift {
    /* One full 50px diagonal step matches the lattice period, so the
       grid reads as endlessly drifting rather than snapping back. */
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* prefers-reduced-motion — stop the hero animations specifically.
   The general 0.01ms rule in system.css covers most things, but the
   hero atmosphere is decorative and should be fully still for users
   who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-section::after { animation: none; }
}


/* =============================================================
 * 8b. SCROLL-REVEAL ANIMATIONS (.reveal / .stagger)
 *
 * theme.js's initRevealAnimations() tags elements with .reveal or
 * .stagger at boot, then adds .visible when the IntersectionObserver
 * sees them enter the viewport. These rules define what those classes
 * actually do visually. Mirrored in system.css for safety; whichever
 * loads later wins (same values, no conflict).
 *
 * prefers-reduced-motion is handled below: elements skip straight to
 * the visible state with no transition.
 * ============================================================= */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: opacity, transform;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.08s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.16s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.24s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.32s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.40s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.48s; }
.stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


.hero-section h1 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: var(--font-line-tight, 1.15);
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-lg, 2.5rem);
    max-width: 22ch;
    font-weight: var(--font-weight-semibold, 600);
    position: relative;
}
.hero-section h1::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-accent, #B58542),
        var(--color-accent-soft, #D4A864));
    border-radius: 3px;
}
[dir="rtl"] .hero-section h1::after { left: auto; right: 0; }

.hero-section .lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    color: var(--color-ink, #2A2A2E);
    line-height: 1.6;
    max-width: 42ch;
    margin: 0 0 var(--space-xl, 4rem);
    font-weight: var(--font-weight-light, 300);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1.5rem);
    flex-wrap: wrap;
}


/* =============================================================
 * 9. APPROACH SECTION (always-dark band, full-bleed)
 *
 * The band background uses --color-band-dark (always #1A1A1E in
 * both themes). Text inside uses --color-ink-on-dark* tokens
 * (always light, theme-stable). This is the architectural fix
 * for the inversion bug we saw in dark mode.
 * ============================================================= */
.approach-section {
    position: relative;
    color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95));
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
    isolation: isolate;
}
.approach-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--color-band-dark, #1A1A1E);
    z-index: -1;
}
.approach-section h2,
.approach-section h3 { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.approach-section .home-eyebrow { color: var(--color-accent-soft, #D4A864); }
.approach-section .home-eyebrow::before {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.approach-section .section-headline { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.approach-section .section-headline::after {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.approach-section .section-intro,
.approach-section p {
    color: var(--color-ink-on-dark-muted, rgba(250, 247, 242, 0.72));
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl, 4rem);
    margin-top: var(--space-xl, 4rem);
}
.approach-item {
    position: relative;
    padding: var(--space-sm, 1rem) 0 0;
}
.approach-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink-inverse, #1A1A1E);
    background: linear-gradient(135deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--space-md, 1.5rem);
    letter-spacing: -0.02em;
    box-shadow: 0 4px 16px var(--color-accent-glow-strong, rgba(181,133,66,0.25));
    position: relative;
    overflow: hidden;
}
.approach-item .num::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.20) 60%,
        transparent 80%);
    transform: translateX(-100%);
    transition: transform var(--transition-medium, 320ms) ease;
}
.approach-item:hover .num::after { transform: translateX(100%); }
.approach-item h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.35rem;
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
}
.approach-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}


/* =============================================================
 * 10. AUDIENCE SECTION
 * ============================================================= */
.audience-section {
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
}
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg, 2.5rem);
    margin-top: var(--space-xl, 4rem);
}
.audience-card {
    padding: var(--space-lg, 2.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-lg, 12px);
    transition:
        border-color var(--transition-medium, 320ms) ease,
        transform var(--transition-medium, 320ms) ease,
        box-shadow var(--transition-medium, 320ms) ease,
        background var(--transition-medium, 320ms) ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.audience-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent-glow, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-medium, 320ms) ease;
    pointer-events: none;
    z-index: 0;
}
.audience-card > * { position: relative; z-index: 1; }
.audience-card:hover {
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 24px 48px rgba(0,0,0,0.08));
}
.audience-card:hover::before { opacity: 1; }
.audience-card h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    position: relative;
    padding-bottom: var(--space-xs, 0.5rem);
}
.audience-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-accent, #B58542);
    border-radius: 2px;
    transition: width var(--transition-fast, 180ms) ease;
}
[dir="rtl"] .audience-card h3::after { left: auto; right: 0; }
.audience-card:hover h3::after { width: 60px; }
.audience-card p {
    color: var(--color-ink, #2A2A2E);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}


/* =============================================================
 * 11. PRACTICES SECTION (always-dark band, full-bleed)
 *
 * Same band-dark + ink-on-dark approach as approach-section.
 * ============================================================= */
.practices-section {
    position: relative;
    color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95));
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
    isolation: isolate;
}
.practices-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--color-band-dark, #1A1A1E);
    z-index: -1;
}
.practices-section h2,
.practices-section h3 { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.practices-section .home-eyebrow { color: var(--color-accent-soft, #D4A864); }
.practices-section .home-eyebrow::before {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.practices-section .section-headline { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.practices-section .section-headline::after {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.practices-section .section-intro,
.practices-section p {
    color: var(--color-ink-on-dark-muted, rgba(250, 247, 242, 0.72));
}

.practices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg, 2.5rem);
    margin-top: var(--space-xl, 4rem);
}
.practice-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg, 2.5rem);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg, 12px);
    transition:
        border-color var(--transition-medium, 320ms) ease,
        transform var(--transition-medium, 320ms) ease,
        box-shadow var(--transition-medium, 320ms) ease;
    position: relative;
    overflow: hidden;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .practice-card {
        backdrop-filter: blur(var(--blur-sm, 8px));
        -webkit-backdrop-filter: blur(var(--blur-sm, 8px));
    }
}
.practice-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent-glow, transparent), transparent 65%);
    opacity: 0;
    transition: opacity var(--transition-medium, 320ms) ease;
    pointer-events: none;
    z-index: 0;
}
.practice-card > * { position: relative; z-index: 1; }
.practice-card:hover {
    border-color: var(--color-line-accent, rgba(212,168,100,0.40));
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 24px 48px rgba(0,0,0,0.08));
}
.practice-card:hover::before { opacity: 1; }
.practice-card .num {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: var(--font-size-eyebrow, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-accent-soft, #D4A864);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-sm, 1rem);
    display: flex;
    align-items: center;
    gap: 8px;
}
.practice-card .num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.15),
        transparent);
}
[dir="rtl"] .practice-card .num::after {
    background: linear-gradient(270deg,
        rgba(255, 255, 255, 0.15),
        transparent);
}
.practice-card h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.4rem;
    margin: 0 0 var(--space-sm, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
}
.practice-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 var(--space-md, 1.5rem);
    flex: 1;
    max-width: 28ch;
}
.practice-card a.read-more {
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-accent-soft, #D4A864);
    text-decoration: none;
    font-weight: var(--font-weight-semibold, 600);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition:
        color var(--transition-fast, 180ms) ease,
        gap var(--transition-fast, 180ms) ease;
    margin-top: auto;
    padding: 4px 0;
}
.practice-card a.read-more::after {
    content: '\2192';
    font-weight: var(--font-weight-bold, 700);
    transition: transform var(--transition-fast, 180ms) ease;
    display: inline-block;
}
.practice-card a.read-more:hover {
    color: var(--color-ink-on-dark, rgba(250,247,242,0.95));
    gap: 0.75rem;
}
.practice-card a.read-more:hover::after { transform: translateX(4px); }
[dir="rtl"] .practice-card a.read-more::after { content: '\2190'; }
[dir="rtl"] .practice-card a.read-more:hover::after { transform: translateX(-4px); }


/* =============================================================
 * 12. FINAL CTA SECTION
 * ============================================================= */
.final-cta-section {
    text-align: center;
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.final-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, var(--color-accent-glow-strong, rgba(181,133,66,0.25)) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, var(--color-accent-glow, rgba(181,133,66,0.12)) 0%, transparent 70%);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}
.final-cta-section .home-eyebrow {
    margin-bottom: var(--space-md, 1.5rem);
    display: inline-block;
    padding-left: 0;
}
.final-cta-section .home-eyebrow::before { display: none; }
.final-cta-section h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: var(--font-size-h2, clamp(1.5rem, 2.5vw, 2.25rem));
    color: var(--color-ink-strong, #1A1A1E);
    line-height: 1.15;
    margin: 0 auto var(--space-md, 1.5rem);
    max-width: 24ch;
    font-weight: var(--font-weight-semibold, 600);
}
.final-cta-section .body {
    color: var(--color-ink-muted, #6B5B47);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 auto var(--space-xl, 4rem);
    max-width: 40ch;
}


/* =============================================================
 * 13. CARD IMAGE SLOT
 * ============================================================= */
.audience-card .card-image,
.practice-card .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    margin: 0 0 var(--space-md, 1.5rem);
    border: 1px solid var(--color-line, #E8E0D2);
    background: var(--color-image-bg, var(--color-surface-elevated, #F5F2ED));
    position: relative;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        transform var(--transition-medium, 320ms) ease;
}
.audience-card:hover .card-image,
.practice-card:hover .card-image {
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
}

img.card-image {
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-medium, 320ms) ease;
}
.audience-card:hover img.card-image,
.practice-card:hover img.card-image { transform: scale(1.03); }

.audience-card .media-placeholder.card-image,
.practice-card  .media-placeholder.card-image {
    min-height: 0;
    border-left-width: 1px;
    border-left-color: var(--color-line, #E8E0D2);
}
[dir="rtl"] .audience-card .media-placeholder.card-image,
[dir="rtl"] .practice-card  .media-placeholder.card-image {
    border-right-width: 1px;
    border-right-color: var(--color-line, #E8E0D2);
}

.practice-card .card-image {
    background: linear-gradient(135deg, #1A1A1E, #222226);
    border-color: rgba(255, 255, 255, 0.12);
}
.practice-card .media-placeholder.card-image {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}


/* =============================================================
 * 14. PRACTICE PAGE
 *
 * .founder-section  — 2-col grid (header label + body), light surface
 * .principles-section — DARK BAND (full-bleed via ::before, always-dark
 *                       in both themes, ink-on-dark text). Same pattern
 *                       as .approach-section / .practices-section on
 *                       home. Numbered .principle-rows with a hairline
 *                       between rows and a subtle hover shine on the num.
 * .license-section  — clean light section with one card (label + body)
 * ============================================================= */
.founder-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.founder-grid {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-xl, 4rem);
    align-items: start;
}
.founder-grid h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.01em;
}
.founder-grid .body p {
    color: var(--color-ink, #2A2A2E);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
    max-width: 44ch;
}

.principles-section {
    position: relative;
    color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95));
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
    isolation: isolate;
}
.principles-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--color-band-dark, #1A1A1E);
    z-index: -1;
}
.principles-section h2,
.principles-section h3 { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.principles-section .home-eyebrow { color: var(--color-accent-soft, #D4A864); }
.principles-section .home-eyebrow::before {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.principles-section .section-headline { color: var(--color-ink-on-dark, rgba(250, 247, 242, 0.95)); }
.principles-section .section-headline::after {
    background: linear-gradient(90deg,
        var(--color-accent-soft, #D4A864),
        var(--color-accent, #B58542));
}
.principles-section .section-intro,
.principles-section p {
    color: var(--color-ink-on-dark-muted, rgba(250, 247, 242, 0.72));
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-xl, 4rem);
}
.principle-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--space-lg, 2.5rem);
    align-items: start;
    padding: var(--space-lg, 2.5rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transition: border-color var(--transition-fast, 180ms) ease;
}
.principle-row:last-child { border-bottom: 0; }
.principle-row:hover { border-bottom-color: var(--color-line-accent, rgba(212,168,100,0.40)); }
.principle-row .num {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-accent-soft, #D4A864);
    font-weight: var(--font-weight-semibold, 600);
    font-feature-settings: "tnum";
    line-height: 1.1;
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.principle-row .num::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.18) 60%,
        transparent 80%);
    transform: translateX(-100%);
    transition: transform var(--transition-medium, 320ms) ease;
}
.principle-row:hover .num::after { transform: translateX(100%); }
.principle-row h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
}
.principle-row p {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 56ch;
}

.license-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.license-card {
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-lg, 2.5rem);
    max-width: 38rem;
    position: relative;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease;
}
.license-card:hover {
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.06));
}
.license-card .label {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-accent, #B58542);
    text-transform: uppercase;
    letter-spacing: var(--font-track-eyebrow, 0.18em);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-sm, 1rem);
}
.license-card p {
    color: var(--color-ink, #2A2A2E);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}


/* =============================================================
 * 15. HOW WE WORK PAGE
 *
 * .stages-section — light elevated surface with 5 numbered .stage-rows
 *                   (vertical list, large display numerals in accent
 *                   colour). NOT a dark band — leaves the dark-band
 *                   pattern for principles below it / approach on home.
 * .notdo-section — clean light section with accent left-border cards
 *                  for "what we will NOT propose" anti-patterns.
 * ============================================================= */
.stages-section {
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border-top: 1px solid var(--color-line, #E8E0D2);
    border-bottom: 1px solid var(--color-line, #E8E0D2);
}
.stages-list {
    display: grid;
    gap: var(--space-xl, 4rem);
    margin-top: var(--space-xl, 4rem);
}
.stage-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--space-lg, 2.5rem);
    align-items: start;
}
.stage-row .num {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 2rem;
    color: var(--color-accent, #B58542);
    font-feature-settings: "tnum";
    line-height: 1;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.02em;
}
.stage-row h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold, 600);
}
.stage-row p {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 56ch;
}

.notdo-section {
    padding-top: var(--space-xxl, 6rem);
    padding-bottom: var(--space-xxl, 6rem);
}
.notdo-list {
    display: grid;
    gap: var(--space-lg, 2.5rem);
    margin-top: var(--space-xl, 4rem);
}
.notdo-card {
    border-left: 3px solid var(--color-accent, #B58542);
    padding: var(--space-sm, 1rem) 0 var(--space-sm, 1rem) var(--space-lg, 2.5rem);
    background: transparent;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        padding-left var(--transition-fast, 180ms) ease;
}
.notdo-card:hover {
    border-left-color: var(--color-accent-soft, #D4A864);
    padding-left: calc(var(--space-lg, 2.5rem) + 4px);
}
[dir="rtl"] .notdo-card {
    border-left: 0;
    border-right: 3px solid var(--color-accent, #B58542);
    padding-left: 0;
    padding-right: var(--space-lg, 2.5rem);
    transition:
        border-color var(--transition-fast, 180ms) ease,
        padding-right var(--transition-fast, 180ms) ease;
}
[dir="rtl"] .notdo-card:hover {
    border-right-color: var(--color-accent-soft, #D4A864);
    padding-right: calc(var(--space-lg, 2.5rem) + 4px);
    padding-left: 0;
}
.notdo-card h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.125rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold, 600);
}
.notdo-card p {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 60ch;
}


/* =============================================================
 * 16. FAQ PAGE
 *
 * .qa-section — narrower max-width than 64rem (more comfortable read).
 *               Each .qa-item is a 2-col grid (number gutter, content),
 *               with hairline dividers between items. Last item has no
 *               border. The .qnum is small, accent, lines up with the
 *               question h3.
 * ============================================================= */
.qa-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
    max-width: 58rem;
}
.qa-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-md, 1.5rem);
}
.qa-item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-lg, 2.5rem);
    padding: var(--space-xl, 4rem) 0;
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    align-items: start;
    transition: border-color var(--transition-fast, 180ms) ease;
}
.qa-item:last-child { border-bottom: 0; }
.qa-item:hover { border-bottom-color: var(--color-line-accent, rgba(181,133,66,0.30)); }
.qa-item .qnum {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    color: var(--color-accent, #B58542);
    font-feature-settings: "tnum";
    line-height: 1.4;
    font-weight: var(--font-weight-semibold, 600);
}
.qa-item h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold, 600);
    max-width: 46ch;
}
.qa-item p.answer {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 68ch;
}


/* =============================================================
 * 17. SERVICES INDEX PAGE
 *
 * Three large clickable service cards in a vertical stack. Each card
 * is a single <a> tag with a 3-col grid: small accent num | body
 * (title + blurb) | arrow. Hover lifts and tints border accent.
 * Below 48rem the grid collapses to a single column and the arrow
 * hides (the whole card is tappable).
 * ============================================================= */
.services-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg, 2.5rem);
    margin-top: var(--space-md, 1.5rem);
}
.service-link-card {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    gap: var(--space-lg, 2.5rem);
    align-items: center;
    padding: var(--space-lg, 2.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        transform var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease;
}
.service-link-card:hover {
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.06));
}
.service-link-card .num {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-accent, #B58542);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-feature-settings: "tnum";
    font-weight: var(--font-weight-semibold, 600);
}
.service-link-card .body h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.375rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 0.4rem;
    font-weight: var(--font-weight-semibold, 600);
}
.service-link-card .body p {
    color: var(--color-ink, #2A2A2E);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}
.service-link-card .arrow {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    color: var(--color-accent, #B58542);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--transition-fast, 180ms) ease;
}
.service-link-card:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .service-link-card:hover .arrow { transform: translateX(-4px); }


/* =============================================================
 * 18. SERVICES / CASE NOTES / INSIGHTS — shared chrome
 *
 * .breadcrumb-row     — small navigation row above hero on detail pages
 * .detail-block       — section with 2-col grid (heading-narrow | body)
 *                       used on Services/Detail. .alt = elevated surface.
 * .body-section       — wrapper for long-form rendered content (Insights
 *                       Detail + CaseNotes Detail). Children styled below.
 * .body-content       — typographic styles for admin-authored Html.Raw()
 *                       (p, h2, h3, blockquote, ul, ol, li, a).
 * .back-to-section    — small text link back to the index page
 * .empty-state        — dashed-border placeholder when a list is empty
 *                       (shared by Insights and CaseNotes).
 * ============================================================= */
.breadcrumb-row {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-md, 1.5rem) var(--space-lg, 2.5rem) 0;
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
}
.breadcrumb-row a {
    color: var(--color-ink-muted, #6B5B47);
    text-decoration: none;
    transition: color var(--transition-fast, 180ms) ease;
}
.breadcrumb-row a:hover { color: var(--color-ink-strong, #1A1A1E); }
.breadcrumb-row .sep {
    margin: 0 0.4rem;
    color: var(--color-line, #E8E0D2);
}

.detail-block {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.detail-block.alt {
    background: var(--color-surface-elevated, #FFFFFF);
}
.detail-block .grid {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-xl, 4rem);
    align-items: start;
}
.detail-block h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0;
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
    max-width: 16ch;
    letter-spacing: -0.01em;
}
.detail-block .body p {
    color: var(--color-ink, #2A2A2E);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
    max-width: 52ch;
}

.body-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.body-content {
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-ink, #2A2A2E);
}
.body-content p { margin: 0 0 var(--space-md, 1.5rem); }
.body-content h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: var(--space-xl, 4rem) 0 var(--space-md, 1.5rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
}
.body-content h3 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: var(--space-lg, 2.5rem) 0 var(--space-sm, 1rem);
    font-weight: var(--font-weight-semibold, 600);
}
.body-content a {
    color: var(--color-accent, #B58542);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast, 180ms) ease;
}
.body-content a:hover { color: var(--color-accent-soft, #D4A864); }
.body-content blockquote {
    border-left: 3px solid var(--color-accent, #B58542);
    padding-left: var(--space-md, 1.5rem);
    margin: var(--space-lg, 2.5rem) 0;
    color: var(--color-ink-muted, #6B5B47);
    font-style: italic;
}
[dir="rtl"] .body-content blockquote {
    border-left: 0;
    border-right: 3px solid var(--color-accent, #B58542);
    padding-left: 0;
    padding-right: var(--space-md, 1.5rem);
}
.body-content ul,
.body-content ol {
    padding-left: 1.4rem;
    margin: 0 0 var(--space-md, 1.5rem);
}
[dir="rtl"] .body-content ul,
[dir="rtl"] .body-content ol {
    padding-left: 0;
    padding-right: 1.4rem;
}
.body-content li { margin-bottom: 0.4rem; }

.back-to-section {
    padding-top: var(--space-lg, 2.5rem);
    padding-bottom: var(--space-xl, 4rem);
}
.back-to-section a {
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
    text-decoration: none;
    transition: color var(--transition-fast, 180ms) ease;
}
.back-to-section a:hover { color: var(--color-ink-strong, #1A1A1E); }

.empty-state {
    text-align: center;
    padding: var(--space-xxl, 6rem) var(--space-md, 1.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px dashed var(--color-line, #E8E0D2);
    border-radius: var(--radius-lg, 12px);
}
.empty-state h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    font-weight: var(--font-weight-semibold, 600);
}
.empty-state p {
    color: var(--color-ink-muted, #6B5B47);
    margin: 0 auto;
    max-width: 46ch;
    line-height: 1.6;
}


/* =============================================================
 * 19. INSIGHTS INDEX + DETAIL
 *
 * Index: vertical list of insight rows, each with date + h2 + summary
 *        + "Read →" affordance. Hairline divider between rows.
 * Detail: .insight-hero (date + title + italic summary). Body content
 *         renders via .body-content (Section 18 shared chrome).
 * ============================================================= */
.insights-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.insights-list {
    display: grid;
    gap: var(--space-xl, 4rem);
    max-width: 46rem;
}
.insight-row {
    display: block;
    text-decoration: none;
    color: inherit;
    padding-bottom: var(--space-lg, 2.5rem);
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    transition: border-color var(--transition-fast, 180ms) ease;
}
.insight-row:last-child { border-bottom: 0; }
.insight-row:hover {
    border-bottom-color: var(--color-line-accent, rgba(181,133,66,0.30));
}
.insight-row:hover h2 { color: var(--color-accent, #B58542); }
.insight-row:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .insight-row:hover .arrow { transform: translateX(-4px); }
.insight-row .date {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
    font-feature-settings: "tnum";
    font-weight: var(--font-weight-semibold, 600);
}
.insight-row h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
    transition: color var(--transition-fast, 180ms) ease;
}
.insight-row .summary {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 var(--space-sm, 1rem);
    max-width: 60ch;
}
.insight-row .arrow {
    display: inline-block;
    color: var(--color-accent, #B58542);
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold, 600);
    transition: transform var(--transition-fast, 180ms) ease;
}

.insight-hero {
    padding-top: var(--space-lg, 2.5rem);
    padding-bottom: var(--space-lg, 2.5rem);
    max-width: 40rem;
    margin: 0;
}
.insight-hero .date {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md, 1.5rem);
    font-feature-settings: "tnum";
    font-weight: var(--font-weight-semibold, 600);
}
.insight-hero h1 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-lg, 2.5rem);
    max-width: 26ch;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.02em;
}
.insight-hero .summary {
    font-size: 1.125rem;
    color: var(--color-ink-muted, #6B5B47);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}


/* =============================================================
 * 20. CASE NOTES INDEX + DETAIL
 *
 * Index: grid of .case-card tiles. Each card has badges (sector,
 *        service-line, outcome) + title + scope + meta footer
 *        (duration, country, publish date).
 * Detail: .hero-section reuses the page-level hero styling; the
 *         per-case badges + scope + .hero-meta live inside it.
 *         Body content via .body-content (Section 18 shared chrome).
 * ============================================================= */
.cases-section {
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-xl, 4rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.cases-grid {
    display: grid;
    gap: var(--space-lg, 2.5rem);
}
.case-card {
    display: block;
    padding: var(--space-lg, 2.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        transform var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease;
}
.case-card:hover {
    border-color: var(--color-line-accent, rgba(181,133,66,0.30));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.06));
}
.case-card h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.375rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
}
.case-card .scope {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 var(--space-md, 1.5rem);
    max-width: 60ch;
}

.case-badges {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-md, 1.5rem);
}
.case-badge {
    display: inline-block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill, 999px);
    color: var(--color-ink-muted, #6B5B47);
    background: var(--color-surface, #FAF7F2);
    border: 1px solid var(--color-line, #E8E0D2);
    font-weight: var(--font-weight-semibold, 600);
}
.case-badge.accent {
    color: var(--color-accent, #B58542);
    border-color: var(--color-accent-soft, #D4A864);
    background: var(--color-surface-elevated, #FFFFFF);
}

.case-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
    padding-top: var(--space-sm, 1rem);
    border-top: 1px solid var(--color-line, #E8E0D2);
}
.case-meta strong {
    color: var(--color-ink-strong, #1A1A1E);
    font-weight: var(--font-weight-semibold, 600);
}

.hero-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: var(--space-md, 1.5rem) 0;
    border-top: 1px solid var(--color-line, #E8E0D2);
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
    margin-top: var(--space-md, 1.5rem);
}
.hero-meta strong {
    color: var(--color-ink-strong, #1A1A1E);
    font-weight: var(--font-weight-semibold, 600);
}

/* Case Notes Detail hero — scope text under the title */
.hero-section .scope {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    color: var(--color-ink-muted, #6B5B47);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 0 var(--space-lg, 2.5rem);
}


/* =============================================================
 * 21. RTL adjustments
 *
 * Header internals stay LTR (see section 4). Only the footer
 * follows page direction; on RTL pages, footer items reverse.
 * ============================================================= */
[dir="rtl"] .site-footer__row { flex-direction: row-reverse; }


/* =============================================================
 * 22. CONTACT PAGE — multi-step wizard form
 *
 * Five logical units:
 *   .form-page        — overall page shell with eyebrow + h1 + lede
 *   .wizard-breadcrumb— top step indicator (pills with numbers)
 *   .wizard-step      — fieldset for each step; only .is-current renders
 *   .field / .field-row — form fields with label/input/error
 *   .service-grid / .size-pills — radio cards and pills for step 3
 *   .review-list      — summary on step 4 with per-row edit links
 *   .consent-block / .turnstile-wrap — final-step compliance
 *
 * intl-tel-input library overrides at the bottom — phone numbers
 * stay LTR even in RTL pages.
 * ============================================================= */
.form-page {
    max-width: 42rem;
    padding: var(--space-xl, 4rem) 0;
}
.form-page .eyebrow {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
}
.form-page h1 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-md, 1.5rem);
    max-width: 24ch;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.02em;
}
.form-page > p.lede {
    color: var(--color-ink-muted, #6B5B47);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 var(--space-xl, 4rem);
    max-width: 56ch;
}

/* ---- Step indicator (breadcrumb of pills) ---- */
.wizard-breadcrumb {
    margin-bottom: var(--space-xl, 4rem);
}
.wizard-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-pill, 999px);
    cursor: default;
    user-select: none;
    transition:
        color var(--transition-fast, 180ms) ease,
        border-color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease;
}
.step-pill .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-line, #E8E0D2);
    color: var(--color-surface, #FAF7F2);
    font-size: var(--font-size-eyebrow, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    font-feature-settings: "tnum";
}
.step-pill.is-done {
    color: var(--color-ink, #2A2A2E);
    border-color: var(--color-accent-soft, #D4A864);
    cursor: pointer;
}
.step-pill.is-done .step-num { background: var(--color-accent, #B58542); }
.step-pill.is-done:hover { background: rgba(181, 133, 66, 0.06); }
.step-pill.is-active {
    color: var(--color-ink-strong, #1A1A1E);
    border-color: var(--color-ink-strong, #1A1A1E);
}
.step-pill.is-active .step-num { background: var(--color-ink-strong, #1A1A1E); }

/* ---- Wizard step panels ---- */
.wizard-step {
    display: none;
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-lg, 2.5rem);
}
.wizard-step.is-current { display: block; }
.wizard-step h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-sm, 1rem);
    line-height: 1.25;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.01em;
}
.wizard-step .step-lede {
    color: var(--color-ink-muted, #6B5B47);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 var(--space-lg, 2.5rem);
    max-width: 56ch;
}

/* ---- Fields ---- */
.field {
    margin-bottom: var(--space-md, 1.5rem);
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md, 1.5rem);
    margin-bottom: var(--space-md, 1.5rem);
}
.field-row > .field { margin-bottom: 0; }
.field label {
    display: block;
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink-strong, #1A1A1E);
    margin-bottom: 0.4rem;
}
.field .hint {
    color: var(--color-ink-muted, #6B5B47);
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-small, 0.875rem);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-ink-strong, #1A1A1E);
    line-height: 1.4;
    transition:
        border-color var(--transition-fast, 180ms) ease,
        box-shadow var(--transition-fast, 180ms) ease;
}
.field textarea {
    min-height: 8rem;
    resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-accent, #B58542);
    box-shadow: 0 0 0 3px rgba(181, 133, 66, 0.15);
}
.field-error {
    color: #b91c1c;
    font-size: var(--font-size-small, 0.875rem);
    margin-top: 0.3rem;
    min-height: 1.25em;
}
:root[data-theme="dark"] .field-error { color: #f87171; }

.validation-summary-errors {
    background: rgba(185, 28, 28, 0.06);
    border: 1px solid rgba(185, 28, 28, 0.25);
    color: #b91c1c;
    padding: var(--space-md, 1.5rem);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--space-lg, 2.5rem);
}
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }
[dir="rtl"] .validation-summary-errors ul { padding-left: 0; padding-right: 1.25rem; }
:root[data-theme="dark"] .validation-summary-errors {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.30);
    color: #f87171;
}

/* ---- Service grid (radio cards) ---- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-sm, 1rem);
    margin-top: var(--space-sm, 1rem);
}
.service-card {
    display: block;
    cursor: pointer;
    position: relative;
    padding: var(--space-md, 1.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-md, 8px);
    transition:
        border-color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease;
}
.service-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.service-card:hover { border-color: var(--color-accent-soft, #D4A864); }
.service-card:has(input:checked) {
    border-color: var(--color-accent, #B58542);
    background: rgba(181, 133, 66, 0.04);
}
.service-card .card-body { display: block; }
.service-card .card-eyebrow {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-accent, #B58542);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
    font-weight: var(--font-weight-semibold, 600);
}
.service-card .card-title {
    display: block;
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.0625rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin-bottom: 0.3rem;
    font-weight: var(--font-weight-semibold, 600);
}
.service-card .card-desc {
    display: block;
    color: var(--color-ink-muted, #6B5B47);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ---- Engagement-size pills ---- */
.size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-sm, 1rem);
}
.size-pills label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 0;
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
}
.size-pills input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.size-pills .pill-body {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface-elevated, #FFFFFF);
    color: var(--color-ink-muted, #6B5B47);
    transition:
        border-color var(--transition-fast, 180ms) ease,
        background var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease;
}
.size-pills label:hover .pill-body { border-color: var(--color-accent-soft, #D4A864); }
.size-pills input:checked + .pill-body {
    border-color: var(--color-accent, #B58542);
    background: var(--color-accent, #B58542);
    color: var(--color-surface, #FAF7F2);
}

/* ---- Review list (step 4) ---- */
.review-list {
    margin: 0 0 var(--space-lg, 2.5rem);
    padding: var(--space-md, 1.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: var(--radius-md, 8px);
}
.review-row {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    gap: var(--space-md, 1.5rem);
    align-items: baseline;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    margin: 0;
}
.review-row:last-child { border-bottom: 0; }
.review-row dt {
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
}
.review-row dd {
    margin: 0;
    color: var(--color-ink, #2A2A2E);
    font-size: 0.9375rem;
    line-height: 1.5;
    word-break: break-word;
}
.edit-link {
    background: none;
    border: 0;
    color: var(--color-accent, #B58542);
    font-size: var(--font-size-small, 0.875rem);
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
}
.edit-link:hover { color: var(--color-accent-soft, #D4A864); }

/* ---- Consent + Turnstile ---- */
.consent-block {
    margin: 0 0 var(--space-lg, 2.5rem);
    padding: var(--space-md, 1.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-left: 3px solid var(--color-accent, #B58542);
    border-radius: var(--radius-md, 8px);
}
[dir="rtl"] .consent-block {
    border-left: 1px solid var(--color-line, #E8E0D2);
    border-right: 3px solid var(--color-accent, #B58542);
}
.consent-block label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
}
.consent-block input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent, #B58542);
    cursor: pointer;
}
.consent-block span {
    color: var(--color-ink, #2A2A2E);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.turnstile-wrap {
    margin: 0 0 var(--space-md, 1.5rem);
    min-height: 65px;
}

/* ---- Wizard actions (back/next/submit) ---- */
.wizard-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--space-lg, 2.5rem);
}
.wizard-actions .spacer { flex: 1 1 auto; }
.wizard-actions button.primary,
.wizard-actions button.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background var(--transition-fast, 180ms) ease,
        color var(--transition-fast, 180ms) ease,
        border-color var(--transition-fast, 180ms) ease;
}
.wizard-actions button.primary {
    background: var(--color-ink-strong, #1A1A1E);
    color: var(--color-surface, #FAF7F2);
}
.wizard-actions button.primary:hover { background: var(--color-accent, #B58542); }
.wizard-actions button.primary:disabled {
    background: var(--color-line, #E8E0D2);
    color: var(--color-ink-muted, #6B5B47);
    cursor: not-allowed;
}
.wizard-actions button.secondary {
    background: transparent;
    color: var(--color-ink-muted, #6B5B47);
    border-color: var(--color-line, #E8E0D2);
}
.wizard-actions button.secondary:hover {
    color: var(--color-ink-strong, #1A1A1E);
    border-color: var(--color-ink-strong, #1A1A1E);
}

/* ---- intl-tel-input integration ---- */
.iti { width: 100%; display: block; }
.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--color-surface-elevated, #FFFFFF);
}
[dir="rtl"] .iti { direction: ltr; }   /* phone numbers are inherently LTR */


/* =============================================================
 * 23. CONTACT — THANK-YOU PAGE
 * ============================================================= */
.thanks-page {
    max-width: 38rem;
    padding: var(--space-xxl, 6rem) 0;
}
.thanks-page .eyebrow {
    display: block;
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-accent, #B58542);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
}
.thanks-page h1 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-md, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.02em;
}
.thanks-page p {
    color: var(--color-ink-muted, #6B5B47);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 0 var(--space-md, 1.5rem);
}
.thanks-page p a {
    color: var(--color-accent, #B58542);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.thanks-page p a:hover { color: var(--color-accent-soft, #D4A864); }

.ref-card {
    margin: var(--space-lg, 2.5rem) 0;
    padding: var(--space-md, 1.5rem);
    background: var(--color-surface-elevated, #FFFFFF);
    border: 1px solid var(--color-line, #E8E0D2);
    border-left: 3px solid var(--color-accent, #B58542);
    border-radius: var(--radius-md, 8px);
}
[dir="rtl"] .ref-card {
    border-left: 1px solid var(--color-line, #E8E0D2);
    border-right: 3px solid var(--color-accent, #B58542);
}
.ref-card .label {
    font-size: var(--font-size-eyebrow, 0.75rem);
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
    font-weight: var(--font-weight-semibold, 600);
}
.ref-card code {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 1.25rem;
    color: var(--color-ink-strong, #1A1A1E);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.05em;
}


/* =============================================================
 * 24. LEGAL PAGES — PRIVACY / TERMS
 *
 * Three-band structure:
 *   .hero-section (existing chrome) — title + eyebrow + lede
 *   .legal-meta — full-width strip with "Last updated …" line
 *   .legal-body > .legal-section* — long-form sections with h2 + p
 *
 * Hero uses max-width 48rem and left-aligns. legal-meta is full-width
 * with a subtle surface-elevated background. Body limits reading width
 * to 48rem and stacks sections with xxl spacing.
 * ============================================================= */
.legal-meta {
    border-top: 1px solid var(--color-line, #E8E0D2);
    border-bottom: 1px solid var(--color-line, #E8E0D2);
    background: var(--color-surface-elevated, #FFFFFF);
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-ink-muted, #6B5B47);
}
.legal-meta-inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-md, 1.5rem) var(--space-lg, 2.5rem);
    font-style: italic;
}

.legal-body {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--space-xl, 4rem) var(--space-lg, 2.5rem);
}
.legal-section {
    margin-bottom: var(--space-xxl, 6rem);
}
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.375rem;
    color: var(--color-ink-strong, #1A1A1E);
    margin: 0 0 var(--space-md, 1.5rem);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold, 600);
    max-width: 32ch;
    letter-spacing: -0.01em;
}
.legal-section p {
    color: var(--color-ink, #2A2A2E);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 64ch;
}

/* Privacy/Terms heroes are left-aligned at narrower max-width than
   other pages (more like editorial pages than landing). */
.hero-section + .legal-meta { margin-top: 0; }


/* =============================================================
 * 25. RESPONSIVE / MOBILE DRAWER
 *
 * The drawer was rewritten for Batch 3:
 *   - breakpoint pushed from 48rem to 60rem (the nav now has more
 *     items — 5 top-level + 2 dropdowns + 3 right-side controls —
 *     so it crowds at smaller desktop widths)
 *   - sub-menus inside the drawer expand inline (max-height
 *     transition) instead of appearing as absolute-positioned
 *     dropdowns
 *   - account dropdown uses the same inline-expand pattern
 *
 * Content-related responsive rules (grids collapsing, paddings
 * reducing) stay at the 48rem breakpoint above — those still
 * feel right on tablets in portrait.
 *
 * z-index hierarchy: nav-toggle 120 > drawer 110 > nav-sub 105
 *   > site-header 100 > nav-backdrop 99 (so the close-hamburger
 *   stays tappable through the cleared stacking context).
 * ============================================================= */
@media (max-width: 48rem) {
    .home-section {
        padding: var(--space-lg, 2.5rem) var(--space-md, 1.5rem);
    }
    .hero-section {
        padding-top: var(--space-xl, 4rem);
        padding-bottom: var(--space-lg, 2.5rem);
        min-height: auto;
    }
    .approach-section,
    .practices-section,
    .audience-section,
    .final-cta-section {
        padding-top: var(--space-xl, 4rem);
        padding-bottom: var(--space-xl, 4rem);
    }
    .approach-grid,
    .practices-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 2.5rem);
    }
    .audience-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1.5rem);
    }

    /* Batch 1 page-specific responsive overrides */
    .founder-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1.5rem);
    }
    .principle-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm, 1rem);
        padding: var(--space-md, 1.5rem) 0;
    }
    .stage-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm, 1rem);
    }
    .stage-row .num { font-size: 1.5rem; }
    .qa-item {
        grid-template-columns: 1fr;
        gap: var(--space-xs, 0.5rem);
        padding: var(--space-lg, 2.5rem) 0;
    }
    .qa-item .qnum { font-size: 1rem; }
    .stages-section,
    .principles-section,
    .notdo-section,
    .qa-section,
    .founder-section,
    .license-section {
        padding-top: var(--space-xl, 4rem);
        padding-bottom: var(--space-xl, 4rem);
    }
    .notdo-card {
        padding-left: var(--space-md, 1.5rem);
    }
    [dir="rtl"] .notdo-card {
        padding-right: var(--space-md, 1.5rem);
    }

    /* Batch 2 page-specific responsive overrides */
    .service-link-card {
        grid-template-columns: 1fr;
        gap: var(--space-sm, 1rem);
        padding: var(--space-md, 1.5rem);
    }
    .service-link-card .arrow { display: none; }
    .detail-block .grid {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1.5rem);
    }
    .detail-block h2 { max-width: none; }
    .services-section,
    .insights-section,
    .cases-section,
    .body-section,
    .detail-block {
        padding-top: var(--space-lg, 2.5rem);
        padding-bottom: var(--space-lg, 2.5rem);
    }
    .breadcrumb-row {
        padding: var(--space-md, 1.5rem) var(--space-md, 1.5rem) 0;
    }
    .insight-hero {
        padding-top: var(--space-md, 1.5rem);
        padding-bottom: var(--space-md, 1.5rem);
    }
    .insight-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
    .insights-list { gap: var(--space-lg, 2.5rem); }
    .case-meta,
    .hero-meta { gap: 1rem; }
    .body-content { max-width: 100%; }
    .case-card { padding: var(--space-md, 1.5rem); }

    /* Buttons in hero / CTA fill width on mobile */
    .hero-actions { gap: var(--space-md, 1.5rem); }
    a.btn-primary,
    a.btn-secondary {
        width: 100%;
        justify-content: center;
    }
}


/* =============================================================
 * NAV DRAWER — kicks in earlier (60rem / 960px) because the new
 * navigation has 5 top-level items + 2 dropdowns + 3 right-side
 * controls. Below this width the drawer is more comfortable than
 * a cramped horizontal nav.
 *
 * Content-related responsive rules (grids collapsing, paddings
 * reducing) stay in the 48rem block above — those still feel
 * right on tablets in portrait.
 * ============================================================= */
@media (max-width: 60rem) {
    /* Hamburger visible */
    .nav-toggle { display: inline-flex; }

    /* Drawer — same belt-and-suspenders pattern as previous batches:
       transform offscreen + visibility:hidden + pointer-events:none,
       with asymmetric transition delays so the close animation
       completes before visibility flips. */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(22rem, 92vw);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        background: var(--color-surface-elevated, #FFFFFF);
        border-left: 1px solid var(--color-line, #E8E0D2);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        padding: 5rem 1.5rem 1.5rem;
        margin: 0;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s linear 320ms,
            pointer-events 0s linear 320ms;
        box-shadow: var(--shadow-lg, 0 24px 48px rgba(0,0,0,0.08));
        z-index: 110;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s linear 0s,
            pointer-events 0s linear 0s;
    }

    /* Reset drawer children to behave in column */
    .nav > * {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Nav list becomes vertical column */
    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .nav-list__item {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid var(--color-line, #E8E0D2);
    }

    /* Top-level link / trigger fills the row */
    .nav-list__item > a,
    .nav-list__item .nav-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        padding: 0.95rem 0;
        text-align: start;
        width: 100%;
        gap: 0.5rem;
    }
    .nav-list__item > a::after,
    .nav-list__item .nav-trigger::after { display: none; }

    /* Sub-menu becomes inline, expanding via max-height transition.
       NO position:absolute, NO hover-to-open — only .is-open works. */
    .nav-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0 0 0 0.5rem;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition:
            max-height var(--transition-medium, 320ms) ease,
            padding-bottom var(--transition-medium, 320ms) ease;
    }
    .nav-has-sub:hover > .nav-sub,
    .nav-has-sub:focus-within > .nav-sub {
        /* override the desktop hover-to-open — only .is-open opens in drawer */
        max-height: 0;
        padding-bottom: 0;
    }
    .nav-has-sub.is-open > .nav-sub {
        max-height: 28rem;
        padding-bottom: 0.75rem;
    }
    .nav-sub a,
    .nav-sub button {
        padding: 0.55rem 0.5rem;
        font-size: 0.9375rem;
        border-radius: var(--radius-sm, 4px);
    }

    /* Controls (lang, theme, account) sit at the bottom in a row */
    .nav-controls {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        margin: var(--space-md, 1.5rem) 0 0;
        padding-top: var(--space-md, 1.5rem);
        border-top: 1px solid var(--color-line, #E8E0D2);
        margin-left: 0;
    }

    .lang-switch {
        font-size: 1rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--color-line, #E8E0D2);
        border-radius: var(--radius-pill, 999px);
    }

    /* Account dropdown — in drawer, its sub-menu also expands inline */
    .account-menu { width: auto; flex-direction: column; align-items: stretch; }
    .account-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0.5rem 0 0;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-medium, 320ms) ease;
    }
    .account-menu.is-open .account-sub {
        max-height: 16rem;
    }
}

/* Body scroll lock while drawer open — set by theme.js via attribute */
body[data-nav-open="true"] {
    overflow: hidden;
}


/* =============================================================
 * 26. SECTION IMAGE — header/footer logos + admin slot editor
 *
 * Shipped in 5e-d-4 alongside the SectionImage admin system.
 *
 * Brand logo slots (brand.logo.header, brand.logo.footer) use the helper
 * with placeholderWhenMissing:false, so the markup renders ONLY when an
 * admin has bound a MediaAsset. The .wordmark / .site-footer__brand
 * containers are inline-flex so the optional image sits inline with text
 * and disappears cleanly when absent.
 *
 * Home audience + practice card slots reuse the existing .card-image rule
 * defined in section 13 (CARD IMAGE SLOT) — no changes needed there. The
 * helper's <img> output picks up that class automatically. The
 * media-placeholder__label inner span is added by the new helper for
 * better labelling than the previous div-only placeholder.
 *
 * The admin slot editor (/Admin/SectionImages) styling appears in this
 * section too. Could live in a separate admin.css if/when the admin area
 * grows enough to warrant the split.
 * ============================================================= */

/* ---- Header logo ---- */
.wordmark-logo {
    height: 1.5rem;
    width: auto;
    display: block;
    flex: 0 0 auto;
    /* Logos are typically transparent PNG/SVG that sit on the surface
       colour. No background, no border. Keep the rendering crisp at
       low pixel sizes. */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.wordmark-text {
    /* No standalone rules needed; the span inherits typography from
       .wordmark. Declaring the selector here makes it clear the span is
       a deliberate structural element, not accidental. */
}

/* ---- Footer brand wrapper + logo ---- */
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* The footer band uses dark theme tokens. The brand span inherits the
       same muted ink as the legal links so the whole row reads as one
       lockup rather than three separately-coloured elements. */
    color: inherit;
}

.site-footer__copy {
    /* No structural rules — kept as a named span so future styling (e.g.
       hiding on small screens, or adding a separator) can target it. */
}

.site-footer__logo {
    height: 1.25rem;
    width: auto;
    display: block;
    flex: 0 0 auto;
    /* Footers typically use a slightly desaturated version of the logo so
       it doesn't compete with the legal text. Cheap with opacity; admins
       can also upload a deliberately-lightened "footer variant". */
    opacity: 0.9;
}

/* ---- Media placeholder label (new sub-element) ---- */
.media-placeholder__label {
    /* The new SectionImage helper renders the slot's registry label inside
       a span instead of as bare text inside the placeholder div. Lets us
       style placeholder typography without affecting layout. */
    font-family: var(--font-system, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-ink-muted, #6B5B47);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 var(--space-sm, 0.75rem);
}

/* =============================================================
 * 26b. ADMIN SECTION IMAGES EDITOR
 * /Admin/SectionImages — grid of slot cards with thumbnail + actions.
 * Only loaded when an admin visits the page; safe to live in site.css
 * since the styles use specific class prefixes (admin-slot-*).
 * ============================================================= */

.admin-section-images {
    /* Spacing managed by section children; container provides the page
       margins. */
}

.admin-page__head {
    padding-block: var(--space-md, 1.5rem);
    border-block-end: 1px solid var(--color-line, #E8E0D2);
    margin-block-end: var(--space-lg, 2rem);
}

.admin-page__head h1 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-ink-strong, #1A1A1E);
}

.admin-page__lede {
    margin: 0 0 var(--space-md, 1.5rem) 0;
    max-width: 60ch;
    color: var(--color-ink-muted, #6B5B47);
    line-height: 1.55;
}

.admin-page__lede code {
    font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace);
    font-size: 0.875em;
    background: var(--color-surface-elevated, #F4EFE6);
    padding: 0.1em 0.4em;
    border-radius: 3px;
}

.admin-page__metrics {
    display: inline-flex;
    align-items: stretch;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.admin-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.admin-metric__value {
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-ink-strong, #1A1A1E);
}

.admin-metric__label {
    font-size: 0.8rem;
    color: var(--color-ink-muted, #6B5B47);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-metric--muted .admin-metric__value {
    color: var(--color-ink-muted, #6B5B47);
}

/* ---- Slot group ---- */
.admin-slot-group {
    margin-block-end: var(--space-xl, 3rem);
}

.admin-slot-group__title {
    margin: 0 0 var(--space-md, 1.5rem) 0;
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink-strong, #1A1A1E);
    /* Echoes the eyebrow style used on public pages — small accent line
       to the start of the heading. */
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid var(--color-accent, #B58542);
}

/* ---- Slot grid ---- */
.admin-slot-grid {
    display: grid;
    /* On wide screens fit ~3 per row, narrow it down on smaller widths
       without media queries by using auto-fill with a sensible minmax. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ---- Slot card ---- */
.admin-slot-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated, #F4EFE6);
    border: 1px solid var(--color-line, #E8E0D2);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color var(--transition-fast, 180ms) ease,
                box-shadow var(--transition-fast, 180ms) ease;
}

.admin-slot-card:hover {
    border-color: var(--color-accent, #B58542);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.admin-slot-card.is-empty {
    /* Empty slots get a subtle dashed treatment so the operator's eye is
       drawn to them. Becomes a solid card the moment an image is assigned. */
    border-style: dashed;
    border-color: var(--color-line, #E8E0D2);
}

.admin-slot-card__thumb {
    aspect-ratio: 3 / 2;
    background: var(--color-surface, #FAF7F2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-slot-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-slot-card__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-ink-muted, #6B5B47);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-slot-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.admin-slot-card__label {
    margin: 0;
    font-family: var(--font-display, "Bricolage Grotesque", Georgia, serif);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink-strong, #1A1A1E);
}

.admin-slot-card__meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-ink-muted, #6B5B47);
}

.admin-slot-card__meta code {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    background: var(--color-surface, #FAF7F2);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    word-break: break-all;
}

.admin-slot-card__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-ink-muted, #6B5B47);
    font-style: italic;
}

.admin-slot-card__note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-ink-muted, #6B5B47);
    padding: 0.4rem 0.6rem;
    background: var(--color-surface, #FAF7F2);
    border-inline-start: 2px solid var(--color-accent, #B58542);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

.admin-slot-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
}

/* Small button variant for the in-card actions. Defined here rather than
   reusing .btn-secondary at full size because card actions should feel
   compact and secondary to the thumbnail. */
.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-ink-muted, #6B5B47);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast, 180ms) ease,
                color var(--transition-fast, 180ms) ease;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.btn-link:hover {
    color: var(--color-ink-strong, #1A1A1E);
    text-decoration-color: currentColor;
}


/* =============================================================
 * 27. PAGE FEATURE IMAGE  +  FOUNDER PORTRAIT  (5e-d-6)
 *
 * Replaces the earlier (5e-d-5) full-bleed .page-hero-image with a
 * contained .page-feature-image that lives INSIDE the page's content
 * sections rather than as a standalone visual break. Constrained to
 * a defined max-width AND aspect ratio so the rendered size doesn't
 * depend on what the operator uploaded — a 6000×4000 photo lands at
 * the same on-page dimensions as a 1600×700 banner.
 *
 *
 * Layout
 * ------
 *   <section class="home-section principles-section">
 *       <figure class="page-feature-image">
 *           @Html.SectionImage("practice.hero", "page-feature-image__media")
 *       </figure>
 *       <span class="home-eyebrow">...</span>
 *       <h2>...</h2>
 *       <div class="...">...</div>
 *   </section>
 *
 * Sizing
 * ------
 *   - 21:9 cinematic aspect ratio (forced via aspect-ratio + object-fit:cover)
 *   - Max-width 760px so the image reads as a contained feature, not a hero
 *   - Centred horizontally with margin auto
 *
 * Practice founder portrait
 * --------------------------
 * Practice has an additional slot (practice.founder.portrait) for a
 * circular portrait of the founder, rendered inside the existing
 * .founder-grid as a new leading column. .founder-grid--with-portrait
 * adds the portrait column ahead of the existing label/body columns.
 * The portrait is a fixed 180×180 circle with object-fit:cover, so any
 * uploaded image gets cropped face-centred without distortion.
 * ============================================================= */

/* ---- Feature image (Practice principles, HowWeWork stages,
        Services index, Services detail) ---- */
.page-feature-image {
    /* The figure itself is just a vertical-spacing container. Centring
       happens via margin auto on the image so the image element collapses
       cleanly if the slot is unassigned and placeholderWhenMissing=false. */
    margin: 0 0 var(--space-lg, 2.5rem) 0;
    padding: 0;
}

.page-feature-image__media {
    display: block;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.20);
    margin-left: auto;
    margin-right: auto;
}

/* Placeholder variant — same constrained box so layout doesn't jump
   when an admin binds an image. .media-placeholder's dashed-border +
   muted background visual comes from system.css and composes cleanly. */
.media-placeholder.page-feature-image__media {
    width: 100%;
    max-width: 760px;
    aspect-ratio: 21 / 9;
    margin-left: auto;
    margin-right: auto;
}

/* Tighter shadow on dark theme so the image doesn't bloom against the
   deep ink surface. */
:root[data-theme="dark"] .page-feature-image__media {
    box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.45);
}

/* The dark-band sections (principles-section) already render dark, so
   the image needs a slightly tighter shadow inside them too — those
   bands use their own theme-stable tokens (--color-band-dark) and aren't
   affected by [data-theme="dark"], so override explicitly. */
.principles-section .page-feature-image__media {
    box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.40);
}


/* ---- Practice founder portrait (circle) ---- */

/* Modifier that augments the existing .founder-grid (2-col: label, body)
   with a leading portrait column. Falls back gracefully to the existing
   single-column responsive override under the breakpoint at line ~2968. */
.founder-grid--with-portrait {
    grid-template-columns: 180px 14rem 1fr;
}

.founder-portrait {
    /* Just a positioning container; the actual circle is on the inner
       <img> (or placeholder div) via .founder-portrait__media. */
    display: flex;
    justify-content: flex-start;
}

.founder-portrait__media {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;        /* bias toward the upper face for portraits */
    border: 3px solid var(--color-surface, #FAF7F2);
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.20),
                0 0 0 1px var(--color-line, #E8E0D2);
    background: var(--color-surface-elevated, #F4EFE6);
}

/* Placeholder variant — circular, same size. Without an explicit
   width/height the placeholder div would collapse to zero. */
.media-placeholder.founder-portrait__media {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* Override system.css's media-placeholder defaults that target
       rectangular images. */
    aspect-ratio: 1 / 1;
}

/* Dark theme — soften the ring/shadow so it doesn't pop against the
   dark surface. */
:root[data-theme="dark"] .founder-portrait__media {
    border-color: var(--color-surface, #1A1A1E);
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--color-line, rgba(255,255,255,0.08));
}


/* Mobile override (matches the 48rem breakpoint used by the rest of
   site.css). Collapse the 3-col founder grid to a single stacked
   column on small screens and shrink the portrait a touch. Without
   this rule the founder-grid--with-portrait modifier would override
   the generic mobile .founder-grid 1fr rule because it appears later
   in source order. */
@media (max-width: 48rem) {
    .founder-grid--with-portrait {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1.5rem);
        justify-items: start;
    }
    .founder-portrait__media,
    .media-placeholder.founder-portrait__media {
        width: 140px;
        height: 140px;
    }
}


/* =============================================================
 * 27a. ACCOUNT MENU — MOBILE DRAWER STRUCTURE FIX (5e-d-6.1)
 *
 * Problem (visible on phones):
 *   The .account-trigger is a 38x38 avatar button on desktop and
 *   sits in the same flex row as .lang-switch + .theme-toggle. In
 *   the mobile drawer, the existing rules turn the submenu into an
 *   inline expand-on-click block (good), but .account-menu is still
 *   width: auto inside a flex-row .nav-controls (no wrap). When the
 *   submenu opens, the flex item grows to the widest child ("Two-
 *   factor auth"), overflowing the drawer to the right and clipping
 *   text against the viewport edge.
 *
 * Fix:
 *   1. Allow .nav-controls to wrap and pin .account-menu to its own
 *      full-width row below lang + theme, with a clean divider above.
 *   2. Restyle .account-trigger inside the drawer as a proper nav-
 *      item-style row (avatar icon | "Account" label | chevron) so
 *      the section reads as a section opener, not just an icon.
 *   3. Render the new .account-trigger-label span and .account-chevron
 *      SVG (both hidden on desktop) added to the layout markup.
 *   4. Style .account-sub items consistently with the other drawer
 *      nav-sub items (About / Services) so the bottom section reads
 *      as part of the same nav vocabulary.
 *
 * The chevron rotation on open is already handled by the generic
 * .nav-has-sub.is-open > .nav-trigger .nav-chevron rule earlier in
 * the file — .account-menu also has the .nav-has-sub class, so the
 * existing rule applies without further work here.
 * ============================================================= */

/* Desktop default — keep the .account-trigger as the avatar-only
   circular button. Label and chevron remain hidden. */
.account-trigger-label,
.account-chevron {
    display: none;
}

@media (max-width: 60rem) {
    /* Allow .account-menu to wrap onto its own row below the lang
       and theme controls. Without this, the row is a single non-
       wrapping flex line. */
    .nav-controls {
        flex-wrap: wrap;
    }

    /* .account-menu becomes a full-width row at the end of
       .nav-controls. Divider above so it reads as a separate group. */
    .account-menu {
        width: 100%;
        flex: 0 0 100%;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--color-line, #E8E0D2);
        align-items: stretch;
    }

    /* Trigger becomes a nav-item-style row: icon | label | chevron.
       Overrides the desktop 38x38 pill shape. */
    .account-trigger {
        width: 100%;
        height: auto;
        padding: 0.6rem 0.5rem;
        border: 0;
        border-radius: var(--radius-sm, 4px);
        background: none;
        color: var(--color-ink, #2A2A2E);
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: var(--font-weight-medium, 500);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    .account-trigger:hover,
    .account-menu.is-open .account-trigger {
        background: var(--color-surface, #FAF7F2);
        color: var(--color-accent, #B58542);
        border: 0;
    }

    /* Show the label and chevron that were hidden on desktop. */
    .account-trigger-label {
        display: inline;
        flex: 1;
        text-align: start;
    }
    .account-chevron {
        display: inline-block;
    }

    /* Submenu items styled consistently with the other drawer
       nav-sub items above (About, Services). */
    .account-sub {
        margin: 0.25rem 0 0 0.5rem;
        padding: 0;
        list-style: none;
    }
    .account-sub li { margin: 0; }
    .account-sub a,
    .account-sub button {
        display: block;
        width: 100%;
        padding: 0.55rem 0.5rem;
        font-size: 0.9375rem;
        border-radius: var(--radius-sm, 4px);
        background: none;
        border: 0;
        text-align: start;
        color: var(--color-ink, #2A2A2E);
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
    }
    .account-sub a:hover,
    .account-sub button:hover {
        background: var(--color-surface, #FAF7F2);
        color: var(--color-accent, #B58542);
    }

    /* Signout item keeps its top separator but uses the same item
       shell as the other submenu links. */
    .account-signout-item {
        margin-top: 0.35rem;
        padding-top: 0.35rem;
    }
}