/* Hallmark · genre: editorial · macrostructure: Offer-led (problem -> offer -> pricing) · revised from Split Studio per user (client work removed)
         * theme: brand-preserved (cream paper · charcoal ink · gold accent) — Cormorant Garamond + DM Sans (named brand fonts)
         * enrichment: none — typographic + hero offer card (no client imagery) · nav: N9 edge-aligned · footer: Ft1 mast-headed
         * tone: luxury-editorial · anchor hue: gold ~79 · motion: reveal-once · cta-lift · pricing-lift (3 primitives)
         * Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V5
         */

        /* ---- Tokens ---- */
        :root {
            /* Colour — OKLCH, tinted toward the gold anchor; no pure black/white */
            --color-paper: oklch(97.5% 0.005 85);      /* cream #FAF8F5 */
            --color-paper-2: oklch(95.3% 0.010 84);    /* deeper cream #F5F1EA */
            --color-card: oklch(99.1% 0.003 90);       /* near-white card surface */
            --color-ink: oklch(22% 0.006 60);          /* charcoal #1C1917 */
            --color-ink-2: oklch(28% 0.006 55);        /* #292524 */
            --color-muted: oklch(46% 0.008 65);        /* warm gray #57534E */
            --color-neutral: oklch(58% 0.008 65);
            --color-rule: oklch(90% 0.004 75);         /* border stone #E7E5E4 */
            --color-rule-2: oklch(84% 0.006 75);
            --color-accent: oklch(63% 0.118 79);       /* gold #B8860B — marks, hairlines, large display, focus */
            --color-accent-strong: oklch(52% 0.10 72); /* deeper gold #996515 — CTA fill, links, labels (AA on cream) */
            --color-accent-deep: oklch(45% 0.085 70);  /* hover/press */
            --color-accent-ink: oklch(99% 0.002 90);   /* text on accent fill */
            --color-accent-wash: oklch(92% 0.030 82);  /* faint gold wash for small chips */
            --color-on-ink-2: oklch(90% 0.006 80);     /* muted text on ink surfaces */
            --color-focus: oklch(52% 0.10 72);
            --color-error: oklch(54% 0.17 28);
            --color-success: oklch(52% 0.09 150);

            /* Type */
            --font-display: Georgia, "Times New Roman", ui-serif, serif;
            --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, sans-serif;
            --text-xs: 0.78rem;
            --text-sm: 0.875rem;
            --text-base: 1rem;
            --text-md: 1.125rem;
            --text-lg: 1.375rem;
            --text-xl: 1.75rem;
            --text-2xl: 2.25rem;
            --text-3xl: 2.875rem;
            --text-display: clamp(2.9rem, 5.2vw + 1rem, 5rem);

            /* Space — 4pt scale, named by role */
            --space-3xs: 0.125rem;
            --space-2xs: 0.25rem;
            --space-xs: 0.5rem;
            --space-sm: 0.75rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2.5rem;
            --space-2xl: 4rem;
            --space-3xl: 6rem;
            --space-4xl: 9rem;

            --page-gutter: clamp(1.25rem, 5vw, 4rem);
            --measure: 65ch;

            /* Motion */
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
            --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
            --dur-micro: 120ms;
            --dur-short: 220ms;
            --dur-long: 420ms;

            --radius-sm: 2px;
            --radius: 4px;

            /* z-scale, named */
            --z-base: 1;
            --z-raised: 10;
            --z-sticky: 200;
            --z-modal: 400;
            --z-toast: 500;
        }

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

        html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        body { overflow-x: clip; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
        }

        body {
            font-family: var(--font-body);
            font-weight: 400;
            color: var(--color-ink);
            background: var(--color-paper);
            line-height: 1.65;
            font-size: var(--text-base);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-variant-numeric: oldstyle-nums;
            padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
        }

        h1, h2, h3, h4 {
            font-family: var(--font-display);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -0.015em;
            color: var(--color-ink);
            overflow-wrap: anywhere;
        }

        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; height: auto; }

        ::selection { background: var(--color-accent-wash); color: var(--color-ink); }

        :focus-visible {
            outline: 2.5px solid var(--color-focus);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* ---- Layout helpers ---- */
        .wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--page-gutter); }
        .section { padding-block: var(--space-3xl); }
        .section--tight { padding-block: var(--space-2xl); }
        .section + .section { border-top: 1px solid var(--color-rule); }

        .eyebrow {
            font-family: var(--font-body);
            font-size: var(--text-sm);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-accent-strong);
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
        }
        .eyebrow::before {
            content: "";
            width: 1.75rem; height: 1px;
            background: var(--color-accent);
        }

        /* S2 Hanging section head — single column, stacked */
        .head-hang { max-width: 32ch; margin-bottom: var(--space-xl); }
        .head-hang h2 { font-size: var(--text-3xl); margin-top: var(--space-md); }
        .head-hang p { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-md); max-width: 46ch; }

        .lede { font-size: var(--text-md); color: var(--color-muted); max-width: var(--measure); }

        /* ---- Buttons ---- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            min-height: 48px;
            padding: 0.85rem 1.6rem;
            font-family: var(--font-body);
            font-size: var(--text-base);
            font-weight: 600;
            letter-spacing: 0.005em;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            transition: background-color var(--dur-short) var(--ease-out),
                        color var(--dur-short) var(--ease-out),
                        border-color var(--dur-short) var(--ease-out),
                        transform var(--dur-micro) var(--ease-out);
        }
        .btn--primary { background: var(--color-accent-strong); color: var(--color-accent-ink); }
        @media (hover: hover) {
            .btn--primary:hover { background: var(--color-accent-deep); transform: translateY(-1.5px); }
        }
        .btn--primary:active { transform: translateY(0); }
        .btn--primary:focus-visible { outline-color: var(--color-ink); }

        .btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
        @media (hover: hover) {
            .btn--ghost:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
        }
        .btn--block { width: 100%; }
        .btn--lg { min-height: 54px; padding: 1rem 2rem; font-size: var(--text-md); }

        /* Typographic link CTA */
        .tlink {
            display: inline-flex; align-items: center; gap: 0.4rem;
            font-weight: 600; color: var(--color-accent-strong);
            white-space: nowrap;
            border-bottom: 1px solid transparent;
            transition: border-color var(--dur-short) var(--ease-out);
        }
        .tlink .arw { transition: transform var(--dur-short) var(--ease-out); }
        @media (hover: hover) {
            .tlink:hover { border-bottom-color: var(--color-accent-strong); }
            .tlink:hover .arw { transform: translateX(3px); }
        }

        /* ---- Nav · N9 edge-aligned ---- */
        .nav {
            position: sticky; top: 0; z-index: var(--z-sticky);
            background: color-mix(in oklch, var(--color-paper) 88%, transparent);
            backdrop-filter: saturate(1.1) blur(8px);
            border-bottom: 1px solid transparent;
            transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
        }
        .nav[data-scrolled="true"] { border-bottom-color: var(--color-rule); }
        .nav__inner {
            display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-md);
            padding-block: var(--space-md);
        }
        .wordmark {
            display: inline-flex; align-items: baseline; gap: 0.55rem;
            font-family: var(--font-display); font-weight: 700;
            font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-ink);
        }
        .wordmark .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); transform: translateY(-0.05em); }
        .nav__actions { display: flex; align-items: center; gap: var(--space-lg); }
        .nav__options {
            display: inline-flex; align-items: center; min-height: 44px;
            color: var(--color-accent-strong); font-size: var(--text-sm); font-weight: 700;
            border-bottom: 1px solid transparent;
            transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
        }
        .nav__call { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
        .nav__call .num { font-variant-numeric: lining-nums tabular-nums; }
        @media (hover: hover) {
            .nav__options:hover { color: var(--color-accent-deep); border-bottom-color: var(--color-accent-strong); }
            .nav__call:hover { color: var(--color-accent-strong); }
        }

        .nav__burger { display: none; background: none; border: 0; width: 48px; height: 48px; cursor: pointer; align-items: center; justify-content: center; color: var(--color-ink); }
        .nav__burger svg { width: 24px; height: 24px; }

        @media (max-width: 52rem) {
            .nav__options, .nav__call, .nav__actions .btn { display: none; }
            .nav__burger { display: inline-flex; }
        }

        /* Mobile sheet */
        .sheet-backdrop {
            position: fixed; inset: 0; background: oklch(22% 0.01 60 / 0.5);
            opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
            z-index: var(--z-modal);
        }
        .sheet-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
        .sheet {
            position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 340px);
            background: var(--color-paper); z-index: calc(var(--z-modal) + 1);
            transform: translateX(100%); transition: transform var(--dur-long) var(--ease-out);
            padding: var(--space-lg) var(--space-lg) var(--space-2xl);
            display: flex; flex-direction: column; gap: var(--space-xs);
            box-shadow: -8px 0 32px oklch(22% 0.01 60 / 0.12);
            overflow-y: auto;
        }
        .sheet[data-open="true"] { transform: translateX(0); }
        .sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
        .sheet__close { background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; }
        .sheet__link { padding: var(--space-sm) 0; font-size: var(--text-lg); font-family: var(--font-display); font-weight: 600; border-bottom: 1px solid var(--color-rule); }
        .sheet .btn { margin-top: var(--space-md); }
        .sheet__call { margin-top: var(--space-sm); font-weight: 600; color: var(--color-accent-strong); }

        /* ---- Hero · H2 split diptych ---- */
        .hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-3xl); }
        .hero__grid {
            display: grid; grid-template-columns: 7fr 5fr;
            gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
        }
        .hero__kicker { margin-bottom: var(--space-lg); }
        .hero h1 {
            font-size: var(--text-display);
            letter-spacing: -0.025em;
            max-width: 16ch;
        }
        .hero h1 em { font-style: italic; color: var(--color-accent-strong); }
        .hero__sub { margin-top: var(--space-lg); font-size: var(--text-md); color: var(--color-muted); max-width: 48ch; }
        .hero__cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); }
        .hero__assure { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: var(--text-sm); color: var(--color-muted); }
        .hero__assure span { display: inline-flex; align-items: center; gap: 0.4rem; }
        .hero__assure .tick { color: var(--color-accent-strong); font-weight: 700; }
        .hero__more { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
        .hero__more .tlink { margin-left: 0.25rem; font-size: inherit; white-space: normal; }

        .shot {
            position: relative; border: 1px solid var(--color-rule-2);
            border-radius: var(--radius); overflow: hidden; background: var(--color-card);
            box-shadow: 0 1px 2px oklch(22% 0.01 60 / 0.05);
        }
        .shot img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; }
        .shot__cap {
            display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            border-top: 1px solid var(--color-rule);
            font-size: var(--text-sm);
        }
        .shot__cap b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
        .shot__cap .meta { color: var(--color-muted); }

        .hero__shot { position: relative; }
        .hero__badge {
            position: absolute; left: -0.75rem; bottom: 2.75rem; z-index: var(--z-raised);
            background: var(--color-ink); color: var(--color-paper);
            font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
            padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
        }

        @media (max-width: 60rem) {
            .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
            .hero h1 { max-width: 18ch; }
        }

        /* ---- Live-work proof bar ---- */
        .proof { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
        .proof__lead { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); letter-spacing: 0.02em; }
        .proof__lead b { color: var(--color-ink); font-weight: 600; }
        .proof__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
        .proof__item {
            display: flex; flex-direction: column; gap: 0.2rem;
            padding: var(--space-md) var(--space-lg);
            border-left: 1px solid var(--color-rule);
        }
        .proof__item:first-child { padding-left: 0; border-left: 0; }
        .proof__item .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
        .proof__item .ind { font-size: var(--text-sm); color: var(--color-muted); }
        .proof__item .visit { margin-top: 0.3rem; font-size: var(--text-sm); }
        @media (max-width: 46rem) {
            .proof__row { grid-template-columns: 1fr; }
            .proof__item { padding: var(--space-md) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
            .proof__item:first-child { border-top: 0; }
        }

        /* ---- Split studio rows (diptych) ---- */
        .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
        .duo--narrowtext { grid-template-columns: 5fr 6fr; }
        .duo__text h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
        .duo__text > .lede { margin-bottom: var(--space-lg); }
        @media (max-width: 60rem) {
            .duo, .duo--narrowtext { grid-template-columns: 1fr; gap: 2.25rem; }
            .duo--flip .duo__text { order: -1; }
        }

        /* Offer list */
        .offer-list { list-style: none; display: grid; gap: var(--space-md); }
        .offer-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
        .offer-list li:last-child { border-bottom: 0; }
        .offer-list .mk { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border: 1px solid var(--color-accent); color: var(--color-accent-strong); border-radius: 50%; font-size: 0.8rem; font-weight: 700; margin-top: 0.15rem; }
        .offer-list h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
        .offer-list p { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.15rem; }

        /* Pitch panel (ink surface) */
        .pitch { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem); }
        .pitch h3 { color: var(--color-paper); font-size: var(--text-xl); font-style: italic; line-height: 1.25; max-width: 24ch; }
        .pitch ul { list-style: none; margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
        .pitch li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-on-ink-2); }
        .pitch li .tick { color: var(--color-accent); font-weight: 700; }

        /* ---- Work grid (3 real sites) ---- */
        .work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
        @media (max-width: 60rem) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 40rem) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
        .work-card { display: flex; flex-direction: column; }
        .work-card .shot { transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
        @media (hover: hover) {
            .work-card:hover .shot { transform: translateY(-3px); box-shadow: 0 12px 28px oklch(22% 0.01 60 / 0.12); border-color: var(--color-accent); }
        }
        .work-card .shot img { aspect-ratio: 4 / 3; }

        /* ---- Process · F4 step sequence ---- */
        .steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) clamp(2rem, 5vw, 4rem); }
        @media (max-width: 46rem) { .steps { grid-template-columns: 1fr; gap: var(--space-lg); } }
        .steps li { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
        .steps .stage { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--color-accent-strong); font-variant-numeric: lining-nums; }
        .steps h3 { font-size: var(--text-xl); margin: 0.3rem 0 0.4rem; }
        .steps p { color: var(--color-muted); font-size: var(--text-sm); max-width: 42ch; }

        /* ---- Pricing ---- */
        .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; }
        @media (max-width: 60rem) { .price-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
        .price-grid--simple { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-inline: auto; }
        @media (max-width: 60rem) { .price-grid--simple { grid-template-columns: 1fr; } }
        .price {
            display: flex; flex-direction: column; background: var(--color-card);
            border: 1px solid var(--color-rule-2); border-radius: var(--radius);
            padding: var(--space-xl) var(--space-lg);
            transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
        }
        @media (hover: hover) {
            .price:hover { transform: translateY(-3px); box-shadow: 0 12px 28px oklch(22% 0.01 60 / 0.10); border-color: var(--color-accent); }
        }
        .price--featured { border-color: var(--color-accent); box-shadow: 0 6px 22px oklch(63% 0.118 79 / 0.14); position: relative; }
        .price__tag { position: absolute; top: -0.75rem; left: var(--space-lg); background: var(--color-accent-strong); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); }
        .price__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
        .price__for { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.1rem; }
        .price__fig { margin: var(--space-md) 0 0.1rem; display: flex; align-items: baseline; gap: 0.4rem; }
        .price__fig .amt { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
        .price__fig .cad { font-size: var(--text-sm); color: var(--color-muted); }
        .price__desc { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-sm) 0 var(--space-md); }
        .price__feat { list-style: none; display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
        .price__feat li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); font-size: var(--text-sm); }
        .price__feat .tick { color: var(--color-accent-strong); font-weight: 700; }
        .price .btn { margin-top: auto; }

        .price-note { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper-2); }
        .price-note p { font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }
        .price-note b { color: var(--color-ink); font-weight: 600; }
        .hosting-line { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
        .hosting-line b { color: var(--color-ink); font-weight: 600; }

        /* ---- Why / risk reversal ---- */
        .assure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
        .assure-cell { padding: var(--space-lg); border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
        .assure-cell h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: var(--space-xs); }
        .assure-cell h3 .tick { color: var(--color-accent-strong); }
        .assure-cell p { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.35rem; }

        /* ---- FAQ ---- */
        .faq { max-width: 52rem; }
        .faq details { border-bottom: 1px solid var(--color-rule); }
        .faq summary { list-style: none; cursor: pointer; padding: var(--space-lg) 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
        .faq summary::-webkit-details-marker { display: none; }
        .faq summary .ico { flex: none; width: 1.5rem; height: 1.5rem; position: relative; margin-top: 0.35rem; }
        .faq summary .ico::before, .faq summary .ico::after { content: ""; position: absolute; background: var(--color-accent-strong); top: 50%; left: 50%; transition: transform var(--dur-short) var(--ease-out); }
        .faq summary .ico::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
        .faq summary .ico::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
        .faq details[open] summary .ico::after { transform: translate(-50%, -50%) scaleY(0); }
        .faq__a { padding: 0 2.5rem var(--space-lg) 0; color: var(--color-muted); font-size: var(--text-md); max-width: 60ch; }

        /* ---- Lead form / contact ---- */
        .contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
        @media (max-width: 60rem) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
        .contact__aside h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
        .contact__aside .lede { margin-bottom: var(--space-lg); }
        .contact__reasons { list-style: none; display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
        .contact__reasons li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); font-size: var(--text-base); }
        .contact__reasons .tick { color: var(--color-accent-strong); font-weight: 700; }
        .contact__call { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
        .contact__call .lab { font-size: var(--text-sm); color: var(--color-muted); }
        .contact__call a.big { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
        @media (hover: hover) { .contact__call a.big:hover { color: var(--color-accent-strong); } }
        .contact__sms { margin-top: var(--space-xs); font-size: var(--text-sm); }

        .formcard { background: var(--color-card); border: 1px solid var(--color-rule-2); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem); }
        .field { margin-bottom: var(--space-lg); }
        .field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 0.45rem; }
        .field .req { color: var(--color-accent-strong); }
        .input, .select {
            width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
            font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink);
            background: var(--color-paper); border: 1px solid var(--color-rule-2);
            border-radius: var(--radius-sm);
            outline: 2px solid transparent; outline-offset: 1px;
            transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
        }
        .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357534E' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
        @media (hover: hover) { .input:hover, .select:hover { background: var(--color-paper-2); } }
        .input:focus-visible, .select:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
        .input::placeholder { color: var(--color-neutral); }
        .field[data-invalid="true"] .input, .field[data-invalid="true"] .select { border-color: var(--color-error); }
        .field__err { min-height: 1.1lh; margin-top: 0.3rem; font-size: var(--text-sm); color: var(--color-error); }
        .field__err:empty { min-height: 0; margin-top: 0; }

        .consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; margin-bottom: var(--space-lg); }
        .consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; accent-color: var(--color-accent-strong); flex: none; }
        .consent label { font-size: var(--text-sm); color: var(--color-muted); }
        .consent a { color: var(--color-accent-strong); border-bottom: 1px solid var(--color-rule-2); }

        .formcard .btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; }
        .formcard .btn[data-loading="true"]::after {
            content: ""; position: absolute; width: 18px; height: 18px;
            border: 2px solid oklch(99% 0 0 / 0.4); border-top-color: var(--color-accent-ink);
            border-radius: 50%; animation: spin 0.6s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .form-foot { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }

        .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

        /* ---- Mid CTA band ---- */
        .band { background: var(--color-ink); color: var(--color-paper); }
        .band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-2xl); }
        .band h2 { color: var(--color-paper); font-size: var(--text-2xl); max-width: 20ch; }
        .band p { color: var(--color-on-ink-2); margin-top: var(--space-xs); font-size: var(--text-base); max-width: 44ch; }
        .band .btn--primary:focus-visible { outline-color: var(--color-paper); }

        /* ---- Footer · Ft1 mast-headed ---- */
        .foot { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
        .foot__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-xl); }
        @media (max-width: 46rem) { .foot__main { grid-template-columns: 1fr; gap: var(--space-lg); } }
        .foot__brand .wordmark { font-size: var(--text-xl); }
        .foot__tag { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); max-width: 34ch; }
        .foot .foot-title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-md); }
        .foot ul { list-style: none; display: grid; gap: 0.6rem; }
        .foot a { color: var(--color-ink); font-size: var(--text-sm); }
        @media (hover: hover) { .foot a:hover { color: var(--color-accent-strong); } }
        .foot__contact .num { font-variant-numeric: lining-nums tabular-nums; }
        .foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
        .foot__bottom .note { max-width: 60ch; }

        /* ---- Sticky CTA · C4 ---- */
        .sticky-cta {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
            background: var(--color-paper); border-top: 1px solid var(--color-rule);
            box-shadow: 0 -4px 20px oklch(22% 0.01 60 / 0.08);
            transform: translateY(110%); visibility: hidden; pointer-events: none;
            transition: transform var(--dur-long) var(--ease-out), visibility 0s var(--dur-long);
            padding: var(--space-sm) var(--page-gutter);
            padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
        }
        .sticky-cta[data-show="true"] { transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
        .sticky-cta__in { max-width: 1240px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
        .sticky-cta__txt strong { display: block; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
        .sticky-cta__txt span { font-size: var(--text-xs); color: var(--color-muted); }
        @media (max-width: 40rem) {
            .sticky-cta__txt span { display: none; }
            .sticky-cta__in .btn { flex: 1; min-width: 0; white-space: normal; }
        }
        @media (max-width: 25rem) { .sticky-cta__txt { display: none; } .sticky-cta__in { gap: 0; } }

        /* ---- Scroll top ---- */
        .totop { position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: var(--z-raised); width: 44px; height: 44px; display: grid; place-items: center; background: var(--color-card); border: 1px solid var(--color-rule-2); border-radius: 50%; color: var(--color-ink); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
        .totop[data-show="true"] { opacity: 1; visibility: visible; }
        @media (hover: hover) { .totop:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); } }

        /* Skip link */
        .skip { position: absolute; left: var(--space-md); top: -3rem; background: var(--color-ink); color: var(--color-paper); padding: 0.6rem 1rem; border-radius: var(--radius-sm); z-index: var(--z-toast); transition: top var(--dur-short) var(--ease-out); }
        .skip:focus { top: var(--space-md); }

        /* ---- Hero offer card ---- */
        .offer-card { background: var(--color-card); border: 1px solid var(--color-rule-2); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: 0 1px 2px oklch(22% 0.01 60 / 0.05); }
        .offer-card__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
        .offer-card__list { list-style: none; display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
        .offer-card__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); font-size: var(--text-base); align-items: start; }
        .offer-card__list .tick { color: var(--color-accent-strong); font-weight: 700; }
        .offer-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
        .offer-card__foot .sep { color: var(--color-rule-2); }

        /* ---- Problem section ---- */
        .problem { max-width: 62ch; }
        .problem h2 { font-size: var(--text-3xl); max-width: 22ch; }
        .problem .lede { margin-top: var(--space-md); }
        .pain-list { list-style: none; display: grid; gap: var(--space-md); margin: var(--space-xl) 0; }
        .pain-list li { position: relative; padding-left: 1.7rem; color: var(--color-ink); font-size: var(--text-md); }
        .pain-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--color-neutral); }
        .pain-resolve { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink); max-width: 34ch; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
        .pain-resolve b { font-weight: 700; color: var(--color-accent-strong); }

        /* ---- Reveal (one orchestrated entrance) ---- */
        .reveal { opacity: 1; transform: none; }
        .js .reveal { opacity: 0; transform: translateY(10px); }
        .js .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; }
            .reveal.in { transition: none; }
            *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
        }
            /* HERMES PSI + ACCESSIBILITY FIX 20260618 */
        .foot .foot-title { color: var(--color-ink); }