/* ════════════════════════════════════════════════════════════════════
   QUANTUMCANVATOR  ·  STYLE.CSS
   Aesthetic: 1970s technical-specification document / parts catalogue.
   Architecture (read top → bottom):
      00. TOKENS
      01. RESET + BASE
      02. TYPOGRAPHY PRIMITIVES
      03. LAYOUT PRIMITIVES (shell, stack, grid)
      04. UTILITIES (spacing, color, alignment)
      05. CHROME (skip, ticker, topbar, drawer, footer, cookie)
      06. HERO + PAGE-HERO
      07. SECTION + SECTION-HEAD
      08. DISCIPLINES (cards)
      09. SPRINTS · SUBSCRIPTIONS · TABLE
      10. CONFIGURATOR
      11. WORK · METHOD · CABINET · NOTES
      12. POST · PROSE
      13. SERVICE DETAIL (overview, deliverables, meta)
      14. FORM
      15. STATE PAGES
      16. BUTTONS
      17. ACCESSIBILITY · MOTION · CURSOR
   ════════════════════════════════════════════════════════════════════ */


/* ─────────────────────── 00. TOKENS ─────────────────────── */
:root {
    /* Colour */
    --qcv-paper:    #FFFFFF;
    --qcv-paper-2:  #F4F2EC;
    --qcv-ink:      #0A0A0A;
    --qcv-ink-2:    #2C2C2C;
    --qcv-ink-3:    #6B6B6B;
    --qcv-ink-4:    #C8C6C0;
    --qcv-mark:     #E11D2E;   /* hazard red */
    --qcv-stripe:   #F4C20D;   /* caution yellow */
    --qcv-grid:     #DEDCD6;   /* faint dot grid */

    /* Type families */
    --qcv-display:  "Big Shoulders Display", "Arial Black", "Helvetica Neue", sans-serif;
    --qcv-serif:    "Newsreader", Georgia, "Times New Roman", serif;
    --qcv-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --qcv-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale (clamp-based, mobile-first; degrades gracefully) */
    --t-7xl:        clamp(64px, 16vw, 220px);
    --t-6xl:        clamp(54px, 11.5vw, 168px);
    --t-5xl:        clamp(46px, 8.4vw, 124px);
    --t-4xl:        clamp(38px, 6vw, 92px);
    --t-3xl:        clamp(30px, 4.4vw, 64px);
    --t-2xl:        clamp(24px, 3.2vw, 44px);
    --t-xl:         clamp(20px, 2.4vw, 32px);
    --t-lg:         clamp(18px, 1.6vw, 22px);
    --t-md:         16px;
    --t-sm:         14px;
    --t-xs:         12px;
    --t-mono-lg:    13px;
    --t-mono:       12px;
    --t-mono-sm:    11px;

    /* Leading */
    --lh-tight:     0.94;
    --lh-snug:      1.05;
    --lh-base:      1.5;
    --lh-loose:     1.65;

    /* Tracking */
    --ls-tight:     -0.012em;
    --ls-display:   -0.005em;
    --ls-mono:      0.12em;
    --ls-mono-lg:   0.16em;

    /* Spacing scale (8-pt-aligned) */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   20px;
    --sp-6:   24px;
    --sp-7:   28px;
    --sp-8:   32px;
    --sp-10:  40px;
    --sp-12:  48px;
    --sp-14:  56px;
    --sp-16:  64px;
    --sp-20:  80px;
    --sp-24:  96px;
    --sp-32:  128px;

    /* Vertical rhythm */
    --py-section:        clamp(72px, 9vh, 128px);
    --py-section-tight:  clamp(48px, 6vh, 88px);
    --py-pagehero:       clamp(56px, 8vh, 112px);
    --gap-block:         clamp(28px, 4vw, 56px);
    --gap-stack:         clamp(16px, 2vw, 28px);

    /* Container */
    --shell-max:         1280px;
    --shell-max-narrow:  860px;
    --shell-pad-x:       clamp(20px, 4.4vw, 56px);

    /* Rules */
    --rule-1:    1px;
    --rule-2:    1.5px;
    --rule-3:    2px;
    --rule-4:    3px;
    --rule-5:    4px;

    /* Z-index */
    --z-tickerbar: 30;
    --z-topbar:    40;
    --z-drawer:    60;
    --z-cookie:    70;
    --z-skip:      80;

    /* Motion */
    --ease:      cubic-bezier(.2,.7,.2,1);
    --t-fast:    140ms;
    --t-base:    220ms;
}


/* ─────────────────────── 01. RESET + BASE ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    background: var(--qcv-paper);
    color: var(--qcv-ink);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

body {
    font-family: var(--qcv-sans);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink);
    background: var(--qcv-paper);
    background-image: radial-gradient(circle, var(--qcv-grid) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: 0 0;
    min-height: 100vh;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

button {
    font: inherit; color: inherit;
    background: none; border: 0; cursor: pointer;
    text-align: inherit;
}

input, select, textarea {
    font: inherit; color: inherit;
    background: var(--qcv-paper);
    border: 0;
}

ul, ol { list-style: none; }

/* Selection (techy red on yellow) */
::selection { background: var(--qcv-stripe); color: var(--qcv-ink); }


/* ─────────────────────── 02. TYPOGRAPHY PRIMITIVES ─────────────────────── */
.qcv-display {
    font-family: var(--qcv-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-serif {
    font-family: var(--qcv-serif);
    font-weight: 400;
    line-height: var(--lh-loose);
}
.qcv-mono {
    font-family: var(--qcv-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
}

/* Em inside display headings = serif italic (signature mix) */
.qcv-display em,
.qcv-hero__title em,
.qcv-pagehero__title em,
.qcv-footer__pitch h2 em,
.qcv-state__title em {
    font-family: var(--qcv-serif);
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
}


/* ─────────────────────── 03. LAYOUT PRIMITIVES ─────────────────────── */
.qcv-shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad-x);
}
.qcv-shell--narrow { max-width: var(--shell-max-narrow); }

.qcv-stack > * + * { margin-top: var(--gap-stack); }


/* ─────────────────────── 04. UTILITIES ─────────────────────── */
.qcv-text-mark    { color: var(--qcv-mark); }
.qcv-text-stripe  { color: var(--qcv-stripe); }
.qcv-text-paper   { color: var(--qcv-paper); }
.qcv-text-ink2    { color: var(--qcv-ink-2); }

/* Stamp — small mono caps used as eyebrow */
.qcv-stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    color: var(--qcv-mark);
}
.qcv-stamp--paper { color: var(--qcv-stripe); }
.qcv-stamp--mark  { color: var(--qcv-mark); }

/* SKU pill */
.qcv-sku {
    display: inline-block;
    padding: 4px 10px 3px;
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono-sm);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    background: var(--qcv-paper);
    color: var(--qcv-ink);
    border: var(--rule-2) solid var(--qcv-ink);
}
.qcv-sku--mark   { background: var(--qcv-mark);   color: var(--qcv-paper); border-color: var(--qcv-mark); }
.qcv-sku--stripe { background: var(--qcv-stripe); color: var(--qcv-ink); border-color: var(--qcv-ink); }

/* Inline link with red rule under it */
.qcv-link-rule {
    display: inline-flex; align-items: baseline; gap: 4px;
    color: var(--qcv-ink);
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    border-bottom: var(--rule-3) solid var(--qcv-mark);
    padding-bottom: 2px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qcv-link-rule:hover { color: var(--qcv-mark); border-color: var(--qcv-ink); }


/* ─────────────────────── 05. CHROME ─────────────────────── */
/* Skip link */
.qcv-skip {
    position: fixed; top: -100px; left: var(--sp-4);
    z-index: var(--z-skip);
    padding: 10px 16px;
    background: var(--qcv-ink); color: var(--qcv-stripe);
    font-family: var(--qcv-mono); font-size: var(--t-mono);
    text-transform: uppercase; letter-spacing: var(--ls-mono);
    transition: top var(--t-base) var(--ease);
}
.qcv-skip:focus { top: 8px; }

/* Ticker bar */
.qcv-tickerbar {
    position: relative;
    height: 22px;
    background:
        repeating-linear-gradient(135deg,
            var(--qcv-stripe) 0 22px,
            var(--qcv-ink)    22px 36px);
    overflow: hidden;
    z-index: var(--z-tickerbar);
}
.qcv-tickerbar__inner {
    display: none; /* visually replaced by the diagonal hazard tape */
}

/* Topbar */
.qcv-topbar {
    position: sticky; top: 0;
    z-index: var(--z-topbar);
    background: var(--qcv-paper);
    border-bottom: var(--rule-3) solid var(--qcv-ink);
    transition: box-shadow var(--t-base) var(--ease);
}
.qcv-topbar.is-stuck {
    box-shadow: 0 6px 0 -2px rgba(0,0,0,.04);
}
.qcv-topbar__rail {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--sp-3) var(--shell-pad-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-6);
    min-height: 64px;
}

/* Brand */
.qcv-brand {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--sp-3);
    color: var(--qcv-ink);
}
.qcv-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    background: var(--qcv-ink);
    color: var(--qcv-stripe);
    font-family: var(--qcv-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.04em;
}
.qcv-brand__word {
    display: block;
    font-family: var(--qcv-display);
    font-weight: 800;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    line-height: 1;
}
.qcv-brand__sub {
    display: block;
    margin-top: 2px;
    font-family: var(--qcv-mono);
    font-size: 10px;
    letter-spacing: var(--ls-mono);
    color: var(--qcv-ink-3);
    text-transform: uppercase;
}

/* Nav (desktop) */
.qcv-nav {
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.qcv-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 14px;
    font-family: var(--qcv-mono);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink);
    border-bottom: var(--rule-3) solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qcv-nav__link__num {
    color: var(--qcv-mark);
    font-weight: 700;
}
.qcv-nav__link:hover           { color: var(--qcv-mark); }
.qcv-nav__link.is-active       { border-bottom-color: var(--qcv-mark); }
@media (min-width: 1024px) {
    .qcv-nav { display: flex; }
}

/* Topbar CTA cluster */
.qcv-topbar__cta {
    display: flex; align-items: center; gap: var(--sp-3);
    justify-self: end;
}
.qcv-topbar__cta .qcv-btn--mark { display: none; }
@media (min-width: 1024px) {
    .qcv-topbar__cta .qcv-btn--mark { display: inline-flex; }
}

/* Burger */
.qcv-burger {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    background: var(--qcv-ink);
    color: var(--qcv-stripe);
}
.qcv-burger__bar {
    display: block;
    width: 22px; height: 2px;
    background: var(--qcv-stripe);
    box-shadow: 0 -7px 0 var(--qcv-stripe), 0 7px 0 var(--qcv-stripe);
    transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.qcv-burger.is-open .qcv-burger__bar {
    box-shadow: none;
    transform: rotate(45deg);
}
.qcv-burger.is-open .qcv-burger__bar::after {
    /* extra crossbar via pseudo when open */
    content: ""; display: block;
    width: 22px; height: 2px;
    background: var(--qcv-stripe);
    transform: rotate(-90deg);
}
@media (min-width: 1024px) {
    .qcv-burger { display: none; }
}

/* Drawer (mobile nav) */
.qcv-drawer {
    position: fixed; inset: 0;
    z-index: var(--z-drawer);
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    transform: translateY(-100%);
    transition: transform var(--t-base) var(--ease);
    overflow-y: auto;
    visibility: hidden;
}
.qcv-drawer.is-open { transform: translateY(0); visibility: visible; }
.qcv-drawer__inner {
    padding: 96px var(--shell-pad-x) var(--sp-12);
    max-width: var(--shell-max);
    margin-inline: auto;
}
.qcv-drawer__list {
    display: flex; flex-direction: column;
    border-top: var(--rule-2) solid var(--qcv-paper);
}
.qcv-drawer__list a {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--sp-5) 0;
    font-family: var(--qcv-display);
    font-weight: 800;
    font-size: clamp(28px, 6vw, 44px);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    border-bottom: var(--rule-2) solid var(--qcv-paper);
    color: var(--qcv-paper);
}
.qcv-drawer__list a:hover { color: var(--qcv-stripe); }
.qcv-drawer__list a span {
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-xs);
    letter-spacing: var(--ls-mono);
    color: var(--qcv-mark);
}
.qcv-drawer__meta {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: var(--sp-10);
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    color: var(--qcv-stripe);
    text-transform: uppercase;
}

/* Footer */
.qcv-footer {
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    margin-top: var(--py-section);
}
.qcv-footer__pitch {
    padding-block: clamp(72px, 10vw, 144px);
    border-bottom: var(--rule-2) solid var(--qcv-paper);
    background:
        radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--qcv-ink);
}
.qcv-footer__pitch h2 {
    font-family: var(--qcv-display);
    font-weight: 800;
    font-size: var(--t-6xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-paper);
    max-width: 16ch;
}
.qcv-footer__pitch h2 em { color: var(--qcv-stripe); }
.qcv-footer__pitch__cta {
    margin-top: var(--sp-10);
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
}

.qcv-footer__cols {
    padding-block: clamp(56px, 7vw, 88px);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
}
@media (min-width: 720px)  { .qcv-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qcv-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-12); } }

.qcv-footer__col h4 {
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    color: var(--qcv-stripe);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-2);
    border-bottom: var(--rule-2) solid var(--qcv-paper);
}
.qcv-footer__col p {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    line-height: 1.65;
    color: var(--qcv-paper);
    opacity: .95;
}
.qcv-footer__col a {
    display: block;
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    color: var(--qcv-paper);
    transition: color var(--t-fast) var(--ease);
    padding-block: 4px;
}
.qcv-footer__col a:hover { color: var(--qcv-stripe); }
.qcv-footer__col li      { padding-block: 1px; }

.qcv-footer__bottom {
    padding: var(--sp-6) 0;
    border-top: var(--rule-2) solid var(--qcv-paper);
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    justify-content: space-between; align-items: center;
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    color: var(--qcv-paper);
    opacity: .85;
    text-transform: uppercase;
}
.qcv-footer__bottom a { color: var(--qcv-stripe); border-bottom: var(--rule-2) solid var(--qcv-stripe); padding-bottom: 1px; }

.qcv-footer__brand {
    display: block;
    color: var(--qcv-stripe);
    font-family: var(--qcv-display);
    font-weight: 800;
    font-size: clamp(20px, 1.6vw, 24px);
    letter-spacing: var(--ls-display);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.qcv-footer__contact { margin-top: var(--sp-4); }
.qcv-footer__hours {
    margin-top: var(--sp-4);
    font-size: 11px !important;
    opacity: .75;
    line-height: 1.55;
}

/* Cookie banner */
.qcv-cookie {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-cookie);
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    border-top: var(--rule-4) solid var(--qcv-stripe);
}
.qcv-cookie__inner {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--sp-5) var(--shell-pad-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: center;
}
@media (min-width: 720px) {
    .qcv-cookie__inner { grid-template-columns: 1fr auto; }
}
.qcv-cookie__txt {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    line-height: 1.55;
    color: var(--qcv-paper);
    letter-spacing: 0.02em;
}
.qcv-cookie__txt strong {
    display: block;
    color: var(--qcv-stripe);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    margin-bottom: 4px;
    font-weight: 700;
}
.qcv-cookie__txt a { color: var(--qcv-stripe); border-bottom: var(--rule-1) solid var(--qcv-stripe); }
.qcv-cookie__btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.qcv-cookie__btn {
    padding: 12px 18px;
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    border: var(--rule-2) solid var(--qcv-paper);
    background: transparent;
    color: var(--qcv-paper);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qcv-cookie__btn--accept { background: var(--qcv-stripe); color: var(--qcv-ink); border-color: var(--qcv-stripe); }
.qcv-cookie__btn--accept:hover { background: var(--qcv-paper); }
.qcv-cookie__btn--decline:hover { background: var(--qcv-paper); color: var(--qcv-ink); }


/* ─────────────────────── 06. HERO + PAGE-HERO ─────────────────────── */
.qcv-hero {
    position: relative;
    border-bottom: var(--rule-4) solid var(--qcv-ink);
}

/* Strap (top thin band with QCV doc info) */
.qcv-hero__strap {
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    background: var(--qcv-stripe);
}
.qcv-hero__strap__inner {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: 10px var(--shell-pad-x);
    display: flex; justify-content: space-between; gap: var(--sp-5);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono);
    text-transform: uppercase; color: var(--qcv-ink);
    flex-wrap: wrap;
}
.qcv-hero__strap__l, .qcv-hero__strap__r {
    display: flex; gap: var(--sp-5); flex-wrap: wrap;
}

/* Hero inner — main composition */
.qcv-hero__inner {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: clamp(40px, 6vw, 88px) var(--shell-pad-x) clamp(56px, 7vw, 96px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 1024px) {
    .qcv-hero__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(40px, 4vw, 80px);
        row-gap: clamp(48px, 6vw, 88px);
    }
    .qcv-hero__head     { grid-column: 1; grid-row: 1; }
    .qcv-hero__abstract { grid-column: 2; grid-row: 1; align-self: end; }
    .qcv-hero__figure   { grid-column: 1 / -1; grid-row: 2; }
}

.qcv-hero__num {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase; color: var(--qcv-mark);
    margin-bottom: var(--sp-6);
}
.qcv-hero__num span:first-child {
    background: var(--qcv-mark); color: var(--qcv-paper);
    padding: 4px 10px;
    font-weight: 800;
}

.qcv-hero__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-7xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-hero__title em {
    font-family: var(--qcv-serif); font-style: italic;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.02em;
    background: var(--qcv-stripe);
    padding: 0 .08em;
}
.qcv-hero__title span {
    color: var(--qcv-mark);
    text-decoration: underline;
    text-decoration-color: var(--qcv-mark);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

/* Hero abstract */
.qcv-hero__abstract {
    background: var(--qcv-paper);
    border: var(--rule-3) solid var(--qcv-ink);
    padding: clamp(24px, 3vw, 36px);
    display: flex; flex-direction: column; gap: var(--sp-5);
    position: relative;
}
.qcv-hero__abstract::before {
    content: "";
    position: absolute; top: -3px; left: -3px;
    width: 36px; height: 36px;
    background: var(--qcv-mark);
    border-bottom: var(--rule-3) solid var(--qcv-ink);
    border-right: var(--rule-3) solid var(--qcv-ink);
}
.qcv-hero__abstract__head {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
    padding-left: 44px; min-height: 28px;
}
.qcv-hero__abstract__body {
    font-family: var(--qcv-serif); font-weight: 400;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-hero__abstract__body strong { color: var(--qcv-ink); font-weight: 700; }
.qcv-hero__cta {
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    margin-top: var(--sp-3);
}

/* Hero figure */
.qcv-hero__figure {
    border: var(--rule-3) solid var(--qcv-ink);
    background: var(--qcv-paper);
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .qcv-hero__figure { grid-template-columns: 220px 1fr; }
}
.qcv-hero__figure__cap {
    padding: var(--sp-6) var(--sp-5);
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    line-height: 1.55;
    letter-spacing: 0.02em;
    border-bottom: var(--rule-2) solid var(--qcv-paper);
}
@media (min-width: 720px) {
    .qcv-hero__figure__cap { border-bottom: 0; border-right: var(--rule-3) solid var(--qcv-ink); }
}
.qcv-hero__figure__cap strong {
    display: block;
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--qcv-stripe);
    margin-bottom: var(--sp-3);
    letter-spacing: var(--ls-display);
}
.qcv-hero__figure__diagram {
    padding: clamp(20px, 3vw, 40px);
    display: grid;
    place-items: center;
    background-image:
        linear-gradient(var(--qcv-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--qcv-grid) 1px, transparent 1px);
    background-size: 22px 22px;
}
.qcv-hero__figure__diagram svg { width: 100%; height: auto; max-height: 280px; }


/* Page hero (sub-pages) */
.qcv-pagehero {
    border-bottom: var(--rule-4) solid var(--qcv-ink);
    padding-block: var(--py-pagehero);
    background:
        linear-gradient(180deg, var(--qcv-paper-2) 0%, var(--qcv-paper) 100%);
    position: relative;
}
.qcv-pagehero::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 12px;
    background: repeating-linear-gradient(135deg,
        var(--qcv-stripe) 0 18px,
        var(--qcv-ink)    18px 30px);
}
.qcv-pagehero .qcv-shell {
    padding-top: var(--sp-6);
}
.qcv-back {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-ink);
    padding: 8px 12px;
    border: var(--rule-2) solid var(--qcv-ink);
    margin-bottom: var(--sp-8);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qcv-back::before { content: "←"; color: var(--qcv-mark); }
.qcv-back:hover { background: var(--qcv-ink); color: var(--qcv-paper); }
.qcv-pagehero__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.qcv-pagehero__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
}
.qcv-pagehero__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-6xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-pagehero__lead {
    margin-top: var(--sp-6);
    max-width: 70ch;
    font-family: var(--qcv-serif);
    font-size: var(--t-lg);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-pagehero__lead a { color: var(--qcv-ink); border-bottom: var(--rule-3) solid var(--qcv-mark); }
.qcv-pagehero__metabar {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: var(--rule-2) solid var(--qcv-ink);
    display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8);
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink-2);
}
.qcv-pagehero__metabar strong { color: var(--qcv-mark); margin-right: 6px; }


/* ─────────────────────── 07. SECTION + SECTION-HEAD ─────────────────────── */
.qcv-section {
    padding-block: var(--py-section);
    border-top: var(--rule-2) solid var(--qcv-ink);
    background: var(--qcv-paper);
    background-image: radial-gradient(circle, var(--qcv-grid) 1px, transparent 1px);
    background-size: 22px 22px;
}
.qcv-section--paper2 {
    background-color: var(--qcv-paper-2);
}
.qcv-section--invert {
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
}
.qcv-section--invert .qcv-section-head__title { color: var(--qcv-paper); }
.qcv-section--invert .qcv-section-head__title em { background: var(--qcv-stripe); color: var(--qcv-ink); }
.qcv-section--invert .qcv-section-head__num { color: var(--qcv-stripe); }
.qcv-section--invert .qcv-section-head__caption { color: var(--qcv-paper); opacity: .85; }
.qcv-section--invert .qcv-link-rule { color: var(--qcv-paper); border-color: var(--qcv-stripe); }

/* Section head — 3-column grid: num | title | caption */
.qcv-section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--gap-block);
    padding-bottom: var(--sp-6);
    border-bottom: var(--rule-3) solid currentColor;
}
@media (min-width: 720px) {
    .qcv-section-head { grid-template-columns: 90px 1fr; }
}
@media (min-width: 1024px) {
    .qcv-section-head {
        grid-template-columns: 90px minmax(0, 1fr) 220px;
        column-gap: var(--sp-8);
        align-items: end;
    }
}
.qcv-section-head__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
    align-self: end;
    padding-top: var(--sp-3);
}
.qcv-section-head__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-section-head__title em {
    font-family: var(--qcv-serif); font-style: italic; font-weight: 700;
    text-transform: none; letter-spacing: -0.01em;
    background: var(--qcv-stripe); padding: 0 .12em;
    color: var(--qcv-ink);
}
.qcv-section-head__caption {
    font-family: var(--qcv-mono); font-size: var(--t-mono);
    line-height: 1.55; letter-spacing: var(--ls-mono);
    text-transform: uppercase; color: var(--qcv-ink-2);
}


/* ─────────────────────── 08. DISCIPLINES ─────────────────────── */
.qcv-disciplines {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--rule-3) solid var(--qcv-ink);
}
.qcv-discipline {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-7) 0;
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    color: var(--qcv-ink);
    transition: background var(--t-fast) var(--ease);
    position: relative;
}
.qcv-discipline:hover {
    background: var(--qcv-stripe);
}
.qcv-discipline:hover .qcv-discipline__arrow { transform: translateX(8px); color: var(--qcv-mark); }
@media (min-width: 720px) {
    .qcv-discipline {
        grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1.6fr) auto auto;
        column-gap: var(--sp-6);
        align-items: center;
        padding: var(--sp-6) var(--sp-4);
    }
}
.qcv-discipline__sku {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
}
.qcv-discipline__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-discipline__lead {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}
.qcv-discipline__meta {
    display: grid; grid-auto-flow: row;
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink-2);
    text-align: left;
}
@media (min-width: 720px) { .qcv-discipline__meta { text-align: right; } }
.qcv-discipline__meta b {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(20px, 2vw, 30px);
    color: var(--qcv-ink);
    line-height: 1;
}
.qcv-discipline__arrow {
    display: none;
    font-family: var(--qcv-display);
    font-size: 32px;
    color: var(--qcv-ink);
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (min-width: 720px) { .qcv-discipline__arrow { display: inline; } }


/* ─────────────────────── 09. SPRINTS · SUBSCRIPTIONS · TABLE ─────────────────────── */
/* Sprints — 4-up grid that gracefully collapses */
.qcv-sprints {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: var(--rule-3) solid var(--qcv-paper);
}
@media (min-width: 560px)  { .qcv-sprints { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qcv-sprints { grid-template-columns: repeat(4, 1fr); } }

.qcv-sprint {
    display: flex; flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-7) var(--sp-6);
    background: var(--qcv-paper);
    color: var(--qcv-ink);
    border: var(--rule-2) solid var(--qcv-ink);
    margin: -1.5px;
    min-height: 100%;
}
.qcv-sprint__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-3);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-mark);
    padding-bottom: var(--sp-3);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
}
.qcv-sprint__head span:last-child { color: var(--qcv-ink-2); }
.qcv-sprint__name {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-sprint__price {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    color: var(--qcv-ink);
}
.qcv-sprint__price small {
    display: block; margin-top: 4px;
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono);
    text-transform: uppercase; color: var(--qcv-ink-2);
}
.qcv-sprint__lead {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}
.qcv-sprint__list {
    display: flex; flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}
.qcv-sprint__list li {
    position: relative; padding-left: 20px;
    font-family: var(--qcv-mono); font-size: var(--t-mono-lg);
    line-height: 1.55; color: var(--qcv-ink-2);
}
.qcv-sprint__list li::before {
    content: "+"; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--qcv-mark);
}
.qcv-sprint__action { margin-top: auto; padding-top: var(--sp-3); }

/* Subscriptions — 1/2/3 column */
.qcv-subs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 720px)  { .qcv-subs { grid-template-columns: repeat(3, 1fr); gap: 0;
    border: var(--rule-3) solid var(--qcv-paper); } }
.qcv-sub {
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-7) var(--sp-6);
    background: var(--qcv-paper);
    color: var(--qcv-ink);
    border: var(--rule-2) solid var(--qcv-ink);
}
@media (min-width: 720px) { .qcv-sub { margin: -1.5px; } }
.qcv-sub--invert {
    background: var(--qcv-ink); color: var(--qcv-paper);
}
.qcv-sub--invert .qcv-sub__lead,
.qcv-sub--invert .qcv-sub__list li { color: var(--qcv-paper); opacity: .9; }
.qcv-sub--invert .qcv-sub__price small { color: var(--qcv-stripe); }
.qcv-sub--invert .qcv-sub__list li::before { color: var(--qcv-stripe); }
.qcv-sub--invert .qcv-sub__head { border-color: var(--qcv-paper); }

.qcv-sub__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
}
.qcv-sub__name {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-sub__price {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(34px, 3.4vw, 44px);
    line-height: 1;
}
.qcv-sub__price small {
    display: block; margin-top: 4px;
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono);
    text-transform: uppercase; color: var(--qcv-ink-2);
}
.qcv-sub__lead {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}
.qcv-sub__list {
    display: flex; flex-direction: column;
    gap: 6px; flex-grow: 1;
}
.qcv-sub__list li {
    position: relative; padding-left: 20px;
    font-family: var(--qcv-mono); font-size: var(--t-mono-lg);
    line-height: 1.55; color: var(--qcv-ink-2);
}
.qcv-sub__list li::before {
    content: "+"; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--qcv-mark);
}

/* Table */
.qcv-table {
    width: 100%;
    border-collapse: collapse;
    border: var(--rule-3) solid var(--qcv-ink);
    background: var(--qcv-paper);
}
.qcv-table thead { display: none; }
@media (min-width: 720px) { .qcv-table thead { display: table-header-group; } }
.qcv-table th {
    text-align: left;
    padding: var(--sp-4) var(--sp-5);
    background: var(--qcv-ink);
    color: var(--qcv-stripe);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    border-bottom: var(--rule-3) solid var(--qcv-ink);
}
.qcv-table tbody tr { border-bottom: var(--rule-2) solid var(--qcv-ink); display: block; }
@media (min-width: 720px) { .qcv-table tbody tr { display: table-row; } }
.qcv-table tbody tr:last-child { border-bottom: 0; }
.qcv-table td {
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--qcv-mono); font-size: var(--t-mono-lg);
    color: var(--qcv-ink);
    border-bottom: var(--rule-1) solid var(--qcv-ink-4);
    display: block;
}
@media (min-width: 720px) {
    .qcv-table td { display: table-cell; border-bottom: 0; vertical-align: middle; }
}
.qcv-table td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 80px;
    color: var(--qcv-mark);
    font-weight: 700;
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    margin-right: var(--sp-3);
}
@media (min-width: 720px) { .qcv-table td::before { display: none; } }
.qcv-table td b { font-family: var(--qcv-display); font-size: var(--t-xl); font-weight: 800; }
.qcv-table__action { text-align: right; }


/* ─────────────────────── 10. CONFIGURATOR ─────────────────────── */
.qcv-cfg {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    border-top: var(--rule-3) solid var(--qcv-ink);
    padding-top: var(--sp-8);
}
@media (min-width: 1024px) {
    .qcv-cfg {
        grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
        gap: var(--sp-10);
    }
}

.qcv-cfg__steps {
    display: flex; flex-direction: column; gap: var(--sp-8);
}
.qcv-cfg__step {
    border: var(--rule-3) solid var(--qcv-ink);
    background: var(--qcv-paper);
}
.qcv-cfg__step__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--qcv-ink); color: var(--qcv-paper);
    border-bottom: var(--rule-3) solid var(--qcv-ink);
}
.qcv-cfg__step__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-xl);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-paper);
}
.qcv-cfg__step__hint {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-stripe);
    text-transform: uppercase;
}
.qcv-cfg__opts {
    display: flex; flex-direction: column;
}
.qcv-cfg__opt {
    display: grid;
    grid-template-columns: 28px auto 1fr auto;
    column-gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--rule-1) solid var(--qcv-ink-4);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.qcv-cfg__opt:last-child { border-bottom: 0; }
.qcv-cfg__opt:hover { background: var(--qcv-paper-2); }
.qcv-cfg__opt input { accent-color: var(--qcv-mark); width: 18px; height: 18px; margin-top: 2px; }
.qcv-cfg__opt:has(input:checked) { background: var(--qcv-stripe); }
.qcv-cfg__opt__sku {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
    padding-top: 4px;
}
.qcv-cfg__opt__body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.qcv-cfg__opt__label {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-cfg__opt__note {
    font-family: var(--qcv-serif); font-size: var(--t-sm);
    line-height: 1.45;
    color: var(--qcv-ink-2);
}
.qcv-cfg__opt__price {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-lg); letter-spacing: var(--ls-mono);
    text-align: right;
    white-space: nowrap;
    color: var(--qcv-ink);
    padding-top: 4px;
}

/* Configurator receipt sidebar */
.qcv-cfg__rcpt {
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    padding: var(--sp-6);
    display: flex; flex-direction: column; gap: var(--sp-4);
    align-self: start;
}
@media (min-width: 1024px) {
    .qcv-cfg__rcpt { position: sticky; top: 110px; }
}
.qcv-cfg__rcpt__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: var(--sp-3);
    border-bottom: var(--rule-2) solid var(--qcv-stripe);
}
.qcv-cfg__rcpt__head h3 {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-paper);
}
.qcv-cfg__rcpt__head span {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-stripe);
}
.qcv-cfg__rcpt__rows {
    display: flex; flex-direction: column;
    min-height: 80px;
}
.qcv-cfg__rcpt__row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-3);
    padding: 8px 0;
    border-bottom: var(--rule-1) solid rgba(255,255,255,.15);
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    color: var(--qcv-paper);
}
.qcv-cfg__rcpt__row > span:first-child { flex: 1; min-width: 0; opacity: .9; }
.qcv-cfg__rcpt__row > span:last-child  { white-space: nowrap; color: var(--qcv-stripe); font-weight: 700; }
.qcv-cfg__rcpt__row--empty span { font-style: italic; opacity: .55; }
.qcv-cfg__rcpt__total {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: var(--rule-3) solid var(--qcv-stripe);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono);
    text-transform: uppercase;
    color: var(--qcv-paper);
}
.qcv-cfg__rcpt__total b {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 36px);
    color: var(--qcv-stripe);
}
.qcv-cfg__rcpt__note {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    line-height: 1.6;
    color: var(--qcv-paper);
    opacity: .75;
}


/* ─────────────────────── 11. WORK · METHOD · CABINET · NOTES · FAQ ─────────────────────── */
/* Work list */
.qcv-work-list {
    display: flex; flex-direction: column;
    border-top: var(--rule-3) solid var(--qcv-ink);
}
.qcv-work {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    color: var(--qcv-ink);
    transition: background var(--t-fast) var(--ease);
}
.qcv-work:hover { background: var(--qcv-stripe); padding-left: var(--sp-4); padding-right: var(--sp-4); }
@media (min-width: 720px) {
    .qcv-work {
        grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 2fr) 200px;
        column-gap: var(--sp-6);
        align-items: center;
        padding: var(--sp-5) var(--sp-4);
    }
}
.qcv-work__code {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
}
.qcv-work__title {
    display: block;
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-work__sector {
    display: block; margin-top: 4px;
    font-family: var(--qcv-mono); font-size: var(--t-mono-sm);
    letter-spacing: var(--ls-mono); text-transform: uppercase;
    color: var(--qcv-ink-2);
}
.qcv-work__note {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}
.qcv-work__cover {
    display: block; overflow: hidden;
    border: var(--rule-2) solid var(--qcv-ink);
    background: var(--qcv-paper);
    aspect-ratio: 16/9;
}
.qcv-work__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Method */
.qcv-method {
    display: grid; grid-template-columns: 1fr;
    border-top: var(--rule-3) solid currentColor;
}
.qcv-method__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-7) 0;
    border-bottom: var(--rule-2) solid currentColor;
}
@media (min-width: 720px) {
    .qcv-method__row {
        grid-template-columns: 100px minmax(0, 1.2fr) minmax(0, 2.4fr);
        column-gap: var(--sp-6);
        align-items: start;
        padding: var(--sp-6) var(--sp-4);
    }
}
.qcv-method__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
    align-self: start;
}
.qcv-section--invert .qcv-method__num { color: var(--qcv-stripe); }
.qcv-method__name {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: inherit;
}
.qcv-method__detail {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-section--invert .qcv-method__detail { color: var(--qcv-paper); opacity: .85; }

/* Cabinet (people) */
.qcv-cabinet {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}
@media (min-width: 560px)  { .qcv-cabinet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qcv-cabinet { grid-template-columns: repeat(3, 1fr); } }
.qcv-person {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: var(--sp-4);
    row-gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--qcv-paper);
    border: var(--rule-3) solid var(--qcv-ink);
}
.qcv-person__photo {
    width: 88px; height: 110px;
    object-fit: cover;
    border: var(--rule-2) solid var(--qcv-ink);
    background: var(--qcv-ink-4);
    grid-column: 1; grid-row: 1;
}
.qcv-person__body { display: flex; flex-direction: column; gap: var(--sp-1); grid-column: 2; grid-row: 1; min-width: 0; }
.qcv-person__id {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
}
.qcv-person__name {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-person__role {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink-2);
}
.qcv-person__bio {
    grid-column: 1 / -1; grid-row: 2;
    font-family: var(--qcv-serif);
    font-size: var(--t-sm);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}

/* Notes list */
.qcv-notes-list {
    display: flex; flex-direction: column;
    border-top: var(--rule-3) solid var(--qcv-ink);
}
.qcv-note {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-7) 0;
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    color: var(--qcv-ink);
    transition: background var(--t-fast) var(--ease);
}
.qcv-note:hover { background: var(--qcv-stripe); padding-left: var(--sp-4); padding-right: var(--sp-4); }
@media (min-width: 720px) {
    .qcv-note {
        grid-template-columns: 110px 200px minmax(0, 1fr) auto;
        column-gap: var(--sp-6);
        align-items: start;
        padding: var(--sp-6) var(--sp-4);
    }
}
.qcv-note__code {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
}
.qcv-note__date {
    font-family: var(--qcv-mono); font-size: var(--t-mono);
    letter-spacing: var(--ls-mono); text-transform: uppercase;
    color: var(--qcv-ink-2);
    line-height: 1.55;
}
.qcv-note__date span:first-child {
    display: block;
    color: var(--qcv-ink);
    font-weight: 700;
    margin-bottom: 4px;
}
.qcv-note__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.qcv-note__title {
    display: block;
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}
.qcv-note__lead {
    display: block;
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}
.qcv-note__arrow {
    align-self: start;
    font-family: var(--qcv-display);
    font-size: 28px;
    color: var(--qcv-ink);
    transition: transform var(--t-fast) var(--ease);
}
.qcv-note:hover .qcv-note__arrow { transform: translateX(8px); color: var(--qcv-mark); }

/* FAQ */
.qcv-faqs {
    display: flex; flex-direction: column;
    border-top: var(--rule-3) solid var(--qcv-ink);
    border-bottom: var(--rule-3) solid var(--qcv-ink);
}
.qcv-faq { border-bottom: var(--rule-2) solid var(--qcv-ink); }
.qcv-faq:last-child { border-bottom: 0; }
.qcv-faq__q {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    text-align: left;
    cursor: pointer;
}
.qcv-faq__q__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
    min-width: 70px;
}
.qcv-faq__q__text {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-faq__q__icon {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: 28px; line-height: 1;
    color: var(--qcv-mark);
    transition: transform var(--t-base) var(--ease);
}
.qcv-faq.is-open .qcv-faq__q__icon { transform: rotate(45deg); }
.qcv-faq__a {
    max-height: 0; overflow: hidden;
    transition: max-height var(--t-base) var(--ease);
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-faq.is-open .qcv-faq__a {
    max-height: 600px;
    padding: 0 0 var(--sp-6) 70px;
}


/* ─────────────────────── 12. POST · PROSE ─────────────────────── */
.qcv-prose {
    max-width: 70ch;
    font-family: var(--qcv-serif);
    font-size: var(--t-lg);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-prose > * + * { margin-top: 1.2em; }
.qcv-prose h2 {
    margin-top: 2em;
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
    padding-bottom: var(--sp-2);
    border-bottom: var(--rule-3) solid var(--qcv-mark);
}
.qcv-prose h3 {
    margin-top: 1.6em;
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-prose p { font-family: var(--qcv-serif); }
.qcv-prose ul {
    padding-left: 0; list-style: none;
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.qcv-prose ul li {
    position: relative; padding-left: 24px;
    font-family: var(--qcv-serif);
    font-size: var(--t-md); line-height: var(--lh-loose);
}
.qcv-prose ul li::before {
    content: "■"; position: absolute; left: 0; top: 0;
    color: var(--qcv-mark); font-size: 12px; line-height: 1.8;
}
.qcv-prose a { color: var(--qcv-ink); border-bottom: var(--rule-3) solid var(--qcv-mark); padding-bottom: 1px; }
.qcv-prose a:hover { background: var(--qcv-stripe); }
.qcv-prose code {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: 0.85em;
    background: var(--qcv-paper-2);
    padding: 1px 6px;
    border: var(--rule-1) solid var(--qcv-ink-4);
}
.qcv-prose strong { color: var(--qcv-ink); font-weight: 700; }

/* Post (blog post) */
.qcv-post {
    max-width: 760px;
    margin-inline: auto;
}
.qcv-post__meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-top: var(--rule-3) solid var(--qcv-ink);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink-2);
    margin-bottom: var(--sp-8);
}
.qcv-post__meta span:first-child { color: var(--qcv-mark); }
.qcv-post__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-5xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
    margin-bottom: var(--sp-6);
}
.qcv-post__lead {
    font-family: var(--qcv-serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
    margin-bottom: var(--sp-10);
}
.qcv-post__cover {
    margin: var(--sp-8) 0;
    border: var(--rule-3) solid var(--qcv-ink);
    overflow: hidden;
    aspect-ratio: 16/9;
}
.qcv-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.qcv-post__body { font-family: var(--qcv-serif); font-size: var(--t-lg); line-height: var(--lh-loose); color: var(--qcv-ink-2); }
.qcv-post__body > p + p { margin-top: 1.2em; }
.qcv-post__body p:first-of-type::first-letter {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: 5.2em;
    line-height: 0.9;
    color: var(--qcv-mark);
    float: left;
    margin: 4px 12px 0 0;
}


/* ─────────────────────── 13. SERVICE DETAIL ─────────────────────── */
.qcv-svc-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-block);
    align-items: start;
}
@media (min-width: 1024px) {
    .qcv-svc-overview { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--sp-12); }
}
.qcv-svc-overview__lead {
    font-family: var(--qcv-serif);
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: var(--lh-loose);
    color: var(--qcv-ink);
}

.qcv-svc-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: var(--rule-3) solid var(--qcv-ink);
    background: var(--qcv-paper);
}
.qcv-svc-meta--3col { grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .qcv-svc-meta--3col { grid-template-columns: repeat(3, 1fr); }
}
.qcv-svc-meta__row {
    padding: var(--sp-5);
    border-right: var(--rule-2) solid var(--qcv-ink);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.qcv-svc-meta__row:nth-child(2n) { border-right: 0; }
.qcv-svc-meta__row--full {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
}
.qcv-svc-meta__label {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-mark);
}
.qcv-svc-meta__value {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-svc-meta__value--small {
    font-family: var(--qcv-serif); font-weight: 400;
    font-size: var(--t-md); line-height: var(--lh-loose);
    text-transform: none; letter-spacing: 0;
    color: var(--qcv-ink-2);
}
.qcv-svc-meta__value a { color: var(--qcv-ink); border-bottom: var(--rule-3) solid var(--qcv-mark); }

/* Deliverables grid */
.qcv-deliv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: var(--rule-3) solid var(--qcv-ink);
}
@media (min-width: 560px)  { .qcv-deliv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qcv-deliv-grid { grid-template-columns: repeat(3, 1fr); } }
.qcv-deliv {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--qcv-paper);
    border: var(--rule-2) solid var(--qcv-ink);
    margin: -1.5px;
}
.qcv-deliv__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
}
.qcv-deliv__txt {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
}

/* Service-detail "next" rail */
.qcv-svc-next {
    margin-top: var(--gap-block);
    padding-top: var(--sp-6);
    border-top: var(--rule-2) solid var(--qcv-ink);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--sp-4);
}

/* Service-detail "book" banner */
.qcv-svc-book {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-8);
    background: var(--qcv-stripe);
    border: var(--rule-3) solid var(--qcv-ink);
}
@media (min-width: 720px) {
    .qcv-svc-book { grid-template-columns: 1fr auto; gap: var(--sp-8); }
}
.qcv-svc-book h3 {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
    max-width: 22ch;
}


/* ─────────────────────── 14. FORM ─────────────────────── */
.qcv-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: var(--rule-3) solid var(--qcv-ink);
    background: var(--qcv-paper);
    border-right: 0;  /* sidebar adjoins */
    position: relative;
}
@media (min-width: 720px) {
    .qcv-form { grid-template-columns: 1fr 1fr; }
}
.qcv-form__field {
    display: flex; flex-direction: column; gap: 6px;
    padding: var(--sp-5);
    border-right: var(--rule-2) solid var(--qcv-ink);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
}
.qcv-form__field:nth-child(2n + 1) { border-right: var(--rule-2) solid var(--qcv-ink); }
@media (min-width: 720px) {
    .qcv-form__field:nth-child(2n) { border-right: 0; }
}
.qcv-form__field--full {
    grid-column: 1 / -1;
    border-right: 0;
}
.qcv-form__label {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-form__label--req::before {
    content: "[REQ]";
    color: var(--qcv-mark);
    font-weight: 700;
}
.qcv-form__input,
.qcv-form__select,
.qcv-form__textarea {
    width: 100%;
    padding: 12px 0 8px;
    font-family: var(--qcv-mono);
    font-size: 16px;
    color: var(--qcv-ink);
    background: transparent;
    border: 0;
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    outline: none;
    transition: border-color var(--t-fast) var(--ease);
}
.qcv-form__textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.qcv-form__input:focus,
.qcv-form__select:focus,
.qcv-form__textarea:focus { border-color: var(--qcv-mark); }
.qcv-form__error {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    color: var(--qcv-mark);
    text-transform: uppercase;
    min-height: 16px;
}
.qcv-form__msg {
    grid-column: 1 / -1;
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    border-bottom: var(--rule-2) solid var(--qcv-ink);
}
.qcv-form__msg.is-ok    { background: var(--qcv-stripe); color: var(--qcv-ink); }
.qcv-form__msg.is-error { background: var(--qcv-mark);   color: var(--qcv-paper); }
.qcv-form__submit {
    grid-column: 1 / -1;
    display: flex;
}
.qcv-form__submit button {
    width: 100%;
    padding: var(--sp-5) var(--sp-6);
    background: var(--qcv-ink);
    color: var(--qcv-stripe);
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    border: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qcv-form__submit button:hover { background: var(--qcv-mark); color: var(--qcv-paper); }
.qcv-form__submit button:disabled { opacity: .5; cursor: not-allowed; }

/* Honeypot — visually hidden but not display:none (so bots fill it) */
.qcv-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

/* Contact form layout: form left, sidebar right */
.qcv-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .qcv-contact { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
}
.qcv-contact__sidebar {
    background: var(--qcv-ink);
    color: var(--qcv-paper);
    padding: var(--sp-7) var(--sp-6);
    display: flex; flex-direction: column; gap: var(--sp-5);
    border: var(--rule-3) solid var(--qcv-ink);
    border-top: 0;
}
@media (min-width: 1024px) {
    .qcv-contact__sidebar { border-left: 0; border-top: var(--rule-3) solid var(--qcv-ink); }
}
.qcv-contact__sidebar h4 {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase; color: var(--qcv-stripe);
    margin-bottom: 4px;
}
.qcv-contact__sidebar > div { padding-block: var(--sp-2); }
.qcv-contact__sidebar > div + div {
    padding-top: var(--sp-4);
    border-top: var(--rule-1) solid rgba(255,255,255,.2);
}
.qcv-contact__sidebar a {
    color: var(--qcv-paper);
    word-break: break-word;
    transition: color var(--t-fast) var(--ease);
}
.qcv-contact__sidebar a:hover { color: var(--qcv-stripe); }
.qcv-contact__big {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: var(--qcv-paper);
    border-bottom: var(--rule-3) solid var(--qcv-stripe);
    padding-bottom: 2px;
    display: inline-block;
}
.qcv-contact__mono {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono-lg);
    line-height: 1.55;
    color: var(--qcv-paper);
}


/* ─────────────────────── 15. STATE PAGES (404, success, cancel) ─────────────────────── */
.qcv-state {
    padding-block: clamp(80px, 12vh, 160px);
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-5);
    max-width: 760px;
    margin-inline: auto;
}
.qcv-state__num {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-7xl);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-mark);
    border-block: var(--rule-5) solid var(--qcv-ink);
    padding: var(--sp-3) 0;
}
.qcv-state__num--ok { color: var(--qcv-ink); }
.qcv-state__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-state__copy {
    max-width: 60ch;
    font-family: var(--qcv-serif);
    font-size: var(--t-lg);
    line-height: var(--lh-loose);
    color: var(--qcv-ink-2);
}
.qcv-state__copy strong { color: var(--qcv-ink); }
.qcv-state__cta {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-3);
}
.qcv-state__ref {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-mark);
}


/* ─────────────────────── 16. BUTTONS ─────────────────────── */
.qcv-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 14px 22px;
    font-family: var(--qcv-mono);
    font-weight: 700;
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    line-height: 1;
    color: var(--qcv-ink);
    background: var(--qcv-paper);
    border: var(--rule-3) solid var(--qcv-ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
    white-space: nowrap;
}
.qcv-btn::after {
    content: "→";
    color: var(--qcv-mark);
    font-family: var(--qcv-display);
    font-size: 18px;
    transition: transform var(--t-fast) var(--ease);
}
.qcv-btn--no-arrow::after { display: none; }
.qcv-btn:hover { background: var(--qcv-ink); color: var(--qcv-paper); }
.qcv-btn:hover::after { color: var(--qcv-stripe); transform: translateX(4px); }

.qcv-btn--solid {
    background: var(--qcv-ink); color: var(--qcv-paper);
}
.qcv-btn--solid::after { color: var(--qcv-stripe); }
.qcv-btn--solid:hover { background: var(--qcv-mark); color: var(--qcv-paper); border-color: var(--qcv-mark); }
.qcv-btn--solid:hover::after { color: var(--qcv-paper); }

.qcv-btn--mark {
    background: var(--qcv-mark); color: var(--qcv-paper); border-color: var(--qcv-mark);
}
.qcv-btn--mark::after { color: var(--qcv-paper); }
.qcv-btn--mark:hover { background: var(--qcv-ink); border-color: var(--qcv-ink); }

.qcv-btn--stripe {
    background: var(--qcv-stripe); color: var(--qcv-ink); border-color: var(--qcv-ink);
}
.qcv-btn--stripe::after { color: var(--qcv-mark); }
.qcv-btn--stripe:hover { background: var(--qcv-ink); color: var(--qcv-stripe); }
.qcv-btn--stripe:hover::after { color: var(--qcv-stripe); }

.qcv-btn--lg {
    padding: 18px 28px;
    font-size: var(--t-sm);
}
.qcv-btn--block { width: 100%; justify-content: center; }

/* Ghost on dark backgrounds — inverts on hover */
.qcv-btn--ghost-paper {
    background: transparent;
    color: var(--qcv-paper);
    border-color: var(--qcv-paper);
}
.qcv-btn--ghost-paper::after { color: var(--qcv-stripe); }
.qcv-btn--ghost-paper:hover {
    background: var(--qcv-paper);
    color: var(--qcv-ink);
    border-color: var(--qcv-paper);
}
.qcv-btn--ghost-paper:hover::after { color: var(--qcv-mark); }


/* ─────────────────────── 17. ADDITIONAL COMPONENTS ─────────────────────── */
/* Manifesto block (display headline + serif column on desktop) */
.qcv-manifesto {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
@media (min-width: 1024px) {
    .qcv-manifesto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.qcv-manifesto__lead {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 0.98;
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
}
.qcv-manifesto__body { display: flex; flex-direction: column; gap: 1em; }
.qcv-manifesto__body p {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}

/* Section foot — right-aligned "→ continue" link */
.qcv-section-foot {
    margin-top: var(--gap-block);
    display: flex; justify-content: flex-end; align-items: center;
    flex-wrap: wrap; gap: var(--sp-4);
}
.qcv-section-foot--between {
    justify-content: space-between;
}

/* CTA banner (used at end of pages and inside sections) */
.qcv-cta-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-8);
    background: var(--qcv-paper);
    border: var(--rule-3) solid var(--qcv-ink);
    margin-top: var(--gap-block);
}
@media (min-width: 720px) {
    .qcv-cta-banner { grid-template-columns: 1fr auto; gap: var(--sp-8); }
}
.qcv-cta-banner__title {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--qcv-ink);
    max-width: 24ch;
}
.qcv-cta-banner--stripe { background: var(--qcv-stripe); }
.qcv-cta-banner > div { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Principles 2-up grid (used in process page) */
.qcv-principles {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--rule-2) solid var(--qcv-ink);
    border-left: var(--rule-2) solid var(--qcv-ink);
}
@media (min-width: 720px) {
    .qcv-principles { grid-template-columns: repeat(2, 1fr); }
}
.qcv-principle {
    padding: var(--sp-7) var(--sp-6);
    border-right: var(--rule-2) solid var(--qcv-ink);
    border-bottom: var(--rule-2) solid var(--qcv-ink);
    background: var(--qcv-paper);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.qcv-principle__num {
    font-family: var(--qcv-mono); font-weight: 700;
    font-size: var(--t-mono); letter-spacing: var(--ls-mono-lg);
    color: var(--qcv-mark);
}
.qcv-principle__name {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--qcv-ink);
    max-width: 18ch;
}
.qcv-principle__detail {
    font-family: var(--qcv-serif);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--qcv-ink-2);
}

/* Sprints sub-note (the small mono notice + button under the sprint grid) */
.qcv-sprints__foot {
    margin-top: var(--gap-block);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: center;
}
@media (min-width: 720px) {
    .qcv-sprints__foot { grid-template-columns: 1fr auto; gap: var(--sp-8); }
}
.qcv-sprints__foot__note {
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-paper);
    opacity: .75;
    max-width: 64ch;
}

/* Booking / sprints fine-print tucked under sprint grid */
.qcv-fineprint {
    margin-top: var(--sp-6);
    font-family: var(--qcv-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--qcv-ink-3);
    max-width: 80ch;
}
.qcv-section--invert .qcv-fineprint { color: var(--qcv-paper); opacity: .65; }

/* Diagonal hazard-stripe divider */
.qcv-stripes {
    height: 22px;
    background: repeating-linear-gradient(135deg,
        var(--qcv-stripe) 0 18px,
        var(--qcv-ink)    18px 30px);
}

/* Service overview block (stacks stamp + lead) */
.qcv-svc-overview > div { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Service book CTA — stack stamp + h3 with proper rhythm */
.qcv-svc-book > div { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Duration meta value — display caps treatment */
.qcv-svc-meta__value--duration {
    font-family: var(--qcv-display); font-weight: 800;
    font-size: var(--t-xl);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-snug);
    color: var(--qcv-ink);
}


/* ─────────────────────── 18. ACCESSIBILITY · MOTION · CURSOR ─────────────────────── */
:focus-visible {
    outline: 3px solid var(--qcv-mark);
    outline-offset: 3px;
}

/* Reveal on scroll */
.qcv-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.qcv-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .qcv-reveal { opacity: 1; transform: none; }
}

/* Custom crosshair cursor — desktop only */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><line x1="11" y1="0" x2="11" y2="22" stroke="%230A0A0A" stroke-width="1.5"/><line x1="0" y1="11" x2="22" y2="11" stroke="%230A0A0A" stroke-width="1.5"/><circle cx="11" cy="11" r="3" fill="none" stroke="%230A0A0A" stroke-width="1.5"/></svg>') 11 11, crosshair;
    }
    a, button, label, summary, [role="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], select {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><line x1="11" y1="0" x2="11" y2="22" stroke="%23E11D2E" stroke-width="2"/><line x1="0" y1="11" x2="22" y2="11" stroke="%23E11D2E" stroke-width="2"/><circle cx="11" cy="11" r="3" fill="%23E11D2E"/></svg>') 11 11, pointer;
    }
}

/* Print */
@media print {
    .qcv-tickerbar, .qcv-topbar, .qcv-drawer, .qcv-cookie, .qcv-footer__pitch { display: none; }
    body { background: white; color: black; }
}