/* ============================================================================
   Simon Greally — theme styles
   Built to the brand guidelines: Charcoal + AI Teal, Fraunces + Inter, 8px grid.
   "Quiet, fast, considered." No bounce, no gradients (bar one), one accent only.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Colour */
    --color-charcoal: #171717;   /* primary */
    --color-off-white: #F7F7F3;  /* default surface */
    --color-teal: #10A37F;       /* accent */
    --color-teal-deep: #087F68;  /* accent hover */
    --color-ink-soft: #202123;   /* dark panels */
    --color-white: #FFFFFF;
    --color-line: #E6E6E0;       /* borders */
    --color-muted: #404045;      /* body text */

    /* Semantic */
    --bg: var(--color-off-white);
    --text: var(--color-charcoal);
    --text-muted: var(--color-muted);
    --text-quiet: #6E6E80;       /* design --text-on-cream-quiet (dark scope overrides to #8E8EA0) */
    --accent: var(--color-teal);
    --accent-hover: var(--color-teal-deep);
    --border: var(--color-line);

    /* Type */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Spacing — 8px grid */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;
    --section-y: clamp(52px, 8vw, 88px);   /* 52 mobile (design) → 88 desktop */
    --container-pad: clamp(20px, 5vw, 56px); /* 20 mobile (design) → 56 desktop */
    --container-max: 1432px; /* 1320px content + 2×56px pad — matches design .container (1320px) */

    /* Radius / border */
    --radius-ui: 3px;
    --radius-card: 7px;
    --border-fine: 0.5px;

    /* Motion */
    --t-fast: 0.2s ease;
    --t-card: 0.3s ease;
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 16px;           /* design body */
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.12;          /* design */
    letter-spacing: -0.02em;    /* design */
    margin: 0 0 var(--space-3);
    color: var(--text);
}
h1 { font-size: 52px; margin-bottom: 28px; }                  /* design */
h2 { font-size: 36px; line-height: 1.2; margin-bottom: 24px; } /* design */
h3 { font-size: 22px; line-height: 1.3; margin-bottom: 12px; } /* design */
h4 { font-size: 19px; }

/* Design collapses the type scale at 820px (tablet tier) */
@media (max-width: 820px) {
    h1 { font-size: 38px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }
    .hero-block__title { font-size: 38px; }
}
/* Phone tier — matches the dedicated mobile design (~390px) exactly */
@media (max-width: 600px) {
    body { font-size: 15px; line-height: 1.55; }
    h1, .hero-block__title { font-size: 30px; margin-bottom: 18px; }
    h2 { font-size: 24px; margin-bottom: 16px; }
    h3 { font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
    .eyebrow { font-size: 10.5px; letter-spacing: 2px; margin-bottom: 20px; }
    /* Mobile: collapse the desktop-only large section paddings to the design's 52px */
    .site-main section.by-the-numbers,
    .site-main section.selected-work,
    .site-main section.contact-booking { padding-block: 52px; }
}

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

.eyebrow {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-quiet);
    margin: 0 0 28px;
    display: block;
}
.italic-accent {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
}
.caption { font-size: 12.5px; color: var(--text-muted); }

/* ---------- Links ---------- */
a { color: inherit; text-decoration: none; }
.rich a,
a.inline-link {
    color: var(--text);
    border-bottom: var(--border-fine) solid currentColor;
    padding-bottom: 1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.rich a:hover,
a.inline-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container.container-narrow { max-width: 820px; }
.container.container-wide { max-width: 1440px; }

/* Full-width hairline divider between every section (edge-to-edge, adapts light/dark) */
.site-main > section { border-top: 1px solid var(--border); }
.site-main > section:first-child { border-top: 0; }
.container.container-fluid { max-width: none; }

/* ---------- Section utilities (shared Settings group) ---------- */
.site-main section { padding-block: var(--section-y); }
.padding-sm { padding-block: clamp(24px, 3vw, 40px); }
.padding-md { padding-block: clamp(40px, 5vw, 64px); }
.padding-lg { padding-block: clamp(64px, 7vw, 112px); }
.padding-xl { padding-block: clamp(88px, 9vw, 160px); }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
/* Light section: re-scopes the dark tokens back to the off-white palette for its subtree */
.bg-light {
    --bg: #F7F7F3;
    --text: #171717;
    --text-muted: #404045;
    --color-line: #E6E6E0;
    --border: #E6E6E0;
    --color-off-white: #F7F7F3;
    --color-white: #FFFFFF;
    --panel-soft: #F0F0EA;
    --text-quiet: #6E6E80;       /* design --text-on-cream-quiet */
    background: var(--bg);
    color: var(--text);
}
.bg-light .btn { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); }
.bg-light .btn:hover { background: #000; color: #fff; }
.bg-light .btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.bg-light .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bg-light .btn--ghost { background: transparent; color: var(--color-charcoal); border-color: var(--color-charcoal); }
.bg-light .btn--ghost:hover { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); }
.bg-dark { background: var(--color-charcoal); color: #fff; }
.bg-accent { background: var(--accent); color: #fff; }
.text-light, .text-light h1, .text-light h2, .text-light h3 { color: #fff; }

/* ---------- Buttons (3 systems) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 13px 26px;
    border-radius: 2px;
    border: 1px solid var(--color-charcoal);
    background: var(--color-charcoal);
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); background: #000; }
.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--color-charcoal); border-color: var(--color-charcoal); }
.btn--ghost:hover { background: var(--color-charcoal); color: #fff; }
.text-light .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.text-light .btn--ghost:hover { background: #fff; color: var(--color-charcoal); border-color: #fff; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
    position: fixed; top: 8px; left: 8px; z-index: 2000;
    width: auto; height: auto; clip: auto;
    padding: 10px 16px; background: #fff; color: var(--text);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================================
   GLOBAL CHROME
   ========================================================================== */

/* ---------- Announcement bar ---------- */
.announcement {
    background: var(--color-ink-soft);
    color: rgba(255,255,255,0.92);
    font-size: 12.5px;
}
.announcement__inner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding-block: 9px; padding-inline: 48px; max-width: none; position: relative;
}
.announcement__badge {
    background: var(--accent); color: #fff;
    font-weight: 600; font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
    flex-shrink: 0;
}
.announcement__text { flex: 0 1 auto; min-width: 0; text-align: center; }
.announcement__text a { color: #fff; border-bottom: var(--border-fine) solid rgba(255,255,255,0.6); }
.announcement__text a:hover { border-color: #fff; }
.announcement__close {
    position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: rgba(255,255,255,0.7);
    font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
    transition: color var(--t-fast);
}
.announcement__close:hover { color: #fff; }
.announcement[hidden] { display: none; }

/* ---------- Header / nav (matches design HTML) ---------- */
nav.top {
    position: sticky; top: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 48px;
    background: rgba(23, 23, 23, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 0.5px solid #343541;
}
nav.top .wordmark {
    font-family: var(--font-display); font-size: 16px; font-weight: 400;
    letter-spacing: 0.5px; color: #ECECEC; cursor: pointer; text-decoration: none;
}
nav.top .links { display: flex; align-items: center; gap: 32px; font-size: 13px; letter-spacing: 0.3px; }
nav.top .links a { color: #8E8EA0; text-decoration: none; transition: color 0.2s ease; }
nav.top .links a:hover,
nav.top .links a.active,
nav.top .links a.cta { color: #ECECEC; }

/* Hamburger */
.hamburger {
    display: none; width: 30px; height: 30px; flex-direction: column;
    justify-content: center; gap: 6px; padding: 4px;
    background: transparent; border: none; cursor: pointer;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: #ECECEC; transition: all 0.25s ease; margin-left: auto; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile full-screen menu */
.menu-overlay {
    position: fixed; inset: 0; z-index: 99;
    background: #171717; padding: 80px 28px 28px;
    display: none; flex-direction: column; overflow-y: auto;
}
.menu-overlay.is-open { display: flex; }
/* When the mobile menu is open: hide the announcement and pin the nav to the top
   (otherwise the tall announcement bar pushes the sticky nav down, overlapping the menu links). */
.menu-open .announcement { display: none; }
.menu-open nav.top { position: fixed; top: 0; left: 0; right: 0; }
.menu-overlay a {
    display: block; font-family: var(--font-display); font-size: 28px;
    color: #ECECEC; text-decoration: none; padding: 16px 0;
    border-bottom: 0.5px solid #343541;
}
.menu-overlay a.cta-menu { color: var(--accent); margin-top: 20px; border-bottom: none; font-size: 24px; }
.menu-overlay a.cta-menu-secondary { color: #B5B5BC; margin-top: 4px; font-size: 22px; }
.menu-overlay .menu-footer {
    margin-top: auto; padding-top: 32px; border-top: 0.5px solid #343541;
    font-size: 13px; color: #8E8EA0; display: flex; flex-direction: column;
}
.menu-overlay .menu-footer a {
    font-family: var(--font-text); font-size: 13px; color: #B5B5BC;
    padding: 6px 0; border-bottom: none; letter-spacing: 0.2px;
}

/* Footer (matches design HTML) */
footer {
    padding: 36px 48px; background: #171717; border-top: 0.5px solid #343541;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: #6E6E80; flex-wrap: wrap; gap: 16px;
}
footer .right { display: flex; gap: 24px; }
footer a { color: #6E6E80; text-decoration: none; transition: color 0.2s ease; }
footer a:hover { color: #ECECEC; }

@media (max-width: 820px) {
    nav.top { padding: 16px 20px; }
    .announcement__inner { padding-inline: 20px; justify-content: flex-start; align-items: flex-start; gap: 10px; }
    .announcement__text { text-align: left; }
    .announcement__close { right: 16px; top: 12px; transform: none; }
    nav.top .links { display: none; }
    .hamburger { display: flex; }
    .menu-overlay a { font-size: 24px; padding: 14px 0; }
    .menu-overlay a.cta-menu { font-size: 22px; }
    .menu-overlay a.cta-menu-secondary { font-size: 20px; }
    footer { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-charcoal); color: rgba(255,255,255,0.85); }
.site-footer__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; padding-block: 28px; font-size: 13px;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: #fff; }
.site-footer__lockup .brand__word { color: #fff; font-size: 1.05rem; }
.site-footer__role { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; }
.site-footer__links { display: flex; gap: 22px; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none; gap: 0;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.12);
}
.sticky-cta a {
    flex: 1; text-align: center; padding: 17px 8px;
    font-size: 14px; font-weight: 500; font-family: var(--font-text);
}
.sticky-cta__book { background: var(--color-off-white); color: var(--color-charcoal); border-top: 1px solid var(--border); }
.sticky-cta__workshop { background: var(--accent); color: #fff; }

/* ---------- Animations ---------- */
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }   /* only hide when JS is active */
.reveal.is-visible,
.reveal-all .reveal { opacity: 1; transform: none; }              /* .reveal-all = JS failsafe */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   IMAGE PLACEHOLDERS (until real photography lands)
   ========================================================================== */
.placeholder {
    display: flex; align-items: flex-end; padding: 18px;
    min-height: 320px; background: #e9e9e4; border-radius: var(--radius-card);
    color: var(--text-muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.placeholder--portrait { aspect-ratio: 4 / 5; min-height: 0; }

/* ============================================================================
   HOME BLOCKS
   ========================================================================== */

/* Hero — full-bleed photographic banner (always dark) */
.hero-block--full {
    position: relative; background-color: #171717;
    background-size: cover; background-position: 65% 50%; /* bias right so Simon stays in frame when narrow screens crop the sides */
    color: #fff; overflow: hidden;
}
/* Desktop only: brighter right side + face lift (client: "so my face is more visible").
   !important beats the template's inline default; scoped to --default-bg so an editor-set ACF image is never overridden. */
@media (min-width: 1025px) {
    .hero-block--full.hero-block--default-bg { background-image: url('../images/hero-bg4.jpg') !important; }
}
.site-main .hero-block--full { padding-block: 0; }
.hero-block__veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, transparent 0%, transparent 40%, rgba(8,8,16,0.65) 80%, rgba(8,8,16,0.92) 100%),
        linear-gradient(90deg, rgba(8,8,16,0.55) 0%, rgba(8,8,16,0.15) 45%, transparent 70%);
}
.hero-block--full .hero-block__inner { position: relative; z-index: 2; display: block; padding: 140px 0 40px; }
.hero-block__content { max-width: 720px; }
.hero-block__title { margin-bottom: 28px; color: #fff; font-size: 56px; line-height: 1.08; max-width: 720px; }
.hero-block__subhead { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-top: -10px; margin-bottom: 28px; max-width: 620px; color: var(--accent); }
.hero-block__body { font-size: 19px; line-height: 1.55; max-width: 620px; margin-bottom: 40px; color: var(--text-muted); }
.hero-block__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; margin-bottom: var(--space-2); }
.hero-block__availability { color: #8E8EA0; font-size: 13px; }
/* Hero buttons: light primary (btn-light) + teal accent (btn-coral) on the dark banner */
.hero-block--full .btn { background: #ECECEC; color: var(--color-charcoal); border-color: #ECECEC; }
.hero-block--full .btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.hero-block--full .btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.hero-block--full .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.hero-block__credit { position: absolute; right: var(--container-pad); bottom: 18px; z-index: 1; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); }

/* Hero credential row (design .hero-credentials) — continues the hero panel */
.proof-stats { background: #171717; }
.site-main .proof-stats { padding-top: 0; padding-bottom: 80px; }
.proof-stats__grid {
    display: flex; flex-wrap: wrap; gap: 36px 44px; align-items: baseline;
    border-top: 0.5px solid #343541; padding-top: 24px; margin-top: 40px;
}
.proof-stat { display: flex; flex-direction: column; gap: 4px; }
.proof-stat__value { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: #ECECEC; margin-bottom: 0; }
.proof-stat__value .accent { color: var(--accent); }
.proof-stat__label { font-size: 10.5px; letter-spacing: 1.5px; font-weight: 500; text-transform: uppercase; color: #8E8EA0; margin-bottom: 0; }
.proof-stat__link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
    font-size: 10.5px; letter-spacing: 0.5px; color: #8E8EA0; text-decoration: none;
    border-bottom: 0.5px solid transparent; transition: color 0.2s ease, border-color 0.2s ease;
}
.proof-stat__link::after { content: "\2197"; font-size: 11px; line-height: 1; }
.proof-stat__link:hover { color: #ECECEC; border-bottom-color: #8E8EA0; }
@media (max-width: 820px) {
    .proof-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
    .proof-stat__value { font-size: 22px; }
}

/* Case study wall */
.case-wall__intro { max-width: 24ch; margin-bottom: var(--space-6); }
.case-wall__footnote { margin-top: var(--space-3); }

/* Testimonial bar */
.testimonial-bar { margin: 0; border: 0; padding: 0; }
.testimonial-bar__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; color: var(--text); margin: 0 0 14px; }
.testimonial-bar__attr { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
/* Proof-stats testimonial bar — full-width panel + centered inner content (matches Claude HTML .hero-quote-pull exactly) */
section.proof-stats { padding-bottom: 0; }
.proof-stats__bar { background-color: #1c1c1f; border-bottom: 1px solid var(--border); padding: 28px 48px; margin-top: var(--space-8); }
.proof-stats__bar-inner { max-width: 920px; margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.proof-stats__bar-quote { flex: 1; font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--text); margin: 0; }
.proof-stats__bar-attr { flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
@media (max-width: 600px) { .proof-stats__bar { padding: 24px 20px; } .proof-stats__bar-inner { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* Credential strip */
/* Logo wall (design): "Previously…" eyebrow (credential-strip) + bordered company grid (case-wall) */
section.credential-strip { background: #171717; }
.site-main section.credential-strip { padding-bottom: 22px; }
.credential-strip { font-size: 10.5px; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; color: #8E8EA0; margin: 0; line-height: 1.7; }
.credential-strip__label { color: #8E8EA0; }

section.case-wall { background: #171717; }
/* Divider above the logo wall is container-width (on .logo-wall), matching the design — NOT a full-width section line. */
section.credential-strip, section.case-wall { border-top: 0; }
section.credential-strip { padding-bottom: 0; }
.site-main section.case-wall { padding-top: 0; }
/* Tighten space below the testimonial bar so bar→credential gap matches the design (~109px) */
.site-main section.proof-stats { padding-bottom: var(--space-7); border-top: 0; }
/* Credential line now lives inside the logo-wall section, above the logos (feedback point 1) */
.logo-wall__credential { margin-bottom: 22px; }
/* Logo wall — Claude reference: black website bg, thin grey grid, uniform WHITE logos (Baseten sizing) */
.logo-wall { margin-top: 24px; padding-top: 28px; border-top: var(--border-fine) solid var(--border); }
.logo-wall-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: var(--border-fine) solid var(--border);
    border-left: var(--border-fine) solid var(--border);
}
.logo-wall-cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 108px; padding: 24px 20px; text-decoration: none;
    border-right: var(--border-fine) solid var(--border);
    border-bottom: var(--border-fine) solid var(--border);
    transition: background-color var(--t-fast);
}
.logo-wall-cell:hover { background-color: rgba(16, 163, 127, 0.12); }
/* Force every client logo to a uniform white silhouette, centred */
.logo-wall-logo {
    max-width: 60%; max-height: 32px; width: auto; height: auto; object-fit: contain; display: block;
    filter: brightness(0) invert(1); opacity: 0.72;
    transition: opacity var(--t-fast);
}
.logo-wall-cell:hover .logo-wall-logo { opacity: 1; }
/* Trimmed source files + per-logo optical-size balancing so every mark reads the same visual weight */
.logo-wall-logo[alt="Indy"] { content: url('../images/logo-indy-new.png'); max-height: 26px; }
.logo-wall-logo[alt="ProcurePro"] { content: url('../images/logo-procurepro-wide.png'); max-height: 28px; }
.logo-wall-logo[alt="OneMRI"] { max-height: 28px; }
.logo-wall-logo[alt="Clea"] { max-height: 32px; }
.logo-wall-logo[alt="Movember"] { max-height: 32px; }
.logo-wall-logo[alt="Year13"] { max-height: 36px; }
.logo-wall-logo[alt="Mounties Group"] { max-height: 32px; }
.logo-wall-logo[alt="KIIS"] { max-height: 46px; }
.logo-wall-logo[alt="West HQ"] { max-height: 48px; }
.logo-wall-logo[alt="Harrison.ai"] { max-height: 48px; }
.logo-wall-logo[alt="Heidi Health"] { max-height: 50px; }
.logo-wall-logo[alt="Kyle & Jackie O"] { max-height: 42px; max-width: 50%; }
.logo-wall-footnote { margin-top: 24px; font-size: 11.5px; color: #8E8EA0; line-height: 1.55; max-width: 580px; }
@media (max-width: 900px) {
    .logo-wall-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .logo-wall-grid { grid-template-columns: repeat(2, 1fr); }
    .logo-wall-cell { min-height: 88px; padding: 16px 12px; }
}

/* Manifesto — large italic statement + teal stat highlights */
.manifesto__inner { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.manifesto { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.34; color: var(--text); max-width: none; margin: 0; }
/* Three key points — subtle divider line beside the stats (Claude reference .insight-stats, F4) */
.manifesto__stats { display: grid; gap: 30px; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.manifesto-stat__headline { font-family: var(--font-display); font-size: clamp(1.375rem, 2.3vw, 1.625rem); line-height: 1.1; margin: 0 0 8px; }
.manifesto-stat__value { color: var(--accent); font-style: italic; }
.manifesto-stat__word { color: var(--text); }
.manifesto-stat__desc { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0 0 8px; max-width: 46ch; }
.manifesto-stat__meta { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0; }

/* Testimonial grid */
.tg__intro { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.32; max-width: 40ch; margin-bottom: var(--space-9); color: var(--text); }
/* Featured peer quote */
.tg__featured { position: relative; margin: 0 0 var(--space-9); max-width: 820px; padding: var(--space-6) 0; border: 0; border-top: var(--border-fine) solid var(--border); border-bottom: var(--border-fine) solid var(--border); }
.tg__featured-company { position: absolute; top: var(--space-6); right: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color var(--t-fast); }
a.tg__featured-company:hover { color: var(--text); }
.tg__featured-quote { position: relative; font-family: var(--font-display); font-size: clamp(1.375rem, 2.3vw, 1.625rem); line-height: 1.4; color: var(--text); margin: 0 0 28px; padding-left: 28px; padding-right: 110px; }
/* Large green opening quote mark, matching the Claude reference */
.tg__featured-quote::before { content: "\201C"; position: absolute; top: -8px; left: 0; font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--accent); }
.tg__cite-row { display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin-top: var(--space-4); border-top: 0; }
/* Featured attribution: no divider above it, indented to align with the quote (matches Claude .testimonial-attribution) */
.tg__featured .tg__cite-row { margin-top: 0; padding-left: 28px; gap: 16px; }
.tg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--panel-soft); color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.tg__avatar--photo { background: #202123; }
.tg__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg__cite-text { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.tg__cite-text strong { color: var(--text); font-weight: 600; }
.tg__cite-role { display: block; }
/* Grid of short testimonials */
.tg__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } /* design 2×2 grid */
.tg__item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-left: 18px; }
.tg__tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tg__item { padding-top: 28px; border-top: var(--border-fine) solid var(--border); }
.tg__company { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; letter-spacing: 0.01em; transition: color var(--t-fast); }
a.tg__company:hover { color: var(--text); }
.tg__result { display: block; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin: 6px 0 14px; }
.tg__quote { font-family: var(--font-display); font-size: 17px; line-height: 1.5; color: var(--text); margin-bottom: 16px; }
/* Larger green opening quote mark on grid testimonials (absolute, matches Claude .testimonial-card-quote::before) */
.tg__quote::before { content: none; }
.tg__item .tg__cite-row { padding-left: 0; margin-top: 16px; }

/* Who I am */
/* Who I am — contained portrait beside content (preferred over full-bleed) */
.who-i-am__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); align-items: center; }
.who-i-am__img { display: block; width: 100%; border-radius: 4px; }
.who-i-am__content .cta-row { margin-top: var(--space-5); }
.who-i-am h2 { font-size: clamp(1.75rem, 2.6vw, 2.125rem); } /* design 34px */

/* Design button variants */
.btn-light { background: #ECECEC; color: var(--color-charcoal); border-color: #ECECEC; }
.btn-light:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn-coral { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-coral:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* About intro (About page opener) */
.about-intro__inner { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.about-intro__img { width: 100%; height: 400px; object-fit: cover; object-position: center 25%; border-radius: 4px; display: block; }
.about-intro__ph {
    aspect-ratio: 4 / 5;
    background: #202123;
    border: var(--border-fine) solid var(--border);
    border-radius: var(--radius-card);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 18px;
}
.about-intro__ph-alt { font-size: 12px; color: rgba(255, 255, 255, 0.32); }
.about-intro__ph-cap { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); }
.about-intro__content .eyebrow { color: var(--text-quiet); }
.about-intro__title { font-size: 36px; line-height: 1.12; margin-bottom: 10px; max-width: none; }
.about-intro__credentials { font-size: 12px; letter-spacing: 2px; font-weight: 500; color: var(--text-quiet); margin: 0 0 32px; line-height: 1.5; }
.about-intro__body { font-size: 14.5px; line-height: 1.8; color: var(--text-muted); max-width: 68ch; }
.about-intro__body p { margin-bottom: 16px; }
.about-intro__body p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
    .about-intro__inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .about-intro__media { max-width: 300px; }
}

/* Beliefs ("A few things I believe" — About page) */
.beliefs__head { padding-bottom: var(--space-4); border-bottom: var(--border-fine) solid var(--border); }
.beliefs__head .eyebrow { color: var(--text-quiet); }
.beliefs__title { font-size: clamp(1.5rem, 2.2vw, 1.75rem); margin: 0; }
.belief { padding: var(--space-4) 0; border-bottom: var(--border-fine) solid var(--border); }
.belief__title { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--space-1); }
.belief__body { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: none; margin: 0; }
.beliefs__coda { color: var(--text-muted); font-size: 13.5px; line-height: 1.7; max-width: none; margin: var(--space-8) 0 0; }

/* Speaking hero (Speaking page opener) */
.speaking-hero .eyebrow { color: var(--text-quiet); }
/* Speaking — tighten the top and flow the opener into the topics (matches the Claude reference) */
.site-main section.speaking-hero { padding-top: clamp(48px, 7vw, 80px); padding-bottom: 0; }
.site-main section.speaking-hero + section.speaking-topics { padding-top: 56px; border-top: 0; } /* design: hero+topics are one section — no divider, 56px gap */
.speaking-hero__title { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; max-width: none; margin: 0 0 28px; } /* design 52px / mb 28 */
.speaking-hero__body { color: var(--text-muted); max-width: 620px; font-size: 19px; line-height: 1.55; margin: 0 0 40px; } /* design lead 19px / 620px / mb 40 */
.speaking-hero__body p { margin: 0; }
.speaking-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.speaking-hero__note { font-size: 13px; color: var(--text-muted); }
@media (max-width: 600px) {
    .speaking-hero__actions .btn { width: 100%; justify-content: center; }
    /* Mobile: keep proof stats and the case wall as 2-up grids (matches the mobile design) */
    .proof-stats__grid { grid-template-columns: 1fr 1fr; }
    .case-wall .case-grid { grid-template-columns: 1fr 1fr; }
}

/* Philosophy */
.philosophy__title { max-width: 20ch; margin-bottom: var(--space-4); font-size: clamp(1.625rem, 2.4vw, 1.875rem); } /* design 30px */
.philosophy__body { max-width: 60ch; color: var(--text-muted); }

/* By the numbers */
.numbers__head { max-width: 700px; margin-bottom: var(--space-6); }
.numbers__head h2 { max-width: 700px; font-size: clamp(1.5rem, 2.6vw, 1.75rem); line-height: 1.25; }
.numbers__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: var(--border-fine) solid var(--border); border-bottom: var(--border-fine) solid var(--border);
}
/* Cells: vertical dividers only (border-right), no horizontal row divider, last cell no right border — matches design .number-cell exactly */
.number-card { padding: 36px 24px; border-right: var(--border-fine) solid var(--border); }
.number-card:last-child { border-right: 0; }
/* Phone: 2-up grid per the mobile design (.numbers-grid-mobile) — 3-up overflows at 390px */
@media (max-width: 600px) {
    .numbers__grid { grid-template-columns: 1fr 1fr; }
    .number-card { padding: 22px 16px; border-right: var(--border-fine) solid var(--border); border-bottom: var(--border-fine) solid var(--border); }
    .number-card:nth-child(2n) { border-right: 0; }
    .number-card:nth-last-child(-n+2) { border-bottom: 0; }
}
.number-card__value { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; margin-bottom: 10px; }
.number-card__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.number-card__detail { font-size: 13px; color: var(--text); margin-bottom: 12px; }
.number-card__link { font-size: 12px; }
.number-card__plus { color: var(--accent); }

/* Three altitudes — "How the work happens" (full-width, left-aligned to match the Claude reference) */
.altitudes__wrap { max-width: none; margin-inline: 0; }
.altitudes__head { margin-bottom: var(--space-3); }
.altitudes__intro { max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--text-muted); margin-bottom: 40px; }
.altitudes__list { margin-bottom: var(--space-6); }
.altitude { display: grid; grid-template-columns: 60px 230px 1fr; gap: 32px; padding: 28px 0; border-top: var(--border-fine) solid var(--border); align-items: start; }
.altitude__num { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--accent); }
.altitude__title { margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.25; }
.altitude__label { display: block; font-size: 10px; letter-spacing: 2px; color: #8E8EA0; }
.altitude__desc { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; max-width: none; margin: 0; }
.altitudes__callout { background: #1a1a1c; color: var(--text); border-left: 2px solid var(--accent); padding: 26px 30px; border-radius: var(--radius-ui); }
.altitudes__callout h3 { font-family: var(--font-display); font-style: italic; color: var(--text); font-size: 1.0625rem; font-weight: 400; margin: 0 0 10px; }
.altitudes__callout p { color: var(--text-muted); margin: 0; max-width: none; font-size: 14px; line-height: 1.6; }
/* Full-width variant (How I work page) — left-aligned, spans the container */
.altitudes__wrap--full { max-width: none; margin-inline: 0; }
.altitudes__wrap--full .altitude { grid-template-columns: 56px minmax(160px, 210px) 1fr; gap: var(--space-3) var(--space-5); }
.altitudes__wrap--full .altitudes__list { border-bottom: var(--border-fine) solid var(--border); }
.altitudes__wrap--full .altitude__label { text-transform: none; letter-spacing: 0.04em; font-size: 12px; margin-top: 4px; }
@media (max-width: 700px) {
    .altitude,
    .altitudes__wrap--full .altitude { grid-template-columns: 38px 1fr; }
    .altitude__desc { grid-column: 1 / -1; }
}

/* The line — design's light "Inside vs Outside" section */
.the-line .eyebrow { color: var(--text-quiet); }
.the-line__head { margin-bottom: var(--space-9); max-width: 33rem; }
.the-line__head--wide { max-width: 50rem; }
.the-line__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.the-line__col-label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.the-line__col h3 { font-size: 1.25rem; margin-bottom: var(--space-4); }
.the-line__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.the-line__list li { padding: 13px 0; border-bottom: var(--border-fine) solid var(--border); font-size: 14px; color: var(--text); }
.the-line__note { font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 52ch; }

/* Selected work */
.selected-work__head { margin-bottom: var(--space-8); max-width: 46rem; }
.selected-work__head h2 { font-size: clamp(1.375rem, 2vw, 1.5rem); line-height: 1.34; letter-spacing: -0.01em; }
.sw-row { display: grid; grid-template-columns: 165px minmax(0, 1fr) 140px; gap: var(--space-5); padding: 26px 0; border-top: var(--border-fine) solid var(--border); align-items: start; }
.sw-row:last-child { border-bottom: var(--border-fine) solid var(--border); }
.sw-row__company { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.4; color: var(--text); }
.sw-row__desc { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5; color: var(--text); max-width: 60ch; }
.sw-row__meta { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); text-align: right; white-space: nowrap; padding-top: 3px; }
.selected-work__cta { margin-top: var(--space-6); }
.selected-work__cta .inline-link { font-size: 13px; color: var(--text-muted); }

/* Three pathways */
.pathways__head { max-width: 56rem; margin-bottom: var(--space-6); }
.pathways__intro { color: var(--text-muted); max-width: 34rem; }
.pathways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pathway-card { display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; border: var(--border-fine) solid var(--border); border-top: 2px solid var(--border); border-radius: var(--radius-card); background: var(--color-white); transition: transform var(--t-card), box-shadow var(--t-card), border-top-color var(--t-card); }
/* Green treatment appears on hover for every card (top line + bottom button), matching the Claude reference. */
.pathway-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.05); border-top-color: var(--accent); }
.pathway-card:hover .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.pathways__head .eyebrow { color: var(--text-quiet); }
.pathway-card__tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); transition: color var(--t-fast); }
.pathway-card:hover .pathway-card__tag { color: var(--accent); } /* green eyebrow on hover (F12 — consistent across all cards) */
.pathway-card__title { margin: 0; font-size: 1.375rem; }
.pathway-card__meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pathway-card p { font-size: 14px; color: var(--text-muted); margin: 0; }
.pathway-card .eyebrow { margin-bottom: 4px; color: var(--text-quiet); }
.pathway-card__rightfor { margin-top: 6px; padding-top: 20px; border-top: var(--border-fine) solid var(--border); }
.pathway-card__example { border-left: 2px solid var(--accent); border-radius: 0; padding: 15px 18px; margin-top: 4px; }
.pathway-card__example .eyebrow { color: var(--accent); }
.pathway-card:hover .pathway-card__example { background: rgba(16,163,127,0.16); }
.pathway-card .btn { margin-top: auto; align-self: flex-start; }
.pathways__note { margin-top: var(--space-6); max-width: 72ch; color: var(--text-muted); font-size: 14px; }

/* Who I advise */
.who-i-advise {
    background-color: #161514;
    background-image:
        radial-gradient(120% 85% at 28% 0%, rgba(214,199,186,0.06), rgba(214,199,186,0) 52%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.advise__head .eyebrow { color: var(--text-quiet); }
.advise__head { max-width: 50rem; margin-bottom: var(--space-4); }
.advise__intro { color: var(--text-muted); margin-bottom: var(--space-6); }
.advise__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.advise__list li { display: flex; gap: 16px; align-items: baseline; padding: 18px 0; border-top: var(--border-fine) solid var(--border); color: var(--text); }
.advise__list li:last-child { border-bottom: var(--border-fine) solid var(--border); }
.advise__list li::before { content: "\2192"; color: var(--text-muted); flex: 0 0 auto; }
.advise__industries { font-size: 13px; color: var(--text-muted); }

/* US-AU corridor */
.us-au-corridor .eyebrow { color: var(--text-quiet); }
.us-au-corridor h2 { max-width: 720px; margin-bottom: 14px; } /* design spacing (F13) */
.corridor__body { color: var(--text-muted); max-width: 740px; }
.us-au-corridor .corridor__body p { font-size: 15.5px; line-height: 1.7; }
.corridor__body strong { color: var(--text); font-weight: 600; }

/* Writing teaser */
.writing-teaser__head { max-width: 50rem; margin-bottom: var(--space-6); }
.writing-teaser__head h2 { font-size: clamp(1.5rem, 2.4vw, 1.625rem); line-height: 1.18; } /* design 26px */
.writing-teaser__list { border-bottom: var(--border-fine) solid var(--border); }
.writing-item { display: block; padding: 24px 0; border-top: var(--border-fine) solid var(--border); }
.writing-item__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin: 0 0 7px; transition: color var(--t-fast); }
a.writing-item:hover .writing-item__title { color: var(--accent); }
.writing-item__tag { font-family: var(--font-text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-left: 12px; vertical-align: middle; }
.writing-item.is-soon .writing-item__title { color: var(--text-muted); }
.writing-item__excerpt { font-size: 14px; color: var(--text-muted); margin: 0; }
.writing-teaser__cta { margin-top: var(--space-5); }

/* LinkedIn feed */
.linkedin__intro h2 { font-size: clamp(1.5rem, 2.2vw, 1.625rem); line-height: 1.2; } /* design 26px */
.linkedin__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } /* design 50/50, 48px gap */
.linkedin__stats { display: flex; gap: var(--space-6); margin: var(--space-4) 0; }
.linkedin__stat { display: block; text-decoration: none; color: inherit; transition: opacity var(--t-fast); }
a.linkedin__stat:hover { opacity: 0.82; }
a.linkedin__stat:hover .linkedin__stat-label { color: var(--accent); }
.linkedin__stat-value { display: block; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.linkedin__stat-label { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.li-post { padding: 20px 0; border-top: var(--border-fine) solid var(--border); }
.li-post__time { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.li-post__title { font-family: var(--font-display); font-size: 1.125rem; margin: 6px 0; }
.li-post__excerpt { font-size: 14px; color: var(--text-muted); margin: 0 0 10px; }
.li-post__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.li-post__meta a { color: var(--accent); }
.linkedin__note { font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: var(--space-3); }

/* Signature moments */
.sig__head { max-width: 620px; margin-bottom: var(--space-2); }
.sig__head h2 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); line-height: 1.18; letter-spacing: -0.01em; margin: 8px 0 0; }
.sig__intro { color: var(--text-muted); max-width: 580px; font-size: 14.5px; margin-bottom: var(--space-6); }
/* Full-bleed feature (mirrors design-source .signature-feature): large cover image fills its cell edge-to-edge, content beside */
.sig-moment { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; min-height: 540px; align-items: stretch; border-top: var(--border-fine) solid var(--border); }
.sig-moments-wrap .sig-moment:last-child { border-bottom: var(--border-fine) solid var(--border); } /* separator line above the mini cards */
.sig-moments-wrap { margin-top: var(--space-3); } /* 24px gap after the intro, matching design head padding-bottom */
.sig-moment--reverse { grid-template-columns: 1fr 1.4fr; }
.sig-moment--reverse .sig-moment__media { order: 2; }
.sig-moment__media { position: relative; overflow: hidden; background: var(--color-ink-soft, #1f1f28); min-height: 540px; }
.sig-moment__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(0.2); }
/* KIIS keeps its baked badge (bottom-right): anchor the cover-crop to the bottom so wide screens eat sky, not the badge */
.sig-moment__img[src*="moment-kiis"] { object-position: center bottom; }
.sig-moment__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 60%, rgba(23, 23, 23, 0.4) 100%); pointer-events: none; }
/* Corner-pinned press badges — sit above the gradient, immune to the cover-crop (Feedback 5) */
.sig-moment__badge { position: absolute; bottom: 26px; z-index: 2; height: 96px; width: auto; }
.sig-moment__badge--left { left: 26px; }
.sig-moment__badge--right { right: 26px; }
@media (max-width: 820px) {
    .sig-moment__badge { height: 64px; bottom: 16px; }
    .sig-moment__badge--left { left: 16px; }
    .sig-moment__badge--right { right: 16px; }
}
.sig-moment__content { padding: clamp(40px, 5vw, 64px) clamp(28px, 4.5vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.sig-moment__content .eyebrow { color: var(--text-muted); margin-bottom: 14px; }
.sig-moment__eyebrow-accent { color: var(--accent); }
.sig-moment__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 420px; }
.sig-moment__body { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 12px; max-width: 420px; }
.sig-moment__outcome { margin-top: 16px; padding: 14px 16px; background: var(--color-ink-soft, #1f1f28); border-left: 2px solid var(--accent); border-radius: 2px; font-family: var(--font-display); font-size: 14px; line-height: 1.5; max-width: 420px; }
.sig__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 0; padding-top: 24px; }
/* Match design top/bottom padding of the signature section (design head padding-top: 56px, mini padding-bottom: 56px) */
.site-main section.signature-moments { padding-top: 56px; padding-bottom: 24px; }
/* "THE WORK" section has no top divider in the design — the separator lives above the mini cards instead */
.site-main section.philosophy { border-top: 0; padding-top: 24px; }
/* Separator lines: design omits dividers on these sections (match like-to-like) */
.site-main section.manifesto-block,
.site-main section.testimonial-grid,
.site-main section.the-line,
.site-main section.three-pathways,
.site-main section.contact-booking { border-top: 0; }
/* Per-section padding to match the design's section rhythm */
.site-main section.by-the-numbers { padding-block: 72px; }
.site-main section.selected-work { padding-top: 72px; }
.site-main section.contact-booking { padding-block: 112px; }
/* Mini cards — background image + text overlay, matching design .visual-moment.compact */
.sig-mini { position: relative; height: 240px; padding: 24px; border-radius: 4px; overflow: hidden; background: #202123; display: flex; align-items: flex-end; }
.sig-mini__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); opacity: 0.4; }
.sig-mini__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(23, 23, 23, 0.3) 0%, rgba(23, 23, 23, 0.85) 100%); }
.sig-mini__body { position: relative; z-index: 2; max-width: 360px; }
.sig-mini__tag { font-size: 10px; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; color: #8E8EA0; margin-bottom: 8px; display: block; }
.sig-mini__desc { font-family: var(--font-display); font-size: 15px; line-height: 1.4; color: #ECECEC; margin: 0; }

/* Video row */
.video-row__head { max-width: 38rem; margin-bottom: var(--space-3); }
.video-row__intro { color: var(--text-muted); max-width: 64ch; margin-bottom: var(--space-6); }
.video-row__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.video-card { display: block; }
.video-card__media { position: relative; aspect-ratio: 16 / 9; background: #e9e9e4; border-radius: var(--radius-card); overflow: hidden; }
.video-card__media img { width: 100%; height: 100%; object-fit: cover; }
.video-card__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; cursor: pointer; }
.video-card.is-playing .video-card__play { opacity: 0; pointer-events: none; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play > span { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--color-charcoal); display: flex; align-items: center; justify-content: center; transition: background var(--t-fast), transform var(--t-fast); }
.video-card:hover .video-card__play > span { background: var(--accent); color: #fff; transform: scale(1.08); }
.video-card__tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 14px; display: block; }
.video-card__title { font-family: var(--font-display); font-size: 1.125rem; margin: 6px 0; line-height: 1.32; }
.video-card__caption { font-size: 13px; color: var(--text-muted); margin: 0; }
.video-row__footnote { margin-top: var(--space-6); color: var(--text-muted); }

/* Video row on the dark section — darker thumbnails and readable muted text. */
.bg-dark .video-card__media { background: #26262a; }
.bg-dark .video-row__intro,
.bg-dark .video-card__caption,
.bg-dark .video-row__footnote { color: rgba(255,255,255,0.55); }

/* Contact booking */
.booking__head { text-align: center; max-width: 540px; margin: 0 auto var(--space-6); }
.booking__head .eyebrow { color: var(--text-quiet); }
.booking__head p { color: var(--text-muted); max-width: 44ch; margin: var(--space-2) auto 0; line-height: 1.6; }
.booking__tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.booking__tab { padding: 10px 18px; border: var(--border-fine) solid var(--border); border-radius: var(--radius-ui); background: transparent; font-family: var(--font-text); font-size: 14px; cursor: pointer; color: var(--text); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.booking__tab:hover { border-color: var(--color-charcoal); }
.booking__tab.is-active { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); }
.booking__panel { max-width: 680px; margin: 0 auto; }
.booking__card { border: var(--border-fine) solid var(--border); border-radius: var(--radius-card); background: #fff; padding: clamp(28px, 4vw, 48px); }
.booking__panel-head { text-align: center; margin-bottom: var(--space-5); }
.booking__panel-meta { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.booking__panel-head h3 { font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw, 1.625rem); margin: 12px 0 12px; }
.booking__panel-head p { color: var(--text-muted); line-height: 1.6; margin: 0 auto; max-width: 52ch; }
.booking__embed { border: var(--border-fine) solid var(--border); border-radius: var(--radius-ui); overflow: hidden; }
.booking__embed iframe { width: 100%; height: 700px; border: 0; display: block; }
.booking__embed--placeholder { display: flex; align-items: center; justify-content: center; min-height: 220px; background: var(--color-off-white); color: var(--text-muted); font-size: 13px; line-height: 1.5; padding: 24px; text-align: center; }
.booking__panel-foot { text-align: center; font-size: 13px; color: var(--text-muted); margin: var(--space-4) 0 0; }
.booking__ready { margin: var(--space-5) auto 0; background: rgba(16,163,127,0.08); border-left: 2px solid var(--accent); padding: 22px 26px; border-radius: var(--radius-ui); text-align: center; }
.booking__ready h3 { font-family: var(--font-display); font-size: 1.125rem; margin: 0 0 8px; }
.booking__ready p { margin: 0 auto; max-width: 46ch; color: var(--text-muted); line-height: 1.6; }
.booking__note { max-width: 680px; margin: var(--space-8) auto 0; padding-top: var(--space-8); border-top: var(--border-fine) solid var(--border); text-align: center; }
.booking__note > .eyebrow { color: var(--text-quiet); }
.booking__note-body { color: var(--text-muted); max-width: 48ch; margin: var(--space-2) auto var(--space-5); line-height: 1.6; }
.booking__note-form { max-width: 440px; margin: 0 auto; text-align: left; }
.booking__note-reply { font-size: 13px; color: var(--text-muted); margin: var(--space-4) 0 0; }
/* Gravity Forms in the contact note — scoped + forced to match the design */
.booking__note-form .gform_wrapper { margin: 0; }
.booking__note-form .gform_fields { display: block !important; grid-template-columns: none !important; gap: 0 !important; }
.booking__note-form .gfield { margin: 0 0 12px !important; padding: 0 !important; }
.booking__note-form .gfield_label, .booking__note-form .gfield_required, .booking__note-form .gform_required_legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); margin: -1px; }
.booking__note-form input[type="text"], .booking__note-form input[type="email"], .booking__note-form textarea { width: 100% !important; background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--radius-ui) !important; padding: 13px 16px !important; color: var(--text) !important; font-size: 14px !important; box-shadow: none !important; }
.booking__note-form input::placeholder, .booking__note-form textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
.booking__note-form input:focus, .booking__note-form textarea:focus { outline: none !important; border-color: var(--color-charcoal) !important; box-shadow: none !important; }
.booking__note-form textarea { min-height: 110px; resize: vertical; }
.booking__note-form .gform_footer { display: flex !important; justify-content: center; margin: 4px 0 0 !important; padding: 0 !important; }
.booking__note-form .gform_button { background: var(--color-charcoal) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius-ui) !important; padding: 13px 26px !important; font-family: var(--font-text) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; }
.booking__note-form .gform_validation_errors { display: none !important; }
.booking__note-form .gfield_validation_message, .booking__note-form .validation_message { color: #c0392b !important; background: none !important; border: 0 !important; padding: 4px 0 0 !important; font-size: 12px !important; }
.booking__note-form .gform_confirmation_message { color: var(--text); font-size: 15px; line-height: 1.6; }
.booking__direct { max-width: 680px; margin: var(--space-8) auto 0; border-top: var(--border-fine) solid var(--border); padding-top: var(--space-7); font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.8; }
.booking__direct p { margin: 0; }
.booking__direct a { color: var(--text); }
.booking__direct .booking__direct-pdf { margin-top: var(--space-5); }
.booking__direct .booking__direct-pdf .inline-link { font-weight: 500; }
/* Book a call — centred CTA (design) */
.booking__cta { text-align: center; max-width: 660px; margin: 0 auto; }
.booking__cta > .eyebrow { color: var(--text-quiet); }
.booking__title { font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1.05; margin: var(--space-2) 0 var(--space-3); } /* design 44px */
.booking__lead { color: var(--text-muted); max-width: 44ch; margin: 0 auto var(--space-6); line-height: 1.6; }
.booking__buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.booking__scoping { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.booking__scoping .inline-link { color: var(--text); }
.booking__links { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; font-size: 13px; margin: 0 0 var(--space-6); }
.booking__links .inline-link { color: var(--text-muted); }
.booking__availability { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Gravity Forms — match the single-bottom-border brand style */
.gform_wrapper .gfield_label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="url"], .gform_wrapper textarea, .gform_wrapper select {
    border: 0; border-bottom: 1px solid var(--border); background: transparent;
    padding: 10px 0; width: 100%; font-family: var(--font-text); font-size: 15px; border-radius: 0;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus { border-color: var(--accent); outline: none; box-shadow: none; }
.gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_footer button {
    background: var(--color-charcoal); color: #fff; border: 1px solid var(--color-charcoal);
    padding: 14px 22px; border-radius: var(--radius-ui); font-weight: 500; font-family: var(--font-text); cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast);
}
.gform_wrapper .gform_footer input[type="submit"]:hover { transform: translateY(-2px); background: #000; }

/* Shared play badge (video + podcast) */
.play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-badge > span { width: 54px; height: 54px; border-radius: 50%; background: rgba(23,23,23,0.8); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast), transform var(--t-fast); }
a:hover .play-badge > span { background: var(--accent); transform: scale(1.08); }

/* Newsletter */
.newsletter__card { max-width: 1040px; margin-inline: auto; border: var(--border-fine) solid var(--border); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 200px 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.playbook-cover { aspect-ratio: 5 / 7; background: linear-gradient(160deg, #1d1d20, #121214); border: var(--border-fine) solid var(--border); border-radius: 5px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 12px 34px rgba(0,0,0,0.38); }
.playbook-cover__eyebrow { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; }
.playbook-cover__title { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.28; color: var(--text); margin: 0; font-weight: 400; }
.playbook-cover__title em { font-style: italic; }
.playbook-cover__byline { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.newsletter__content { max-width: 33rem; }
.newsletter__content h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.18; margin: 8px 0 14px; max-width: 22rem; }
.newsletter__body { color: var(--text-muted); margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.6; }
.newsletter__signup { display: flex; gap: 10px; max-width: 460px; margin-bottom: 14px; }
.newsletter__signup input[type="email"] { flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: var(--border-fine) solid var(--border); border-radius: var(--radius-ui); padding: 12px 14px; color: var(--text); font-size: 14px; }
.newsletter__signup input[type="email"]::placeholder { color: var(--text-muted); }
.newsletter__signup input[type="email"]:focus { outline: none; border-color: var(--accent); }
.newsletter__signup .btn { white-space: nowrap; }
.newsletter__note { font-size: 12px; color: var(--text-muted); margin: 0; }
.newsletter__embed { margin-bottom: 14px; }
.newsletter__embed iframe { width: 100%; border: 0; }
@media (max-width: 680px) {
    .newsletter__card { grid-template-columns: 1fr; gap: 28px; }
    .playbook-cover { max-width: 190px; }
    .newsletter__signup { flex-direction: column; }
    .newsletter__signup .btn { align-self: flex-start; }
}

/* Newsletter CTA — "The Field Notes" inline signup */
.newsletter-cta > .container > .eyebrow { color: var(--text-quiet); }
.newsletter-cta__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; margin-top: var(--space-4); }
.newsletter-cta__left h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.22; margin: 0 0 var(--space-3); }
.newsletter-cta__body { color: var(--text-muted); max-width: 54ch; margin: 0 0 var(--space-4); line-height: 1.6; }
.newsletter-cta__audience { font-size: 13px; color: var(--text-muted); margin: 0; }
.newsletter-cta__label { color: var(--text-muted); margin: 0 0 14px; }
.newsletter-cta__form { display: flex; gap: 10px; }
.newsletter-cta__form input[type="email"] { flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: var(--border-fine) solid var(--border); border-radius: var(--radius-ui); padding: 12px 14px; color: var(--text); font-size: 14px; }
.newsletter-cta__form input[type="email"]::placeholder { color: var(--text-muted); }
.newsletter-cta__form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.newsletter-cta__form .btn { white-space: nowrap; }
.newsletter-cta__note { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; }
.newsletter-cta__embed { margin-bottom: 12px; }

/* Gravity Forms (orbital theme) restyled to match the design — scoped + forced */
.newsletter-cta__gform .gform_wrapper { margin: 0; }
.newsletter-cta__gform form { margin: 0 !important; display: flex !important; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
.newsletter-cta__gform .gform-body, .newsletter-cta__gform .gform_body { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.newsletter-cta__gform .gform_fields { display: block !important; grid-template-columns: none !important; gap: 0 !important; }
.newsletter-cta__gform .gfield, .newsletter-cta__gform .ginput_container { margin: 0 !important; padding: 0 !important; }
.newsletter-cta__gform .gfield_label, .newsletter-cta__gform .gfield_required, .newsletter-cta__gform .gform_required_legend { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.newsletter-cta__gform input[type="email"] { width: 100% !important; height: auto !important; background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-ui) !important; padding: 12px 14px !important; color: var(--text) !important; font-size: 14px !important; box-shadow: none !important; }
.newsletter-cta__gform input[type="email"]::placeholder { color: var(--text-muted) !important; opacity: 1; }
.newsletter-cta__gform input[type="email"]:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: none !important; }
.newsletter-cta__gform .gform_footer { display: flex !important; align-items: stretch; flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 0 !important; }
.newsletter-cta__gform .gform_button { background: var(--text) !important; color: var(--color-charcoal) !important; border: 1px solid var(--text) !important; border-radius: var(--radius-ui) !important; padding: 12px 22px !important; font-family: var(--font-text) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; width: auto !important; cursor: pointer; white-space: nowrap; transition: background var(--t-fast); }
.newsletter-cta__gform .gform_button:hover { background: #fff !important; }
.newsletter-cta__gform .gform_validation_errors { display: none !important; }
.newsletter-cta__gform .gfield_validation_message, .newsletter-cta__gform .validation_message { color: #ff8d7a !important; background: none !important; border: 0 !important; padding: 6px 0 0 !important; font-size: 12px !important; }
.newsletter-cta__gform .gform_confirmation_message { color: var(--text); font-size: 15px; }
.newsletter-cta__gform .gform_ajax_spinner { margin-left: 10px; }
@media (max-width: 760px) {
    .newsletter-cta__grid { grid-template-columns: 1fr; gap: 28px; }
    .newsletter-cta__form { flex-direction: column; }
    .newsletter-cta__form .btn { align-self: flex-start; }
}

/* Newsletter CTA — bordered card variant (About page "The Field Notes") */
.newsletter-cta--card .newsletter-cta__grid {
    max-width: 720px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 40px);
    align-items: center;
    background: #1c1c1e;
    border: var(--border-fine) solid var(--border);
    border-radius: var(--radius-card);
    padding: clamp(28px, 3.5vw, 40px);
}
.newsletter-cta--card .newsletter-cta__left .eyebrow { color: var(--accent); margin-bottom: var(--space-2); }
.newsletter-cta--card .newsletter-cta__left h2 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 var(--space-2); }
.newsletter-cta--card .newsletter-cta__body { font-size: 11px; line-height: 1.6; max-width: none; margin: 0; }
/* GF email input defaults to line-height:38px → 64px-tall field; normalise so the field is a standard height. */
.newsletter-cta--card .newsletter-cta__gform input[type="email"],
.newsletter-cta--card .newsletter-cta__form input[type="email"] { line-height: 1.2 !important; }
.newsletter-cta--card .newsletter-cta__form .btn,
.newsletter-cta--card .newsletter-cta__gform .gform_button {
    background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important;
}
.newsletter-cta--card .newsletter-cta__form .btn:hover,
.newsletter-cta--card .newsletter-cta__gform .gform_button:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
@media (max-width: 760px) {
    .newsletter-cta--card .newsletter-cta__grid { grid-template-columns: 1fr; }
}

/* Forthcoming book */
.forthcoming-book > .container > .eyebrow { color: var(--text-quiet); }
.forthcoming__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; margin-top: var(--space-4); }
.forthcoming__cover { aspect-ratio: 2 / 3; background: linear-gradient(165deg, #1d1d20, #121214); border: var(--border-fine) solid var(--border); border-radius: 4px; padding: 24px 22px; display: flex; flex-direction: column; box-shadow: 0 14px 38px rgba(0,0,0,0.4); }
.forthcoming__cover-img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 14px 38px rgba(0,0,0,0.4); }
.forthcoming__cover-author { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.forthcoming__cover-mid { margin-top: 42px; }
.forthcoming__cover-title { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.25; color: var(--text); margin: 0 0 7px; font-weight: 400; }
.forthcoming__cover-year { font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
.forthcoming__cover-label { display: block; margin-top: 14px; font-size: 11px; color: var(--text-muted); }
.forthcoming__coming { margin-bottom: var(--space-2); }
.forthcoming__content h2 { font-size: clamp(1.875rem, 2.6vw, 2.25rem); line-height: 1.1; margin: 0 0 var(--space-3); }
.forthcoming__subtitle { font-family: var(--font-display); font-style: italic; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.4; color: var(--text); margin: 0 0 var(--space-3); }
.forthcoming__intro { color: var(--text-muted); line-height: 1.6; max-width: 46ch; margin: 0 0 var(--space-6); }
.forthcoming-chapter { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: var(--border-fine) solid var(--border); align-items: start; }
.forthcoming-chapter__num { font-size: 11px; letter-spacing: 0.1em; color: var(--accent); padding-top: 3px; }
.forthcoming-chapter__title { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.35; color: var(--text); margin: 0 0 5px; }
.forthcoming-chapter__desc { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 80ch; }
.forthcoming__note { font-size: 13px; color: var(--text-muted); margin: var(--space-6) 0 14px; }
.forthcoming__form { max-width: 420px; }
@media (max-width: 760px) {
    .forthcoming__grid { grid-template-columns: 1fr; gap: 32px; }
    .forthcoming__cover-wrap { max-width: 200px; }
    .forthcoming__form { flex-direction: column; }
    .forthcoming__form .btn { align-self: flex-start; }
}

/* Workshops & strategy intensives — bordered two-column panel (teal top rule) */
.workshops__panel { border: 1px solid rgba(255, 255, 255, 0.06); border-top: 2px solid var(--accent); padding: clamp(28px, 4vw, 56px); background: #222226; }
.workshops__eyebrow { display: block; margin-bottom: var(--space-5); color: var(--accent); }
.workshops__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 72px); row-gap: var(--space-5); align-items: start; }
.workshops__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.workshops__meta { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); margin-top: var(--space-3); }
.workshops__body { margin-top: var(--space-4); }
.workshops__body p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin: 0 0 var(--space-3); }
.workshops__body p:last-child { margin-bottom: 0; }
.workshops__lead { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: var(--space-4) 0; }
.workshops__cta { margin: var(--space-4) 0 var(--space-3); }
.workshops__note { font-size: 13px; line-height: 1.6; color: var(--text-muted); opacity: 0.85; margin: 0; }
.workshops__right { border-top: var(--border-fine) solid var(--accent); padding-top: var(--space-3); }
.workshops__right > .eyebrow { color: var(--accent); }
.workshops__list { margin-top: var(--space-4); }
.workshop-item { padding: var(--space-4) 0; }
.workshop-item + .workshop-item { border-top: var(--border-fine) solid var(--border); }
.workshop-item:first-child { padding-top: 0; }
.workshop-item__title { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.3; margin: 0 0 var(--space-2); color: var(--text); }
.workshop-item__body { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 820px) {
    .workshops__grid { grid-template-columns: 1fr; }
}

/* Podcast episodes */
.podcasts__head { max-width: 36ch; margin-bottom: var(--space-3); }
.podcasts__intro { color: var(--text-muted); max-width: 64ch; margin-bottom: var(--space-9); }
.podcast-ep { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-5); align-items: start; }
.podcast-ep + .podcast-ep { border-top: var(--border-fine) solid var(--border); margin-top: var(--space-8); padding-top: var(--space-8); }
.podcast-ep--reverse { grid-template-columns: 1fr 1.15fr; }
.podcast-ep--reverse .podcast-ep__media { order: 2; }
.podcast-ep__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #e9e9e4; border-radius: var(--radius-card); overflow: hidden; }
.podcast-ep__media img { width: 100%; height: 100%; object-fit: cover; }
.podcast-ep__label { position: absolute; top: 12px; left: 12px; background: rgba(23,23,23,0.72); color: #fff; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; }
.podcast-ep__duration { position: absolute; right: 12px; bottom: 12px; background: rgba(23,23,23,0.8); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 2px; }
.podcast-ep__tag { color: var(--text-muted); }
.podcast-ep__tag-co { color: var(--accent); }
.podcast-ep__title { font-size: 1.375rem; line-height: 1.2; margin: 4px 0 8px; }
.podcast-ep__host { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-3); }
.podcast-ep__body { color: var(--text-muted); }
.podcast-ep__body p { margin: 0 0 var(--space-3); }
.podcast-ep__body p:last-child { margin-bottom: 0; }
.podcast-ep__outcome { font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.5; color: var(--text); background: rgba(255,255,255,0.03); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-ui) var(--radius-ui) 0; padding: 16px 20px; margin: var(--space-4) 0 0; max-width: none; }
.podcast-ep__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font-size: 13px; }
.podcasts__closing { border-top: var(--border-fine) solid var(--border); margin-top: var(--space-8); padding-top: var(--space-8); color: var(--text-muted); max-width: 38rem; line-height: 1.6; }
.podcasts__closing p { margin: 0; }

/* Speaking topics */
.speaking__head .eyebrow { color: var(--text-quiet); }
.speaking__head { max-width: 48rem; margin-bottom: var(--space-3); }
.speaking__head h2 { font-size: clamp(1.5rem, 2.4vw, 1.625rem); line-height: 1.2; } /* design 26px */
.speaking__intro { color: var(--text-muted); max-width: 56ch; margin: 0 0 var(--space-4); line-height: 1.6; }
.speaking__cta { margin: 0; }
.speaking__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-9); }
.speaking__availability { font-size: 13px; color: var(--text-muted); }
.topic { padding: var(--space-4) 0; border-top: var(--border-fine) solid var(--border); }
.topic__title { font-size: 1.375rem; margin: 0 0 10px; }
.topic__body { color: var(--text-muted); max-width: 64ch; margin: 0 0 8px; }
.topic__bestfor { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* Speaking topics — "What I speak on" list layout (Speaking page) */
.speaking-topics--list .topics__head { padding-bottom: var(--space-4); border-bottom: var(--border-fine) solid var(--border); }
.speaking-topics--list .topics__head .eyebrow { color: var(--text-quiet); }
.speaking-topics--list .topics__title { font-size: clamp(1.5rem, 2.2vw, 1.75rem); margin: 0; }
.speaking-topics--list .topic { padding: var(--space-5) 0; border-top: 0; border-bottom: var(--border-fine) solid var(--border); }
.speaking-topics--list .topic__title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 var(--space-2); }
.speaking-topics--list .topic__body { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 44rem; margin: 0; }
.speaking-topics--list .topic__bestfor { display: block; font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--text-muted); margin: var(--space-3) 0 0; }

/* Formats grid (Speaking page) */
.speaking-topics--list .formats { margin-top: var(--space-8); }
.speaking-topics--list .formats > .eyebrow { color: var(--text-quiet); margin-bottom: var(--space-5); }
.formats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
.format { border-top: var(--border-fine) solid var(--border); padding-top: var(--space-4); }
.format__title { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--space-2); }
.format__body { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; }

/* Booking enquiries callout (Speaking page) */
.speaking-booking { margin-top: var(--space-8); background: #1c1c1e; border: var(--border-fine) solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-card); padding: clamp(28px, 3.5vw, 40px); }
.speaking-booking__title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--space-2); }
.speaking-booking__body { color: var(--text-muted); font-size: 12px; line-height: 1.6; max-width: none; margin: 0 0 var(--space-4); }

@media (max-width: 720px) {
    .formats__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Speaking CTA — centred light band (Speaking page closer) */
.speaking-cta__inner { text-align: center; max-width: none; }
.speaking-cta__inner > .eyebrow { color: var(--text-quiet); }
.speaking-cta__title { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.06; letter-spacing: -0.015em; margin: var(--space-2) 0 var(--space-3); }
.speaking-cta__body { color: var(--text-muted); max-width: 28rem; margin: 0 auto var(--space-6); line-height: 1.6; }
.speaking-cta__buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.speaking-cta__note { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Media hero (Media page opener) */
.media-hero .eyebrow { color: var(--text-quiet); }
.media-hero__title { font-size: clamp(2rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--space-4); }
.media-hero__body { color: var(--text-muted); max-width: 31.5rem; line-height: 1.6; }
.media-hero__body p { margin: 0; }

/* Media CTA — centred light band (Media page closer) */
.media-cta__inner { text-align: center; max-width: none; }
.media-cta__inner > .eyebrow { color: var(--text-quiet); }
.media-cta__title { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.06; letter-spacing: -0.015em; margin: var(--space-2) 0 var(--space-3); }
.media-cta__body { color: var(--text-muted); max-width: 28rem; margin: 0 auto var(--space-5); line-height: 1.6; }
.media-cta__buttons { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.media-cta__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px var(--space-6); font-size: 13px; margin: 0 0 var(--space-4); }
.media-cta__note { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Field Notes hero (Field Notes page opener) */
.field-notes-hero .eyebrow { color: var(--text-quiet); }
.field-notes-hero__title { font-size: clamp(2.25rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; max-width: none; margin: 0 0 var(--space-4); }
.field-notes-hero__body { color: var(--text-muted); max-width: 30.5rem; line-height: 1.6; }
.field-notes-hero__body p { margin: 0; }

/* Field Notes archive (Field Notes page) */
.fn-archive__title { font-size: clamp(1.375rem, 2vw, 1.5rem); line-height: 1.2; margin: 0; padding-bottom: var(--space-3); border-bottom: var(--border-fine) solid var(--border); }
.fn-item__meta { color: var(--accent); }
/* Field Notes: "Volume 01 · The Field Notes Library" eyebrow green (FN F2) */
.newsletter__content > .eyebrow { color: var(--accent); }
/* "join the newsletter" anchor target clears the sticky nav (FN F3) */
#join-the-newsletter { scroll-margin-top: 100px; }
.fn-item { padding: var(--space-4) 0; border-bottom: var(--border-fine) solid var(--border); }
.fn-item__meta { display: block; margin: 0 0 10px; }
.fn-item__title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-2); color: var(--text); }
.fn-item__title a { color: inherit; border: 0; transition: color var(--t-fast); }
.fn-item__title a:hover { color: var(--accent); }
.fn-item__excerpt { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; max-width: 72ch; }
.fn-item--coming { opacity: 0.55; }

/* Frameworks (numbered tools list) */
.frameworks__head { margin-bottom: var(--space-5); }
.frameworks__head .eyebrow { color: var(--text-quiet); }
.frameworks__title { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0 0 var(--space-3); }
.frameworks__intro { color: var(--text-muted); max-width: 32rem; line-height: 1.6; margin: 0; }
.frameworks__list { border-bottom: var(--border-fine) solid var(--border); }
.framework { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: var(--space-3) 0 var(--space-5); border-top: var(--border-fine) solid var(--border); align-items: start; }
.framework__num { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.4; color: var(--accent); }
.framework__title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-2); color: var(--text); }
.framework__body { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: 62ch; margin: 0 0 var(--space-3); }
.framework__avail { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; }
.frameworks__note { color: var(--text-muted); font-size: 13px; margin: var(--space-4) 0 0; }
@media (max-width: 600px) {
    .framework { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ============================================================================
   WRITING — Field Notes + article + rich body
   ========================================================================== */
.field-notes { padding-block: var(--section-y); }
.field-notes__head { margin-bottom: var(--space-6); max-width: 30ch; }
.field-note { display: block; padding: var(--space-4) 0; border-top: var(--border-fine) solid var(--border); }
.field-note__meta { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.field-note__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.625rem); margin: 8px 0; color: var(--text); transition: color var(--t-fast); }
.field-note:hover .field-note__title { color: var(--accent); }
.field-note__excerpt { color: var(--text-muted); margin: 0; }

.article { padding-block: var(--section-y); }
.article .container-narrow { max-width: 44rem; }  /* tighter reading column for field-note articles */
.article__hero { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: var(--border-fine) solid var(--border); }
.article__back { display: inline-block; font-size: 13px; color: var(--text-muted); border: 0; margin-bottom: var(--space-4); }
.article__back:hover { color: var(--accent); }
.article__title { font-size: clamp(1.75rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.article__standfirst { font-family: var(--font-display); font-style: italic; font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; color: var(--text); margin: var(--space-3) 0 0; }
.article__byline { font-size: 13px; color: var(--text-muted); margin: var(--space-4) 0 0; }
.article__signup { margin-top: var(--space-8); }
.article__signup .newsletter-cta__grid { max-width: none; }
.article__author { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0; max-width: 60ch; }
.article__media { margin-bottom: var(--space-6); }
.article__img { width: 100%; border-radius: 4px; }
.article__foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-fine) solid var(--border); }

/* Rich long-form body (article + page-body) */
.page-body > * + *, .rich > * + * { margin-top: var(--space-3); }
.page-body h2, .rich h2 { margin-top: var(--space-6); }
.page-body h3, .rich h3 { margin-top: var(--space-4); }
.page-body ul, .page-body ol, .rich ul, .rich ol { padding-left: 1.2em; }
.page-body li, .rich li { margin: 6px 0; }
.page-body li::marker, .rich li::marker { color: var(--accent); }
.page-body blockquote, .rich blockquote { border-left: 2px solid var(--accent); padding-left: 20px; font-family: var(--font-display); font-style: italic; color: var(--text); margin: var(--space-4) 0; }

@media (max-width: 820px) {
    .hero-block__inner,
    .manifesto__inner,
    .who-i-am__inner { grid-template-columns: 1fr; gap: var(--space-4); }
    /* Stacked: divider moves from left to top (matches design's mobile insight-stats) */
    .manifesto__stats { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
    .who-i-am__media { order: -1; }
    .the-line__cols { grid-template-columns: 1fr; gap: var(--space-6); }
    .sw-row { grid-template-columns: 1fr; gap: 6px; }
    .sw-row__meta { text-align: left; }
    .pathways__grid { grid-template-columns: 1fr; }
    .linkedin__inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .sig-moment { grid-template-columns: 1fr; min-height: auto; }
    .sig-moment__media { min-height: 0; aspect-ratio: 16 / 10; }
    .sig-moment--reverse .sig-moment__media { order: -1; }
    .sig__mini, .video-row__grid { grid-template-columns: 1fr; }
    .sig-mini { height: 220px; }
    .booking__embed iframe { height: 620px; }
    .podcast-ep { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
    .podcast-ep--reverse .podcast-ep__media { order: -1; }
    /* Hero mobile type (placed after the base hero rule so it wins) */
    .hero-block--full .hero-block__inner { padding-inline: var(--container-pad); }
    .hero-block__title { font-size: 38px; }
    .hero-block__subhead { font-size: 18px; margin-top: 0; }
    .hero-block__body { font-size: 17px; }
}
/* Phone tier — hero matches the mobile design exactly (title 30 / subtagline 16 / body 15) */
@media (max-width: 600px) {
    .hero-block--full .hero-block__inner { padding: 96px var(--container-pad) 36px; }
    .hero-block__title { font-size: 30px; line-height: 1.12; margin-bottom: 18px; }
    .hero-block__subhead { font-size: 16px; margin-top: 0; margin-bottom: 22px; }
    .hero-block__body { font-size: 15px; margin-bottom: 26px; }
    .hero-block__availability { font-size: 12px; }
}

/* ============================================================================
   DARK THEME — the site is dark for every visitor (matches the design).
   A `.bg-light` section re-scopes these tokens back to the off-white palette.
   ========================================================================== */
:root {
        --bg: #171717;                       /* charcoal page (design --ink) */
        --text: #ECECEC;                     /* design --text-on-dark */
        --text-muted: #B5B5BC;               /* design --text-on-dark-muted */
        --text-quiet: #8E8EA0;               /* design --text-on-dark-quiet */
        --text-faint: #6E6E80;               /* design --text-on-dark-faint */
        --color-line: #343541;               /* design --ink-line */
        --border: #343541;                   /* design --ink-line */
        --color-off-white: #202123;          /* soft-surface utility → dark panel */
        --color-white: #202123;              /* card surfaces → dark panel */
        --panel-soft: #26272a;               /* hover / inset panels */
    }

    /* Header / mobile menu — transparent over the hero, solid once scrolled */
    .site-header { background: transparent; }
    .site-header.is-condensed { background: rgba(23,23,23,0.92); }

    /* Primary button inverts to light on the dark page */
    .btn { background: var(--text); color: var(--color-charcoal); border-color: var(--text); }
    .btn:hover { background: #fff; color: var(--color-charcoal); }
    .btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
    .btn--ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.45); }
    .btn--ghost:hover { background: var(--text); color: var(--color-charcoal); border-color: var(--text); }

    /* Surfaces / panels */
    .outcome-line { background: #202123; }
    .outcome-line--result { background: #26272a; }
    .pathway-card__example { background: rgba(16,163,127,0.07); }
    .case-card:hover { background: #26272a; }
    .placeholder,
    .video-card__media,
    .podcast-ep__media { background: #26272a; color: #8c8c88; }

    /* Footer differentiated from the charcoal page */
    .site-footer { background: #0f0f0f; border-top: 1px solid rgba(255,255,255,0.08); }

    /* Sticky mobile CTA */
    .sticky-cta__book { background: #202123; color: var(--text); border-top: 1px solid rgba(255,255,255,0.12); }

    /* Gravity Forms submit inverts */
    .gform_wrapper .gform_footer input[type="submit"] { background: var(--text); color: var(--color-charcoal); border-color: var(--text); }
    .gform_wrapper .gform_footer input[type="submit"]:hover { background: #fff; }

/* ============================================================================
   CASE STUDIES
   ========================================================================== */

/* Single */
.case-single { padding-block: var(--section-y); }
.case-single__hero { margin-bottom: var(--space-6); }
.case-single__meta { color: var(--text-muted); font-size: 13px; letter-spacing: 0.04em; }
.case-single__media { margin-bottom: var(--space-6); }
.case-single__img { width: 100%; border-radius: 4px; }
.case-single__body > * + * { margin-top: var(--space-4); }

.outcome-line {
    background: var(--color-charcoal); color: #fff;
    border-left: 2px solid var(--accent);
    padding: 22px 26px; border-radius: var(--radius-ui);
}
.outcome-line .eyebrow { margin-bottom: 8px; }
.outcome-line .italic-accent { color: #fff; margin: 0; font-size: 1.125rem; line-height: 1.4; }
.outcome-line--result { background: var(--color-ink-soft); border-left-color: var(--accent); }
.outcome-line--result p { margin: 0; color: rgba(255,255,255,0.92); }
.outcome-line--result strong { color: var(--accent); font-weight: 600; }

.quote-block { margin: 0; padding: var(--space-2) 0; border: 0; }
.quote-block .italic-accent { font-size: 1.375rem; line-height: 1.4; color: var(--text); }
.quote-block cite { display: block; margin-top: 14px; font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.case-single__cta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* Card grid (logo wall + index) — cell borders, no gaps */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    border-top: var(--border-fine) solid var(--border);
    border-left: var(--border-fine) solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.case-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; min-height: 132px; padding: 28px 20px;
    border-right: var(--border-fine) solid var(--border);
    border-bottom: var(--border-fine) solid var(--border);
    transition: background var(--t-card);
}
.case-card:hover { background: var(--panel-soft); }
.case-card__name { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); transition: color var(--t-fast); }
.case-card:hover .case-card__name { color: var(--accent); }
.case-card__role { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.case-card__cta { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color var(--t-fast); }
.case-card:hover .case-card__cta, .case-card:focus-visible .case-card__cta { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .case-card__cta { opacity: 1; transform: none; }
    .primary-nav { display: none; }
    .nav-toggle { display: block; }
    .sticky-cta { display: flex; }
    body { padding-bottom: 56px; } /* room for sticky bar */
    .site-footer__inner { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
}

/* How I Work hero (How I Work page opener) */
.how-i-work-hero .eyebrow { color: var(--text-quiet); }
/* How I Work — tighten the top and flow into the pathways as one opener (matches the Claude reference, HIW F1) */
.site-main section.how-i-work-hero { padding-top: clamp(48px, 7vw, 80px); padding-bottom: 0; }
.site-main section.work-pathways { padding-top: var(--space-6); border-top: 0; }
.how-i-work-hero__title { font-size: clamp(2.25rem, 3.2vw, 2.625rem); line-height: 1.12; letter-spacing: -0.015em; max-width: none; margin: 0 0 28px; } /* design 42px / mb 28 */
.how-i-work-hero__body { color: var(--text-muted); max-width: 620px; font-size: 19px; line-height: 1.55; } /* design lead 19px / 620px */
.how-i-work-hero__body p { margin: 0; }

/* Work Pathways (How I Work page — numbered advisory pathways) */
.work-pathways__head { margin-bottom: var(--space-4); }
.work-pathways__head .eyebrow { color: var(--text-quiet); }
.work-pathways__list { border-bottom: var(--border-fine) solid var(--border); }
.pathway { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-top: var(--border-fine) solid var(--border); align-items: start; }
.pathway__label { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-2); align-items: start; }
.pathway__num { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; color: var(--text-muted); }
.pathway__title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.pathway__meta { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 10px; }
.pathway__body > p { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin: 0 0 var(--space-3); }
.pathway__body > p:last-of-type { margin-bottom: 0; }
.pathway__examples { background: rgba(255, 255, 255, 0.035); border: var(--border-fine) solid var(--border); border-radius: 4px; padding: var(--space-4); margin: var(--space-4) 0; }
.pathway__examples-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }
.pathway__examples p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 var(--space-3); }
.pathway__examples p:last-child { margin-bottom: 0; }
.pathway__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.pathway__cta-meta { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
/* Phone: keep the CTA button and its meta on ONE row (client request) — meta shrinks and wraps within its own column */
@media (max-width: 600px) {
    .pathway__foot { flex-wrap: nowrap; gap: 14px; }
    .pathway__foot .btn { flex-shrink: 0; }
    .pathway__cta-meta { flex: 1; min-width: 0; font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.45; }
}
@media (max-width: 820px) {
    .pathway { grid-template-columns: 1fr; gap: var(--space-3); }
}
.work-pathways__note { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: var(--space-5) 0 0; max-width: 60rem; }

/* Principles (How I work — light section) */
.principles .eyebrow { display: block; color: var(--text-quiet); margin-bottom: var(--space-5); }
.principles__list { border-bottom: var(--border-fine) solid var(--border); }
.principle { padding: var(--space-5) 0; border-top: var(--border-fine) solid var(--border); }
.principle__title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--space-2); }
.principle__body { color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: none; margin: 0; }

/* Case Studies hero (Case Studies page opener) */
.case-studies-hero .eyebrow { color: var(--text-quiet); }
.case-studies-hero__title { font-size: clamp(2.25rem, 3.4vw, 2.875rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 48rem; margin: 0 0 var(--space-5); }
.case-studies-hero__body { color: var(--text-muted); max-width: 31rem; line-height: 1.6; }
.case-entry__ext { font-variant-emoji: text; font-size: 0.85em; }
.case-studies-hero__body p { margin: 0; }

/* Case Studies index (Case Studies page — alternating two-column entries) */
.case-entry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; padding: var(--space-8) 0; scroll-margin-top: 96px; }
.case-entry + .case-entry { border-top: var(--border-fine) solid var(--border); }
.case-entry__media { order: 0; }
.case-entry--reverse .case-entry__media { order: 1; }
.case-entry__img, .case-entry__ph, .case-entry__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--border-fine) solid var(--border); border-radius: 4px; }
.case-entry__video + .case-entry__video { margin-top: 28px; } /* stacked players (entries with two videos) */
.case-entry__ph { background: #1c1c1e; }
.case-entry__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.case-entry__role { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.case-entry__site { display: inline-block; font-size: 14px; color: var(--text-muted); margin-top: var(--space-4); }
.case-entry__rows { margin-top: var(--space-5); border-bottom: var(--border-fine) solid var(--border); }
.case-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--border-fine) solid var(--border); align-items: start; }
.case-row__label { color: var(--accent); margin-top: 2px; }
.case-row__body { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.case-entry__body { margin-top: var(--space-5); }
.case-entry__body p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin: 0 0 var(--space-3); }
.case-entry__body p:last-child { margin-bottom: 0; }
.case-entry__body strong { color: var(--text); font-weight: 600; }
.case-entry__body em { font-style: italic; }
.case-entry__outcome { color: var(--accent); font-size: 15px; line-height: 1.7; margin: var(--space-4) 0 0; }
.case-entry__quote { margin: var(--space-5) 0 0; background: #1a1a1c; border-left: 2px solid var(--accent); padding: var(--space-4) var(--space-5); border-radius: var(--radius-ui); }
.case-entry__quote p { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.5; margin: 0 0 12px; color: var(--text); }
.case-entry__quote cite { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 820px) {
    .case-entry { grid-template-columns: 1fr; gap: var(--space-4); }
    .case-entry--reverse .case-entry__media { order: 0; }
    .case-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---- Mobile grid stacking + overflow fixes (placed last so they beat later base rules) ---- */
@media (max-width: 820px) {
    .tg__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .newsletter-cta--card .newsletter-cta__grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .pathway { grid-template-columns: 1fr; gap: var(--space-3); }
    /* Featured testimonial: company label flows above the quote (was absolute top-right, overlapped on mobile) */
    .tg__featured-company { position: static; display: block; margin-bottom: var(--space-2); }
    .tg__featured-quote { padding-right: 0; }
}

/* ---- Phone tier — inner-page hero/CTA titles to the mobile design's 30px (clamp floored at 32-36) ---- */
@media (max-width: 600px) {
    .case-studies-hero__title,
    .field-notes-hero__title,
    .how-i-work-hero__title,
    .speaking-hero__title,
    .media-hero__title,
    .booking__title,
    .speaking-cta__title,
    .media-cta__title { font-size: 30px; line-height: 1.12; }
    /* Home hero shows a single CTA on mobile — Workshop lives in the sticky bottom bar */
    .hero-block__ctas .btn--accent { display: none; }
}

/* ---- In the press ---- */
.press__head { max-width: 640px; margin-bottom: var(--space-7); }
.press__title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
.press__intro { color: var(--text-muted); max-width: 58ch; margin: 0; }
.press__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.press-card { display: block; text-decoration: none; color: inherit; }
.press-card__media { display: block; border-radius: 4px; overflow: hidden; border: var(--border-fine) solid var(--border); background: #202123; }
.press-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.4s ease; }
a.press-card:hover .press-card__media img { transform: scale(1.03); }
.press-card__source { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.press-card__caption { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 820px) {
    .press__grid { grid-template-columns: 1fr; gap: var(--space-6); max-width: 480px; }
}