/* =========================================================
   Shiōrra — Advanced Hematinic Support
   Refined for the rose-magenta product packaging photography.
   Palette:
     • White            #FFFFFF       primary surface
     • Dark Charcoal    #1F1F1F       primary text & hard surfaces
     • Rose Magenta     #C2185B       brand accent (matches packaging)
     • Soft Blush       #FBE5EE       quiet pink surface
     • Sea Green        #3DBDB6       reserved for the wordmark only
   Supporting tones:
     • Warm cream       #F8F4EE       alternating surface
     • Hairline         #E5E5E5
     • Muted text       #6B6B6B
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ============== Brand palette — Shiōrra brand guidelines (3 colors only) ============== */
    /* Light Sea Green #3DBDB6 · White #FFFFFF · Dark Charcoal #282828 */
    --c-white:        #FFFFFF;
    --c-surface-1:    #F7F7F8;       /* near-white, neutral grey */
    --c-surface-2:    #FBFBFC;
    --c-cream:        #F7F7F8;       /* alias — keeps existing class names valid */
    --c-cream-2:      #FBFBFC;
    --c-blush:        #FFFFFF;
    --c-blush-2:      #F7F7F8;
    --c-charcoal:     #282828;       /* brand spec: dark charcoal */
    --c-charcoal-2:   #3A3A3A;
    --c-seagreen:     #3DBDB6;       /* brand sea green — primary accent */
    --c-seagreen-2:   #2FA39C;       /* hover-darken of brand sea green */
    --c-seagreen-deep:#23867F;
    /* Pink/sage tokens kept as ALIASES of brand colors so legacy classes still resolve */
    --c-pink:         #3DBDB6;
    --c-pink-2:       #2FA39C;
    --c-pink-deep:    #23867F;
    --c-sage:         #3DBDB6;
    --c-line:         #E5E5E7;
    --c-line-soft:    #F0F0F2;
    --c-text:         #282828;
    --c-text-2:       #6B6B6B;
    --c-text-3:       #8A8A8A;
    --c-muted:        #6B6B6B;

    --ff-display: "Helvetica Neue", "Helvetica", "Arial Black", sans-serif;
    --ff-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

    --container:        1440px;
    --container-narrow: 1080px;
    --pad-x:            clamp(16px, 4.5vw, 56px);
    --pad-y:            clamp(80px, 11vw, 160px);

    /* ============== 8px spacing system ============== */
    --s-1:  8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;  --s-5: 40px;
    --s-6: 48px;   --s-7: 56px;  --s-8: 64px;  --s-9: 72px;  --s-10: 80px;
    --s-12: 96px;  --s-14: 112px; --s-16: 128px; --s-20: 160px;

    /* Radius scale */
    --r-sm:   8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-pill: 980px;

    /* 12-column grid system */
    --grid-cols:        12;
    --grid-gutter:      clamp(16px, 1.6vw, 24px);
    --grid-row-gap:     clamp(24px, 2.4vw, 40px);
    --col-gap-large:    clamp(32px, 4vw, 80px);

    /* ============== Type scale — Apple-style hierarchy ============== */
    --fs-display: clamp(2.5rem, 6.4vw, 5.5rem);    /* 40 → 88 */
    --fs-h1:      clamp(2rem, 4.8vw, 4rem);         /* 32 → 64 */
    --fs-h2:      clamp(1.75rem, 3.4vw, 2.75rem);   /* 28 → 44 */
    --fs-h3:      clamp(1.25rem, 1.8vw, 1.625rem);  /* 20 → 26 */
    --fs-lead:    clamp(1.0625rem, 1.2vw, 1.1875rem);/* 17 → 19 */
    --fs-body:    1.0625rem;                         /* 17 — Apple body */
    --fs-caption: 0.875rem;                          /* 14 */
    --fs-eyebrow: 0.75rem;                           /* 12 */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}
body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt", "ss01";
    overscroll-behavior: none;
    overflow-x: clip;
}
/* Lenis essentials — disable native scroll-chaining + improve momentum */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Tabular numbers everywhere a stat appears */
.result__pct, .hb-stage .hb, .product__price .amount,
.feat-product__features li, .stand__num, .pillar__num,
.claim__num, .video-card__duration {
    font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
input, textarea { font: inherit; }
::selection { background: var(--c-pink); color: var(--c-white); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-charcoal);
    margin: 0;
    line-height: 1.07;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; line-height: 1.5; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}
.container--narrow { max-width: var(--container-narrow); }

/* ============================================================
   12-COLUMN GRID SYSTEM — strong alignment, consistent gutters
   Use .grid-12 on a parent, then .col-N on each child.
   Row gap uses --grid-row-gap, column gap uses --grid-gutter.
   ============================================================ */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-row-gap);
}
.grid-12--wide-gap { column-gap: var(--col-gap-large); }
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 1100px) {
    .lg-col-12 { grid-column: span 12; }
    .lg-col-6  { grid-column: span 6;  }
    .lg-col-4  { grid-column: span 4;  }
}
@media (max-width: 760px) {
    .md-col-12 { grid-column: span 12; }
    .md-col-6  { grid-column: span 6;  }
}
@media (max-width: 520px) {
    .sm-col-12 { grid-column: span 12; }
}

/* ---------- Type utilities ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);            /* neutral grey — refined Apple style */
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--c-text-2);
}
.eyebrow--cream::before { background: rgba(255,255,255,0.6); }
.eyebrow--cream { color: rgba(255,255,255,0.78); }
.eyebrow--ink::before { background: var(--c-charcoal); }
.eyebrow--ink { color: var(--c-charcoal); }
.eyebrow--pink::before { background: var(--c-pink); }
.eyebrow--pink { color: var(--c-pink); }
.eyebrow--sage::before { background: var(--c-sage); }
.eyebrow--sage { color: var(--c-sage); }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--c-text-2);
    font-weight: 400;
}
.italic { font-style: italic; font-weight: 400; }
.accent-pink { color: var(--c-pink); }
.bold-pink { color: var(--c-pink); font-weight: inherit; }    /* inherits parent weight — refined */

/* ============================================================
   E-COMMERCE COMPONENTS — stars, trust, subscribe, sticky buy
   ============================================================ */

/* Star rating + review count inline */
.stars {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-charcoal);
}
.stars__icons {
    display: inline-flex;
    gap: 2px;
    color: #F4B400;          /* warm gold for star ratings */
    font-size: 0.95em;
    letter-spacing: 1px;
    line-height: 1;
}
.stars__count {
    color: var(--c-muted);
    font-weight: 500;
    font-size: 0.92rem;
}
.stars__count a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.stars__count a:hover { color: var(--c-pink); }

/* Customer count chip — refined neutral */
.customers {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--c-surface-1);
    color: var(--c-charcoal);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0;
    border: 1px solid var(--c-line-soft);
}
.customers__avatars {
    display: inline-flex;
    align-items: center;
}
.customers__avatars img {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--c-surface-1);
    margin-left: -8px;
    object-fit: cover;
}
.customers__avatars img:first-child { margin-left: 0; }

/* Trust row — quiet band of trust signals under hero */
.trust-row {
    background: var(--c-white);
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 24px 0;
}
.trust-row__inner {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 16px;
    align-items: center;
}
.trust-row__inner > .trust-item { grid-column: span 3; }    /* 4 items × 3 cols */
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-charcoal);
}
.trust-item .ico { width: 20px; height: 20px; color: var(--c-charcoal); flex-shrink: 0; }
.trust-item__txt {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--c-charcoal);
}
.trust-item__txt small {
    display: block;
    font-weight: 400;
    font-family: var(--ff-body);
    color: var(--c-text-2);
    font-size: 0.75rem;
    letter-spacing: 0;
    margin-top: 2px;
}
@media (max-width: 760px) {
    .trust-row__inner > .trust-item { grid-column: span 6; }
}

/* Press logos band — "As recommended by" */
.press {
    background: var(--c-white);
    padding: 48px 0;
    border-bottom: 1px solid var(--c-line-soft);
}
.press__label {
    text-align: center;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
    margin-bottom: 32px;
}
.press__logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}
.press__logo {
    text-align: center;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.4vw, 1.3rem);
    letter-spacing: 0.04em;
    color: var(--c-charcoal);
    opacity: 0.45;
    transition: opacity .25s;
}
.press__logo:hover { opacity: 0.85; }
.press__logo em { font-style: italic; font-weight: 500; }
@media (max-width: 720px) {
    .press__logos { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
    .press__logo { font-size: 0.92rem; }
}
@media (max-width: 420px) {
    .press__logos { grid-template-columns: repeat(2, 1fr); }
}

/* Subscribe & Save toggle */
.subscribe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.subscribe__option {
    border: 1.5px solid var(--c-line);
    border-radius: 12px;
    padding: 18px 16px;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    position: relative;
}
.subscribe__option:hover { border-color: var(--c-charcoal); }
.subscribe__option--active {
    border-color: var(--c-charcoal);
    background: var(--c-surface-1);
}
.subscribe__option--active::after {
    content: "✓";
    position: absolute;
    top: 12px; right: 12px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--c-pink);
    color: var(--c-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
}
.subscribe__option .label {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--c-charcoal);
    margin-bottom: 4px;
}
.subscribe__option .save {
    display: inline-block;
    background: var(--c-pink);
    color: var(--c-white);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: 1px;
}
.subscribe__option .price {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-charcoal);
}
.subscribe__option .strike {
    color: var(--c-muted);
    text-decoration: line-through;
    font-size: 0.82rem;
    margin-left: 6px;
}
.subscribe__option .note {
    font-size: 0.78rem;
    color: var(--c-muted);
    margin-top: 4px;
}

/* Sticky add-to-cart bar (bottom of viewport on product page) */
.sticky-buy {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--c-line);
    padding: 14px 0;
    z-index: 40;
    transform: translateY(110%);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -10px 30px rgba(31,31,31,0.06);
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}
.sticky-buy__thumb {
    width: 48px; height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.sticky-buy__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-buy__copy { font-family: var(--ff-display); }
.sticky-buy__copy .name { font-weight: 700; font-size: 0.95rem; color: var(--c-charcoal); }
.sticky-buy__copy .price { font-weight: 600; font-size: 0.86rem; color: var(--c-muted); }
.sticky-buy .btn { padding: 14px 26px; font-size: 0.86rem; }
@media (max-width: 600px) {
    .sticky-buy__copy .price { display: none; }
    .sticky-buy .btn { padding: 12px 20px; font-size: 0.78rem; }
}

/* Back-to-top floater */
.back-to-top {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-charcoal);
    color: var(--c-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 35;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(31,31,31,0.18);
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--c-pink);
    transform: translateY(-3px) scale(1);
    color: var(--c-white);
}
.back-to-top .ico { width: 18px; height: 18px; }
@media (max-width: 600px) {
    .back-to-top { bottom: 80px; right: 16px; width: 42px; height: 42px; }
}

/* Cart count badge — already exists, just refine */
.nav__icons .cart-dot {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    background: var(--c-pink);
    color: var(--c-white);
    border-radius: 999px;
    border: 2px solid var(--c-white);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.62rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Aggregate review header (used on Reviews page) */
.review-agg {
    text-align: center;
    padding: clamp(112px, 13vw, 160px) 0 clamp(56px, 8vw, 88px);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line-soft);
}
.review-agg__score {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 1;
    color: var(--c-charcoal);
    letter-spacing: -0.04em;
}
.review-agg__stars {
    color: #F4B400;
    font-size: 1.4rem;
    letter-spacing: 4px;
    margin: 12px 0;
}
.review-agg__count {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-muted);
}

/* ---------- Buttons — Apple-style pill, 48px height ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;                       /* fixed 8pt height */
    padding: 0 24px;
    border-radius: var(--r-pill);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.875rem;                /* 14px — refined */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        color .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        background .35s ease;
    border: 1.5px solid var(--c-charcoal);
    background: var(--c-charcoal);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    white-space: nowrap;
}
/* Fill-from-left swipe (the new pretty hover) */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-pink);
    transform: translateX(-101%);
    transition: transform .55s cubic-bezier(.7, 0, .15, 1);
    z-index: -1;
}
/* Arrow */
.btn::after {
    content: "→";
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    display: inline-block;
}
.btn:hover {
    transform: translateY(-3px);
    border-color: var(--c-pink);
    box-shadow:
        0 1px 0 rgba(194,24,91,0.12),
        0 12px 24px rgba(194,24,91,0.18),
        0 22px 48px rgba(194,24,91,0.14);
    color: var(--c-white);
}
.btn:hover::before { transform: translateX(0); }
.btn:hover::after  { transform: translateX(8px); }
.btn:active { transform: translateY(-1px); }

/* Ghost — outlined charcoal, fills with charcoal first then arrow shifts */
.btn--ghost {
    background: transparent;
    color: var(--c-charcoal);
}
.btn--ghost::before { background: var(--c-charcoal); }
.btn--ghost:hover {
    color: var(--c-white);
    border-color: var(--c-charcoal);
    box-shadow: 0 18px 36px rgba(31,31,31,0.20);
}

/* Pink primary — fills with charcoal on hover (inverse) */
.btn--pink {
    background: var(--c-pink);
    border-color: var(--c-pink);
}
.btn--pink::before { background: var(--c-charcoal); }
.btn--pink:hover {
    border-color: var(--c-charcoal);
    box-shadow: 0 18px 36px rgba(31,31,31,0.22);
}

/* Cream button (used on dark CTA bands) — fills with white→charcoal text */
.btn--cream {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-charcoal);
}
.btn--cream::before { background: var(--c-pink); }
.btn--cream:hover {
    color: var(--c-white);
    border-color: var(--c-pink);
}

/* ---------- Sections ---------- */
.section { padding: var(--pad-y) 0; position: relative; }
.section--cream { background: var(--c-cream); }
.section--blush { background: var(--c-surface-1); }    /* refined → neutral light gray */
.section--pink {
    background: var(--c-pink);
    color: var(--c-white);
}
.section--charcoal {
    background: var(--c-charcoal);
    color: var(--c-white);
}
.section--pink h1, .section--pink h2, .section--pink h3,
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 {
    color: var(--c-white);
}

.rule { height: 1px; background: var(--c-line); margin: clamp(40px, 5vw, 64px) 0; }

/* ============================================================
   PROMO STRIP
   ============================================================ */
.promo {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: 11px 0;
    text-align: center;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.2;
}
.promo .accent { color: var(--c-pink); font-weight: 700; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--c-line);
    transition: box-shadow .35s ease, background .35s ease, padding .25s ease;
}
.site-header.is-scrolled {
    background: rgba(255,255,255,0.96);
    box-shadow:
        0 1px 0 rgba(31,31,31,0.04),
        0 8px 24px rgba(31,31,31,0.06);
}
.nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: 10px 0;
}
.nav__logo img { height: 28px; width: auto; display: block; }

/* Centered, uppercase, bold nav menu */
.nav__menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
}
.nav__menu a {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-charcoal);
    transition: color .25s ease;
    padding: 6px 0;
    position: relative;
    line-height: 1;
}
.nav__menu a:hover, .nav__menu a.active { color: var(--c-pink); }

/* --- Shop dropdown -------------------------------------------- */
.nav__has-sub { position: relative; }
.nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav__sub-caret {
    transition: transform .25s ease;
    flex: 0 0 auto;
    margin-top: 1px;
}
.nav__has-sub:hover .nav__sub-caret,
.nav__has-sub.is-open .nav__sub-caret { transform: rotate(180deg); }

.nav__sub {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 18px 40px rgba(40,40,40,.10), 0 2px 6px rgba(40,40,40,.04);
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s;
    z-index: 60;
}
.nav__sub::before {
    content: "";
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: #fff;
    border-left: 1px solid var(--c-line);
    border-top: 1px solid var(--c-line);
}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub,
.nav__has-sub.is-open > .nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.nav__sub li { list-style: none; }
.nav__sub a {
    display: block;
    padding: 10px 14px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    border-radius: 8px;
    line-height: 1.25;
    transition: background .18s ease, color .18s ease;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover,
.nav__sub a:focus-visible {
    background: var(--c-cream);
    color: var(--c-pink);
}

/* Cleaner growing underline */
.nav__menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: var(--c-pink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__menu a:hover::after,
.nav__menu a.active::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.nav__cta .btn {
    padding: 13px 22px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.nav__icons {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 14px;
    border-right: 1px solid var(--c-line);
    margin-right: 4px;
}
.nav__icons a {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-charcoal);
    border-radius: 50%;
    transition: background .25s, color .25s;
    position: relative;
}
.nav__icons a .ico { width: 18px; height: 18px; }
.nav__icons a:hover { background: var(--c-cream); color: var(--c-pink); }
.nav__icons .cart-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-pink);
}
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--c-charcoal); }

@media (max-width: 980px) {
    .nav { grid-template-columns: auto auto; justify-content: space-between; }
    .nav__menu, .nav__cta .btn, .nav__icons { display: none; }
    .nav__toggle { display: flex; }
    .nav.is-open .nav__menu {
        display: flex;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(14px);
        padding: 28px var(--pad-x);
        gap: 4px;
        border-top: 1px solid var(--c-line);
    }
    .nav.is-open .nav__menu a {
        font-size: 0.86rem;
        padding: 14px 0;
        border-bottom: 1px solid var(--c-line);
    }
    .nav.is-open .nav__menu a::after { display: none; }
    .nav.is-open .nav__menu li:last-child a { border-bottom: 0; }

    /* Dropdown collapses inline inside the mobile drawer */
    .nav.is-open .nav__has-sub { display: block; border-bottom: 1px solid var(--c-line); }
    .nav.is-open .nav__has-sub > .nav__sub-toggle { border-bottom: 0; }
    .nav.is-open .nav__sub {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 12px 14px;
        margin: -6px 0 0;
        min-width: 0;
        gap: 0;
        transition: none;
    }
    .nav.is-open .nav__sub::before { display: none; }
    .nav.is-open .nav__sub a {
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        padding: 10px 0;
        border-radius: 0;
        color: var(--c-text-2);
    }
    .nav.is-open .nav__sub a:hover { background: transparent; color: var(--c-pink); }
}
@media (max-width: 480px) {
    .nav { padding: 14px 0; }
    .nav__logo img { height: 28px; }
    .promo { font-size: 0.66rem; letter-spacing: 0.18em; padding: 9px 0; }
}

/* ============================================================
   HERO — editorial split with real lifestyle photo
   ============================================================ */
.hero {
    padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 110px);
    background: var(--c-white);
}
/* Hero — 6/6 split on the 12-col grid */
.hero__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.hero__copy   { grid-column: span 6; max-width: 540px; }
.hero__visual { grid-column: span 6; }
.hero__eyebrow { margin-bottom: clamp(20px, 3vw, 32px); }
.hero h1 {
    font-size: var(--fs-display);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
    margin-bottom: clamp(20px, 3vw, 32px);
    max-width: 14ch;
    text-wrap: balance;
}
.hero h1 .accent { color: var(--c-pink); }
.hero__lead {
    font-size: var(--fs-lead);
    color: var(--c-muted);
    margin-bottom: clamp(24px, 3.6vw, 36px);
    max-width: 480px;
    line-height: 1.6;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.hero__bullets {
    display: flex;
    gap: 14px 22px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
    list-style: none;
}
.hero__bullets li {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hero__bullets li::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-pink);
    flex-shrink: 0;
}
.hero__visual {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-surface-1);
    max-width: 640px;
    margin-left: auto;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.03),
        0 16px 36px rgba(0,0,0,0.06);
}
.hero__visual img {
    width: 100%;
    height: auto;
    display: block;
}
.hero__badge {
    position: absolute;
    bottom: 20px; left: 20px;
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: 12px 20px;
    border-radius: 999px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 2;
    animation: float-soft 5.5s ease-in-out infinite;
    max-width: calc(100% - 40px);
    line-height: 1.3;
}
.hero__badge .accent { color: var(--c-pink); }

@media (max-width: 900px) {
    .hero__copy, .hero__visual { grid-column: 1 / -1; }
    .hero__copy   { max-width: 620px; }
    .hero__visual { max-width: 540px; margin: 0 auto; }
    .hero h1 { max-width: 18ch; }
}
@media (max-width: 520px) {
    .hero__visual { border-radius: 14px; max-width: 100%; }
    .hero__bullets { gap: 10px 16px; }
    .hero__bullets li { font-size: 0.72rem; letter-spacing: 0.10em; }
    .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   CLAIMS SECTION — "Why moms trust Shiōrra"
   Numbered feature cards with rich hover animations
   ============================================================ */
.claims {
    padding: clamp(80px, 10vw, 130px) 0;
    background: var(--c-cream);
    position: relative;
    overflow: hidden;
}
.claims__head {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 24px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.claims__head__intro { grid-column: span 6; }
.claims__head__lede  { grid-column: span 6; }
.claims__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin-top: 14px;
    max-width: 16ch;
    text-wrap: balance;
}
.claims__head h2 .italic { color: var(--c-pink); }

/* Editorial lede: stat number + tight copy + chip row */
.claims__head__lede {
    padding-top: clamp(20px, 2.5vw, 32px);
    border-top: 1px solid var(--c-line);
}
.claims__stat-line {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(20px, 2.4vw, 32px);
    align-items: start;
    margin: 0 0 clamp(24px, 3vw, 36px);
}
.claims__stat {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 4.6vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--c-seagreen);
    font-variant-numeric: tabular-nums;
    align-self: start;
    white-space: nowrap;
}
.claims__stat-plus {
    font-size: 0.5em;
    vertical-align: 0.45em;
    margin-left: 2px;
    font-weight: 600;
    color: var(--c-charcoal);
}
.claims__stat-copy {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.5;
    color: var(--c-text);
    max-width: 38ch;
    padding-top: clamp(6px, 0.6vw, 10px);
}

.claims__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.claims__tags li {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    padding: 8px 14px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    background: var(--c-white);
    transition: border-color .25s, color .25s, background .25s;
}
.claims__tags li:hover {
    border-color: var(--c-charcoal);
    color: var(--c-seagreen);
}

@media (max-width: 900px) {
    .claims__head__intro,
    .claims__head__lede { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .claims__stat-line { grid-template-columns: 1fr; row-gap: 12px; }
    .claims__stat { font-size: 2.4rem; }
}

.claims__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
}
.claims__grid > .claim { grid-column: span 3; }    /* 4 cards × 3 cols = 12 */
.claim {
    position: relative;
    background: var(--c-white);
    border-radius: var(--r-lg);            /* 16px — consistent */
    padding: 32px 28px;                    /* 8pt aligned */
    border: 1px solid var(--c-line-soft);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s;
    overflow: hidden;
    isolation: isolate;
    cursor: default;
}
.claim::before {
    /* Pink accent that fills from the bottom on hover */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--c-pink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.claim:hover {
    transform: translateY(-4px);            /* subtle Apple-style lift */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 10px 30px rgba(0,0,0,0.06);
    border-color: var(--c-line);
}
.claim:hover::before { transform: scaleX(1); }
.claim__num {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    color: var(--c-text-2);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.claim__num::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-line-soft);
}
.claim__icon {
    width: 72px; height: 72px;
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    color: var(--c-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: background .4s, color .4s, transform .4s;
}
.claim:hover .claim__icon {
    background: var(--c-charcoal);
    color: var(--c-seagreen);
    transform: scale(1.04);
}
.claim__icon .ico { width: 38px; height: 38px; }
.claim h3 {
    font-size: var(--fs-h3);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-charcoal);
    margin-bottom: 12px;
}
.claim h3 .accent { color: var(--c-pink); }
.claim p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--c-text-2);
}

@media (max-width: 1100px) { .claims__grid > .claim { grid-column: span 6; } }
@media (max-width: 560px) {
    .claims__grid > .claim { grid-column: 1 / -1; padding: 28px 24px; }
    .claim__icon { width: 60px; height: 60px; margin-bottom: 20px; }
    .claim__icon .ico { width: 28px; height: 28px; }
}

/* ============================================================
   SHOP / FEATURE GRID — concerns
   ============================================================ */
.concerns__head {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 24px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.concerns__head > div   { grid-column: span 7; }
.concerns__head > .lead { grid-column: span 5; }
.concerns__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    max-width: 16ch;
    margin-top: 14px;
    text-wrap: balance;
}
.concerns__head h2 .italic { color: var(--c-pink); }
.concerns__head .lead { max-width: 460px; }
@media (max-width: 760px) {
    .concerns__head { align-items: start; }
    .concerns__head > div, .concerns__head > .lead { grid-column: 1 / -1; }
}

.concerns__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
}
.concerns__grid > .concern-card { grid-column: span 6; }
.concern-card {
    background: var(--c-white);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--c-line-soft);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
}
.concern-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.06);
    border-color: var(--c-line);
}
.concern-card__visual {
    aspect-ratio: 5 / 4;          /* matches new image source ratio — tiny crop */
    overflow: hidden;
    background: var(--c-cream);
}
.concern-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.concern-card:hover .concern-card__visual img { transform: scale(1.06); filter: saturate(1.08); }
.concern-card__body {
    padding: clamp(28px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.concern-card .question {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    color: var(--c-charcoal);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.concern-card .answer {
    color: var(--c-muted);
    font-size: 1.025rem;
    line-height: 1.6;
    margin-bottom: 26px;
}
.concern-card .more {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-pink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.concern-card .more::after { content: "→"; transition: transform .25s; }
.concern-card:hover .more::after { transform: translateX(4px); }

@media (max-width: 900px) {
    .concerns__grid > .concern-card { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .concern-card { grid-template-columns: 1fr; }
    .concern-card__visual { aspect-ratio: 5 / 4; }
}

/* ============================================================
   PRODUCT detail
   ============================================================ */
.product__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.product__visual { grid-column: span 7; }
.product__copy   { grid-column: span 5; }
.product__visual {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-surface-1);
    max-width: 660px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.03),
        0 16px 40px rgba(0,0,0,0.06);
}
.product__visual img {
    width: 100%;
    height: auto;
    display: block;
}
.product__visual .badge {
    position: absolute;
    top: 24px; left: 24px;
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 2;
}
.product__copy h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 18px 0 22px;
}
.product__copy h2 .italic { color: var(--c-pink); }
.product__copy .lead { margin-bottom: 28px; }
.product__price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--c-line);
}
.product__price .amount {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    color: var(--c-charcoal);
    letter-spacing: -0.02em;
}
.product__price .strike {
    color: var(--c-muted);
    text-decoration: line-through;
    font-size: 1.05rem;
}
.product__price .save {
    background: var(--c-pink);
    color: var(--c-white);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.product__list {
    margin: 0 0 32px;
    display: grid;
    gap: 14px;
}
.product__list li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-charcoal);
}
.product__list li::before {
    content: "";
    width: 6px; height: 6px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--c-charcoal);
    flex-shrink: 0;
}
.product__cta { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .product__visual, .product__copy { grid-column: 1 / -1; }
    .product__visual { max-width: 540px; margin: 0 auto; }
}
@media (max-width: 520px) {
    .product__cta .btn { flex: 1 1 100%; justify-content: center; }
    .product__price { flex-wrap: wrap; gap: 10px; }
}

/* ============================================================
   SCIENCE — chelation diagram + 3-step mechanism + chart
   ============================================================ */
.science {
    background: var(--c-white);
    padding: var(--pad-y) 0;
    position: relative;
}
.science__head {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.science__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 16px;
    max-width: 18ch;
}
.science__head h2 .italic { color: var(--c-pink); }
.science__head .lead { max-width: 540px; }

.science__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.science__row--reverse > *:first-child { order: 2; }
.science__visual {
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-cream);
}
.science__visual img { width: 100%; height: auto; display: block; }
.science__copy h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 14px 0 18px;
}
.science__copy h3 .italic { color: var(--c-pink); }
.science__copy p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-muted);
    margin-bottom: 16px;
}
.science__copy .footnote {
    margin-top: 18px;
    font-family: var(--ff-display);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 700;
    padding-top: 18px;
    border-top: 1px solid var(--c-line);
}

.science__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 36px);
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 2px solid var(--c-charcoal);
}
.sci-step {
    background: var(--c-white);
    padding: 36px 32px;
    border-radius: 12px;
    border: 1px solid var(--c-line);
    transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, border-color .45s;
}
.sci-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(31,31,31,0.10);
    border-color: transparent;
}
.sci-step__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--c-pink);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px;
}
.sci-step__num::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.sci-step h4 {
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}
.sci-step h4 .italic { color: var(--c-pink); }
.sci-step p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--c-muted);
    margin-bottom: 12px;
}
.sci-step .ref {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-pink);
}
@media (max-width: 900px) {
    .science__head { grid-template-columns: 1fr; gap: 24px; }
    .science__row { grid-template-columns: 1fr; }
    .science__row--reverse > *:first-child { order: 0; }
    .science__steps { grid-template-columns: 1fr; }
}

/* ============================================================
   TRUST GRID — apothecary-style 3-column static trust bar
   ============================================================ */
.trust-grid {
    background: var(--c-cream);
    padding: clamp(96px, 12vw, 160px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.trust-grid__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 96px);
}
.trust-grid__head .eyebrow {
    display: inline-block;
    margin-bottom: clamp(16px, 1.6vw, 24px);
}
.trust-grid__head h2 {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    margin: 0;
}
.trust-grid__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: clamp(40px, 5vw, 64px);
    align-items: start;
}
.trust-cell {
    border-top: 1px solid var(--c-charcoal);
    padding-top: clamp(20px, 2vw, 28px);
}
.trust-cell__num {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--c-charcoal);
    line-height: 1;
    margin-bottom: clamp(20px, 2.6vw, 32px);
    letter-spacing: -0.022em;
}
.trust-cell__title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    color: var(--c-charcoal);
    margin: 0 0 12px;
    letter-spacing: -0.018em;
    line-height: 1.2;
}
.trust-cell__body {
    font-family: var(--ff-body);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--c-text-2);
    max-width: 36ch;
}
@media (max-width: 900px) {
    .trust-grid__cols { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ============================================================
   TIMELINE — "You're this close to feeling stronger"
   Horizontal track with 3 milestone tick marks
   ============================================================ */
.timeline-section {
    background: var(--c-surface-1);
    padding: var(--pad-y) 0;
}
.timeline-section__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: clamp(40px, 5vw, 64px);
    align-items: start;
}
.timeline-section__head { grid-column: span 4; }
.timeline-section__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
    margin-bottom: 28px;
    text-wrap: balance;
}
.timeline-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--c-pink);
    text-decoration: none;
    transition: color .25s, transform .25s;
}
.timeline-cta::after {
    content: "→";
    transition: transform .25s ease;
    display: inline-block;
}
.timeline-cta:hover { color: var(--c-pink-deep); }
.timeline-cta:hover::after { transform: translateX(8px); }

.timeline-track {
    grid-column: span 8;
    position: relative;
}
.timeline-milestones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    position: relative;
}
/* Horizontal line passes BEHIND the numbered circles */
.timeline-milestones::before {
    content: "";
    position: absolute;
    top: 19px;                    /* line aligns to vertical center of 38px circles */
    left: 19px; right: 19px;       /* indent so line doesn't overshoot first/last circle */
    height: 1px;
    background: var(--c-line);
    z-index: 0;
}
.milestone {
    position: relative;
    padding-top: 64px;             /* 38px circle + 26px gap */
}

/* Numbered step circle */
.milestone__num {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--c-charcoal);
    border-radius: 50%;
    background: var(--c-surface-1);   /* matches section bg so line "passes through" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--c-charcoal);
    letter-spacing: 0.02em;
    z-index: 1;
    transition: background .35s, color .35s, border-color .35s;
}
/* Featured (final) milestone gets the pink-filled circle */
.milestone--featured .milestone__num {
    background: var(--c-pink);
    border-color: var(--c-pink);
    color: var(--c-white);
}
.milestone:hover .milestone__num {
    background: var(--c-charcoal);
    color: var(--c-white);
}
.milestone--featured:hover .milestone__num {
    background: var(--c-pink-deep);
    border-color: var(--c-pink-deep);
}

/* Time-stamp eyebrow above heading (small caps) */
.milestone__time {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-2);
    margin-bottom: 10px;
}
.milestone__heading {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    color: var(--c-charcoal);
    letter-spacing: -0.018em;
    line-height: 1.18;
    margin-bottom: 10px;
    text-wrap: balance;
}
.milestone__tagline {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--c-text-2);
    letter-spacing: -0.005em;
    margin-bottom: 20px;
    line-height: 1.4;
}
.milestone__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.milestone__list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    color: var(--c-charcoal);
    font-size: 0.95rem;
    line-height: 1.5;
}
.milestone__list li::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 4px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2185B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

@media (max-width: 900px) {
    .timeline-section__head { grid-column: 1 / -1; }
    .timeline-track { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .timeline-milestones {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* mobile: rotate timeline → vertical line through left side of circles */
    .timeline-milestones::before {
        top: 19px; bottom: 19px;
        left: 19px; right: auto;
        width: 1px; height: auto;
    }
    .milestone {
        padding-top: 0;
        padding-left: 60px;          /* 38 + 22 gap */
        min-height: 38px;
    }
    .milestone__num {
        top: 0; left: 0;
    }
}

/* ============================================================
   COMPARISON GRID — feature checkmark grid (3 products)
   ============================================================ */
.compare-grid-section {
    background: var(--c-white);
    padding: var(--pad-y) 0;
}
.compare-grid-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 80px);
}
.compare-grid-section__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0 14px;
}
.compare-grid-section__head h2 .bold-pink { color: var(--c-pink); }
.compare-grid-section__head .eyebrow { justify-content: center; }
.compare-grid-section__head .eyebrow::before { display: none; }

.compare-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    background: var(--c-white);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}

/* Each cell — base styling */
.compare-grid__cell {
    padding: 24px 20px;
    border-right: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
    position: relative;
}
.compare-grid__cell:nth-child(4n) { border-right: 0; }
.compare-grid__cell:nth-last-child(-n+4) { border-bottom: 0; }

/* Highlighted Shiōrra column (every 4n+2 cell) */
.compare-grid__cell--ours {
    background: var(--c-surface-1);
}

/* "Most popular" pill above ours product */
.compare-grid__cell--ours.compare-grid__cell--head::before {
    content: "MOST POPULAR";
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-pink);
    color: var(--c-white);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Header row product cells */
.compare-grid__cell--head {
    flex-direction: column;
    gap: 14px;
    padding: 36px 16px 24px;
    min-height: 220px;
    justify-content: flex-end;
}
.compare-grid__cell--head img {
    width: 100%;
    max-width: 130px;
    height: auto;
    object-fit: contain;
}
.compare-grid__cell--head .name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.25;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
}

/* Top-left empty cell */
.compare-grid__cell--corner {
    background: var(--c-white);
    border-right: 1px solid var(--c-line-soft);
}

/* Feature label (left column) */
.compare-grid__cell--label {
    justify-content: flex-start;
    text-align: left;
    padding: 24px 28px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-charcoal);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.compare-grid__cell--label small {
    display: block;
    font-weight: 400;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    color: var(--c-text-2);
    margin-top: 4px;
    letter-spacing: 0;
}

/* Check / cross icons */
.compare-mark {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.compare-mark--yes {
    background: var(--c-pink);
    color: var(--c-white);
}
.compare-mark--no {
    background: var(--c-line-soft);
    color: var(--c-text-3);
}
.compare-mark--partial {
    background: var(--c-white);
    color: var(--c-text-3);
    border: 1.5px solid var(--c-line);
}

@media (max-width: 760px) {
    .compare-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        font-size: 0.82rem;
    }
    .compare-grid__cell { padding: 16px 8px; min-height: 64px; }
    .compare-grid__cell--label { padding: 16px 14px; font-size: 0.82rem; }
    .compare-grid__cell--head { padding: 28px 8px 16px; min-height: 180px; }
    .compare-grid__cell--head .name { font-size: 0.74rem; }
    .compare-grid__cell--head img { max-width: 80px; }
    .compare-mark { width: 26px; height: 26px; font-size: 12px; }
    .compare-grid__cell--ours.compare-grid__cell--head::before {
        font-size: 0.56rem; padding: 3px 8px;
    }
}

/* ============================================================
   COMPARISON TABLE — Bisglycinate vs Conventional Iron
   ============================================================ */
.compare {
    background: var(--c-cream);
    padding: var(--pad-y) 0;
}
.compare__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 72px);
}
.compare__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0;
}
.compare__head h2 .italic { color: var(--c-pink); }
.compare__head .eyebrow { justify-content: center; }
.compare__head .eyebrow::before { display: none; }

.compare__table {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    border-collapse: collapse;
    background: var(--c-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(31,31,31,0.06);
    border: 1px solid var(--c-line);
}
.compare__table thead th {
    background: var(--c-charcoal);
    color: var(--c-white);
    text-align: left;
    padding: 22px 28px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.compare__table thead th.bs { background: var(--c-pink); }
.compare__table tbody td {
    padding: 20px 28px;
    border-top: 1px solid var(--c-line);
    font-size: 1.02rem;
    color: var(--c-charcoal);
    vertical-align: middle;
}
.compare__table tbody td:first-child {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-charcoal);
    letter-spacing: -0.005em;
    background: var(--c-cream);
}
.compare__table .bs-cell {
    color: var(--c-pink);
    font-weight: 700;
    font-family: var(--ff-display);
}
.compare__table .conv-cell {
    color: var(--c-muted);
}
.compare__cite {
    text-align: center;
    margin-top: 18px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
}
@media (max-width: 700px) {
    .compare__table thead th,
    .compare__table tbody td { padding: 14px 16px; font-size: 0.92rem; }
}

/* ============================================================
   HEMOGLOBIN TIMELINE
   ============================================================ */
.hb-timeline {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: var(--pad-y) 0;
}
.hb-timeline__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 64px);
}
.hb-timeline__head .eyebrow {
    justify-content: center;
    color: var(--c-pink);
}
.hb-timeline__head .eyebrow::before { display: none; }
.hb-timeline__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-white);
    margin: 16px 0 16px;
}
.hb-timeline__head h2 .italic { color: var(--c-pink); }
.hb-timeline__head .lead { color: rgba(255,255,255,0.78); }
.hb-timeline__chart {
    background: var(--c-white);
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 36px);
    margin-bottom: clamp(48px, 6vw, 72px);
    overflow: hidden;
}
.hb-timeline__chart img { width: 100%; height: auto; display: block; }

.hb-timeline__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);   /* 5 stages — keeps natural spacing */
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
}
.hb-stage {
    padding: 24px 22px;
    border-top: 1px solid rgba(255,255,255,0.20);
    transition: border-color .35s, background .35s;
}
.hb-stage:hover {
    background: rgba(255,255,255,0.04);
    border-top-color: var(--c-pink);
}
.hb-stage .when {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--c-pink);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.hb-stage .hb {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--c-white);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.hb-stage .hb .unit {
    font-size: 0.6em;
    color: rgba(255,255,255,0.6);
    margin-left: 4px;
}
.hb-stage h4 {
    color: var(--c-white);
    font-size: 1rem;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.hb-stage p {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    line-height: 1.55;
}
@media (max-width: 1024px) { .hb-timeline__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .hb-timeline__cards { grid-template-columns: 1fr; } }

/* ============================================================
   INGREDIENTS — split with real photo
   ============================================================ */
.ingredients__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.ingredients__visual { grid-column: span 6; }
.ingredients__copy   { grid-column: span 6; }
@media (max-width: 900px) {
    .ingredients__visual, .ingredients__copy { grid-column: 1 / -1; }
    .ingredients__visual { max-width: 540px; margin: 0 auto; }
}
.ingredients__visual {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-surface-1);
    max-width: 660px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.03),
        0 16px 40px rgba(0,0,0,0.06);
}
.ingredients__visual img { width: 100%; height: auto; display: block; }
.ingredients__copy h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 14px 0 22px;
}
.ingredients__copy h2 .italic { color: var(--c-pink); }
.ingredients__list {
    margin-top: clamp(28px, 4vw, 36px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 0;
    border-top: 2px solid var(--c-charcoal);
}
.ingredient {
    padding: 22px 0;
    border-bottom: 1px solid var(--c-line);
}
.ingredient:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 600px) {
    .ingredients__list { grid-template-columns: 1fr; }
    .ingredient:nth-last-of-type(2) { border-bottom: 1px solid var(--c-line); }
}
.ingredient h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-charcoal);
    font-size: 1.18rem;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.ingredient h4 .latin {
    display: block;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    color: var(--c-pink);
    text-transform: uppercase;
    margin-top: 4px;
}
.ingredient p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--c-muted);
    margin-top: 8px;
}
@media (max-width: 800px) {
    .ingredients__grid { grid-template-columns: 1fr; }
    .ingredients__list { grid-template-columns: 1fr; }
    .ingredient:nth-child(odd) { padding-right: 0; border-right: 0; }
    .ingredient:nth-child(even) { padding-left: 0; }
}

/* ============================================================
   CLINICAL RESULTS
   ============================================================ */
.results__head {
    text-align: center;
    margin-bottom: clamp(50px, 6vw, 80px);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.results__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-white);
    margin: 16px 0 14px;
}
.results__head h2 .italic { color: var(--c-pink); }
.results__head .lead { color: rgba(255,255,255,0.78); }

.results__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-row-gap);
}
.results__grid > .result { grid-column: span 3; }
.result {
    text-align: left;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.20);
}
.result__pct {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(3rem, 5.6vw, 4.8rem);
    line-height: 1;
    color: var(--c-pink);
    letter-spacing: -0.04em;
    margin-bottom: 18px;
}
.result__pct .unit {
    font-size: 0.42em;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-left: 4px;
    vertical-align: 8px;
}
.result h3 {
    color: var(--c-white);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.result p {
    color: rgba(255,255,255,0.72);
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 10px;
}
.result__cite {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 0.74rem !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.10);
    margin-top: 14px;
}
.results__foot {
    text-align: center;
    margin-top: clamp(40px, 5vw, 64px);
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--ff-display);
    font-weight: 500;
}
@media (max-width: 1100px) { .results__grid > .result { grid-column: span 6; } }
@media (max-width: 600px)  { .results__grid > .result { grid-column: 1 / -1; } }

/* ============================================================
   DOCTOR / EXPERT CALLOUT (real photo)
   ============================================================ */
.expert {
    padding: 0;
    background: var(--c-surface-1);
}
.expert__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 0;
}
.expert__visual {
    overflow: hidden;
    background: var(--c-surface-1);
}
.expert__visual img { width: 100%; height: auto; display: block; }
.expert__copy {
    padding: clamp(48px, 7vw, 110px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.expert__copy h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 14px 0 22px;
}
.expert__copy h2 .italic { color: var(--c-pink); }
.expert__copy .lead { margin-bottom: 28px; }
.expert__cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .expert__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tmls__head {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 24px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.tmls__head > div   { grid-column: span 7; }
.tmls__head > .lead { grid-column: span 5; }
.tmls__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin-top: 14px;
    max-width: 16ch;
    text-wrap: balance;
}
.tmls__head h2 .italic { color: var(--c-pink); }
.tmls__head .lead { max-width: 460px; }
@media (max-width: 760px) {
    .tmls__head { align-items: start; }
    .tmls__head > div, .tmls__head > .lead { grid-column: 1 / -1; }
}
.tmls__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
}
.tmls__grid > .tml-card { grid-column: span 4; }
.tml-card {
    background: var(--c-white);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s;
}
.tml-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 10px 24px rgba(0,0,0,0.05);
    border-color: var(--c-line);
}
.tml-card__rating {
    color: var(--c-pink);
    font-size: 1rem;
    letter-spacing: 4px;
}
.tml-card__quote {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 1.4;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
    flex-grow: 1;
    text-wrap: pretty;
}
.tml-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
}
.tml-card__author img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.tml-card__author .name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--c-charcoal);
}
.tml-card__author .role {
    font-size: 0.92rem;
    color: var(--c-muted);
    margin-top: 2px;
}
@media (max-width: 900px) { .tmls__grid > .tml-card { grid-column: 1 / -1; } }

/* ============================================================
   ABOUT — split (mission/vision) + brand-story prose
   ============================================================ */
.about__split {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: var(--grid-row-gap);
}
.about__split > * { grid-column: span 6; }
@media (max-width: 760px) { .about__split > * { grid-column: 1 / -1; } }
.about__split h3 {
    font-size: var(--fs-h3);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--c-charcoal);
    margin: 12px 0 14px;
}
.about__split p {
    color: var(--c-muted);
    line-height: 1.65;
    font-size: 1.02rem;
}
.about__story h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 12px 0 22px;
    text-wrap: balance;
}
.about__story p {
    color: var(--c-muted);
    line-height: 1.7;
    font-size: var(--fs-lead);
    margin-bottom: 18px;
    max-width: 64ch;
    text-wrap: pretty;
}
.about__story p:last-child { margin-bottom: 0; }

/* ============================================================
   PAGE HERO — slim banner for inner pages (Product/Science/etc.)
   ============================================================ */
.page-hero {
    padding: clamp(112px, 13vw, 160px) 0 clamp(56px, 8vw, 88px);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line-soft);
    position: relative;
    overflow: hidden;
}
.page-hero__inner {
    max-width: 920px;
}
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero h1 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.6vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
    margin-bottom: clamp(18px, 2.6vw, 28px);
    max-width: 18ch;
    text-wrap: balance;
}
.page-hero h1 .italic { color: var(--c-pink); }
.page-hero p {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-charcoal);
    max-width: 600px;
}

/* ============================================================
   FEATURED PRODUCT TEASER — used on the home page
   ============================================================ */
.feat-product {
    background: var(--c-cream);
    padding: var(--pad-y) 0;
}
.feat-product__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.feat-product__visual { grid-column: span 6; }
.feat-product__copy   { grid-column: span 6; }
.feat-product__visual {
    border-radius: var(--r-xl);            /* 20px — large card */
    overflow: hidden;
    background: var(--c-surface-1);
    max-width: 640px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.03),
        0 12px 32px rgba(0,0,0,0.05);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.feat-product__visual:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 18px 40px rgba(0,0,0,0.07);
}
.feat-product__visual img {
    width: 100%; height: auto; display: block;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.feat-product__visual:hover img { transform: scale(1.025); }
.feat-product__copy h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0 22px;
}
.feat-product__copy h2 .italic { color: var(--c-pink); }
.feat-product__copy .lead { margin-bottom: 26px; }

.feat-product__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 16px;
    margin: 32px 0;
    padding: 28px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.feat-product__features li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-charcoal);
    letter-spacing: -0.005em;
}
.feat-product__features li::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-pink);
    flex-shrink: 0;
}
.feat-product__cta { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .feat-product__visual,
    .feat-product__copy { grid-column: 1 / -1; }
    .feat-product__visual { max-width: 540px; margin: 0 auto; }
}
@media (max-width: 480px) {
    .feat-product__features { grid-template-columns: 1fr; }
    .feat-product__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   QUICK-NAV — Supply6-style pill strip jumping to page sections
   ============================================================ */
.quick-nav {
    background: var(--c-surface-1);
    padding: clamp(20px, 2.6vw, 36px) 0;
    border-radius: 0;
    margin: 0;
}
.quick-nav__inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 28px);
}
.quick-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--c-charcoal);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), color .25s;
    text-align: center;
}
.quick-nav a:hover { transform: translateY(-3px); color: var(--c-pink); }
.quick-nav__icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-charcoal);
    transition: background .25s, color .25s, border-color .25s;
}
.quick-nav a:hover .quick-nav__icon {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
    color: var(--c-white);
}
.quick-nav__icon .ico { width: 26px; height: 26px; }

@media (max-width: 720px) {
    .quick-nav a { font-size: 0.78rem; gap: 6px; }
    .quick-nav__icon { width: 44px; height: 44px; }
    .quick-nav__icon .ico { width: 20px; height: 20px; }
}

/* ============================================================
   ANATOMY PANEL — "Science behind the rise"
   ============================================================ */
.anatomy {
    background: var(--c-white);
    padding: var(--pad-y) 0;
}
.anatomy__inner {
    background: var(--c-surface-1);
    border-radius: var(--r-xl);
    padding: clamp(40px, 5vw, 72px);
    border: 1px solid var(--c-line-soft);
}
.anatomy__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(36px, 4vw, 56px);
}
.anatomy__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0;
}
.anatomy__head h2 .italic { color: var(--c-pink); }
.anatomy__head .eyebrow { justify-content: center; }
.anatomy__head .eyebrow::before { display: none; }
.anatomy__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.anatomy__visual { grid-column: span 7; }
.anatomy__copy   { grid-column: span 5; }
@media (max-width: 900px) {
    .anatomy__visual, .anatomy__copy { grid-column: 1 / -1; }
}
.anatomy__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-line-soft);
}
.anatomy__visual img { width: 100%; height: auto; display: block; }
.anatomy__copy h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.anatomy__copy p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-charcoal);
    margin-bottom: 14px;
}
.anatomy__copy p strong { color: var(--c-pink); font-weight: 700; }
.anatomy__copy ul {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}
.anatomy__copy ul li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 12px;
    font-size: 1rem;
    color: var(--c-charcoal);
    line-height: 1.55;
}
.anatomy__copy ul li::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c-pink);
    margin-top: 8px;
}

/* ============================================================
   CLINICAL STUDY PROTOCOL — chart + protocol description
   ============================================================ */
.study {
    background: var(--c-white);
    padding: var(--pad-y) 0;
}
.study__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
}
.study__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0;
}
.study__head h2 .italic { color: var(--c-pink); }
.study__head .eyebrow { justify-content: center; }
.study__head .eyebrow::before { display: none; }
.study__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: center;
}
.study__chart { grid-column: span 7; }
.study__copy  { grid-column: span 5; }
@media (max-width: 900px) {
    .study__chart, .study__copy { grid-column: 1 / -1; }
}
.study__chart {
    background: var(--c-cream);
    border-radius: 14px;
    padding: clamp(20px, 2.5vw, 36px);
    border: 1px solid var(--c-line);
}
.study__chart img { width: 100%; height: auto; display: block; }
.study__copy h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.study__copy h3 .italic { color: var(--c-pink); }
.study__copy p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-charcoal);
    margin-bottom: 14px;
}
.study__protocol {
    background: var(--c-surface-1);
    border-left: 3px solid var(--c-pink);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: clamp(24px, 3vw, 36px);
    margin-top: 24px;
}
.study__protocol .label {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--c-pink);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.study__protocol h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.study__protocol p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-charcoal);
    margin: 0;
}
.study__cite {
    margin-top: 18px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* ============================================================
   TICKER — infinite horizontal scrolling brand promises
   ============================================================ */
.ticker {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: 24px 0;                /* refined, less aggressive */
    overflow: hidden;
    position: relative;
    border-block: 1px solid rgba(255,255,255,0.08);
}
.ticker::before,
.ticker::after {
    /* Soft fade edges so the looping joins disappear */
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(40px, 8vw, 120px);
    z-index: 2;
    pointer-events: none;
}
.ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--c-charcoal), transparent);
}
.ticker::after  {
    right: 0;
    background: linear-gradient(270deg, var(--c-charcoal), transparent);
}
.ticker__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: ticker-roll 60s linear infinite;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.875rem;            /* much smaller — refined */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { white-space: nowrap; transition: color .25s; }
.ticker__item:hover { color: var(--c-pink); }
.ticker__star {
    width: 8px;                     /* tiny dot, not a star — minimal */
    height: 8px;
    flex-shrink: 0;
    color: var(--c-pink);
    animation: none;
}
@keyframes ticker-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ticker-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   EDITORIAL BANNER — full-width campaign moment
   Charcoal frame · headline above · big photo · caption below
   ============================================================ */
.banner {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: clamp(80px, 11vw, 140px) 0 0;
    overflow: hidden;
    position: relative;
}
.banner__head {
    max-width: 1100px;
    margin: 0 auto clamp(36px, 5vw, 64px);
    padding: 0 var(--pad-x);
    text-align: center;
}
.banner__head .eyebrow {
    justify-content: center;
    color: var(--c-pink);
    margin-bottom: 22px;
}
.banner__head .eyebrow::before { display: none; }
.banner__head h2 {
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--c-white);
    max-width: 18ch;
    margin: 0 auto;
    text-wrap: balance;
}
.banner__head h2 .italic { color: var(--c-pink); }

.banner__inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative;
    border-radius: clamp(8px, 1.6vw, 18px);
}
.banner__inner img {
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: 540px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: clamp(6px, 1.2vw, 14px);
}
@media (max-width: 760px) {
    .banner__inner img { max-height: 380px; }
}

.banner__foot {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(80px, 10vw, 130px);
    text-align: center;
}
.banner__foot .lead {
    color: rgba(255,255,255,0.86);
    font-size: var(--fs-lead);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}
.banner__foot .lead .accent { color: var(--c-pink); font-weight: 600; }

/* Tiny caption under the photo on its own row, lifted into the photo
   gutter on bigger screens for a magazine-credit feel */
.banner__caption {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px var(--pad-x) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.5);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.banner__caption .dot {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 0 18px;
}
@media (max-width: 600px) { .banner__caption { display: none; } }

/* ============================================================
   EDITORIAL MOSAIC — 3-image asymmetric grid
   ============================================================ */
.mosaic {
    background: var(--c-white);
    padding: var(--pad-y) 0;
}
.mosaic__head {
    max-width: 800px;
    margin: 0 auto clamp(48px, 6vw, 80px);
    text-align: center;
}
.mosaic__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0;
}
.mosaic__head h2 .italic { color: var(--c-pink); }
.mosaic__head .eyebrow { justify-content: center; }
.mosaic__head .eyebrow::before { display: none; }

/* Each cell uses the image's NATIVE aspect — no cropping.
   Layout: row 1 = wide image (2/3) + square image (1/3), top-aligned.
           row 2 = wide image full width.
   The slight height mismatch in row 1 is intentional — magazine-style. */
.mosaic__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
    align-items: start;
}
.mosaic__cell {
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-cream);
}
.mosaic__cell--feature { grid-column: span 8; }
.mosaic__cell--top     { grid-column: span 4; }
.mosaic__cell--bottom  { grid-column: span 12; }
.mosaic__cell img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.mosaic__cell:hover img { transform: scale(1.04); }

@media (max-width: 800px) {
    .mosaic__cell--feature, .mosaic__cell--top, .mosaic__cell--bottom { grid-column: 1 / -1; }
}

/* ============================================================
   VIDEO STRIP — testimonial videos (horizontal scroller)
   ============================================================ */
.video-strip {
    padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px);
    background: var(--c-charcoal);
    color: var(--c-white);
    overflow: hidden;
}
.video-strip__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.video-strip__head h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-white);
    margin-top: 16px;
    max-width: 14ch;
}
.video-strip__head h2 .italic { color: var(--c-pink); }
.video-strip__head .lead {
    color: rgba(255,255,255,0.78);
    max-width: 480px;
}
.video-strip__controls {
    display: flex;
    gap: 12px;
    align-items: center;
}
.video-strip__btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.20);
    color: var(--c-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
.video-strip__btn:hover {
    background: var(--c-pink);
    border-color: var(--c-pink);
    transform: translateY(-2px);
}
.video-strip__btn .ico { width: 22px; height: 22px; }

/* The scroller — horizontal, snap, hide scrollbar */
.video-strip__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(260px, 22vw, 320px);
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-x);
    padding: 0 var(--pad-x) 12px;
    margin: 0 calc(var(--pad-x) * -1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.20) transparent;
}
.video-strip__scroller::-webkit-scrollbar { height: 6px; }
.video-strip__scroller::-webkit-scrollbar-track { background: transparent; }
.video-strip__scroller::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 3px;
}

.video-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    cursor: pointer;
}
.video-card__thumb {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c-charcoal-2);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.video-card:hover .video-card__thumb { transform: translateY(-6px); }
.video-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.video-card:hover .video-card__thumb img {
    transform: scale(1.05);
    filter: brightness(0.92);
}
.video-card__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 1;
}
.video-card__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform .35s, background .25s, color .25s;
}
.video-card__play::before,
.video-card__play::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    z-index: -1;
    animation: video-pulse 2.4s ease-out infinite;
}
.video-card__play::after { animation-delay: 1.2s; }
@keyframes video-pulse {
    0%   { transform: scale(0.85); opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0; }
}
.video-card:hover .video-card__play {
    background: var(--c-pink);
    color: var(--c-white);
    transform: scale(1.06);
}
.video-card__play .ico { width: 28px; height: 28px; }

.video-card__duration {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(0,0,0,0.65);
    color: var(--c-white);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    z-index: 2;
}
.video-card__quote {
    position: absolute;
    top: 18px; left: 18px; right: 18px;
    color: var(--c-white);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
    z-index: 2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.video-card__meta {
    padding: 0 4px;
}
.video-card__meta .name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--c-white);
    margin-bottom: 4px;
}
.video-card__meta .role {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
}

@media (max-width: 600px) {
    .video-strip__scroller {
        grid-auto-columns: 78%;
    }
}

/* ============================================================
   STANDS FOR
   ============================================================ */
.stands__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 64px);
}
.stands__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0;
    text-wrap: balance;
}
.stands__head h2 .italic { color: var(--c-pink); }
.stands__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.stands__grid > .stand { grid-column: span 3; }   /* 4 cards × 3 cols = 12 */
.stand {
    padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px);
    border-right: 1px solid var(--c-line);
    transition: background .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    cursor: default;
}
.stand:last-child { border-right: 0; }
.stand:hover {
    background: var(--c-surface-1);
}
.stand:hover .stand__title { color: var(--c-pink); }
.stand__title { transition: color .35s ease; }
.stand__num {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    color: var(--c-text-2);
    margin-bottom: 14px;
}
.stand__title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.stand p { color: var(--c-muted); font-size: 0.95rem; line-height: 1.55; }

@media (max-width: 1024px) {
    .stands__grid > .stand { grid-column: span 6; border-right: 0; border-bottom: 1px solid var(--c-line); }
    .stands__grid > .stand:nth-child(2n+1) { border-right: 1px solid var(--c-line); }
    .stands__grid > .stand:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
    .stands__grid > .stand { grid-column: 1 / -1; }
    .stands__grid > .stand:nth-child(2n+1) { border-right: 0; }
    .stands__grid > .stand:not(:last-child) { border-bottom: 1px solid var(--c-line); }
}

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 64px); }
.founders__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0;
    text-wrap: balance;
}
.founders__head h2 .italic { color: var(--c-pink); }
.founders__quote {
    font-family: var(--ff-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    line-height: 1.3;
    color: var(--c-charcoal);
    margin-top: 22px;
    padding-left: 22px;
    border-left: 3px solid var(--c-pink);
    max-width: 760px;
}
.founders__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
}
.founders__grid > .founder { grid-column: span 6; }
.founder {
    background: var(--c-surface-1);
    border-radius: var(--r-lg);
    padding: 32px;
    border: 1px solid var(--c-line-soft);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s;
}
.founder:hover {
    transform: translateY(-4px);
    background: var(--c-white);
    border-color: var(--c-line);
}
.founder h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.founder .role {
    display: inline-block;
    color: var(--c-pink);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.founder p { color: var(--c-muted); font-size: 1rem; line-height: 1.6; }
@media (max-width: 800px) { .founders__grid > .founder { grid-column: 1 / -1; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq__inner {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--col-gap-large);
    row-gap: 32px;
    align-items: flex-start;
}
.faq__head { grid-column: span 4; position: sticky; top: 100px; }
.faq__list { grid-column: span 8; }
.faq__head h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0;
    text-wrap: balance;
}
.faq__head h2 .italic { color: var(--c-pink); }
.faq__list { border-top: 1px solid var(--c-charcoal); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item__btn {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.0625rem;            /* 17px — Apple body */
    color: var(--c-charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    letter-spacing: -0.01em;
    transition: color .25s;
}
.faq-item__btn:hover { color: var(--c-text-2); }
.faq-item__btn::after {
    content: "+";
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    color: var(--c-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1;
    transition: all .25s ease;
}
.faq-item.is-open .faq-item__btn { color: var(--c-charcoal); }
.faq-item.is-open .faq-item__btn::after {
    content: "−";
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
    color: var(--c-white);
}
.faq-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.faq-item__panel-inner { padding: 0 0 24px; max-width: 720px; }
.faq-item__panel-inner p { color: var(--c-text-2); font-size: 1rem; line-height: 1.6; }
@media (max-width: 900px) {
    .faq__head, .faq__list { grid-column: 1 / -1; }
    .faq__head { position: static; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
    background: var(--c-pink);
    color: var(--c-white);
    padding: clamp(64px, 10vw, 140px) 0;
    overflow: hidden;
    position: relative;
}
.cta-band__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.cta-band h2 {
    font-size: var(--fs-h1);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--c-white);
    margin-bottom: 14px;
    text-wrap: balance;
}
.cta-band h2 .italic { color: var(--c-blush); }
.cta-band p {
    color: rgba(255,255,255,0.85);
    max-width: 520px;
    font-size: var(--fs-lead);
}
.cta-band__cta {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.cta-band .btn {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
    color: var(--c-white);
}
.cta-band .btn:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-pink);
}
@media (max-width: 900px) {
    .cta-band__grid { grid-template-columns: 1fr; }
    .cta-band__cta { justify-content: flex-start; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--c-charcoal);
    color: rgba(255,255,255,0.7);
    padding: clamp(64px, 8vw, 100px) 0 28px;
}
.footer__top {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 40px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    margin-bottom: 28px;
}
.footer__brand     { grid-column: span 4; }
.footer__top > .footer__col       { grid-column: span 2; }
.footer__top > .footer__col:last-child { grid-column: span 2; }   /* retailers */
.footer__brand img {
    height: 28px;
    margin-bottom: 22px;
    /* Logo stays sea green — do not invert */
}
.footer__brand p {
    color: rgba(255,255,255,0.75);
    max-width: 360px;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 24px;
}
.footer__col h5 {
    color: var(--c-white);
    font-size: 0.86rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-family: var(--ff-display);
    font-weight: 700;
    margin-bottom: 24px;
}
.footer__col ul { display: grid; gap: 14px; }
.footer__col a {
    font-size: 1.02rem;
    color: rgba(255,255,255,0.75);
    transition: color .25s;
}
.footer__col a:hover { color: var(--c-pink); }
.footer__retailers ul { display: grid; gap: 8px; }
.footer__retailers a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.94rem; }
.footer__retailers a::before { content: "↗"; color: var(--c-pink); }
.footer__social { display: flex; gap: 10px; margin-top: 14px; }
.footer__social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    transition: background .25s, transform .25s;
}
.footer__social a:hover { background: var(--c-pink); transform: translateY(-2px); }
.footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
}
.footer__bottom a:hover { color: var(--c-pink); }
@media (max-width: 1024px) {
    .footer__brand   { grid-column: span 12; }
    .footer__top > .footer__col { grid-column: span 4; }
}
@media (max-width: 720px) {
    .footer__top > .footer__col { grid-column: span 6; }
}
@media (max-width: 480px) {
    .footer__top > .footer__col { grid-column: 1 / -1; }
}

/* ============================================================
   ANIMATIONS — reveal variants, stagger, ken-burns, scroll feel
   ============================================================ */

/* Smooth scroll + offset for sticky header */
html { scroll-padding-top: 100px; }

/* Pink scroll progress bar pinned to top of viewport */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--c-pink);
    z-index: 100;
    transition: width .15s linear;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(194,24,91,0.45);
}

/* Default reveal — cinematic fade up with scale settle (no blur) */
.reveal {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    transition:
        opacity 1.2s cubic-bezier(.16,.84,.27,1),
        transform 1.2s cubic-bezier(.16,.84,.27,1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Side-slide variants */
.reveal--left  { transform: translateX(-56px) scale(0.985); }
.reveal--right { transform: translateX(56px)  scale(0.985); }
.reveal--left.is-visible,
.reveal--right.is-visible { transform: translateX(0) scale(1); }

/* Scale-in variant (used for big hero photo) */
.reveal--scale {
    transform: scale(0.94);
    opacity: 0;
}
.reveal--scale.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* Auto-stagger — direct .reveal children appear in cascade */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: .14s; }
.stagger > .reveal:nth-child(3) { transition-delay: .28s; }
.stagger > .reveal:nth-child(4) { transition-delay: .42s; }
.stagger > .reveal:nth-child(5) { transition-delay: .56s; }
.stagger > .reveal:nth-child(6) { transition-delay: .70s; }

/* ---------- Word-by-word headline reveal ----------
   Each word lifts gently into place — no rotation, clean baseline. */
.split-words .word {
    display: inline-block;
    vertical-align: baseline;
    opacity: 0;
    transform: translateY(34%);
    transition:
        opacity .85s cubic-bezier(.16,.84,.27,1),
        transform .85s cubic-bezier(.16,.84,.27,1);
    will-change: opacity, transform;
}
.split-words.is-visible .word {
    opacity: 1;
    transform: translateY(0);
}
/* Headlines need a tiny bit of overflow tolerance for the lift animation */
.split-words { overflow: hidden; padding-bottom: 0.05em; }

/* Ken-burns slow zoom on hero / lifestyle imagery */
@keyframes ken-burns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.06); }
}
.kb-image {
    animation: ken-burns 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* Soft float for badges */
@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.float-soft { animation: float-soft 4.5s ease-in-out infinite; }

/* Pulsing glow for the hero pink badge */
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(194,24,91,0.0); }
    50%      { box-shadow: 0 0 0 12px rgba(194,24,91,0.0); }
    25%      { box-shadow: 0 0 0 6px rgba(194,24,91,0.18); }
}

/* Marquee — subtle horizontal scroll for claim words band */
@keyframes scroll-x {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Underline grow for nav menu items */
.nav__menu a {
    position: relative;
}
.nav__menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--c-pink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__menu a:hover::after,
.nav__menu a.active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Hover image zoom + subtle saturation lift */
.concern-card__visual img,
.post__thumb img,
.expert__visual img {
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}
.concern-card:hover .concern-card__visual img,
.post:hover .post__thumb img {
    transform: scale(1.06);
    filter: saturate(1.08);
}
.expert__visual img {
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

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

.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* ============================================================
   AWARD MOTION LAYER — split-char, custom cursor, scroll masks
   ============================================================ */

/* Split-character containers (h1 reveal) */
.aw-word { display: inline-block; white-space: nowrap; }
.aw-char {
    display: inline-block;
    will-change: transform, opacity;
    transform-origin: 50% 100%;
}

/* Mask wrapper for scroll-revealed images */
.aw-mask-wrap {
    display: block;
    overflow: hidden;
    position: relative;
    line-height: 0;
}
.aw-mask-wrap img { display: block; width: 100%; height: auto; }

/* Hide native cursor when custom cursor is active (desktop only) */
@media (min-width: 900px) {
    body.has-aw-cursor,
    body.has-aw-cursor a,
    body.has-aw-cursor button,
    body.has-aw-cursor input,
    body.has-aw-cursor textarea,
    body.has-aw-cursor [role="button"] {
        cursor: none;
    }
}

/* Custom cursor — dot + ring */
.aw-cursor-dot,
.aw-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transition: opacity .25s ease, width .35s cubic-bezier(.2,.7,.3,1),
                height .35s cubic-bezier(.2,.7,.3,1),
                background-color .25s ease, border-color .25s ease;
    mix-blend-mode: difference;
}
.aw-cursor-dot {
    width: 6px;
    height: 6px;
    background: #FFFFFF;
}
.aw-cursor-ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: transparent;
}
body.aw-cursor-hover .aw-cursor-ring {
    width: 64px;
    height: 64px;
    border-color: var(--c-seagreen);
    background: rgba(61, 189, 182, 0.12);
}
body.aw-cursor-hover .aw-cursor-dot {
    width: 4px;
    height: 4px;
    background: var(--c-seagreen);
}
body.aw-cursor-out .aw-cursor-dot,
body.aw-cursor-out .aw-cursor-ring {
    opacity: 0;
}

/* Hide on touch / small screens */
@media (max-width: 899px), (hover: none) {
    .aw-cursor-dot, .aw-cursor-ring { display: none; }
    body.has-aw-cursor { cursor: auto; }
}

/* Reduced motion: kill custom cursor and split-char transforms */
@media (prefers-reduced-motion: reduce) {
    .aw-cursor-dot, .aw-cursor-ring { display: none; }
    .aw-char { transform: none !important; opacity: 1 !important; }
    .aw-mask-wrap { clip-path: none !important; }
}

/* Magnetic buttons need transforms enabled and a smooth transition */
.btn { will-change: transform; }

/* ============================================================
   CONTRAST GUARDS — fix collisions caused by pink→seagreen aliasing
   When a section's BACKGROUND is sea-green (formerly --c-pink), any
   inline accent class (.bold-pink, .accent-pink, .italic, etc.) would
   render same-color-on-same-color and disappear. Force them to white.
   When section bg is charcoal, sea-green accent stays readable but
   .italic/--c-blush placeholders need to flip to white too.
   ============================================================ */

/* Sea-green / accent backgrounds: force inline highlights to white text */
.section--pink .bold-pink,
.section--pink .accent-pink,
.section--pink .italic,
.section--pink .eyebrow--pink,
.cta-band .bold-pink,
.cta-band .accent-pink,
.cta-band .italic,
.cta-band .eyebrow--pink,
.cta-band .eyebrow--sage,
.banner .bold-pink,
.banner .accent-pink,
.banner .italic,
.ticker .bold-pink,
.ticker .accent-pink {
    color: #FFFFFF !important;
    background: transparent !important;
}
/* Eyebrow bullet (::before) flips to white when on sea-green bg */
.section--pink .eyebrow--pink::before,
.cta-band .eyebrow--pink::before,
.cta-band .eyebrow--sage::before {
    background: #FFFFFF !important;
}

/* Charcoal sections: ensure all text is light by default */
.section--charcoal,
.section--charcoal p,
.section--charcoal li,
.section--charcoal h1,
.section--charcoal h2,
.section--charcoal h3,
.section--charcoal h4,
.hb-timeline,
.hb-timeline p,
.hb-timeline h2,
.hb-timeline h3,
.banner,
.banner p,
.banner h2,
.ticker,
.site-footer,
.site-footer p,
.site-footer h3,
.site-footer h4,
.promo,
.promo p,
.promo h2 {
    color: #FFFFFF;
}
/* But keep sea-green accent active inside charcoal sections (readable contrast) */
.section--charcoal .bold-pink,
.section--charcoal .accent-pink,
.hb-timeline .bold-pink,
.hb-timeline .accent-pink,
.banner .accent-pink,
.site-footer .bold-pink,
.site-footer .accent-pink,
.promo .bold-pink,
.promo .accent-pink {
    color: var(--c-seagreen) !important;
}

/* Re-enable italic in charcoal context as a soft white */
.section--charcoal .italic,
.hb-timeline .italic,
.site-footer .italic {
    color: rgba(255,255,255,0.78) !important;
}

/* Quick-nav and trust-row sit on near-white surfaces — ensure their
   icon/text fills are charcoal, not inherited from a parent */
.quick-nav a,
.trust-row .trust-item__txt {
    color: var(--c-charcoal);
}

/* Compare-table accent column header (.bs = sea-green bg) — body text white */
.compare__table thead th.bs,
.compare__table thead th.bs * {
    color: #FFFFFF !important;
}

/* Hairline soft on near-white surfaces — stronger token */
.section--blush,
.trust-grid {
    border-color: var(--c-line);
}

/* Custom cursor blend mode can wash text near edges — guard the dot */
@supports (mix-blend-mode: difference) {
    .aw-cursor-dot { background: #FFFFFF; }
}

/* ============================================================
   ABOUT PAGE — editorial redesign
   Sections: about-hero, pillars, founders-v2, etymology, manifesto
   ============================================================ */

/* ---------- HERO ---------- */
.about-hero {
    background: var(--c-white);
    padding: clamp(64px, 10vw, 140px) 0 clamp(80px, 11vw, 160px);
    border-bottom: 1px solid var(--c-line);
}
.about-hero__meta {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(28px, 3.5vw, 44px);
    border-bottom: 1px solid var(--c-line-soft);
}
.about-hero__kanji {
    font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 400;
    line-height: 1;
    color: var(--c-seagreen);
    letter-spacing: -0.04em;
}
.about-hero__dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
.about-hero__dateline .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-line);
    display: inline-block;
}

.about-hero__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    margin-bottom: clamp(40px, 5vw, 64px);
}
.about-hero__head .eyebrow { grid-column: 1 / span 12; margin-bottom: 22px; }
.about-hero__head h1 {
    grid-column: 1 / span 11;
    font-size: clamp(2.6rem, 7.6vw, 6.4rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
}

.about-hero__lede {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    align-items: end;
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 1px solid var(--c-line-soft);
}
.about-hero__lead {
    grid-column: 1 / span 7;
    font-family: var(--ff-body);
    font-size: clamp(1.05rem, 1.4vw, 1.32rem);
    line-height: 1.5;
    color: var(--c-text);
    max-width: 56ch;
    margin: 0;
}
.about-hero__chips {
    grid-column: 8 / span 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
}
.about-hero__chips li {
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    padding: 8px 14px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    background: var(--c-white);
}
@media (max-width: 900px) {
    .about-hero__lead, .about-hero__chips { grid-column: 1 / span 12; }
    .about-hero__chips { justify-content: flex-start; margin-top: 24px; }
}

/* ---------- PILLARS — Mission · Vision · Promise ---------- */
.pillars {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
}
.pillars__head {
    max-width: 760px;
    margin: 0 0 clamp(56px, 7vw, 96px);
}
.pillars__head h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
    text-wrap: balance;
}
.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 56px;
}
.pillar {
    border-top: 1px solid var(--c-charcoal);
    padding-top: clamp(20px, 2vw, 28px);
}
.pillar__num {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 4.4vw, 3.8rem);
    line-height: 1;
    color: var(--c-charcoal);
    letter-spacing: -0.025em;
    margin-bottom: clamp(20px, 2.6vw, 32px);
}
.pillar__label {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-seagreen);
    margin: 0 0 12px;
}
.pillar__lead {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: var(--c-charcoal);
    margin: 0 0 16px;
}
.pillar__body {
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0;
    max-width: 36ch;
}
@media (max-width: 900px) {
    .pillars__grid { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ---------- FOUNDERS v2 ---------- */
.founders-v2 {
    background: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.founders-v2__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    align-items: end;
    margin-bottom: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--c-line-soft);
}
.founders-v2__intro { grid-column: 1 / span 7; }
.founders-v2__intro h2 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
}
.founders-v2__quote {
    grid-column: 8 / span 5;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0;
    padding-left: clamp(20px, 2.4vw, 32px);
    border-left: 2px solid var(--c-seagreen);
    max-width: 50ch;
}
.founders-v2__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 56px;
}
.founder-v2 {
    background: var(--c-cream);
    border-radius: var(--r-lg);
    padding: clamp(32px, 4vw, 56px);
    border: 1px solid var(--c-line);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.founder-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px rgba(0,0,0,0.06);
}
.founder-v2__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--c-seagreen);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    box-shadow: 0 0 0 6px var(--c-white), 0 0 0 7px var(--c-line);
}
.founder-v2__role {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
    margin-bottom: 12px;
}
.founder-v2__name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-charcoal);
    margin: 0 0 6px;
}
.founder-v2__credentials {
    font-family: var(--ff-body);
    font-size: 0.92rem;
    color: var(--c-seagreen);
    margin: 0 0 22px;
    font-weight: 500;
}
.founder-v2__body {
    font-family: var(--ff-body);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--c-text);
    margin: 0 0 24px;
}
.founder-v2__credits {
    list-style: none;
    margin: 0; padding: 24px 0 0;
    border-top: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.founder-v2__credits li {
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-2);
    padding: 6px 12px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    background: var(--c-white);
}
@media (max-width: 900px) {
    .founders-v2__intro,
    .founders-v2__quote { grid-column: 1 / span 12; }
    .founders-v2__quote { padding-left: 18px; margin-top: 24px; }
    .founders-v2__grid { grid-template-columns: 1fr; }
}

/* ---------- ETYMOLOGY ---------- */
.etymology {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
}
.etymology__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    align-items: start;
}
.etymology__mark {
    grid-column: 1 / span 4;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(40px, 4.5vw, 64px);
    text-align: center;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.etymology__kanji {
    font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Times New Roman", serif;
    font-size: clamp(120px, 14vw, 200px);
    font-weight: 400;
    line-height: 1;
    color: var(--c-seagreen);
    margin-bottom: clamp(20px, 2vw, 32px);
}
.etymology__romaji {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--c-charcoal);
    letter-spacing: -0.018em;
}
.etymology__defn {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
.etymology__gloss {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.45;
    color: var(--c-text);
    margin-top: 14px;
}

.etymology__copy {
    grid-column: 6 / span 7;
}
.etymology__copy h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0 32px;
}
.etymology__copy p {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.65;
    color: var(--c-text);
    margin: 0 0 22px;
    max-width: 60ch;
}
.etymology__copy p strong { color: var(--c-charcoal); font-weight: 600; }
.etymology__copy p em { font-style: italic; color: var(--c-seagreen); }
@media (max-width: 900px) {
    .etymology__mark,
    .etymology__copy { grid-column: 1 / span 12; }
    .etymology__mark { position: static; margin-bottom: 32px; }
}

/* ---------- MANIFESTO STRIP ---------- */
.manifesto {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: clamp(80px, 10vw, 130px) 0;
    text-align: center;
}
.manifesto__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.manifesto__line {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--c-white);
    margin: 0 0 24px;
    text-wrap: balance;
}
.manifesto__accent {
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 500;
}
.manifesto__sig {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
}

/* ============================================================
   INGREDIENT SHOWCASE — visual ingredient cards (product page)
   Grid of 9 cards. Square media tile + body copy below.
   Each .ing-card__media is a 1:1 surface that holds the image.
   ============================================================ */
.ingredients-showcase {
    background: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
}
.ingredients-showcase__head {
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 96px);
    text-align: center;
}
.ingredients-showcase__head h2 {
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 14px 0 18px;
}
.ingredients-showcase__head h2 .num {
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 400;
}
.ingredients-showcase__head .lead {
    color: var(--c-text-2);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 56ch;
}

.ingredients-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(20px, 2.4vw, 32px);
    row-gap: clamp(36px, 4vw, 56px);
}
@media (max-width: 900px) { .ingredients-showcase__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ingredients-showcase__grid { grid-template-columns: 1fr; } }

.ing-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
    position: relative;
}
.ing-card:hover { transform: translateY(-6px); }

/* Square media surface — image floats freely on the section background */
.ing-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
}
.ing-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    mix-blend-mode: multiply;          /* lets a stray white bg blend into the section */
}
.ing-card:hover .ing-card__media img { transform: scale(1.06); }

/* Placeholder symbol shown if the image fails to load */
.ing-card__symbol {
    display: none;                              /* hidden until image errors out */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    color: var(--c-seagreen);
    letter-spacing: -0.025em;
    width: 64%;
    height: 64%;
    border-radius: 50%;
    background: var(--c-white);
    border: 1.5px solid var(--c-line);
    align-items: center;
    justify-content: center;
}
.ing-card__media.is-placeholder { background: var(--c-cream); }
.ing-card__media.is-placeholder .ing-card__symbol { display: flex; }

/* Body */
.ing-card__body {
    padding: clamp(8px, 1.4vw, 18px) clamp(4px, 0.8vw, 10px) 0;
    text-align: center;
}
.ing-card__num {
    display: block;
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 12px;
}
.ing-card__name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    color: var(--c-charcoal);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    line-height: 1.1;
}
.ing-card__latin {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-seagreen);
    margin: 0 0 14px;
    font-weight: 500;
}
.ing-card__dose {
    display: inline-block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--c-seagreen);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.ing-card__desc {
    font-family: var(--ff-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--c-text-2);
    margin: 0 auto;
    max-width: 28ch;
}

.ingredients-showcase__foot {
    text-align: center;
    margin: clamp(48px, 6vw, 72px) 0 0;
    font-family: var(--ff-body);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-3);
}

/* ============================================================
   COMPOSITION PANEL — editorial spec sheet for ingredients
   Replaces the old image+list block. Pure typography + hairlines.
   ============================================================ */
.composition {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.composition__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 88px);
}
.composition__head h2 {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0 24px;
}
.composition__thesis {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.4vw, 1.32rem);
    line-height: 1.45;
    color: var(--c-text);
    max-width: 56ch;
    margin: 0 auto;
}
.composition__thesis em {
    color: var(--c-seagreen);
    font-style: italic;
}

/* Panel — like a clinical fact panel with editorial typography */
.composition__panel {
    background: var(--c-white);
    border: 1px solid var(--c-charcoal);
    border-radius: var(--r-md);
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
}
.composition__row {
    display: grid;
    grid-template-columns: 56px 2.4fr 1fr 3fr;
    column-gap: clamp(20px, 2.4vw, 40px);
    align-items: baseline;
    padding: clamp(20px, 2vw, 28px) clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--c-line);
    transition: background .25s;
}
.composition__row:first-child { border-top: 0; }
.composition__row:not(.composition__row--head):hover {
    background: var(--c-cream);
}

/* Header row — uppercase column labels */
.composition__row--head {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding-top: clamp(14px, 1.6vw, 20px);
    padding-bottom: clamp(14px, 1.6vw, 20px);
}
.composition__row--head span {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

/* Columns */
.composition__col-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
    align-self: center;
}
.composition__col-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.composition__col-name strong {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.5vw, 1.32rem);
    color: var(--c-charcoal);
    letter-spacing: -0.018em;
}
.composition__col-name em {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--c-seagreen);
    font-weight: 500;
    letter-spacing: 0.005em;
}
.composition__col-dose {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.composition__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: var(--c-charcoal);
    letter-spacing: -0.028em;
    line-height: 1;
}
.composition__unit {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--c-text-2);
}
.composition__col-fn {
    font-family: var(--ff-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--c-text-2);
    align-self: center;
}

/* Footer — small print + certification chips */
.composition__foot {
    max-width: 1180px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.composition__foot p {
    font-family: var(--ff-body);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--c-text-2);
    max-width: 56ch;
    margin: 0;
}
.composition__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.composition__chips li {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    padding: 6px 12px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    background: var(--c-white);
}

/* Mobile collapse — stack each row into 2 lines, hide column header */
@media (max-width: 760px) {
    .composition__row--head { display: none; }
    .composition__row {
        grid-template-columns: 36px 1fr auto;
        column-gap: 12px;
        row-gap: 8px;
        padding: 18px 20px;
    }
    .composition__col-num { font-size: 0.72rem; }
    .composition__col-fn {
        grid-column: 2 / span 2;
        font-size: 0.86rem;
    }
    .composition__num { font-size: 1.5rem; }
}

/* ============================================================
   CONCERNS v2 — editorial Q&A bento grid
   2x2 cards. Numbered + icon + tag pill + question + answer + arrow.
   ============================================================ */
.concerns-v2 {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
}
.concerns-v2__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    align-items: end;
    margin-bottom: clamp(56px, 7vw, 88px);
    padding-bottom: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--c-line);
}
.concerns-v2__intro { grid-column: 1 / span 7; }
.concerns-v2__intro h2 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
}
.concerns-v2__lede {
    grid-column: 8 / span 5;
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0;
    max-width: 50ch;
}
@media (max-width: 900px) {
    .concerns-v2__intro,
    .concerns-v2__lede { grid-column: 1 / span 12; }
    .concerns-v2__lede { margin-top: 24px; }
}

.concerns-v2__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2vw, 28px);
}
@media (max-width: 760px) { .concerns-v2__grid { grid-template-columns: 1fr; } }

.concern-v2 {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    column-gap: clamp(20px, 2.4vw, 32px);
    align-items: start;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3.4vw, 44px);
    text-decoration: none;
    color: inherit;
    transition: transform .45s cubic-bezier(.2,.8,.2,1),
                box-shadow .45s,
                border-color .45s,
                background .45s;
    overflow: hidden;
    isolation: isolate;
}
.concern-v2::before {
    /* sea-green progress bar that draws across bottom on hover */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--c-seagreen);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.concern-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px rgba(0,0,0,0.06);
    border-color: var(--c-charcoal);
}
.concern-v2:hover::before { transform: scaleX(1); }

/* Number marker (top-left) */
.concern-v2__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--c-text-3);
    align-self: start;
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Icon tile */
.concern-v2__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--c-cream);
    color: var(--c-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .35s, color .35s;
    flex-shrink: 0;
}
.concern-v2__icon svg { width: 26px; height: 26px; }
.concern-v2:hover .concern-v2__icon {
    background: var(--c-charcoal);
    color: var(--c-seagreen);
}

/* Body — tag pill + question + answer */
.concern-v2__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.concern-v2__tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-seagreen);
    padding: 0;
    margin: 0;
}
.concern-v2__q {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--c-charcoal);
    margin: 0;
    text-wrap: balance;
}
.concern-v2__a {
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0;
    max-width: 44ch;
}

/* Arrow */
.concern-v2__arrow {
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    color: var(--c-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .35s, border-color .35s, color .35s, transform .45s cubic-bezier(.2,.8,.2,1);
    flex-shrink: 0;
}
.concern-v2__arrow svg { width: 16px; height: 16px; }
.concern-v2:hover .concern-v2__arrow {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
    color: var(--c-seagreen);
    transform: translateX(4px);
}

@media (max-width: 540px) {
    .concern-v2 {
        grid-template-columns: auto 1fr;
        row-gap: 16px;
    }
    .concern-v2__num { grid-column: 1; grid-row: 1; }
    .concern-v2__icon { grid-column: 2; grid-row: 1; justify-self: end; }
    .concern-v2__body { grid-column: 1 / span 2; grid-row: 2; }
    .concern-v2__arrow { grid-column: 1 / span 2; grid-row: 3; justify-self: end; }
}

/* Bottom CTA bar */
.concerns-v2__cta {
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.concerns-v2__cta p {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--c-text);
    margin: 0;
    max-width: 50ch;
}

/* ============================================================
   CONCERNS v3 — asymmetric editorial bento
   12-col grid with one feature tile (image), one charcoal accent
   tile, plus two contrasting tiles. Big numerals, oversized type.
   ============================================================ */
.concerns-v3 {
    background: var(--c-white);
    padding: clamp(96px, 12vw, 180px) 0;
    overflow: hidden;
    border-top: 1px solid var(--c-line);
}

.concerns-v3__head {
    max-width: 1100px;
    margin: 0 0 clamp(48px, 6vw, 80px);
}
.concerns-v3__kicker {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 24px;
    padding-left: 24px;
    position: relative;
}
.concerns-v3__kicker::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 14px; height: 1px;
    background: var(--c-charcoal);
}
.concerns-v3__title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 7.4vw, 6.4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--c-charcoal);
    margin: 0 0 24px;
    max-width: 16ch;
    text-wrap: balance;
}
.concerns-v3__title-accent {
    display: block;
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 500;
}
.concerns-v3__lede {
    font-family: var(--ff-body);
    font-size: clamp(1.05rem, 1.3vw, 1.22rem);
    line-height: 1.55;
    color: var(--c-text-2);
    max-width: 50ch;
    margin: 0;
}

/* 12-col asymmetric grid */
.concerns-v3__bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(280px, auto);
    column-gap: clamp(16px, 1.6vw, 24px);
    row-gap: clamp(16px, 1.6vw, 24px);
}
.cv3--feature  { grid-column: span 7; grid-row: span 2; }
.cv3--dark     { grid-column: span 5; grid-row: span 1; }
.cv3--small    { grid-column: span 5; grid-row: span 1; }
.cv3--wide     { grid-column: span 12; grid-row: span 1; min-height: 320px; }

@media (max-width: 1100px) {
    .cv3--feature { grid-column: span 12; }
    .cv3--dark, .cv3--small { grid-column: span 6; }
    .cv3--wide { grid-column: span 12; }
}
@media (max-width: 700px) {
    .cv3--dark, .cv3--small { grid-column: span 12; }
    .concerns-v3__bento { grid-auto-rows: auto; }
}

/* Base tile */
.cv3 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--c-cream);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3.2vw, 48px);
    text-decoration: none;
    color: var(--c-charcoal);
    overflow: hidden;
    isolation: isolate;
    transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s;
}
.cv3:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 24px 60px rgba(0,0,0,0.08);
}

/* Big number marker */
.cv3__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(3.2rem, 6vw, 5.4rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--c-text-3);
    opacity: 0.42;
    position: absolute;
    top: clamp(20px, 2vw, 32px);
    right: clamp(24px, 2.4vw, 40px);
    z-index: 2;
    transition: color .45s, opacity .45s, transform .45s;
    font-variant-numeric: tabular-nums;
}
.cv3:hover .cv3__num {
    color: var(--c-seagreen);
    opacity: 1;
    transform: translateY(-2px);
}

/* Inner copy block — sits at the bottom for hierarchy */
.cv3__inner {
    position: relative;
    z-index: 2;
    margin-top: auto;
    max-width: 38ch;
}
.cv3__tag {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-seagreen);
    margin-bottom: 16px;
}
.cv3__q {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
    margin: 0 0 14px;
    text-wrap: balance;
}
.cv3__a {
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0 0 24px;
    max-width: 38ch;
}
.cv3__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-body);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--c-charcoal);
    transition: gap .35s, color .35s, border-color .35s;
}
.cv3__cta svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cv3:hover .cv3__cta { gap: 14px; }
.cv3:hover .cv3__cta svg { transform: translateX(4px); }

/* FEATURE tile — fills with photo, copy at bottom on a gradient */
.cv3--feature {
    background: var(--c-charcoal);
    padding: clamp(32px, 3.4vw, 56px);
    color: var(--c-white);
    min-height: 540px;
}
.cv3--feature .cv3__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cv3--feature .cv3__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.cv3--feature::after {
    /* dark gradient so type stays legible */
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
    z-index: 1;
}
.cv3--feature:hover .cv3__media img { transform: scale(1.06); }
.cv3--feature .cv3__num { color: rgba(255,255,255,0.5); opacity: 1; }
.cv3--feature:hover .cv3__num { color: var(--c-seagreen); }
.cv3--feature .cv3__q { color: var(--c-white); }
.cv3--feature .cv3__a { color: rgba(255,255,255,0.82); }
.cv3--feature .cv3__cta { color: var(--c-white); border-color: rgba(255,255,255,0.6); }
.cv3--feature .cv3__tag { color: var(--c-seagreen); }

/* DARK tile — charcoal block with concentric ring decoration */
.cv3--dark {
    background: var(--c-charcoal);
    color: var(--c-white);
    min-height: 280px;
}
.cv3--dark .cv3__num { color: rgba(255,255,255,0.28); opacity: 1; }
.cv3--dark .cv3__q { color: var(--c-white); }
.cv3--dark .cv3__a { color: rgba(255,255,255,0.78); }
.cv3--dark .cv3__cta { color: var(--c-white); border-color: rgba(255,255,255,0.6); }
.cv3--dark .cv3__tag { color: var(--c-seagreen); }
.cv3--dark .cv3__floater {
    position: absolute;
    bottom: -40px; right: -40px;
    width: 220px; height: 220px;
    color: var(--c-seagreen);
    opacity: 0.4;
    z-index: 1;
    transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .55s;
}
.cv3--dark .cv3__floater svg { width: 100%; height: 100%; }
.cv3--dark:hover .cv3__floater {
    transform: rotate(45deg) scale(1.05);
    opacity: 0.6;
}

/* SMALL tile — cream block, simpler */
.cv3--small {
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    min-height: 280px;
}
.cv3--small:hover { border-color: var(--c-charcoal); }

/* WIDE tile — has product image floating right */
.cv3--wide {
    flex-direction: row;
    align-items: stretch;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    padding: 0;
    overflow: hidden;
}
.cv3--wide .cv3__inner {
    padding: clamp(28px, 3.4vw, 56px);
    max-width: 56ch;
    margin-top: auto;
    flex: 1 1 60%;
}
.cv3--wide .cv3__num {
    top: clamp(20px, 2vw, 32px);
    right: auto;
    left: clamp(24px, 2.4vw, 40px);
}
.cv3--wide .cv3__media--side {
    position: relative;
    flex: 1 1 45%;
    background: var(--c-cream);
    overflow: hidden;
    border-left: 1px solid var(--c-line);
    align-self: stretch;
    min-height: 360px;
}
.cv3--wide .cv3__media--side img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.cv3--wide:hover .cv3__media--side img { transform: scale(1.05); }
.cv3--wide:hover { border-color: var(--c-charcoal); }

@media (max-width: 700px) {
    .cv3--wide { flex-direction: column; }
    .cv3--wide .cv3__media--side {
        order: -1;
        border-left: 0;
        border-bottom: 1px solid var(--c-line);
        height: 320px;
        min-height: 320px;
        flex: 0 0 320px;
    }
    .cv3--wide .cv3__num { left: auto; right: 24px; }
    .cv3--feature { min-height: 460px; }
}

/* Footer manifesto */
.concerns-v3__foot {
    margin-top: clamp(56px, 6vw, 88px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 24px;
}
.concerns-v3__foot-line {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    line-height: 1.3;
    color: var(--c-text);
}
.concerns-v3__foot-line--accent { color: var(--c-seagreen); }
.cv3__shop { margin-left: auto; }

/* ============================================================
   SCIENCE JOURNAL — editorial chapter system
   sj- prefix for "science journal"
   ============================================================ */

/* ---------- HERO — molecular masthead ---------- */
.sj-hero {
    background: var(--c-white);
    padding: clamp(56px, 8vw, 120px) 0 clamp(80px, 11vw, 160px);
    border-bottom: 1px solid var(--c-charcoal);
    overflow: hidden;
}
.sj-hero__masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
    padding-bottom: clamp(28px, 3.4vw, 44px);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: clamp(40px, 5vw, 72px);
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
.sj-hero__publication { color: var(--c-charcoal); }
.sj-hero__feature     { color: var(--c-seagreen); }

.sj-hero__formula {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: clamp(40px, 5vw, 72px);
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-charcoal);
    line-height: 0.85;
    letter-spacing: -0.05em;
}
.sj-hero__atom {
    font-size: clamp(6rem, 18vw, 16rem);
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 500;
}
.sj-hero__sub {
    font-size: clamp(1.6rem, 3.6vw, 3.2rem);
    color: var(--c-charcoal);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.sj-hero__sub sub { font-size: 0.62em; vertical-align: -0.1em; }

.sj-hero__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    margin-bottom: clamp(40px, 5vw, 64px);
}
.sj-hero__head .eyebrow { grid-column: 1 / span 12; margin-bottom: 22px; }
.sj-hero__head h1 {
    grid-column: 1 / span 11;
    font-size: clamp(2.4rem, 7vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
}

.sj-hero__lede {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap-large);
    align-items: start;
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--c-line);
}
.sj-hero__abstract {
    grid-column: 1 / span 7;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.36vw, 1.28rem);
    line-height: 1.55;
    color: var(--c-text);
    margin: 0;
    max-width: 56ch;
}
.sj-hero__abstract em { color: var(--c-seagreen); font-style: italic; }
.sj-hero__label {
    font-family: var(--ff-body);
    font-style: normal;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-charcoal);
    margin-right: 8px;
}
.sj-hero__toc {
    grid-column: 8 / span 5;
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 20px;
}
.sj-hero__toc li {
    break-inside: avoid;
    border-top: 1px solid var(--c-line);
    padding: 10px 0;
}
.sj-hero__toc li:first-child { border-top: 0; padding-top: 0; }
.sj-hero__toc a {
    font-family: var(--ff-body);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--c-charcoal);
    text-decoration: none;
    transition: color .25s;
}
.sj-hero__toc a:hover { color: var(--c-seagreen); }
@media (max-width: 900px) {
    .sj-hero__abstract,
    .sj-hero__toc { grid-column: 1 / span 12; }
    .sj-hero__toc { margin-top: 32px; column-count: 1; }
}

/* ---------- CHAPTER WRAPPER ---------- */
.sj-chapter {
    background: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
    border-bottom: 1px solid var(--c-line);
}
.sj-chapter--cream { background: var(--c-cream); }

.sj-chapter__head {
    margin-bottom: clamp(48px, 6vw, 80px);
}
.sj-chapter__marker {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--c-line);
}
.sj-chapter__topic {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-seagreen);
}
.sj-chapter__head h2 {
    margin-top: 24px;
    font-size: clamp(2rem, 4.8vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.028em;
    max-width: 22ch;
    text-wrap: balance;
}
.sj-deck {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.36vw, 1.28rem);
    line-height: 1.5;
    color: var(--c-text);
    margin: 18px 0 0;
    max-width: 60ch;
}

/* ---------- CHAPTER SPLIT (image + copy) ---------- */
.sj-chapter__split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.sj-chapter__split--reverse { grid-template-columns: 1fr 1.05fr; }
.sj-chapter__split--reverse .sj-chapter__visual { order: 2; }
.sj-chapter__split--reverse .sj-chapter__copy { order: 1; }
@media (max-width: 900px) {
    .sj-chapter__split,
    .sj-chapter__split--reverse {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
    .sj-chapter__split--reverse .sj-chapter__visual,
    .sj-chapter__split--reverse .sj-chapter__copy { order: initial; }
}

.sj-chapter__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-md);
    background: var(--c-white);
}
.sj-chapter__visual figcaption,
.sj-chart figcaption,
.sj-trial__chart figcaption {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--c-text-2);
    margin-top: 12px;
    letter-spacing: 0.005em;
}

.sj-chapter__copy p {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.65;
    color: var(--c-text);
    margin: 0 0 18px;
}
.sj-chapter__copy strong { color: var(--c-charcoal); font-weight: 600; }
.sj-chapter__copy em { color: var(--c-seagreen); font-style: italic; }

.sj-keypoints {
    list-style: none;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--c-line);
    display: grid;
    gap: 14px;
}
.sj-keypoints li {
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--c-text-2);
    padding-left: 22px;
    position: relative;
}
.sj-keypoints li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 12px; height: 1px;
    background: var(--c-seagreen);
}
.sj-keypoints li strong { color: var(--c-charcoal); font-weight: 600; }

.sj-cite {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    color: var(--c-text-3);
    letter-spacing: 0.04em;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--c-line);
}

/* ---------- PATHWAY (3-step mechanism) ---------- */
.sj-pathway {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 900px) { .sj-pathway { grid-template-columns: 1fr; } }
.sj-step {
    background: var(--c-white);
    border-top: 2px solid var(--c-charcoal);
    padding: clamp(24px, 2.4vw, 36px) 0 0;
    transition: border-color .35s;
}
.sj-step:hover { border-top-color: var(--c-seagreen); }
.sj-step__num {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.4rem, 3.4vw, 3rem);
    color: var(--c-seagreen);
    line-height: 1;
    margin-bottom: 24px;
    display: block;
    letter-spacing: -0.02em;
}
.sj-step h3 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: var(--c-charcoal);
    margin: 0 0 14px;
    text-wrap: balance;
}
.sj-step p {
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0 0 24px;
}
.sj-step__ref {
    font-family: var(--ff-body);
    font-size: 0.74rem;
    color: var(--c-text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- RESULTS — full-bleed dark stats ---------- */
.sj-results {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: clamp(96px, 12vw, 180px) 0;
    border-bottom: 1px solid var(--c-charcoal);
}
.sj-chapter__head--light .sj-chapter__marker { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.18); }
.sj-chapter__head--light .sj-chapter__topic { color: var(--c-seagreen); }
.sj-chapter__head--light h2 { color: var(--c-white); }
.sj-results__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 0;
    margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 760px) { .sj-results__grid { grid-template-columns: 1fr; } }

.sj-result {
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.sj-result:nth-child(1),
.sj-result:nth-child(2) { border-top: 0; }
@media (max-width: 760px) { .sj-result:nth-child(2) { border-top: 1px solid rgba(255,255,255,0.18); } }

.sj-result__num {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sj-result__digit {
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.045em;
    color: var(--c-seagreen);
}
.sj-result__symbol {
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0;
}
.sj-result h3 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    color: var(--c-white);
    letter-spacing: -0.018em;
    margin: 0 0 12px;
}
.sj-result p {
    font-family: var(--ff-body);
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0 0 18px;
    max-width: 50ch;
}
.sj-result__cite {
    font-family: var(--ff-body) !important;
    font-size: 0.76rem !important;
    color: rgba(255,255,255,0.5) !important;
    letter-spacing: 0.04em;
}

/* ---------- TIMELINE (Hb stages) ---------- */
.sj-chart {
    margin: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px);
}
.sj-chart img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-md);
    background: var(--c-white);
}

.sj-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    margin-bottom: clamp(80px, 10vw, 130px);
}
@media (max-width: 1100px) { .sj-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sj-timeline { grid-template-columns: 1fr; } }

.sj-tl {
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid var(--c-charcoal);
}
.sj-tl--milestone { border-top-color: var(--c-seagreen); border-top-width: 2px; }
.sj-tl__when {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-2);
    display: block;
    margin-bottom: 12px;
}
.sj-tl__hb {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}
.sj-tl__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 3.2vw, 2.8rem);
    color: var(--c-charcoal);
    letter-spacing: -0.03em;
    line-height: 1;
}
.sj-tl--milestone .sj-tl__num { color: var(--c-seagreen); }
.sj-tl__unit {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    color: var(--c-text-2);
    letter-spacing: 0.04em;
}
.sj-tl h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    color: var(--c-charcoal);
    letter-spacing: -0.012em;
    margin: 0 0 10px;
    line-height: 1.2;
}
.sj-tl p {
    font-family: var(--ff-body);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--c-text-2);
    margin: 0;
}

/* ---------- TRIAL (RCT) ---------- */
.sj-trial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--c-line);
}
@media (max-width: 900px) { .sj-trial { grid-template-columns: 1fr; row-gap: 40px; } }
.sj-trial__chart img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-md);
}
.sj-trial__copy h3 {
    margin-top: 18px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
}
.sj-trial__copy p {
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text);
    margin: 18px 0 0;
}
.sj-trial__spec {
    margin: clamp(28px, 3.4vw, 44px) 0 0;
    padding: clamp(28px, 3.4vw, 36px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    display: grid;
    gap: 10px;
}
.sj-trial__spec > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 24px;
    align-items: baseline;
}
.sj-trial__spec dt {
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-3);
}
.sj-trial__spec dd {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--c-text);
}
.sj-trial__spec dd strong { color: var(--c-charcoal); font-weight: 600; }

/* ---------- REFERENCES ---------- */
.sj-refs {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
}
.sj-refs__head {
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--c-line);
}
.sj-refs__head h2 {
    margin-top: 18px;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    color: var(--c-charcoal);
    letter-spacing: -0.022em;
}
.sj-refs__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 0;
}
.sj-refs__list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--c-line);
}
.sj-refs__list li:first-child { border-top: 0; }
.sj-refs__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--c-seagreen);
    letter-spacing: 0;
}
.sj-refs__cite {
    font-family: var(--ff-body);
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--c-text);
}
.sj-refs__cite em { color: var(--c-charcoal); font-style: italic; font-weight: 500; }
.sj-refs__note {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--c-line);
    font-family: var(--ff-body);
    font-size: 0.84rem;
    font-style: italic;
    color: var(--c-text-2);
    max-width: 70ch;
}

/* ============================================================
   REVIEWS PAGE — editorial reader edition
   rv- prefix
   ============================================================ */

/* ---------- HERO — masthead + score + breakdown ---------- */
.rv-hero {
    background: var(--c-white);
    padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 11vw, 160px);
    border-bottom: 1px solid var(--c-charcoal);
}
.rv-hero__masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: clamp(48px, 6vw, 72px);
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
.rv-hero__pub { color: var(--c-seagreen); }

.rv-hero__body {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
    padding-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 900px) {
    .rv-hero__body { grid-template-columns: 1fr; row-gap: 40px; }
}
.rv-hero__score .eyebrow { margin-bottom: 14px; }
.rv-hero__num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    line-height: 0.85;
    font-variant-numeric: tabular-nums;
}
.rv-hero__digit {
    font-size: clamp(6rem, 14vw, 12rem);
    color: var(--c-charcoal);
    letter-spacing: -0.045em;
}
.rv-hero__of {
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: var(--c-text-3);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.rv-hero__stars {
    color: var(--c-seagreen);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    letter-spacing: 0.18em;
    margin-bottom: 14px;
}
.rv-hero__count {
    font-family: var(--ff-body);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--c-text-2);
    margin: 0;
    max-width: 50ch;
}
.rv-hero__count strong { color: var(--c-charcoal); font-weight: 600; }

.rv-hero__breakdown {
    display: grid;
    gap: 12px;
}
.rv-bar {
    display: grid;
    grid-template-columns: 40px 1fr 50px;
    align-items: center;
    column-gap: 16px;
    font-family: var(--ff-body);
    font-size: 0.84rem;
    color: var(--c-text-2);
}
.rv-bar__label {
    font-weight: 600;
    color: var(--c-charcoal);
    letter-spacing: 0.04em;
}
.rv-bar__track {
    height: 6px;
    background: var(--c-line-soft);
    border-radius: 980px;
    overflow: hidden;
    position: relative;
}
.rv-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background: var(--c-seagreen);
    border-radius: 980px;
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.rv-bar__pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--c-text-2);
    font-weight: 500;
}

.rv-hero__title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 7.4vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--c-charcoal);
    margin: 0;
    text-wrap: balance;
}

/* ---------- Shared chapter marker for this page ---------- */
.rv-marker {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 16px;
}
.rv-marker--light { color: rgba(255,255,255,0.5); }

/* ---------- THEMES strip ---------- */
.rv-themes {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
}
.rv-themes__head {
    margin-bottom: clamp(48px, 6vw, 80px);
}
.rv-themes__head h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0;
}
.rv-themes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 48px;
}
@media (max-width: 900px) { .rv-themes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rv-themes__grid { grid-template-columns: 1fr; } }

.rv-theme {
    border-top: 1px solid var(--c-charcoal);
    padding-top: clamp(20px, 2vw, 28px);
}
.rv-theme__pct {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(3rem, 5vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--c-seagreen);
    font-variant-numeric: tabular-nums;
    margin-bottom: 18px;
}
.rv-theme__sym {
    font-size: 0.5em;
    color: var(--c-charcoal);
    font-weight: 500;
    margin-left: 4px;
}
.rv-theme h3 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    color: var(--c-charcoal);
    letter-spacing: -0.018em;
    line-height: 1.2;
    margin: 0 0 12px;
}
.rv-theme p {
    font-family: var(--ff-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0;
    max-width: 30ch;
}

/* ---------- FEATURE pull quote (charcoal full-bleed) ---------- */
.rv-feature {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: clamp(96px, 13vw, 200px) 0;
    text-align: center;
}
.rv-feature .rv-marker {
    display: block;
    margin-bottom: clamp(28px, 4vw, 48px);
    text-align: center;
}
.rv-feature__quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 3.2rem);
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--c-white);
    margin: 0 auto;
    max-width: 22ch;
    text-wrap: balance;
    position: relative;
}
.rv-feature__open,
.rv-feature__close {
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 700;
}
.rv-feature__attr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid rgba(255,255,255,0.18);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.rv-feature__author {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--c-white);
}
.rv-feature__meta {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.rv-feature__rating {
    color: var(--c-seagreen);
    letter-spacing: 0.16em;
    font-size: 0.96rem;
    margin-top: 8px;
}

/* ---------- WALL — masonry of letters ---------- */
.rv-wall {
    background: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
}
.rv-wall__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(48px, 6vw, 72px);
    padding-bottom: clamp(28px, 3.4vw, 44px);
    border-bottom: 1px solid var(--c-line);
}
.rv-wall__head h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0;
}
.rv-wall__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rv-wall__filters li {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--c-charcoal);
    padding: 8px 14px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    background: var(--c-white);
    transition: background .25s, color .25s, border-color .25s;
    cursor: pointer;
}
.rv-wall__filters li:hover { border-color: var(--c-charcoal); }
.rv-wall__filters li.is-active {
    background: var(--c-charcoal);
    color: var(--c-seagreen);
    border-color: var(--c-charcoal);
}

/* CSS columns gives a clean masonry without JS */
.rv-wall__grid {
    column-count: 3;
    column-gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 900px) { .rv-wall__grid { column-count: 2; } }
@media (max-width: 540px) { .rv-wall__grid { column-count: 1; } }

.rv-card {
    break-inside: avoid;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 2.4vw, 36px);
    margin-bottom: clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
    position: relative;
}
.rv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px rgba(0,0,0,0.06);
    border-color: var(--c-charcoal);
}
.rv-card__rating {
    color: var(--c-seagreen);
    font-size: 0.96rem;
    letter-spacing: 0.18em;
}
.rv-card__quote {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.34vw, 1.24rem);
    line-height: 1.4;
    letter-spacing: -0.012em;
    color: var(--c-charcoal);
    margin: 0;
    text-wrap: pretty;
}
.rv-card__attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 18px;
    border-top: 1px solid var(--c-line);
}
.rv-card__name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--c-charcoal);
}
.rv-card__meta {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    color: var(--c-text-2);
    letter-spacing: 0.04em;
}
.rv-card__tag {
    position: absolute;
    top: clamp(20px, 2vw, 28px);
    right: clamp(20px, 2vw, 28px);
    font-family: var(--ff-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-seagreen);
}

/* Featured large card */
.rv-card--lg .rv-card__quote {
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    line-height: 1.32;
}

/* Charcoal accent card to break the rhythm */
.rv-card--dark {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
}
.rv-card--dark .rv-card__quote { color: var(--c-white); }
.rv-card--dark .rv-card__name { color: var(--c-white); }
.rv-card--dark .rv-card__meta { color: rgba(255,255,255,0.6); }
.rv-card--dark .rv-card__attr { border-top-color: rgba(255,255,255,0.18); }
.rv-card--dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(0,0,0,0.18);
    border-color: var(--c-charcoal);
}

/* ---------- BY THE NUMBERS ---------- */
.rv-stats {
    background: var(--c-cream);
    padding: clamp(64px, 8vw, 120px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.rv-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(20px, 3vw, 56px);
    align-items: center;
}
@media (max-width: 760px) { .rv-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }
.rv-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rv-stat__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-charcoal);
    font-variant-numeric: tabular-nums;
}
.rv-stat__label {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
}

/* ============================================================
   FAQ PAGE — editorial knowledge base
   fq- prefix
   ============================================================ */

/* ---------- HERO ---------- */
.fq-hero {
    background: var(--c-white);
    padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 11vw, 140px);
    border-bottom: 1px solid var(--c-charcoal);
}
.fq-hero__masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: clamp(40px, 5vw, 64px);
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
.fq-hero__updated { color: var(--c-seagreen); }

.fq-hero__head { margin-bottom: clamp(40px, 5vw, 64px); }
.fq-hero__head .eyebrow { margin-bottom: 22px; }
.fq-hero__head h1 {
    font-size: clamp(2.4rem, 7vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
    max-width: 18ch;
}

.fq-hero__lede {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
    padding: clamp(32px, 4vw, 48px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: clamp(32px, 4vw, 48px);
}
.fq-hero__abstract {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.32vw, 1.24rem);
    line-height: 1.5;
    color: var(--c-text);
    margin: 0;
    max-width: 56ch;
}
.fq-hero__abstract a {
    color: var(--c-seagreen);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.fq-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fq-hero__stats li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--c-charcoal);
    padding-top: 14px;
}
.fq-hero__stats .num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: var(--c-seagreen);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.fq-hero__stats .lbl {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-2);
}
@media (max-width: 760px) {
    .fq-hero__lede { grid-template-columns: 1fr; row-gap: 32px; }
}

.fq-hero__toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fq-hero__toc a {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--c-charcoal);
    padding: 10px 16px;
    border: 1px solid var(--c-line);
    border-radius: 980px;
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
}
.fq-hero__toc a:hover {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
    color: var(--c-seagreen);
}

/* ---------- CHAPTER ---------- */
.fq-chap {
    background: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
    border-bottom: 1px solid var(--c-line);
}
.fq-chap--cream { background: var(--c-cream); }

.fq-chap__head {
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--c-line);
}
.fq-chap__marker {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--c-line);
}
.fq-chap__topic {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-seagreen);
}
.fq-chap__head h2 {
    margin-top: 24px;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 24ch;
    text-wrap: balance;
}

.fq-chap__list {
    display: grid;
    gap: 0;
}

/* ---------- ACCORDION ROW ---------- */
.fq-q {
    border-top: 1px solid var(--c-line);
}
.fq-q:last-child { border-bottom: 1px solid var(--c-line); }
.fq-q .faq-item__btn {
    display: grid !important;
    grid-template-columns: 64px 1fr 36px;
    align-items: start;
    column-gap: clamp(16px, 2vw, 28px);
    width: 100%;
    background: transparent;
    border: 0;
    padding: clamp(28px, 3vw, 40px) 0;
    text-align: left;
    cursor: pointer;
    color: var(--c-charcoal);
    transition: color .25s;
}
.fq-q .faq-item__btn:hover { color: var(--c-seagreen); }
.fq-q__num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
    padding-top: 8px;
}
.fq-q__text {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-charcoal);
    transition: color .25s;
    text-wrap: balance;
}
.fq-q .faq-item__btn:hover .fq-q__text { color: var(--c-seagreen); }
.fq-q.is-open .fq-q__text { color: var(--c-seagreen); }

.fq-q__icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    position: relative;
    margin-top: 4px;
    flex-shrink: 0;
    transition: border-color .35s, background .35s;
}
.fq-q__icon::before,
.fq-q__icon::after {
    content: "";
    position: absolute;
    background: var(--c-charcoal);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), background .35s;
}
.fq-q__icon::before {
    top: 50%; left: 25%; right: 25%;
    height: 1.5px;
    transform: translateY(-50%);
}
.fq-q__icon::after {
    left: 50%; top: 25%; bottom: 25%;
    width: 1.5px;
    transform: translateX(-50%) rotate(0deg);
}
.fq-q.is-open .fq-q__icon {
    background: var(--c-charcoal);
    border-color: var(--c-charcoal);
}
.fq-q.is-open .fq-q__icon::before,
.fq-q.is-open .fq-q__icon::after {
    background: var(--c-seagreen);
}
.fq-q.is-open .fq-q__icon::after { transform: translateX(-50%) rotate(90deg); }

/* Panel */
.fq-q .faq-item__panel { overflow: hidden; max-height: 0; transition: max-height .55s cubic-bezier(.2,.8,.2,1); }
.fq-q .faq-item__panel-inner {
    padding: 0 0 clamp(28px, 3vw, 40px) 64px;
    max-width: 80ch;
}
.fq-q .faq-item__panel-inner p {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.6;
    color: var(--c-text);
    margin: 0 0 14px;
}
.fq-q .faq-item__panel-inner p:last-child { margin-bottom: 0; }
.fq-q .faq-item__panel-inner strong { color: var(--c-charcoal); font-weight: 600; }
.fq-q .faq-item__panel-inner em { color: var(--c-seagreen); font-style: italic; }
.fq-q .faq-item__panel-inner a { color: var(--c-seagreen); text-decoration: underline; text-underline-offset: 4px; }
.fq-cite {
    font-family: var(--ff-body) !important;
    font-size: 0.78rem !important;
    color: var(--c-text-3) !important;
    letter-spacing: 0.04em;
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid var(--c-line);
}
@media (max-width: 600px) {
    .fq-q .faq-item__btn { grid-template-columns: 36px 1fr 28px; }
    .fq-q .faq-item__panel-inner { padding-left: 0; }
    .fq-q__num { font-size: 0.74rem; padding-top: 6px; }
}

/* ---------- HELPDESK ---------- */
.fq-helpdesk {
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: clamp(80px, 11vw, 160px) 0;
}
.fq-helpdesk__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.fq-helpdesk__col h2 {
    color: var(--c-white);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 18px 0 0;
}
.fq-helpdesk__col .fq-chap__topic { color: var(--c-seagreen); }
.fq-helpdesk__contacts {
    display: grid;
    gap: 0;
}
.fq-helpdesk__link {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    column-gap: 24px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    text-decoration: none;
    color: var(--c-white);
    transition: color .25s, padding-left .35s;
}
.fq-helpdesk__link:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.fq-helpdesk__link:hover {
    color: var(--c-seagreen);
    padding-left: 8px;
}
.fq-helpdesk__lbl {
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.fq-helpdesk__val {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.32rem);
    letter-spacing: -0.018em;
}
@media (max-width: 760px) {
    .fq-helpdesk__inner { grid-template-columns: 1fr; row-gap: 40px; }
    .fq-helpdesk__link { grid-template-columns: 1fr; row-gap: 6px; }
}

/* ============================================================
   FEATURED PRODUCT — editorial product spread (home page)
   fp-feature
   ============================================================ */
.fp-feature {
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 160px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}
/* Softer alt background for alternating rows, so 4 spreads breathe */
.fp-feature--alt { background: var(--c-white); }
/* Collapse touching borders between back-to-back spreads */
.fp-feature + .fp-feature { border-top: 0; }

/* Reversed layout — media on the right, copy on the left */
.fp-feature--reverse .fp-feature__layout { grid-template-columns: 1fr 1.1fr; }
.fp-feature--reverse .fp-feature__media { order: 2; }
.fp-feature--reverse .fp-feature__copy  { order: 1; }
@media (max-width: 900px) {
    .fp-feature--reverse .fp-feature__media,
    .fp-feature--reverse .fp-feature__copy { order: initial; }
}

.fp-feature__masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 24px;
    padding-bottom: clamp(28px, 3.4vw, 44px);
    margin-bottom: clamp(48px, 6vw, 72px);
    border-bottom: 1px solid var(--c-line);
    font-family: var(--ff-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-3);
}
.fp-feature__kicker { color: var(--c-charcoal); }
.fp-feature__edition { color: var(--c-seagreen); }

.fp-feature__layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
@media (max-width: 900px) {
    .fp-feature__layout { grid-template-columns: 1fr; row-gap: 48px; }
}

/* Media */
.fp-feature__media {
    position: relative;
    background: var(--c-white);
    border-radius: var(--r-lg);
    padding: clamp(32px, 4vw, 64px);
    border: 1px solid var(--c-line);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fp-feature__media img {
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.fp-feature__media:hover img { transform: scale(1.03); }

/* Floating circular price tag */
.fp-feature__price-tag {
    position: absolute;
    top: clamp(20px, 2.4vw, 32px);
    right: clamp(20px, 2.4vw, 32px);
    width: clamp(96px, 12vw, 132px);
    height: clamp(96px, 12vw, 132px);
    border-radius: 50%;
    background: var(--c-charcoal);
    color: var(--c-seagreen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    line-height: 1;
    transform: rotate(-8deg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.fp-feature__media:hover .fp-feature__price-tag { transform: rotate(-4deg) scale(1.04); }
.fp-feature__price-currency {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: -4px;
}
.fp-feature__price-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--c-white);
}
.fp-feature__price-unit {
    font-family: var(--ff-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-top: 6px;
}

/* Copy */
.fp-feature__rating-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: clamp(20px, 2.4vw, 28px);
}
.fp-feature__stars {
    color: var(--c-seagreen);
    font-size: 0.96rem;
    letter-spacing: 0.18em;
}
.fp-feature__rating-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.fp-feature__rating-link {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--c-text-2);
    text-decoration: none;
    transition: color .25s;
}
.fp-feature__rating-link:hover { color: var(--c-seagreen); }

.fp-feature__title {
    font-family: var(--ff-display);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--c-charcoal);
    margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.fp-feature__title-pre {
    display: block;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--c-text-2);
    letter-spacing: -0.018em;
    margin-bottom: 4px;
}
.fp-feature__title-main {
    display: block;
    font-size: clamp(3.4rem, 7vw, 6rem);
    color: var(--c-charcoal);
}
.fp-feature__title-plus {
    color: var(--c-seagreen);
    font-style: italic;
    font-weight: 500;
}

.fp-feature__deck {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.32vw, 1.24rem);
    line-height: 1.5;
    color: var(--c-text);
    margin: 0 0 clamp(28px, 3vw, 40px);
    max-width: 50ch;
}

/* Specs (dl) */
.fp-feature__specs {
    margin: 0 0 clamp(28px, 3vw, 40px);
    padding: clamp(20px, 2.4vw, 28px) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 18px;
}
.fp-feature__specs > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.fp-feature__specs dt {
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-3);
}
.fp-feature__specs dd {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Numbered features */
.fp-feature__features {
    list-style: none;
    margin: 0 0 clamp(32px, 3.4vw, 40px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 14px;
}
.fp-feature__features li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--ff-body);
    font-size: 0.96rem;
    color: var(--c-charcoal);
}
.fp-feature__features li span {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--c-seagreen);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.fp-feature__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: clamp(20px, 2.4vw, 28px);
}

.fp-feature__trust {
    font-family: var(--ff-body);
    font-size: 0.84rem;
    color: var(--c-text-2);
    margin: 0;
    padding-top: clamp(18px, 2.4vw, 24px);
    border-top: 1px solid var(--c-line);
    letter-spacing: 0.02em;
}
.fp-feature__trust strong { color: var(--c-charcoal); font-weight: 600; }

/* ============================================================
   HERO BANNER CAROUSEL — auto-rotating editorial banner
   Replaces .hero__grid for the homepage. Self-contained, full-bleed
   inside the .hero container; matches brand tokens.
   ============================================================ */
.hero-banners {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--c-surface-1);
    /* Matches banner-1 & 2 (1672 x 941 ≈ 16:9); banners 3-5 (3:2) crop a touch top/bottom under cover */
    aspect-ratio: 16 / 9;
    isolation: isolate;
}
.hero-banners__track { position: absolute; inset: 0; }

/* Subtle, professional crossfade — opacity only, no clip-path, no blur.
   Inactive slides are completely hidden so no right-edge gaps mid-transition. */
.hero-banners__slide {
    /* <figure> default margin (1em / 40px) must be zeroed or it offsets the absolute box */
    margin: 0;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    will-change: opacity;
}
.hero-banners__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.hero-banners__slide a,
.hero-banners__slide img {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-banners__slide img {
    object-fit: cover;
    object-position: center top;
}

/* Progress bar inside the banner */
.hero-banners__progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.18);
    z-index: 3;
}
.hero-banners__progress::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: var(--c-seagreen);
    transition: width .12s linear;
}
.hero-banners[data-progress="1"] .hero-banners__progress::after { width: var(--p, 0%); }

/* Dot indicators */
.hero-banners__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    display: flex;
    gap: 10px;
    z-index: 4;
    padding: 8px 14px;
    background: rgba(40,40,40,.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
}
.hero-banners__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, width .35s cubic-bezier(.22,1,.36,1);
}
.hero-banners__dot:hover { background: rgba(255,255,255,.7); }
.hero-banners__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: var(--c-seagreen);
}

/* Hero section is the banner — no surrounding padding */
.hero.hero--banners { padding: 0; }

/* Mobile: portrait aspect so banner content stays readable */
@media (max-width: 720px) {
    .hero-banners { aspect-ratio: 4 / 5; border-radius: 0; }
    .hero-banners__slide img { object-position: center; }
    .hero-banners__dots { bottom: 12px; padding: 6px 10px; gap: 8px; }
}

/* ============================================================
   PRODUCT SHOWCASE — "Explore the routine" four-card row
   Editorial grid that lives directly under the hero banner.
   Brand-aligned: sea-green status pills, charcoal CTA, tinted shadow.
   ============================================================ */
.products-row{
    padding: clamp(64px, 9vw, 120px) 0;
    background: var(--c-white);
}
.products-row__head{
    text-align: center;
    margin-bottom: clamp(40px, 5.5vw, 64px);
}
.products-row__title{
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--c-charcoal);
    margin: 0 0 12px;
    text-wrap: balance;
}
.products-row__title em{
    font-style: italic;
    font-weight: 500;
    color: var(--c-seagreen);
}
.products-row__sub{
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--c-text-2);
    letter-spacing: -0.005em;
}
.products-row__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2vw, 28px);
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 1100px){.products-row__grid{grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); max-width: 880px;}}
@media (max-width: 520px) {.products-row__grid{grid-template-columns: 1fr; max-width: 460px;}}

/* --- Card ---------------------------------------------------- */
.product-card{
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.product-card:hover{transform: translateY(-4px);}

.product-card__media{
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    background: #F7F3EC;
    box-shadow: 0 1px 2px rgba(40,40,40,.04),
                0 24px 50px rgba(35,134,127,.10);
    transition: box-shadow .4s ease, transform .4s ease;
}
.product-card:hover .product-card__media{
    box-shadow: 0 1px 2px rgba(40,40,40,.04),
                0 28px 56px rgba(35,134,127,.18);
}
.product-card__media img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-card__media img{transform: scale(1.03);}

/* All product shots share the same warm shoot backdrop —
   the card media background blends with that floor tone. */
.product-card--01 .product-card__media,
.product-card--02 .product-card__media,
.product-card--03 .product-card__media{background: #F7F3EC;}

/* Status badge — top-left */
.product-card__badge{
    position: absolute;
    top: 16px; left: 16px;
    background: var(--c-charcoal);
    color: var(--c-white);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 6px;
    z-index: 2;
}
.product-card__badge--sea{background: var(--c-seagreen);}
.product-card__badge--cream{background: #FBE5EE; color: var(--c-charcoal);}
.product-card__badge--ink{background: var(--c-charcoal);}

/* Discount strip — bottom-left */
.product-card__discount{
    position: absolute;
    bottom: 16px; left: 16px;
    background: rgba(40,40,40,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 7px 12px;
    border-radius: 6px;
    z-index: 2;
}
.product-card__discount strong{color: var(--c-seagreen); font-weight: 800;}

/* --- Body --------------------------------------------------- */
.product-card__body{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 0;
}
.product-card__name{
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.2;
    color: var(--c-charcoal);
    letter-spacing: -0.015em;
    margin: 0;
}
.product-card__desc{
    font-size: 0.95rem;
    color: var(--c-text-2);
    margin: 0;
    line-height: 1.45;
    min-height: 2.5em;
}
.product-card__rating{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    font-size: 0.8125rem;
}
.product-card__stars{
    color: var(--c-seagreen);
    letter-spacing: 1px;
    font-size: 0.9rem;
    line-height: 1;
}
.product-card__reviews{
    color: var(--c-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.product-card__price{
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
}
.product-card__price small{
    font-weight: 500;
    color: var(--c-text-2);
    font-family: var(--ff-body);
    font-size: 0.85rem;
    margin-right: 4px;
}

/* CTA --------------------------------------------------------- */
.product-card__cta{
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--c-charcoal);
    color: var(--c-white);
    padding: 14px 18px;
    border-radius: 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 4px 12px rgba(40,40,40,.10);
}
.product-card__cta:hover{
    background: var(--c-seagreen);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(35,134,127,.32);
}
.product-card__cta:active{transform: translateY(0);}
.product-card__cta svg{width: 16px; height: 16px;}

/* Match the warm shoot backdrop across all 4 cards */
.product-card--04 .product-card__media{background: #F7F3EC;}

/* Tighten card density when the row holds 4 SKUs */
@media (min-width: 1101px){
    .product-card__name{font-size: clamp(1rem, 1.2vw, 1.2rem);}
    .product-card__desc{font-size: 0.88rem; min-height: 2.4em;}
    .product-card__price{font-size: 1.1rem;}
    .product-card__cta{padding: 12px 16px; font-size: 0.84rem;}
    .product-card__discount{font-size: 11px; padding: 6px 10px;}
    .product-card__badge{font-size: 10px; padding: 6px 10px;}
}

/* ============================================================
   COMPANY · "Who we are" — multi-product brand frame
   ============================================================ */
.company{
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--c-charcoal);
    color: var(--c-white);
}
.company__grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.company__head .eyebrow{
    color: var(--c-seagreen);
    margin-bottom: 18px;
}
.company__head .eyebrow::before{background: var(--c-seagreen);}
.company__title{
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--c-white);
    margin: 0 0 24px;
    text-wrap: balance;
}
.company__title .bold-pink{color: var(--c-seagreen);}
.company__lede{
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.55;
    color: #D8D8D8;
    margin: 0 0 16px;
    max-width: 52ch;
}
.company__lede--muted{color: #9F9F9F; font-size: 0.98rem;}
.company__lede strong{color: var(--c-white); font-weight: 700;}

.company__facts{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
}
.company__fact{
    background: var(--c-charcoal);
    padding: clamp(22px, 2.8vw, 32px) clamp(20px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 130px;
    justify-content: center;
}
.company__fact-num{
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--c-seagreen);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.company__fact-num small{
    font-size: 0.55em;
    color: #B4B4B4;
    font-weight: 600;
    margin-left: 2px;
}
.company__fact-lbl{
    font-size: 0.86rem;
    color: #C0C0C0;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

@media (max-width: 900px){
    .company__grid{grid-template-columns: 1fr; gap: 40px;}
}
@media (max-width: 520px){
    .company__facts{grid-template-columns: 1fr;}
}

/* CTA band: two-button row */
.cta-band__cta{display: flex; flex-wrap: wrap; gap: 12px;}
.cta-band .btn--ghost{
    background: transparent;
    color: var(--c-white);
    border: 1.5px solid rgba(255,255,255,.4);
}
.cta-band .btn--ghost:hover{
    background: var(--c-white);
    color: var(--c-charcoal);
    border-color: var(--c-white);
}