/* ==========================================================================
   REVERVE

   Contents
     1.  Typeface
     2.  Tokens
     3.  Reset and base
     4.  Layout helpers
     5.  Typography
     6.  Buttons
     7.  Header and navigation
     8.  Hero
     9.  Cards
     10. Problem
     11. Steps
     12. The unit
     13. Materials
     14. Team
     15. FAQ
     16. Contact
     17. Footer
     18. Motion
     19. Print
   ========================================================================== */

/* ==========================================================================
   1. Typeface
   ========================================================================== */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-regular.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-medium.woff2") format("woff2");
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-semibold.woff2") format("woff2");
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-bold.woff2") format("woff2");
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-extrabold.woff2") format("woff2");
    font-weight: 800; font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
    color-scheme: dark;

    --bg:            #070a0c;
    --bg-raised:     #0b1013;
    --bg-card:       #0e1417;
    --bg-inset:      #10171a;

    --ink:           #f3f5f6;
    --ink-soft:      #b6c2cc;
    --ink-mute:      #8797a4;

    --brand:         #15b79e;
    --brand-lift:    #2ad3b8;
    --brand-ink:     #04100d;   /* text that sits on a brand-filled surface */
    --brand-wash:    rgba(21, 183, 158, 0.08);
    --brand-edge:    rgba(21, 183, 158, 0.28);

    --line:          rgba(255, 255, 255, 0.09);
    --line-soft:     rgba(255, 255, 255, 0.05);
    --line-strong:   rgba(255, 255, 255, 0.16);

    --header-bg:     rgba(7, 10, 12, 0.72);
    --header-bg-solid: rgba(7, 10, 12, 0.94);
    --hover-tint:    rgba(255, 255, 255, 0.04);
    --glow:          rgba(21, 183, 158, 0.13);

    --lift: 0 18px 40px rgba(0, 0, 0, 0.45);

    /* Dark surfaces separate by border and value, so shadow stays almost
       invisible and only anchors the largest panels. */
    --shadow-sm: none;
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);

    /* The plate that dark product renders sit on. On dark it is the page. */
    --stage: transparent;
    --stage-pad: 0px;
    --stage-shadow: none;

    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-pill: 999px;

    --gutter: 20px;
    --measure: 1200px;
    --section-y: clamp(72px, 9vw, 130px);

    --type: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Light theme. Applied when the visitor asks for it, or when their system
   prefers light and they have expressed no preference of their own. */
[data-theme="light"] {
    color-scheme: light;

    /* Paper, not screen-white. Cards then lift to true white above it. */
    --bg:            #fbfbfa;
    --bg-raised:     #f1f4f3;
    --bg-card:       #ffffff;
    --bg-inset:      #f4f6f6;

    --ink:           #0f1a1d;
    --ink-soft:      #3f5158;
    --ink-mute:      #5c6d74;

    --brand:         #0b7d69;
    --brand-lift:    #096354;
    --brand-ink:     #ffffff;
    --brand-wash:    rgba(11, 125, 105, 0.06);
    --brand-edge:    rgba(11, 125, 105, 0.18);

    --line:          rgba(15, 26, 29, 0.10);
    --line-soft:     rgba(15, 26, 29, 0.07);
    --line-strong:   rgba(15, 26, 29, 0.20);

    --header-bg:     rgba(251, 251, 250, 0.82);
    --header-bg-solid: rgba(251, 251, 250, 0.96);
    --hover-tint:    rgba(15, 26, 29, 0.04);
    --glow:          rgba(11, 125, 105, 0.10);

    --lift: 0 18px 44px rgba(15, 26, 29, 0.09);

    /* Elevation does the work that value differences do on dark. */
    --shadow-sm: 0 1px 2px rgba(15, 26, 29, 0.04), 0 2px 8px rgba(15, 26, 29, 0.04);
    --shadow-md: 0 2px 4px rgba(15, 26, 29, 0.04), 0 14px 30px rgba(15, 26, 29, 0.07);
    --shadow-lg: 0 4px 10px rgba(15, 26, 29, 0.05), 0 28px 60px rgba(15, 26, 29, 0.10);

    /* Product renders have dark backgrounds baked in, so on a light page they
       get a deliberate dark plate instead of floating as black rectangles. */
    --stage: #0c1215;
    --stage-pad: clamp(18px, 3vw, 34px);
    --stage-shadow: 0 20px 50px rgba(15, 26, 29, 0.16);
}


/* Without scripting there is no data-theme attribute, so honour the system
   preference here instead. Scoped to :root:not([data-theme]) so it never
   fights a choice the visitor actually made. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        /* Paper, not screen-white. Cards then lift to true white above it. */
        --bg:            #fbfbfa;
        --bg-raised:     #f1f4f3;
        --bg-card:       #ffffff;
        --bg-inset:      #f4f6f6;

        --ink:           #0f1a1d;
        --ink-soft:      #3f5158;
        --ink-mute:      #5c6d74;

        --brand:         #0b7d69;
        --brand-lift:    #096354;
        --brand-ink:     #ffffff;
        --brand-wash:    rgba(11, 125, 105, 0.06);
        --brand-edge:    rgba(11, 125, 105, 0.18);

        --line:          rgba(15, 26, 29, 0.10);
        --line-soft:     rgba(15, 26, 29, 0.07);
        --line-strong:   rgba(15, 26, 29, 0.20);

        --header-bg:     rgba(251, 251, 250, 0.82);
        --header-bg-solid: rgba(251, 251, 250, 0.96);
        --hover-tint:    rgba(15, 26, 29, 0.04);
        --glow:          rgba(11, 125, 105, 0.10);

        --lift: 0 18px 44px rgba(15, 26, 29, 0.09);

        /* Elevation does the work that value differences do on dark. */
        --shadow-sm: 0 1px 2px rgba(15, 26, 29, 0.04), 0 2px 8px rgba(15, 26, 29, 0.04);
        --shadow-md: 0 2px 4px rgba(15, 26, 29, 0.04), 0 14px 30px rgba(15, 26, 29, 0.07);
        --shadow-lg: 0 4px 10px rgba(15, 26, 29, 0.05), 0 28px 60px rgba(15, 26, 29, 0.10);

        /* Product renders have dark backgrounds baked in, so on a light page they
           get a deliberate dark plate instead of floating as black rectangles. */
        --stage: #0c1215;
        --stage-pad: clamp(18px, 3vw, 34px);
        --stage-shadow: 0 20px 50px rgba(15, 26, 29, 0.16);
    }
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* ==========================================================================
   3. Reset and base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 104px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--type);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--brand-lift);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection { background: var(--brand); color: var(--bg); }

.skip-link {
    position: absolute;
    left: -9999px; top: 0;
    z-index: 200;
    padding: 14px 22px;
    background: var(--brand);
    color: var(--bg);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus { left: 0; }

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

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

/* ==========================================================================
   5. Typography
   ========================================================================== */

.display {
    font-size: clamp(2.35rem, 6vw, 4.05rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.h2 {
    font-size: clamp(1.85rem, 4vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.h3 {
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
    line-height: 1.28;
    letter-spacing: -0.018em;
    font-weight: 700;
}

.h4 {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.62;
    letter-spacing: -0.012em;
    color: var(--ink-soft);
}

.body { color: var(--ink-soft); }
.body-sm { font-size: 0.94rem; color: var(--ink-mute); line-height: 1.68; }

.accent { color: var(--brand); }

.kicker {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 14px;
}

.section-head { max-width: 720px; }
.section-head .h2 + p { margin-top: 18px; }

.note { font-size: 0.8rem; color: var(--ink-mute); line-height: 1.6; }
.note a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 0.97rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s var(--ease),
                border-color 0.18s var(--ease),
                transform 0.18s var(--ease);
}

.btn svg { flex: none; }

.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { background: var(--brand-lift); transform: translateY(-1px); }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-lift); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ==========================================================================
   7. Header and navigation
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-header.is-stuck {
    background: var(--header-bg-solid);
    border-bottom-color: var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--brand-wash);
    border: 1px solid var(--brand-edge);
    color: var(--brand-lift);
    flex: none;
}

.brand-word { font-size: 1.18rem; font-weight: 800; letter-spacing: 0.1em; }

/* Logo sizing depends on the shape of the artwork supplied. A stacked lockup
   (mark above wordmark) cannot be shrunk to header height without the wordmark
   becoming unreadable, so each variant gets its own treatment. */
.brand-logo { width: auto; display: block; }

/* Horizontal lockup, used on its own. */
.brand--wide .brand-logo { height: 40px; }

/* Mark only, set beside the wordmark in the site typeface. */
.brand--mark .brand-logo { height: 38px; }

/* Whatever was supplied, when it is the only file available. Given more height
   than the others because it is most likely a stacked lockup. */
.brand--full .brand-logo { height: 56px; }

/* The footer has vertical room, so the full artwork can breathe. */
.brand--footer { align-items: flex-start; }
.brand--footer .brand-logo { height: 96px; }

@media (min-width: 1000px) {
    .brand--wide .brand-logo { height: 44px; }
    .brand--mark .brand-logo { height: 42px; }
    .brand--full .brand-logo { height: 62px; }
}

/* Swap between light-background and dark-background artwork. When only one file
   is supplied both point at it, so this collapses to a no-op. */
.brand-logo--light { display: none; }
.brand-logo--dark  { display: block; }

[data-theme="light"] .brand-logo--light { display: block; }
[data-theme="light"] .brand-logo--dark  { display: none; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .brand-logo--light { display: block; }
    :root:not([data-theme]) .brand-logo--dark  { display: none; }
}

.nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 4px; }

.nav-list a {
    display: block;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-mute);
    text-decoration: none;
    transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.nav-list a:hover { color: var(--ink); background: var(--hover-tint); }
.nav-list a.is-current, .nav-list a[aria-current="page"] { color: var(--brand-lift); }

.header-cta { display: none; }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0;
    background: var(--hover-tint);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    flex: none;
}

.nav-toggle span {
    display: block;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
    position: fixed;
    inset: 78px 0 auto 0;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    padding: 10px var(--gutter) 30px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.24s var(--ease), opacity 0.2s var(--ease), visibility 0.24s;
    z-index: 99;
}

.nav-drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.nav-drawer a {
    display: block;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.02rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.nav-drawer a.is-current { color: var(--brand-lift); }

.nav-drawer a.btn {
    margin-top: 24px;
    padding: 15px 26px;
    border-bottom: 0;
    font-size: 0.97rem;
}

.nav-drawer a.btn--primary { color: var(--brand-ink); }

@media (min-width: 1000px) {
    .header-inner { height: 88px; }
    .nav { display: block; }
    .header-cta { display: inline-flex; }
    .nav-toggle, .nav-drawer { display: none; }
    .header-tools { gap: 14px; }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero {
    position: relative;
    padding-top: 142px;
    padding-bottom: clamp(60px, 8vw, 96px);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -220px; left: 50%;
    width: min(1100px, 150vw);
    aspect-ratio: 1;
    transform: translateX(-58%);
    background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    gap: clamp(44px, 6vw, 64px);
    align-items: center;
}

.hero .display { margin-top: 22px; }
.hero .lede { margin-top: 24px; max-width: 34em; }

.hero-figure {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--stage-pad);
    background: var(--stage);
    border-radius: var(--r-lg);
    box-shadow: var(--stage-shadow);
}

.hero-figure::before {
    content: "";
    position: absolute;
    inset: 8%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 66%);
    filter: blur(28px);
}

.hero-figure img {
    position: relative;
    width: 100%;
    max-width: 460px;
    border-radius: var(--r-md);
}

.facts {
    display: grid;
    gap: 1px;
    margin-top: clamp(48px, 6vw, 72px);
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.fact { padding: 24px 22px; background: var(--bg-card); }

.fact dt { font-size: 0.84rem; color: var(--ink-mute); margin-bottom: 8px; }
.fact dd { margin: 0; }

.fact dd b {
    display: block;
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.fact dd span {
    display: block;
    margin-top: 7px;
    font-size: 0.87rem;
    font-weight: 400;
    color: var(--ink-mute);
    line-height: 1.55;
}

@media (min-width: 620px)  { .facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
    .hero { padding-top: 178px; }
    .hero-grid { grid-template-columns: 1.08fr 0.92fr; }
}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.cards {
    display: grid;
    gap: 18px;
    margin-top: clamp(38px, 5vw, 54px);
}

.card {
    padding: 30px 26px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
}

.card:hover {
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.card .h3 { margin-bottom: 12px; }
.card p { color: var(--ink-mute); font-size: 0.95rem; }

.card-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 20px;
    border-radius: 11px;
    background: var(--brand-wash);
    border: 1px solid var(--brand-edge);
    color: var(--brand-lift);
}

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

/* ==========================================================================
   10. Problem
   ========================================================================== */

.problem-grid { display: grid; gap: clamp(36px, 5vw, 56px); }

.problem-figure {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    min-height: 260px;
}

.problem-figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; inset: 0;
}

.problem-figure::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,10,12,0.1) 0%, rgba(7,10,12,0.9) 100%);
}

.problem-stat { position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 2; }

.problem-stat b {
    display: block;
    font-size: clamp(2.1rem, 5vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #ffffff;
}

.problem-stat span {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 30em;
}

.problem-list { display: grid; margin-top: 34px; }

.problem-list li {
    padding: 24px 0;
    border-top: 1px solid var(--line-soft);
}

.problem-list li:last-child { border-bottom: 1px solid var(--line-soft); }

.problem-list h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 7px; }
.problem-list p { color: var(--ink-mute); font-size: 0.95rem; }

@media (min-width: 900px) {
    .problem-grid { grid-template-columns: 0.92fr 1.08fr; align-items: start; }
    .problem-figure { min-height: 420px; position: sticky; top: 110px; }
}

/* ==========================================================================
   11. Steps
   ========================================================================== */

.steps { display: grid; gap: 0; margin-top: clamp(40px, 5vw, 58px); counter-reset: step; }

.step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--line-soft);
}

.step:last-child { border-bottom: 1px solid var(--line-soft); }

.step-num {
    counter-increment: step;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--brand-edge);
    background: var(--brand-wash);
    color: var(--brand-lift);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.step-num::before { content: counter(step, decimal-leading-zero); }

.step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.018em; }
.step p { color: var(--ink-mute); font-size: 0.96rem; max-width: 58ch; }

.step-aside {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg-inset);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    color: var(--ink-mute);
}

@media (min-width: 800px) {
    .step { grid-template-columns: 56px 1fr; gap: 28px; padding: 30px 0; }
}

@media (min-width: 1060px) {
    .steps { grid-template-columns: 1fr 1fr; column-gap: 56px; }
    .step:nth-child(2) { border-top: 1px solid var(--line-soft); }
    .step:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line-soft); }
}

/* ==========================================================================
   12. The unit
   ========================================================================== */

.anatomy-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }

.anatomy-figure {
    position: relative;
    display: grid;
    place-items: center;
    padding: max(20px, var(--stage-pad));
    background: var(--stage);
    border-radius: var(--r-lg);
    box-shadow: var(--stage-shadow);
}

.anatomy-figure::before {
    content: "";
    position: absolute; inset: 12%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
    filter: blur(24px);
}

.anatomy-figure img { position: relative; border-radius: var(--r-md); }

.specs {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.spec {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    background: var(--bg-card);
}

.spec-icon {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--hover-tint);
    border: 1px solid var(--line-soft);
    color: var(--brand-lift);
}

.spec h3 { font-size: 0.99rem; font-weight: 600; margin-bottom: 5px; }
.spec p { font-size: 0.9rem; color: var(--ink-mute); line-height: 1.6; }

@media (min-width: 940px) {
    .anatomy-grid { grid-template-columns: 0.95fr 1.05fr; }
    .specs { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   13. Materials
   ========================================================================== */

.streams {
    display: grid;
    margin-top: clamp(38px, 5vw, 52px);
    border-top: 1px solid var(--line-soft);
}

.stream {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 4px 18px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line-soft);
}

.stream-index {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-mute);
    padding-top: 0.28rem;
    font-variant-numeric: tabular-nums;
}

.stream h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.014em; }
.stream p { font-size: 0.92rem; color: var(--ink-mute); grid-column: 2; }

@media (min-width: 820px) {
    .stream { grid-template-columns: 2.4rem 12rem 1fr; align-items: baseline; gap: 18px; }
    .stream p { grid-column: 3; }
}

.onward {
    display: grid;
    gap: 28px;
    margin-top: clamp(44px, 5vw, 64px);
    padding: clamp(26px, 4vw, 40px);
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.onward-figure { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); }
.onward-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

@media (min-width: 860px) { .onward { grid-template-columns: 1fr 0.85fr; gap: 44px; } }

/* ==========================================================================
   14. Team
   ========================================================================== */

.team-grid { display: grid; gap: 18px; margin-top: clamp(38px, 5vw, 52px); }

.person {
    padding: 28px 26px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.person-initials {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--brand-wash);
    border: 1px solid var(--brand-edge);
    color: var(--brand-lift);
    font-weight: 700;
}

.person h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.018em; }

.person .role {
    display: block;
    margin: 4px 0 12px;
    font-size: 0.87rem;
    color: var(--brand);
}

.person p { font-size: 0.93rem; color: var(--ink-mute); }

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

/* ==========================================================================
   15. FAQ
   ========================================================================== */

.faq {
    max-width: 880px;
    margin-top: clamp(38px, 5vw, 52px);
    border-top: 1px solid var(--line-soft);
}

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

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 4px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.012em;
    color: var(--ink);
    cursor: pointer;
}

.faq-q:hover { color: var(--brand-lift); }

.faq-sign { position: relative; width: 18px; height: 18px; flex: none; color: var(--brand); }

.faq-sign::before,
.faq-sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateY(-50%);
    transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}

.faq-sign::after { transform: translateY(-50%) rotate(90deg); }

.faq-q[aria-expanded="true"] .faq-sign::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.faq-a { display: grid; grid-template-rows: 1fr; }

/* Collapse only when scripting is there to open it back up. */
.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease); }
.faq-a > div { overflow: hidden; }
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }

html:not(.js) .faq-sign { display: none; }
html:not(.js) .faq-q { cursor: default; }

.faq-a p { padding: 0 4px 24px; color: var(--ink-mute); font-size: 0.96rem; max-width: 70ch; }
.faq-a p + p { padding-top: 12px; }

/* ==========================================================================
   16. Contact
   ========================================================================== */

.contact-panel {
    display: grid;
    gap: clamp(34px, 4vw, 54px);
    padding: clamp(28px, 4vw, 52px);
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.contact-aside .h2 { margin-bottom: 18px; }

.contact-points { display: grid; gap: 20px; margin-top: 30px; }
.contact-point dt { font-size: 0.84rem; color: var(--ink-mute); margin-bottom: 5px; }
.contact-point dd { margin: 0; font-size: 1rem; font-weight: 600; }
.contact-point a { color: var(--brand-lift); text-decoration: none; }
.contact-point a:hover { text-decoration: underline; }

.field { margin-bottom: 20px; }

.field label { display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; }
.field .hint { font-size: 0.82rem; font-weight: 400; color: var(--ink-mute); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.97rem;
    transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.field textarea { min-height: 130px; resize: vertical; }

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238797a4' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.field select option { background: var(--bg-inset); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--brand);
    background: var(--bg-raised);
    outline: none;
}

.field-row { display: grid; gap: 0; }

@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 18px; } }

/* Honeypot. Off-canvas for bots, unreachable for people. Class must stay in
   step with the wrapper rendered by includes/form.php. */
.trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.alert {
    padding: 14px 18px;
    margin-bottom: 24px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 0.93rem;
    line-height: 1.55;
}

.alert--ok {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--brand-lift);
}

.alert--bad {
    background: rgba(239, 68, 68, 0.09);
    border-color: rgba(239, 68, 68, 0.28);
    color: #f89a9a;
}

.form-foot { margin-top: 8px; font-size: 0.82rem; color: var(--ink-mute); }

@media (min-width: 940px) { .contact-panel { grid-template-columns: 0.85fr 1.15fr; } }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.site-footer {
    padding-top: clamp(56px, 6vw, 80px);
    padding-bottom: 34px;
    background: var(--bg-raised);
    border-top: 1px solid var(--line-soft);
}

.footer-grid { display: grid; gap: 36px; }

.footer-about { max-width: 34em; }
.footer-about p { margin-top: 16px; font-size: 0.92rem; color: var(--ink-mute); }

.footer-col h2 { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.footer-col li + li { margin-top: 9px; }
.footer-col a { font-size: 0.91rem; color: var(--ink-mute); text-decoration: none; }
.footer-col a:hover { color: var(--brand-lift); }

.footer-base {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(44px, 5vw, 60px);
    padding-top: 26px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.84rem;
    color: var(--ink-mute);
}

@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }

/* ==========================================================================
   18. Motion
   ========================================================================== */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

.cards [data-reveal]:nth-child(2),
.streams [data-reveal]:nth-child(2),
.team-grid [data-reveal]:nth-child(2) { transition-delay: 0.06s; }

.cards [data-reveal]:nth-child(3),
.streams [data-reveal]:nth-child(3) { transition-delay: 0.12s; }

.streams [data-reveal]:nth-child(4) { transition-delay: 0.18s; }

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

/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
    .site-header, .nav-drawer, .site-footer, .btn, form { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .step, .person { break-inside: avoid; }
}


/* ==========================================================================
   20. Theme toggle
   ========================================================================== */

.theme-toggle {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-soft);
    cursor: pointer;
    flex: none;
    transition: color 0.16s var(--ease), border-color 0.16s var(--ease),
                background-color 0.16s var(--ease);
}

.theme-toggle:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--hover-tint);
}

/* Show the icon for the theme the button would switch *to*. */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.header-tools { display: flex; align-items: center; gap: 10px; flex: none; }



/* ==========================================================================
   21. Light theme refinements

   The token swap alone produces an inverted dark theme, which reads as a dark
   design with the lights turned on. These rules give the light theme its own
   logic: elevation instead of glow, hairlines instead of value steps, and a
   deliberate dark plate for the product renders.

   Each rule is written twice, once for an explicit choice and once for a
   visitor whose system prefers light and who has scripting disabled.
   ========================================================================== */

/* A light page needs a visible edge under the header at all times; on dark the
   header can float because the page behind it is already dark. */
[data-theme="light"] .site-header { border-bottom-color: var(--line-soft); }
[data-theme="light"] .site-header.is-stuck { box-shadow: 0 1px 0 var(--line-soft), 0 8px 24px rgba(15, 26, 29, 0.05); }

/* Without a value change the hero bloom reads as a smudge on paper, so it
   becomes a soft brand wash flowing off the top of the page instead. */
[data-theme="light"] .hero::before {
    inset-block-start: -320px;
    background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
    opacity: 0.85;
}

[data-theme="light"] .hero { background: linear-gradient(180deg, var(--brand-wash) 0%, transparent 420px); }

/* The photo caption still needs a dark scrim to stay readable, so lean into it
   and make the whole thing read as a deliberate photo card. */
[data-theme="light"] .problem-figure::after {
    background: linear-gradient(180deg, rgba(9, 26, 24, 0.06) 0%, rgba(9, 26, 24, 0.88) 100%);
}

[data-theme="light"] .problem-figure { box-shadow: var(--shadow-md); }

/* Alternating bands need a hairline to separate them, since the value
   difference between paper and card is deliberately small. */
[data-theme="light"] .section--raised { border-block-color: var(--line-soft); }

/* Form controls read as inputs on light only if they have a real edge. */
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea {
    background: var(--bg);
    border-color: var(--line);
}

[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus {
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--brand-wash);
}

/* Outline controls need more presence against paper than against black. */
[data-theme="light"] .btn--ghost { border-color: var(--line-strong); }
[data-theme="light"] .btn--ghost:hover { background: var(--brand-wash); }
[data-theme="light"] .btn--primary { box-shadow: var(--shadow-sm); }
[data-theme="light"] .theme-toggle,
[data-theme="light"] .nav-toggle { border-color: var(--line); background: var(--bg-card); }

/* The footer should close the page rather than let it trail off into white. */
[data-theme="light"] .site-footer {
    background: var(--bg-raised);
    border-top-color: var(--line-soft);
}

/* Numbered markers carry more weight on paper when they are filled. */
[data-theme="light"] .step-num {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

[data-theme="light"] .card-icon,
[data-theme="light"] .person-initials {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--brand);
}

[data-theme="light"] .spec-icon { background: var(--bg); border-color: var(--line-soft); color: var(--brand); }

[data-theme="light"] .step-aside { background: var(--bg-raised); border-color: var(--line-soft); }

[data-theme="light"] ::selection { background: var(--brand); color: var(--brand-ink); }

@media (prefers-color-scheme: light) {
    /* A light page needs a visible edge under the header at all times; on dark the
       header can float because the page behind it is already dark. */
    :root:not([data-theme]) .site-header { border-bottom-color: var(--line-soft); }
    :root:not([data-theme]) .site-header.is-stuck { box-shadow: 0 1px 0 var(--line-soft), 0 8px 24px rgba(15, 26, 29, 0.05); }

    /* Without a value change the hero bloom reads as a smudge on paper, so it
       becomes a soft brand wash flowing off the top of the page instead. */
    :root:not([data-theme]) .hero::before {
        inset-block-start: -320px;
        background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
        opacity: 0.85;
    }

    :root:not([data-theme]) .hero { background: linear-gradient(180deg, var(--brand-wash) 0%, transparent 420px); }

    /* The photo caption still needs a dark scrim to stay readable, so lean into it
       and make the whole thing read as a deliberate photo card. */
    :root:not([data-theme]) .problem-figure::after {
        background: linear-gradient(180deg, rgba(9, 26, 24, 0.06) 0%, rgba(9, 26, 24, 0.88) 100%);
    }

    :root:not([data-theme]) .problem-figure { box-shadow: var(--shadow-md); }

    /* Alternating bands need a hairline to separate them, since the value
       difference between paper and card is deliberately small. */
    :root:not([data-theme]) .section--raised { border-block-color: var(--line-soft); }

    /* Form controls read as inputs on light only if they have a real edge. */
    :root:not([data-theme]) .field input,
    :root:not([data-theme]) .field select,
    :root:not([data-theme]) .field textarea {
        background: var(--bg);
        border-color: var(--line);
    }

    :root:not([data-theme]) .field input:focus,
    :root:not([data-theme]) .field select:focus,
    :root:not([data-theme]) .field textarea:focus {
        background: var(--bg-card);
        box-shadow: 0 0 0 3px var(--brand-wash);
    }

    /* Outline controls need more presence against paper than against black. */
    :root:not([data-theme]) .btn--ghost { border-color: var(--line-strong); }
    :root:not([data-theme]) .btn--ghost:hover { background: var(--brand-wash); }
    :root:not([data-theme]) .btn--primary { box-shadow: var(--shadow-sm); }
    :root:not([data-theme]) .theme-toggle,
    :root:not([data-theme]) .nav-toggle { border-color: var(--line); background: var(--bg-card); }

    /* The footer should close the page rather than let it trail off into white. */
    :root:not([data-theme]) .site-footer {
        background: var(--bg-raised);
        border-top-color: var(--line-soft);
    }

    /* Numbered markers carry more weight on paper when they are filled. */
    :root:not([data-theme]) .step-num {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-ink);
    }

    :root:not([data-theme]) .card-icon,
    :root:not([data-theme]) .person-initials {
        background: var(--brand-wash);
        border-color: var(--brand-edge);
        color: var(--brand);
    }

    :root:not([data-theme]) .spec-icon { background: var(--bg); border-color: var(--line-soft); color: var(--brand); }

    :root:not([data-theme]) .step-aside { background: var(--bg-raised); border-color: var(--line-soft); }

    :root:not([data-theme]) ::selection { background: var(--brand); color: var(--brand-ink); }
}