/* ==========================================================================
   Keystone IQ — Main Stylesheet
   Tokens will be updated once brand assets are extracted from site backup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — sourced from keystoneiq.co styles.css
   -------------------------------------------------------------------------- */
:root {
    /* Colours */
    --color-bg:          #0a0603;
    --color-bg-panel:    #130c08;
    --color-bg-light:    #f3ece5;
    --color-surface:     rgba(255,255,255,0.03);
    --color-border:      rgba(255,255,255,0.08);
    --color-border-light:rgba(0,0,0,0.08);
    --color-text:        #f4ede6;
    --color-text-muted:  #d0c2b6;
    --color-text-soft2:  #F9E6D6;
    --color-text-on-light: #3d322c;
    --color-heading:     #f4ede6;
    --color-muted-ink:   #5f5b57;
    --color-accent:      #d95322;
    --color-accent-deep: #bc4316;
    --color-accent-hover:#e35b27;

    /* Typography */
    --font-sans:    'Hind', Arial, sans-serif;
    --font-serif:   'Playfair Display', Georgia, serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --leading-tight:  1.2;
    --leading-snug:   1.375;
    --leading-normal: 1.6;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Layout */
    --max-width:     1200px;
    --max-width-md:  800px;
    --max-width-sm:  640px;

    /* Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    /* Transition */
    --transition: 200ms ease;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    padding-top: 64px; /* fixed nav offset */
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(1280px + 112px); /* 1280 content + 56px gutters — matches .section-inner / .hero__inner */
    margin-inline: auto;
    padding-inline: 56px;
}

.container--narrow {
    max-width: var(--max-width-md);
}

section {
    padding-block: var(--space-20);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }


.subline {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.pull-quote {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    border-left: 4px solid var(--color-accent-alt);
    padding-left: var(--space-6);
    margin-block: var(--space-8);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.7rem 1.5rem;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.btn--primary:hover {
    background: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
    text-decoration: none;
}

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: rgba(255,255,255,0.35);
}
.btn--outline:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.6);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 64px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Remove backdrop-filter when mobile menu is open — backdrop-filter creates a new
   containing block for position:fixed children on Android Chrome, trapping the
   nav overlay inside the 64px header instead of covering the full viewport. */
.site-header.header--menu-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,0.98) !important;
}
.site-header.scrolled {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.site-header .container { max-width: none; padding-inline: 56px; }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* Logo + nav sit left; utilities (future language selector + theme toggle +
   mobile menu button) group on the right. */
.site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-header__logo img {
    display: block;
    height: 36px;
    width: auto;
}

.site-header__logo-text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-xl);
    color: #121212;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.site-nav__list a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #121212;
    transition: color var(--transition);
}
.site-nav__list a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav__cta { margin-left: var(--space-4); }

/* Primary nav dropdowns (desktop) */
.site-nav__list li { position: relative; }
.site-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 0.4em;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
    opacity: 0.6;
}
.site-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 150;
}
.site-nav__list li.menu-item-has-children:hover > .sub-menu,
.site-nav__list li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav__list .sub-menu a {
    display: block;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    font-size: 13px;
}
.site-nav__list .sub-menu a:hover { background: rgba(217,83,34,0.08); color: var(--color-accent); }

.site-header__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}
.site-header__menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #121212;
    transition: transform var(--transition);
}
.site-header__menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(4rem, 8vw, 6.25rem);
    padding-inline: 56px;
    background:
        radial-gradient(circle at top right, rgba(217,83,34,0.12), transparent 28%),
        linear-gradient(180deg, #0b0704 0%, var(--color-bg) 100%);
}

.hero__header-rule {
    width: 100%;
    height: 1px;
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
    background: linear-gradient(90deg, var(--color-accent) 0%, rgba(217,83,34,0.15) 75%, transparent 100%);
}

.hero__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.72fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.hero__headline {
    grid-column: 1 / -1;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.hero__eyebrow {
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244,237,230,0.72);
}

.hero__title {
    margin: 0 0 0;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero__subline {
    margin: 1.15rem 0 0;
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3.2vw, 2.5rem);
    line-height: 1.08;
    color: var(--color-accent-hover);
    font-style: italic;
}

.hero__lead {
    margin: 1.5rem 0 0;
    max-width: 720px;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-text);
}

.hero__body {
    margin-top: 1.25rem;
    max-width: 720px;
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--color-text-muted);
}
.hero__body p + p { margin-top: 1rem; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-8);
}

.hero__secondary-link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
.hero__secondary-link:hover { color: var(--color-text); }

/* Hero aside card */
.hero__aside {
    align-self: start;
    display: flex;
    align-items: flex-start;
    /* Drop the card down to line up with the hero lead line (it sits below the
       single-line subline in the left column). */
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.hero__aside-card {
    width: 100%;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    box-shadow: 0 24px 60px rgba(0,0,0,0.24);
}

/* Reversed pull-quote card — light on dark, with an accent edge, so it pops. */
.hero__aside-card--reversed {
    border: 0;
    border-left: 4px solid var(--color-accent);
    background: var(--color-text);
    box-shadow: 0 24px 60px rgba(0,0,0,0.38);
}
.hero__aside-card--reversed .hero__aside-title { color: var(--color-bg); }
.hero__aside-card--reversed .hero__aside-body { color: rgba(10,6,3,0.78); }

/* Homepage — "what standard diligence misses / does differently" (two columns) */
.diligence__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
}
.diligence__heading {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: var(--space-4);
}
.diligence__col p {
    font-size: var(--text-base);
    line-height: 1.85;
    color: var(--color-text-muted);
    margin: 0;
}
@media (max-width: 760px) { .diligence__grid { grid-template-columns: 1fr; } }

.hero__aside-kicker {
    display: inline-block;
    margin-bottom: 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244,237,230,0.68);
}

.hero__aside-title {
    margin: 0 0 0.9rem;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.03;
    font-weight: 500;
}

.hero__aside-body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Section titles
   -------------------------------------------------------------------------- */
.section-header {
    margin-bottom: var(--space-12);
}

.section-header--centered {
    text-align: center;
}

.section-header__title {
    margin-bottom: var(--space-4);
}

.section-header__subline {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Cards (services, insights)
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card__tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(244,237,230,0.68);
}

.card__title {
    font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
    color: var(--color-text);
}

.card__subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-accent-hover);
    margin-top: -0.5rem;
}

.card__body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
    flex: 1;
}

.card__link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: auto;
    transition: color var(--transition);
}
.card__link:hover { color: var(--color-text); }

/* --------------------------------------------------------------------------
   What We Do — light section with step-style cards
   -------------------------------------------------------------------------- */
.section-shell--light {
    background: linear-gradient(180deg, #f3ece5 0%, #efe5dc 100%);
    color: #1a1208;
    border-top: 1px solid rgba(18,18,18,0.05);
    border-bottom: 1px solid rgba(18,18,18,0.05);
}

.title-accent {
    display: inline-block;
    margin-right: 0.35rem;
    color: var(--color-accent);
}

.title-muted {
    display: inline-block;
    color: #8c7d73;
}

.wwd-heading {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.wwd-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
    color: #1a1208;
    margin: 0 0 var(--space-2);
    max-width: none;
}

.wwd-subline {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: #6b5f55;
    margin-bottom: var(--space-10);
}

.wwd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.wwd-card {
    padding: 1.75rem;
    border: 1px solid rgba(18,18,18,0.08);
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 18px 40px rgba(48,33,20,0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wwd-card__topline {
    width: 100%;
    height: 4px;
    background: var(--color-accent);
    margin-bottom: var(--space-2);
}

.wwd-card__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.wwd-card__number {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1;
}

.wwd-card__head h3 {
    margin: 0;
    font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
    color: #1a1208;
    line-height: 1.1;
}

.wwd-card__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--color-accent);
    margin: 0;
}

.wwd-card__body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.8;
    color: #5a4d43;
    flex: 1;
    margin: 0;
}

.wwd-card__link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #4a3d33;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: auto;
    transition: color var(--transition);
}
.wwd-card__link:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Logo strip
   -------------------------------------------------------------------------- */
.logo-strip {
    background:
        radial-gradient(circle at top center, rgba(217,83,34,0.10), transparent 55%),
        linear-gradient(180deg, #120b06 0%, var(--color-bg) 100%);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-block: var(--space-16);
}

.logo-strip__head {
    text-align: center;
    max-width: none;
    margin: 0 auto var(--space-10);
}
/* Keep the sector subhead on one line on desktop. */
.logo-strip__subhead { white-space: nowrap; }
@media (max-width: 900px) { .logo-strip__subhead { white-space: normal; } }

.logo-strip__title {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 var(--space-3);
}

.logo-strip__subhead {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
}

.logo-strip__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-6) var(--space-10);
}

.logo-strip__logos img {
    height: 28px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: opacity var(--transition);
}
.logo-strip__logos img:hover { opacity: 1; }

.logo-strip__text {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    color: rgba(244,237,230,0.62);
    letter-spacing: 0.01em;
    transition: color var(--transition);
}
.logo-strip__text:hover { color: var(--color-text); }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border);
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-heading);
}

.faq-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    transition: transform var(--transition);
}

.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__answer {
    display: none;
    padding-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
}
/* Collapsed by default in CSS (not just JS) so FAQs never render expanded. */
.faq-item[open] .faq-item__answer { display: block; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-block: var(--space-20);
    text-align: center;
    padding-inline: var(--space-6);
}

.cta-band__title {
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.cta-band__body {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    margin-inline: auto;
}

.cta-band__note {
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: rgba(244,237,230,0.4);
    margin-top: var(--space-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Moments table (entry/hold/exit)
   -------------------------------------------------------------------------- */
.moments-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-8);
}

.moments-table th,
.moments-table td {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.moments-table th {
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.moments-table td:first-child,
.moments-table th:first-child {
    white-space: nowrap;
    width: 140px;
}

/* --------------------------------------------------------------------------
   Moments accordion (entry/hold/exit) — D3
   -------------------------------------------------------------------------- */
.moments-accordion {
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.moment {
    border-bottom: 1px solid var(--color-border);
}

.moment__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    padding: var(--space-6) 0;
    cursor: pointer;
    list-style: none;
}
.moment__summary::-webkit-details-marker { display: none; }
.moment__summary:hover .moment__label { color: var(--color-accent); }

.moment__label {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1;
    transition: color var(--transition);
}

.moment__tagline {
    flex: 1 1 auto;
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.moment__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    transition: transform var(--transition);
}
.moment[open] .moment__icon { transform: rotate(45deg); }

.moment__body {
    padding: 0 0 var(--space-6);
    display: grid;
    gap: var(--space-4);
    max-width: 760px;
}

.moment__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-5);
    align-items: start;
}
.moment__row p { margin: 0; color: var(--color-text-muted); }

.moment__key {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    padding-top: 0.15rem;
}

/* Moments That Matter — deal-lifecycle feature cards (Entry / Hold / Exit) */
.moments-flow {
    list-style: none;
    margin: var(--space-12) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.moment-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid var(--color-accent);
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.moment-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.045);
    border-color: rgba(217,83,34,0.35);
}
.moment-card__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.moment-card__num {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 500;
    color: var(--color-accent);
}
.moment-card__label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-text);
}
.moment-card__question {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    line-height: 1.18;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}
.moment-card__tagline {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}
.moment-card__rows {
    margin-top: auto;
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.moment-card__key {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.moment-card__row--risk .moment-card__key { color: var(--color-text-muted); }
.moment-card__row--answer .moment-card__key { color: var(--color-accent-hover); }
.moment-card__rows p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); }
.moment-card__row--answer p { color: var(--color-text); }
@media (max-width: 860px) { .moments-flow { grid-template-columns: 1fr; } }

.moments__actions {
    margin-top: var(--space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

@media (max-width: 600px) {
    .moment__summary { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
    .moment__tagline { flex-basis: 100%; order: 3; }
    .moment__row { grid-template-columns: 1fr; gap: var(--space-1); }
    .moment__key { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-bg-panel);
    color: rgba(244,237,230,0.8);
    padding-block: var(--space-16) var(--space-8);
    padding-inline: 56px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
/* Footer already pads 56px; its inner .container must not double-pad. */
.site-footer .container { max-width: 1280px; padding-inline: 0; }

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-12);
    max-width: 1280px;
    margin-inline: auto;
}

.site-footer__logo {
    font-weight: 700;
    font-size: var(--text-lg);
    color: #fff;
}

.site-footer__tagline {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    color: rgba(255,255,255,0.5);
}

.site-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
}

.site-footer__nav-list a {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    transition: color var(--transition);
}
.site-footer__nav-list a:hover { color: #fff; }

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}
.site-footer__social a {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    transition: color var(--transition);
}
.site-footer__social a:hover { color: #fff; }

.site-footer__legal {
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
}
.site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { color: var(--color-accent); }
.site-footer__legal-sep { margin-inline: var(--space-2); opacity: 0.6; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero { padding-block: var(--space-16) var(--space-12); }

    .moments-table { font-size: var(--text-xs); }
    .moments-table th,
    .moments-table td { padding: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-hero {
    padding-block: var(--space-12) var(--space-8);
    padding-inline: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contact-hero h1 { margin-bottom: var(--space-4); }

.contact-hero .subline {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-accent-hover);
}

.contact-hero__note {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244,237,230,0.45);
    margin-top: var(--space-4);
}

.contact-form-section {
    padding-block: var(--space-8);
    padding-inline: 56px;
}

/* Same centering as .hero__inner — content aligns with logo */
.contact-page__inner {
    max-width: 1280px;
    margin-inline: auto;
}

/* Cap the HubSpot form container; let it sit at left edge of the 1280px grid */
#contact-form {
    max-width: 680px;
}

/* Custom contact form */
.kiq-form {
    max-width: 680px;
}

.kiq-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.kiq-form__field {
    margin-bottom: 1.25rem;
}

.kiq-form__field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.kiq-form__req { color: var(--color-accent); }

.kiq-form__field input,
.kiq-form__field select,
.kiq-form__field textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f4ede6;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    transition: border-color var(--transition);
}

.kiq-form__field input:focus,
.kiq-form__field textarea:focus {
    border-color: var(--color-accent);
}

.kiq-form__field input::placeholder,
.kiq-form__field textarea::placeholder {
    color: rgba(244,237,230,0.3);
}

.kiq-form__field textarea {
    resize: vertical;
    min-height: 120px;
}

.kiq-form__phone-wrapper {
    display: flex;
}

.kiq-form__phone-code {
    flex: 0 0 6rem;
    width: 6rem;
    border-right: none;
    color: rgba(244,237,230,0.7);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f4ede6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.6rem;
    padding-left: 0.6rem;
}

.kiq-form__phone-wrapper input {
    flex: 1;
    min-width: 0;
}

.kiq-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.kiq-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kiq-form__status {
    font-size: var(--text-sm);
    max-width: none;
}

.kiq-form__status--error { color: #e57373; }

.kiq-form__success {
    color: #f4ede6;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    max-width: none;
}

@media (max-width: 600px) {
    .kiq-form__row--2col {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --------------------------------------------------------------------------
   Breadcrumbs (visual; schema handled by Yoast)
   -------------------------------------------------------------------------- */
.breadcrumbs {
    padding-inline: 56px;
    margin-top: var(--space-6);
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
}
html[data-theme="light"] .breadcrumbs { background: rgba(0,0,0,0.02); }
.breadcrumbs__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { opacity: 0.5; }
.breadcrumbs__current { color: var(--color-text); }
@media (max-width: 900px) { .breadcrumbs { padding-inline: var(--space-6); } }

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-inline: 56px;
    background:
        radial-gradient(circle at top right, rgba(217,83,34,0.08), transparent 30%),
        linear-gradient(180deg, #0b0704 0%, var(--color-bg) 100%);
}

/* Kill the double gap: a content section right after a page hero shouldn't add
   its full top padding on top of the hero's bottom padding. */
.page-hero + .section-shell,
.page-hero + .article {
    padding-top: var(--space-6);
}

.page-hero__rule {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, rgba(217,83,34,0.15) 75%, transparent 100%);
}

.page-hero__inner {
    max-width: 1280px;
    margin-inline: auto;
}

/* Base eyebrow — consistent everywhere (hero, page hero, in-section labels) */
.eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244,237,230,0.72);
}
.page-hero .eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244,237,230,0.72);
}

.page-hero h1 { margin-bottom: var(--space-6); }

.page-hero__subline {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-style: italic;
    color: var(--color-accent-hover);
    line-height: 1.2;
    max-width: none;
}

/* --------------------------------------------------------------------------
   Sub navigation
   -------------------------------------------------------------------------- */
.sub-nav {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-inline: 56px;
    background: rgba(255,255,255,0.02);
}

/* Page-top sub-nav sits directly under the fixed header — add a gap so it is
   clearly separated and visible, not jammed against the main nav. */
.sub-nav--top {
    margin-top: var(--space-6);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sub-nav__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: flex;
    gap: var(--space-8);
}

.sub-nav__inner a {
    display: inline-block;
    padding-block: var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}
.sub-nav__inner a:hover,
.sub-nav__inner a.is-current {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section shells (inner pages)
   -------------------------------------------------------------------------- */
.section-shell {
    padding-inline: 56px;
    padding-block: 5.5rem;
}

.section-shell--panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.section-inner {
    max-width: 1280px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.three-col-grid {
    display: grid;
    gap: var(--space-12);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: var(--space-16);
}

.feature-item h3 { margin-bottom: var(--space-4); }
.feature-item p { font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-muted); }

.speed-stats {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

.speed-stat__number {
    display: block;
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.speed-stat__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.operator-layer {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-6);
    max-width: 800px;
}
.operator-layer h3 { margin-bottom: var(--space-3); }
.operator-layer p { font-size: var(--text-base); line-height: 1.8; color: var(--color-text-muted); }

/* About — sans-serif subline (D5), section H2, and centred speed block (snag About #6) */
.page-hero__subline--sans {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.5;
    color: var(--color-text-muted);
}
.page-hero__subline--sans a {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.about-why__heading {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: var(--space-12);
    max-width: none;
}

/* About — "Built on evidence" proof section now uses the light band + article
   (.wwd-card) cards, so its heading must read dark on the cream background. */
.about-proof h2 {
    color: #1a1208;
    margin-bottom: var(--space-10);
}

/* Founder "Why this, and why now" body stretches full width. */
.service-block.founder-whynow > p { max-width: none; }

.speed-block {
    text-align: center;
    max-width: 760px;
    margin: var(--space-12) auto 0;
}
.speed-block h3 { margin-bottom: var(--space-6); }
.speed-stats--centered { justify-content: center; }
.speed-block__note {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-top: var(--space-6);
}

.proof-cards {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: var(--space-10);
}

.proof-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-8);
}

.proof-card__stat {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.proof-card__desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: none;
}

/* --------------------------------------------------------------------------
   Methodology page
   -------------------------------------------------------------------------- */
.content-cols__main { max-width: none; }
.content-cols__main h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.content-cols__main h2:first-child { margin-top: 0; }
.content-cols__main p { font-size: var(--text-base); line-height: 1.9; color: var(--color-text-muted); margin-bottom: var(--space-4); }

.dimensions-table-wrapper { overflow-x: auto; margin-block: var(--space-8); }

.dimensions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--color-accent);
}
.dimensions-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

.dimensions-table th,
.dimensions-table td {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 1.6;
    vertical-align: top;
}

.dimensions-table th {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(244,237,230,0.5);
    background: rgba(255,255,255,0.02);
}

.dimensions-table td:first-child { white-space: nowrap; }
.dimensions-table td { color: var(--color-text-muted); }
.dimensions-table td strong { color: var(--color-text); font-family: var(--font-serif); }

/* Mobile: stop the dimensions table running off-page — let the first column
   wrap and narrow rather than forcing horizontal scroll (snag: Mobile). */
@media (max-width: 700px) {
    .dimensions-table th,
    .dimensions-table td { padding: var(--space-3); font-size: var(--text-xs); }
    .dimensions-table td:first-child { white-space: normal; width: 5.5rem; }
}

.example-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-6) var(--space-8);
    margin-block: var(--space-8);
}

.example-block__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }

.example-block__list {
    list-style: disc;
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.example-block__list li {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-2);
}

.example-block__verdict {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--color-text);
    font-style: italic;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Service pages
   -------------------------------------------------------------------------- */
.service-intro { margin-bottom: var(--space-12); }

.service-intro__body {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-text-muted);
}

.feature-list {
    list-style: none;
    margin-block: var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.feature-list li {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
    padding-left: var(--space-6);
    position: relative;
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 12px;
    height: 2px;
    background: var(--color-accent);
}

.format-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: var(--space-4);
    margin-bottom: var(--space-12);
}

.timing-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-block: var(--space-6) var(--space-12);
}

.timing-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    padding: var(--space-8);
}

.timing-card h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.timing-card p { font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-muted); }

.timing-card__economics {
    margin-top: var(--space-4);
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-accent-hover) !important;
}

.product-summary-table { margin-block: var(--space-12); }
.product-summary-table h2 { margin-bottom: var(--space-6); }

.upsell-panel {
    background: rgba(217,83,34,0.06);
    border: 1px solid rgba(217,83,34,0.2);
    padding: var(--space-8);
    margin-top: var(--space-12);
}

.upsell-panel h2 { margin-bottom: var(--space-4); }
.upsell-panel p { font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* Service pages — hero actions, accent eyebrow, section spacing, pills, panels */
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-8);
}

.eyebrow--accent {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-accent) !important;
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-6) !important;
}
.eyebrow--accent::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--color-accent);
}

.service-block { margin-block: var(--space-16); }
.service-block:first-of-type { margin-top: 0; }
.service-block > h2 { margin-bottom: var(--space-6); }
.service-block > p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 760px;
    margin-bottom: var(--space-4);
}

.pills {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-block: var(--space-8) var(--space-8);
}

.pill {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-5) var(--space-6);
}

.pill__head {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.pill__body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.timing-card__stat {
    margin-top: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--color-accent-hover) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--space-4);
}
.timing-card__note {
    margin-top: var(--space-4);
    font-style: italic;
}

.download-panel {
    background: rgba(217,83,34,0.06);
    border: 1px solid rgba(217,83,34,0.2);
    padding: var(--space-8);
    margin-top: var(--space-12);
}
.download-panel h2 { margin-bottom: var(--space-4); }
.download-panel p { font-size: var(--text-base); line-height: 1.8; color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 720px; }

/* Evidence — HowTo step number */
.step-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

/* Founder page */
.founder__grid {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.founder__photo {
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(217,83,34,0.10));
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--color-accent);
}
.founder__photo span {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: rgba(244,237,230,0.5);
}

.founder__byline {
    margin: var(--space-5) 0 var(--space-2);
    font-weight: 700;
    color: var(--color-text);
}

.founder__linkedin {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.founder__actions {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.founder__bio p {
    font-size: var(--text-base);
    line-height: 1.85;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.founder__bio p:first-child {
    font-size: var(--text-lg);
    color: var(--color-text);
}

.sister-note {
    margin-block: var(--space-12);
    padding: var(--space-6) var(--space-8);
    background: rgba(217,83,34,0.06);
    border-left: 3px solid var(--color-accent);
}
.sister-note p { margin: 0; font-size: var(--text-base); line-height: 1.8; color: var(--color-text-muted); }
.sister-note a { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.blog-index__empty {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-text-muted);
}
.blog-index__empty a { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.blog-index__rss {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}
.blog-index__rss a {
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.blog-index__rss a:hover { color: var(--color-accent-hover); }

/* Blog index sits on the light band (matches /insights/), so empty state,
   RSS link and pagination need dark-on-light treatment. */
.blog-index.section-shell--light .blog-index__empty { color: #5a4d43; }
.blog-index.section-shell--light .blog-index__empty a { color: var(--color-accent); }
.blog-index.section-shell--light .blog-index__rss { border-top-color: rgba(18,18,18,0.1); }
.blog-index.section-shell--light .blog-index__rss a { color: #5a4d43; }
.blog-index.section-shell--light .blog-index__rss a:hover { color: var(--color-accent); }
.blog-index.section-shell--light .page-numbers {
    color: #5a4d43;
    border-color: rgba(18,18,18,0.15);
}
.blog-index.section-shell--light a.page-numbers:hover {
    color: #1a1208;
    border-color: var(--color-accent);
}
.blog-index.section-shell--light .page-numbers.current {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

@media (max-width: 780px) {
    .founder__grid { grid-template-columns: 1fr; }
    .founder__photo { max-width: 320px; }
}

/* About proof card title (master placeholder cards) */
.proof-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

/* Founder — Meet the Team grid */
.founder-team { margin-top: var(--space-12); }
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-6);
}
.team-card__photo {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(217,83,34,0.10));
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--color-accent);
    margin-bottom: var(--space-4);
}
.team-card__photo span { font-family: var(--font-serif); color: rgba(244,237,230,0.5); }
.team-card__photo-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: var(--space-4); }
.team-card__name { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.team-card__role {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-accent-hover);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.team-card__bio { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.team-card__linkedin { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Insights hub
   -------------------------------------------------------------------------- */
/* Tighten the H1 -> intro gap (snag Insights #1). */
.insights-hub.section-shell { padding-top: var(--space-10); }

.insights-hub__intro {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: #5a4d43;
    max-width: none;
    margin-bottom: var(--space-12);
}

/* Insights article cards reuse the homepage "What We Do" card style.
   The card title is a link, so inherit the card heading colour. */
.wwd-card__head h3 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.wwd-card__head h3 a:hover,
.wwd-card:hover .wwd-card__head h3 a { color: var(--color-accent); }

/* Category label on cards links to its archive — keep the subtitle styling */
.wwd-card__subtitle a { color: inherit; text-decoration: none; }
.wwd-card__subtitle a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Category label in a post eyebrow links to its archive */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.insights-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.insight-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--transition);
}
.insight-card:hover { border-color: rgba(217,83,34,0.3); }

.insight-card__moments {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
}

.insight-card__title {
    font-size: var(--text-2xl);
    line-height: 1.2;
    margin: 0;
}
.insight-card__title a { color: var(--color-text); transition: color var(--transition); }
.insight-card__title a:hover { color: var(--color-accent-hover); text-decoration: none; }

.insight-card__desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
    flex: 1;
}

.insight-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.insight-card__time {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: rgba(244,237,230,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Insight article (long-form, block-editor body)
   -------------------------------------------------------------------------- */
.article__meta {
    margin-top: var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.article__body {
    max-width: none;
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--color-text-muted);
}
.article__body > * + * { margin-top: var(--space-5); }
.article__body > :first-child { margin-top: 0; }
.article__body h2 {
    color: var(--color-text);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    margin-top: var(--space-12);
}
.article__body h3 {
    color: var(--color-text);
    font-size: var(--text-xl);
    margin-top: var(--space-8);
}
.article__body a { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body li + li { margin-top: var(--space-2); }
.article__body blockquote {
    margin: var(--space-8) 0;
    padding-left: var(--space-6);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.35;
    color: var(--color-text);
}

.article__faqs {
    max-width: none;
    margin-top: var(--space-16);
}
.article__faqs > h2 { margin-bottom: var(--space-6); }
/* FAQ answers in articles/blog posts stretch full width like the body
   (the 70ch cap only applies on the standalone FAQ page). */
.article__faqs .faq-item__answer { max-width: none; }

/* In-article tables, stat callouts and inline CTAs (loaded into the_content) */
.article__body table.article-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
    font-size: var(--text-sm);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--color-accent);
}
.article__body .article-table td {
    padding: var(--space-4) var(--space-5);
    vertical-align: top;
    line-height: 1.6;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.article__body .article-table tr:first-child td { border-top: 0; }
.article__body .article-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.article__body .article-table thead th {
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    background: rgba(217,83,34,0.14);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.article__body .article-table td:first-child {
    font-weight: 700;
    color: var(--color-text);
}
.article__body .article-callout {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-style: normal;
    color: var(--color-text-muted);
}
.article__body .article-cta {
    background: rgba(217,83,34,0.06);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.article__body .article-cta a { font-weight: 600; }

/* Footnote references + Sources list */
.article__body sup a {
    text-decoration: none;
    color: var(--color-accent-hover);
    font-weight: 600;
    padding: 0 1px;
}
.article__body .article-footnotes {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}
.article__body .article-footnotes li + li { margin-top: var(--space-3); }
.article__body .article-footnotes a { color: var(--color-accent-hover); }

/* Single-post featured image + tags */
.article__feature {
    margin: 0 0 var(--space-8);
    max-width: 860px;
}
.article__feature img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.article__tags {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.article__tags a {
    color: var(--color-text-muted);
    text-decoration: none;
    margin-right: var(--space-3);
}
.article__tags a:hover { color: var(--color-accent-hover); }

/* --------------------------------------------------------------------------
   Blog — pagination + prev/next post navigation
   -------------------------------------------------------------------------- */
.blog-index .pagination {
    margin-top: var(--space-12);
}
.blog-index .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.blog-index .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 var(--space-3);
    height: 40px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
}
.blog-index a.page-numbers:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
}
.blog-index .page-numbers.current {
    color: var(--color-bg);
    background: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 600;
}
.blog-index .page-numbers.dots { border-color: transparent; }

.post-nav {
    margin-top: var(--space-12);
}
.post-nav__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text);
}
.post-nav__link--next {
    text-align: right;
    grid-column: 2;
    align-items: flex-end;
}
.post-nav__label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-accent-hover);
    letter-spacing: 0.02em;
}
.post-nav__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
}
.post-nav__link:hover .post-nav__title { color: var(--color-accent-hover); }

@media (max-width: 700px) {
    .post-nav__inner { grid-template-columns: 1fr; }
    .post-nav__link--next { grid-column: 1; text-align: left; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */
.faq-section { margin-bottom: var(--space-16); }

.faq-section { scroll-margin-top: 88px; }
.faq-section__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Brand accent bar above each FAQ section header so the sections read clearly. */
.faq-section__title::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Responsive (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero, .page-hero, .section-shell, .container,
    .contact-hero, .contact-form-section,
    .sub-nav, .site-footer { padding-inline: var(--space-6); }

    .site-header .container { padding-inline: var(--space-6); }

    .hero__inner { grid-template-columns: 1fr; }
    .hero__aside { display: none; }

    .site-nav__list,
    .site-nav__cta { display: none; }

    .site-header__menu-toggle { display: flex; }

    .site-nav--open {
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(255,255,255,0.99);
        display: flex;
        flex-direction: column;
        padding: 0.75rem 24px 1.5rem;
        z-index: 200;
        overflow-y: auto;
    }

    .site-nav--open .site-nav__list {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .site-nav--open .site-nav__list li {
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .site-nav--open .site-nav__list a {
        display: block;
        padding: 0.95rem 0;
        color: #121212 !important;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    .site-nav--open .site-nav__cta {
        display: inline-flex !important;
        margin-top: var(--space-6);
        margin-left: 0;
    }

    .sub-nav__inner { gap: var(--space-6); overflow-x: auto; }

    /* Mobile: nav dropdowns render as static, indented nested lists */
    .site-nav--open .site-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: 0;
        padding: 0 0 0.5rem 1rem;
    }
    .site-nav--open .site-nav__list .sub-menu li { border-bottom: none; }
    .site-nav--open .site-nav__list .sub-menu a { padding: 0.6rem 0; font-size: 0.95rem; color: #555 !important; }
    .site-nav--open .menu-item-has-children > a::after { display: none; }

    .timing-grid--three { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Theme toggle button (header) + LIGHT THEME
   The header is light in both modes, so the toggle uses fixed dark ink.
   Light theme flips the dark body/sections/footer; cream "--light" bands and
   accent colours are kept. Scoped to html[data-theme="light"].
   ========================================================================== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.15);
    color: #1a1208;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
html[data-theme="light"] .theme-toggle__sun { display: block; }
html[data-theme="light"] .theme-toggle__moon { display: none; }

/* ---- Light theme tokens ---- */
html[data-theme="light"] {
    --color-bg:          #ffffff;
    --color-bg-panel:    #f3ece5;
    --color-surface:     rgba(0,0,0,0.03);
    --color-border:      rgba(0,0,0,0.12);
    --color-text:        #1a1208;
    --color-text-muted:  #5a4d43;
    --color-text-soft2:  #3d322c;
    --color-heading:     #0a0603;
    color-scheme: light;
}

/* ---- Footer (dark panel -> light) ---- */
html[data-theme="light"] .site-footer { color: #5a4d43; border-top-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .site-footer__logo { color: #0a0603; }
html[data-theme="light"] .site-footer__tagline,
html[data-theme="light"] .site-footer__legal { color: rgba(0,0,0,0.5); }
html[data-theme="light"] .site-footer__legal { border-top-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .site-footer__nav-list a,
html[data-theme="light"] .site-footer__social a { color: #5a4d43; }
html[data-theme="light"] .site-footer__nav-list a:hover,
html[data-theme="light"] .site-footer__social a:hover { color: #0a0603; }

/* ---- CTA band + panel sections (white-tint -> dark-tint) ---- */
html[data-theme="light"] .cta-band,
html[data-theme="light"] .section-shell--panel {
    background: linear-gradient(180deg, rgba(0,0,0,0.025), rgba(0,0,0,0.012));
    border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .cta-band__note { color: rgba(0,0,0,0.45); }

/* ---- Sub-nav / category filter ---- */
html[data-theme="light"] .sub-nav { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .sub-nav--top { border-top-color: rgba(0,0,0,0.08); }

/* ---- Cards & surfaces tuned for dark (flip bg + hairline borders) ---- */
html[data-theme="light"] .card,
html[data-theme="light"] .insight-card,
html[data-theme="light"] .proof-card,
html[data-theme="light"] .hero__aside-card,
html[data-theme="light"] .timing-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .pill,
html[data-theme="light"] .example-block {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
    border-left-color: var(--color-accent);
}
html[data-theme="light"] .timing-card__stat { border-top-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .founder__photo,
html[data-theme="light"] .team-card__photo {
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(217,83,34,0.1));
    border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .founder__photo { border-left-color: var(--color-accent); }
html[data-theme="light"] .founder__photo span,
html[data-theme="light"] .team-card__photo span { color: rgba(0,0,0,0.45); }

/* ---- Buttons ---- */
html[data-theme="light"] .btn--outline { border-color: rgba(0,0,0,0.3); }
html[data-theme="light"] .btn--outline:hover { background: rgba(0,0,0,0.05); }

/* ---- Forms ---- */
html[data-theme="light"] .kiq-form__field label { color: #1a1208; }
html[data-theme="light"] .kiq-form__field input,
html[data-theme="light"] .kiq-form__field textarea,
html[data-theme="light"] .kiq-form__field select {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.2);
    color: #1a1208;
}

/* ---- Tables, hairline dividers, article/blog extras ---- */
html[data-theme="light"] .dimensions-table th,
html[data-theme="light"] .dimensions-table td,
html[data-theme="light"] .article__body .article-table td,
html[data-theme="light"] .contact-hero,
html[data-theme="light"] .faq-section__title,
html[data-theme="light"] .article__tags,
html[data-theme="light"] .post-nav__inner { border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .insight-card__footer { border-top-color: rgba(0,0,0,0.1); }
/* FAQ +/- icon stays the brand red in light mode. */
html[data-theme="light"] .faq-item__icon { color: var(--color-accent); }

/* Tables (insight article + methodology) — dark-on-light surface in light mode. */
html[data-theme="light"] .article__body table.article-table,
html[data-theme="light"] .dimensions-table {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.12);
    border-left-color: var(--color-accent);
}
html[data-theme="light"] .article__body .article-table td,
html[data-theme="light"] .dimensions-table th,
html[data-theme="light"] .dimensions-table td { border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .article__body .article-table tr:nth-child(even) td,
html[data-theme="light"] .dimensions-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.035); }
html[data-theme="light"] .dimensions-table th { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.55); }
/* Article comparison-table header band stays accent-tinted in light mode. */
html[data-theme="light"] .article__body .article-table thead th {
    background: rgba(217,83,34,0.12);
    color: #1a1208;
    border-bottom-color: rgba(0,0,0,0.14);
}

/* Moments lifecycle cards in light mode. */
html[data-theme="light"] .moment-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
    border-top-color: var(--color-accent);
}
html[data-theme="light"] .moment-card:hover { background: rgba(0,0,0,0.04); border-color: rgba(217,83,34,0.35); }
html[data-theme="light"] .moment-card__rows { border-top-color: rgba(0,0,0,0.1); }

/* ---- Heroes & logo strip: dark gradients -> simple flat white in light mode ---- */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .logo-strip { background: #ffffff; }
html[data-theme="light"] .logo-strip {
    border-top-color: rgba(0,0,0,0.08);
    border-bottom-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .logo-strip__text { color: rgba(0,0,0,0.55); }

/* ---- Text that hardcodes cream/white: keep it visible on white ---- */
/* Eyebrows use the brand accent (red) in light mode instead of cream. */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .page-hero .eyebrow,
html[data-theme="light"] .hero__eyebrow { color: var(--color-accent); }
/* Nav links: force dark on the light header. */
html[data-theme="light"] .site-nav__list a { color: #1a1208; }
html[data-theme="light"] .hero__aside-kicker { color: rgba(255,255,255,0.7); }
/* The reversed pull-quote card is meant to INVERT (dark card on the light page),
   so its white heading reads. The generic card override above flattened it; keep
   it dark here. */
html[data-theme="light"] .hero__aside-card--reversed { background: #1a1208; border-left-color: var(--color-accent); }
html[data-theme="light"] .hero__aside-card--reversed .hero__aside-title { color: #ffffff; }
html[data-theme="light"] .hero__aside-card--reversed .hero__aside-body { color: rgba(255,255,255,0.78); }