/* ============================================================================
   COREX — Public site stylesheet
   Depends on tokens.css. Implements PRD §2B, §2C, §4.

   Design intent (§2C.2): dark, metallic, engineered. Black-first, generous
   space, hard edges, texture at low opacity, one signature moment.
   ========================================================================= */

/* ============================================================================
   1. RESET & BASE
   ========================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Offset for the sticky header when jumping to an anchor */
    scroll-padding-top: calc(var(--header-h-scrolled) + 16px);
}

/* Lenis takes over smooth scrolling when JS is available; native
   smooth-scroll would fight it. */
html.lenis { scroll-behavior: auto; }
html.lenis body { overscroll-behavior: none; }

body {
    margin: 0;
    background: var(--surface-0);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

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

button { cursor: pointer; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
    /* Inline links are body-sized, so they use the text-safe red */
    color: var(--corex-red-text);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-out);
}
a:hover { color: #FF6F72; }

ul, ol { margin: 0; padding: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--sp-6) 0;
}

/* --- Focus rings: visible on every interactive element (§2C.5) ----------- */
:focus-visible {
    outline: 2px solid var(--corex-red-bright);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
/* Never remove focus styling — only ever replace it. */
:focus:not(:focus-visible) { outline: none; }

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    z-index: calc(var(--z-header) + 10);
    padding: var(--sp-3) var(--sp-5);
    background: var(--corex-red);
    color: #fff;
    font-weight: 600;
    transition: top var(--dur-micro) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* --- Screen-reader-only ------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

::selection { background: var(--corex-red); color: #fff; }


/* ============================================================================
   2. TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    color: var(--text-strong);
}

h1 { font-size: clamp(2.25rem, 6vw, var(--fs-4xl)); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 4.5vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.375rem, 3vw, var(--fs-xl)); }
h4 { font-size: var(--fs-lg); }

/* Metallic silver heading — the logo's sheen, applied to major headings.
   §2B.1: use --grad-silver with background-clip: text. */
.metal {
    background: var(--grad-silver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Fallback for browsers without background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .metal { color: var(--corex-silver-light); -webkit-text-fill-color: currentColor; }
}

.metal-red {
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Small uppercase label above a section heading */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* 14px text — needs the text-safe red, not the brand red (3.28:1) */
    color: var(--corex-red-text);
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--grad-red);
}

/* Centred headings get a matching rule on the right.
   A single leading dash reads as a left-aligned mark that has drifted into the
   middle; a pair reads as deliberate. The gradient is mirrored so the colour
   runs outward from the text on both sides rather than repeating left-to-right
   twice, which would make the right-hand rule look like a mistake. */
.section__head--center .eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--grad-red);
    transform: scaleX(-1);
}

.lead {
    font-size: var(--fs-md);
    color: var(--corex-silver);
    max-width: 62ch;
}

.muted { color: var(--text-muted); }

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Disclaimer / asterisk footnote (used for the hardness claim, §10.1) */
.footnote {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}


/* ============================================================================
   3. LAYOUT
   ========================================================================= */

/* --------------------------------------------------------------------------
   Container — Bootstrap 5 breakpoints and max-widths
   --------------------------------------------------------------------------
   Stepped rather than fluid, so the measure is predictable at every size and
   the same at 1440 as at 2560 instead of drifting.

       <576  100%      >=992   960px
      >=576  540px    >=1200  1140px
      >=768  720px    >=1400  1320px

   The GUTTER is deliberately ours, not Bootstrap's. Bootstrap pads 12px each
   side; on a black, image-led layout that reads as content jammed against the
   edge. clamp(20px, 4vw, 48px) keeps the same rhythm as the rest of the design.
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Wider variant, used by the site header so the logo and nav have room.
   Steps with the same breakpoints, one size up. */
.container--wide { max-width: var(--container-wide); }

.section {
    position: relative;
    padding-block: var(--section-y);
}
/* Section alternation (§2B.2) */
.section--alt { background: var(--surface-1); }

/* Red hairline accent separating sections (§2B.6) */
.section--ruled { border-top: 1px solid var(--border); }
.section--ruled::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 140px;
    height: 1px;
    background: var(--grad-red);
}

.section__head {
    max-width: 720px;
    margin-bottom: var(--sp-8);
}
.section__head--center {
    margin-inline: auto;
    text-align: center;
}
.section__head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }


/* ============================================================================
   4. BUTTONS
   Chamfered corners echo the logo's cut angles (§2B.6), used sparingly.
   Min touch target 44×44 (skill: Touch & Interaction, CRITICAL).
   ========================================================================= */

.btn {
    --btn-bg: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--btn-bg);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform    var(--dur-hover) var(--ease-out),
        border-color var(--dur-hover) var(--ease-out),
        color        var(--dur-hover) var(--ease-out),
        box-shadow   var(--dur-hover) var(--ease-out),
        background   var(--dur-hover) var(--ease-out);
}

/* Icons inside buttons never stretch, and never shrink under a long label */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--lg svg { width: 20px; height: 20px; }

/* Sheen sweep on hover (§2C.3 item 6) — transform only, no layout cost */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sheen);
    transform: translateX(-105%);
    transition: transform 0.75s var(--ease-out);
    pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(105%); }

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Primary: red metallic gradient (§2B.1) ----------------------------- */
.btn--primary {
    background: var(--grad-red);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(209,6,10,.5);
}
.btn--primary:hover {
    color: #fff;
    background: linear-gradient(160deg, #FF1A1F 0%, #E00A0F 45%, #B0070B 100%);
    box-shadow: 0 8px 26px rgba(209,6,10,.34);
    transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); }

/* --- Outlined --------------------------------------------------------- */
.btn--outline {
    border-color: var(--border);
    color: var(--text-strong);
}
.btn--outline:hover {
    border-color: var(--corex-red);
    color: var(--text-strong);
    background: rgba(209,6,10,.08);
    transform: translateY(-2px);
}
.btn--outline:active { transform: translateY(0); }

/* --- Ghost ------------------------------------------------------------- */
.btn--ghost { color: var(--corex-silver); }
.btn--ghost:hover { color: var(--text-strong); background: var(--surface-2); }

/* --- WhatsApp (used on the public site and in admin) -------------------- */
.btn--whatsapp { background: #25D366; color: #052e16; }
.btn--whatsapp:hover { background: #1FBF5A; color: #052e16; }

/* 44px, not 40 — this is the minimum comfortable touch target, and these
   buttons ("Enquire", "Compare") sit on product cards that are tapped on a
   phone far more often than clicked on a desktop. */
.btn--sm  { min-height: 44px; padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn--lg  { min-height: 56px; padding-inline: var(--sp-7); font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

/* Chamfered variant — top-left and bottom-right cut, echoing the logo */
.btn--cut {
    border-radius: 0;
    clip-path: polygon(
        var(--chamfer) 0,
        100% 0,
        100% calc(100% - var(--chamfer)),
        calc(100% - var(--chamfer)) 100%,
        0 100%,
        0 var(--chamfer)
    );
}


/* ============================================================================
   5. HEADER & NAVIGATION  (§4.1)
   ========================================================================= */

/* The navbar is its OWN bar, above the banner — not floating on top of it.
   Overlaying it meant nav links sitting on the packaging artwork, which read as
   clutter and made both harder to see. Sticky, so it still follows on scroll,
   but it occupies its own space in the flow and the banner starts beneath it. */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    transition:
        height           var(--dur-micro) var(--ease-inout),
        background-color var(--dur-micro) var(--ease-inout),
        border-color     var(--dur-micro) var(--ease-inout),
        backdrop-filter  var(--dur-micro) var(--ease-inout);
}

/* Shrink past 80px (§2C.3 item 10). Already solid, so this only tightens the
   bar and adds a hairline of brand colour — no background fade to jump. */
.header.is-scrolled {
    height: var(--header-h-scrolled);
    background: rgba(0, 0, 0, .94);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 1px 0 0 var(--border), 0 8px 28px rgba(0, 0, 0, .5);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.header__logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}
.header__logo img {
    height: 42px;
    width: auto;
    transition: height var(--dur-micro) var(--ease-inout);
}
.header.is-scrolled .header__logo img { height: 34px; }

/* --- Desktop nav -------------------------------------------------------- */
.nav {
    display: none;
    flex: 1;
    justify-content: center;
}
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    list-style: none;
}
.nav__link {
    position: relative;
    display: block;
    padding: var(--sp-2) 0;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--corex-silver);
    white-space: nowrap;
}
.nav__link:hover { color: var(--text-strong); }
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--grad-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-hover) var(--ease-out);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text-strong); }

.header__actions {
    display: none;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
}

/* --- Hamburger ---------------------------------------------------------- */
.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px; height: 48px;
    margin-left: auto;
    padding: 0 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--corex-silver);
    transition: transform var(--dur-micro) var(--ease-inout),
                opacity   var(--dur-micro) var(--ease-inout);
}
.hamburger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile slide-in panel (§4.1, §2C.3 item 11) ------------------------ */
.mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-menu);
    width: min(420px, 88vw);
    display: flex;
    flex-direction: column;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
    background: var(--surface-1);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s var(--ease-out), visibility 0s;
}

.mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-menu) - 1);
    background: rgba(0,0,0,.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-menu__backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
}
.mobile-menu__head img { height: 34px; width: auto; }

.mobile-menu__close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--corex-silver);
}
.mobile-menu__close:hover { border-color: var(--corex-red); color: #fff; }
.mobile-menu__close svg { width: 20px; height: 20px; }

.mobile-menu__list { list-style: none; margin-bottom: var(--sp-6); }
.mobile-menu__list a {
    display: block;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--corex-silver);
}
.mobile-menu__list a:hover { color: var(--corex-red-text); }

.mobile-menu__actions {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.mobile-menu__contact {
    display: grid;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    margin-bottom: var(--sp-5);
}
.mobile-menu__contact a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    color: var(--corex-silver);
    font-size: var(--fs-sm);
}
.mobile-menu__contact a:hover { color: #fff; }
.mobile-menu__contact svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--corex-red); }

.social {
    display: flex;
    gap: var(--sp-3);
    list-style: none;
}
/* Footer variant.
   `.footer ul { display: grid }` and `.footer ul a { display: inline-block;
   padding-block }` are written for the footer's stacked LINK COLUMNS, and both
   out-specify `.social` / `.social a` — a bare `.footer__social` selector loses
   to `.footer ul`, which stacked the icons vertically and padded them to 52px.
   Scoped to `.footer .footer__social` so the icon row wins, keeps its flex
   layout and gets its 44px squares back. */
.footer .footer__social { display: flex; margin-top: var(--sp-5); }
.footer .footer__social a { display: grid; padding-block: 0; }

.social a {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--corex-silver);
    transition: border-color var(--dur-hover) var(--ease-out),
                color        var(--dur-hover) var(--ease-out),
                transform    var(--dur-hover) var(--ease-out);
}
.social a:hover { border-color: var(--corex-red); color: #fff; transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }


/* ============================================================================
   6. HERO  (§4.2)
   Cap 5 slides. First slide preloaded — it is the LCP element.
   Content animates FROM a visible state, so it survives a JS failure (§2C.3).
   ========================================================================= */

/* Height follows the BANNER, not the viewport.
   Forcing 100svh means object-fit: cover crops a 2.56-ratio banner hard on a
   tall window — enough to slide the product out from the right and straight
   under the headline. Letting the aspect ratio set the height guarantees the
   artwork is shown exactly as designed at every width, with the designer's
   text-safe zone intact.

   Mobile is a STACK: banner on top, copy below on black. The portrait banner
   is filled edge to edge by the product, so there is no safe zone to overlay
   into — putting copy on top of it would be unreadable whatever the scrim. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-0);
    /* Tight on phones so the headline, subtext and the first button all land
       within reach of the fold — the square image already takes 335px of a
       812px screen before anything is read. */
    padding-block: var(--sp-5) var(--sp-7);
}

/* Ambient hex texture, hero only (§2C.3 item 14). Sits behind everything. */
.hero > .hex-mesh {
    position: absolute;
    inset: -97px 0;
    animation: hex-drift 40s linear infinite;
    pointer-events: none;
}

/* Mobile-first: one column, image first. On a phone the picture is the hook
   and the copy reads underneath it. */
.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--sp-5);
}

.hero__content { max-width: var(--hero-copy-max, 640px); }

/* --- The square image --------------------------------------------------- */
.hero__media {
    position: relative;
    order: -1;                 /* above the copy on mobile */
    isolation: isolate;
    aspect-ratio: 1 / 1;       /* the file is square; hold the box even before it loads */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    overflow: hidden;
}

/* Accent rule along the top, echoing the product rows */
.hero__media::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
    background: var(--grad-red);
}

/* Brand glow behind the product, so a flat studio shot still has depth */
.hero__glow {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 0;
    width: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209, 6, 10, .16) 0%, transparent 68%);
    pointer-events: none;
}

.hero__media picture {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__title {
    margin-bottom: var(--sp-5);
    font-size: clamp(2.5rem, 7.5vw, var(--fs-4xl));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.hero__title .metal-red { display: block; }

.hero__sub {
    margin-bottom: var(--sp-6);
    font-size: clamp(1rem, 2.2vw, var(--fs-md));
    color: var(--corex-silver);
    max-width: 52ch;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* --- Slider controls ---------------------------------------------------- */
/* Scroll hint */
/* ============================================================================
   7. TRUST STRIP  (§3 #3)
   ========================================================================= */

.trust {
    border-block: 1px solid var(--border);
    background: var(--surface-1);
    padding-block: var(--sp-6);
}
.trust__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--sp-5) var(--sp-4);
}
.trust__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-align: left;
}
.trust__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--corex-red);
}
.trust__icon svg { width: 22px; height: 22px; }
.trust__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
    text-transform: uppercase;
}
.trust__label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}


/* ============================================================================
   8. ABOUT  (§3 #4)
   ========================================================================= */

.about__grid {
    display: grid;
    gap: var(--sp-7);
    align-items: center;
}

.about__tagline {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, var(--fs-2xl));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}

.about__media {
    position: relative;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.about__media img { width: 100%; }

.about__points {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    list-style: none;
}
.about__points li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}
.about__points svg {
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 3px;
    color: var(--corex-red);
}
.about__points strong {
    display: block;
    color: var(--text-strong);
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* ============================================================================
   9. PRODUCT SHOWCASE  (§4.3)
   Three full-width alternating rows rather than a three-up card grid.

   The client's three packaging photographs are the best assets in the project
   (§2C.2: "should carry the product section. Large, well-lit, with room around
   them"). A third-width card crops them to a thumbnail. A half-width row gives
   each box real presence and leaves space for the full feature list, so the
   accordion disappears entirely — nothing is hidden behind a click.

   Layout alternates: image left / image right / image left.
   Accent stays a rule and a glow, never a filled background (§2B.3).
   ========================================================================= */

.showcases {
    display: grid;
    gap: clamp(4rem, 9vw, 8rem);
}

.showcase {
    --accent: var(--corex-red);
    --accent-text: var(--corex-red-text);
    --accent-soft: rgba(209, 6, 10, .16);

    position: relative;
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}

/* Per-product accents (§2B.3) */
.showcase--ceramic {
    --accent: var(--acc-ceramic);
    --accent-text: var(--acc-ceramic-text);
    --accent-soft: rgba(209, 6, 10, .18);
}
.showcase--graphene {
    --accent: var(--acc-graphene-lt);
    --accent-text: var(--acc-graphene-text);
    --accent-soft: rgba(46, 107, 168, .22);
}
.showcase--borophene {
    --accent: var(--acc-borophene);
    --accent-text: var(--acc-borophene-text);
    --accent-soft: rgba(153, 138, 195, .20);
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.showcase__media {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
    transition: border-color 0.5s var(--ease-out),
                box-shadow   0.5s var(--ease-out);
}

/* Accent rule along the top of the image panel */
.showcase__media::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
    background: var(--accent);
}

/* Accent glow behind the product, sized to the box. Sits under the photo,
   so it reads as light spilling off the packaging rather than an overlay. */
.showcase__glow {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 0;
    width: min(78%, 520px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
    opacity: .85;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}

.showcase__img {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.showcase__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Longer and softer than a card hover — a large image moving quickly
       reads as a jolt, the same movement over 0.7s reads as considered. */
    transition: transform 0.7s var(--ease-out);
    will-change: transform;
}

/* Blend the studio-grey photo edge into the panel so the shot sits on the page
   rather than looking like a pasted rectangle. Bottom only; the product itself
   is never covered (§2C.2). */
.showcase__img::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(20, 20, 23, .5) 55%, var(--surface-2) 100%);
}

/* Carbon-fibre weave on the flagship only (§2B.6) */
.showcase--borophene .showcase__img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .08;
    background-image:
        repeating-linear-gradient( 45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 5px);
}

.showcase__badge {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    z-index: 4;
    padding: var(--sp-2) var(--sp-4);
    background: rgba(0, 0, 0, .74);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    transition: transform 0.5s var(--ease-out);
}

/* Hover: a slow, small move. Nothing snaps. */
@media (hover: hover) {
    .showcase__media:hover {
        border-color: var(--accent);
        box-shadow: var(--shadow-2), 0 0 0 1px var(--accent-soft);
    }
    .showcase__media:hover .showcase__img img { transform: scale(1.035); }
    .showcase__media:hover .showcase__glow   { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    .showcase__media:hover .showcase__badge  { transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.showcase__body { max-width: 60ch; }

.showcase__index {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.showcase__index::after {
    content: '';
    flex: 1;
    max-width: 90px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.showcase__name {
    margin-bottom: var(--sp-2);
    font-size: clamp(1.75rem, 4vw, var(--fs-2xl));
}
.showcase__name span { color: var(--accent); }

.showcase__sub {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.showcase__blurb {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-md);
    color: var(--corex-silver);
}

.showcase__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.showcase__benefits {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    list-style: none;
}
.showcase__benefits li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.showcase__benefits svg {
    flex-shrink: 0;
    width: 17px; height: 17px;
    margin-top: 4px;
    color: var(--accent-text);
}

/* --- Collapsible detail -------------------------------------------------
   The grid-rows 0fr -> 1fr trick: height:auto cannot be transitioned, and the
   usual max-height workaround needs a guessed value that either clips long
   content or makes short content animate slowly. A grid whose single row
   animates from 0fr to 1fr transitions to the content's real height, whatever
   that is. The inner wrapper carries overflow:hidden so the content clips
   cleanly while the row collapses.
   ---------------------------------------------------------------------- */

.showcase__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    padding: var(--sp-2) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--corex-silver);
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-out),
                border-color var(--dur-hover) var(--ease-out);
}
.showcase__toggle:hover {
    color: var(--text-strong);
    border-bottom-color: var(--accent);
}
.showcase__toggle svg {
    width: 15px; height: 15px;
    transition: transform 0.35s var(--ease-inout);
}
.showcase__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.showcase__detail {
    display: grid;
    /* OPEN by default. JavaScript collapses it on load and drives the row
       inline from then on.

       Two reasons it is done this way rather than with a
       [data-open] selector:

       1. If JavaScript fails, every product's details stay visible. A panel
          that defaults to closed and needs JS to open would hide the benefits
          and specification permanently — the same rule that keeps the hero
          copy visible without JS (§2C.3).
       2. An attribute-selector override of grid-template-rows did not take
          effect here even though it matched with higher specificity — the
          third time this project has hit that (see CLAUDE.md §9). An inline
          style set by the toggle is unambiguous. */
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.45s var(--ease-inout);
}
.showcase__detail-inner {
    overflow: hidden;
    min-height: 0;      /* without this the row will not collapse below content height */
}

/* Specification grid */
.showcase__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-5);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius);
}
.showcase__specs dt {
    margin-bottom: 3px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.showcase__specs dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-strong);
}

.showcase__suitable {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    padding-block: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-block: 1px solid var(--border-soft);
}
.showcase__suitable div {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.showcase__suitable svg {
    width: 22px; height: 22px;
    color: var(--corex-silver-mid);
    transition: color var(--dur-base) var(--ease-out);
}
.showcase:hover .showcase__suitable svg { color: var(--accent-text); }

.showcase__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
}

.showcase__warranty {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-right: var(--sp-5);
    border-right: 1px solid var(--border);
    align-items: center;
}
.showcase__warranty strong {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--accent);
}
.showcase__warranty span {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.showcase__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}


.compare__price {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.compare__sub {
    display: block;
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Pack declarations  (Legal Metrology Rules 2011)
   Reference information, not a selling point — quiet border, muted labels,
   sitting below the benefits rather than competing with them.
   -------------------------------------------------------------------------- */

.pack {
    display: grid;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.pack__row dt {
    margin-bottom: 3px;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pack__row dd {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--corex-silver);
}

/* The price is the one thing here anyone scans for */
.pack__price {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.pack__tax {
    display: block;
    margin-top: 2px;
    font-size: 0.625rem;
    color: var(--text-muted);
}

/* Manufacturer's address — a long single line that must be allowed to wrap
   rather than widen the row. Quieter than the company name above it, because
   it is a declaration a customer checks, not something they read. */
.pack__addr {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: pretty;
}

.pack__note {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.pack__note svg {
    flex-shrink: 0;
    width: 14px; height: 14px;
    margin-top: 2px;
}

@media (min-width: 480px) {
    .pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Contents, customer care and the batch note read better on a full line */
    .pack__row--wide { grid-column: 1 / -1; }
}


/* ============================================================================
   10. COMPARISON TABLE  (§4.4)
   Restructured as stacked cards below 640px — a wide horizontally
   scrolling table on a phone is not acceptable.
   ========================================================================= */

/* The table needs about 700px before its columns start crushing. The wrapper
   MUST clip and scroll rather than let it spill: with no overflow rule it
   defaults to `visible`, and the table simply drew past the container's right
   edge — the row backgrounds ran off the side of the page.

   This is a safety net. The stacked cards below take over before it is normally
   needed; it only matters at odd widths, or if the copy in a cell grows. */
.compare__wrap {
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
}
.compare__table caption {
    padding: var(--sp-4);
    text-align: left;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    border-bottom: 1px solid var(--border);
}
.compare__table th,
.compare__table td {
    padding: var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.compare__table thead th {
    position: sticky;
    top: var(--header-h-scrolled);
    z-index: 1;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-strong);
    white-space: nowrap;
}
.compare__table thead th[data-accent='ceramic']   { box-shadow: inset 0 3px 0 var(--acc-ceramic); }
.compare__table thead th[data-accent='graphene']  { box-shadow: inset 0 3px 0 var(--acc-graphene-lt); }
.compare__table thead th[data-accent='borophene'] { box-shadow: inset 0 3px 0 var(--acc-borophene); }

.compare__table tbody th {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
.compare__table td strong { color: var(--text-strong); font-weight: 600; }

/* Rating bars — never colour alone, the numeric value is always printed */
.rating {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.rating__bar {
    flex: 1;
    min-width: 60px;
    max-width: 110px;
    height: 4px;
    background: var(--surface-0);
    border-radius: 2px;
    overflow: hidden;
}
.rating__fill {
    display: block;
    height: 100%;
    background: var(--grad-red);
}
.rating__fill--graphene  { background: linear-gradient(90deg, #1B3244, #2E6BA8); }
.rating__fill--borophene { background: linear-gradient(90deg, #6B5FA0, #998AC3); }
.rating span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--corex-silver); }

/* Stacked-card layout, below 640px */
.compare__cards { display: none; }
.compare__card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    margin-bottom: var(--sp-4);
}
.compare__card h3 {
    margin: 0;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
}
.compare__card--ceramic   h3 { box-shadow: inset 0 3px 0 var(--acc-ceramic); }
.compare__card--graphene  h3 { box-shadow: inset 0 3px 0 var(--acc-graphene-lt); }
.compare__card--borophene h3 { box-shadow: inset 0 3px 0 var(--acc-borophene); }
.compare__card dl {
    margin: 0;
    padding: var(--sp-4);
    display: grid;
    grid-template-columns: minmax(0,auto) minmax(0,1fr);
    gap: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
}
.compare__card dt { color: var(--text-muted); }
.compare__card dd { margin: 0; color: var(--text-strong); text-align: right; }


/* ============================================================================
   11. APPLICATION PROCESS  (§4.5)
   ========================================================================= */

.process__steps {
    position: relative;
    display: grid;
    gap: var(--sp-6);
    counter-reset: step;
}

/* Connecting line, drawn left-to-right on section entry (§2C.3 item 8).
   scaleX is driven by GSAP; CSS only sets the origin and resting state. */
.process__line {
    display: none;
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, var(--corex-red), var(--border));
    transform: scaleX(0);
    transform-origin: left center;
}
/* If JS never runs, the line must still be there */
.no-js .process__line { transform: scaleX(1); }

.step {
    position: relative;
    z-index: 1;
    text-align: center;
}
.step__num {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--corex-red);
    /* Chamfered — the logo's cut angle (§2B.6) */
    clip-path: polygon(
        var(--chamfer-sm) 0, 100% 0,
        100% calc(100% - var(--chamfer-sm)),
        calc(100% - var(--chamfer-sm)) 100%,
        0 100%, 0 var(--chamfer-sm)
    );
}
.step h3 {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
}
.step p {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    max-width: 30ch;
    margin-inline: auto;
}

/* Aftercare note — taken from the packaging (§4.5) */
.aftercare {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-top: var(--sp-8);
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--corex-red);
}
.aftercare svg {
    flex-shrink: 0;
    width: 24px; height: 24px;
    color: var(--corex-red);
}
.aftercare strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-strong);
    margin-bottom: var(--sp-1);
}


/* ============================================================================
   12. SIGNATURE ELEMENT — coated / uncoated comparison slider  (§2C.4 opt 2)
   Draggable divider over a paint-panel photo pair.
   Keyboard-operable via the range input (dragging must never be the only
   way to operate a control).
   ========================================================================= */

.compare-slider {
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
    touch-action: pan-y;      /* let the page scroll vertically over it */
    user-select: none;
}

.compare-slider__pane {
    position: relative;
    aspect-ratio: 3 / 2;
}
.compare-slider__pane img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* The coated (after) image is clipped from the left by --pos */
.compare-slider__after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare-slider__label {
    position: absolute;
    bottom: var(--sp-4);
    z-index: 3;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(0,0,0,.7);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.compare-slider__label--before { left: var(--sp-4); color: var(--text-muted); }
.compare-slider__label--after  { right: var(--sp-4); color: var(--corex-red-text); border-color: var(--corex-red); }

.compare-slider__handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos, 50%);
    z-index: 4;
    width: 2px;
    background: var(--corex-red);
    transform: translateX(-1px);
    pointer-events: none;
}
.compare-slider__grip {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    background: rgba(0,0,0,.72);
    border: 1px solid var(--corex-red);
    border-radius: 50%;
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 18px rgba(209,6,10,.35);
}
.compare-slider__grip svg { width: 22px; height: 22px; }

/* The real, focusable control. Transparent overlay across the whole image
   so pointer drag and keyboard arrows drive the same value. */
.compare-slider__range {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.compare-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px; height: 100%;
}
.compare-slider__range::-moz-range-thumb {
    width: 48px; height: 999px;
    border: 0; background: transparent;
}
/* The range is invisible, so mirror its focus onto the visible grip */
.compare-slider__range:focus-visible { outline: none; }
.compare-slider__range:focus-visible ~ .compare-slider__handle .compare-slider__grip {
    outline: 2px solid var(--corex-red-bright);
    outline-offset: 3px;
}

.compare-slider__hint {
    margin-top: var(--sp-4);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}


/* ============================================================================
   13. FORMS  (shared by verify, dealer enquiry, admin)
   Visible labels, inline errors tied with aria-describedby, error summary
   focusable at the top of the form.
   ========================================================================= */

.field { margin-bottom: var(--sp-4); }

.field label,
.label {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--corex-silver);
}
.field .req { color: var(--corex-red); margin-left: 2px; }

.input,
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-strong);
    font-size: var(--fs-sm);
    transition: border-color var(--dur-hover) var(--ease-out),
                box-shadow   var(--dur-hover) var(--ease-out);
}
.field textarea { min-height: 120px; padding-top: var(--sp-3); resize: vertical; }

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: #55555C; }

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--corex-red);
    box-shadow: 0 0 0 3px rgba(209,6,10,.16);
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 18px;
    padding-right: var(--sp-8);
}

.field__help {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Inline error, referenced by aria-describedby on the input */
.field__error {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: #FF6B6E;
}
.field__error svg { flex-shrink: 0; width: 14px; height: 14px; }
.field.has-error .field__error { display: flex; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #FF6B6E; }

/* Focusable error summary at the top of a form */
.form-summary {
    display: none;
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    background: rgba(209,6,10,.08);
    border: 1px solid var(--corex-red);
    border-radius: var(--radius);
}
.form-summary.is-shown { display: block; }
.form-summary h3 {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: #FF6B6E;
}
.form-summary ul { padding-left: var(--sp-5); font-size: var(--fs-xs); }
.form-summary a { color: #FF6B6E; text-decoration: underline; }

/* Honeypot — must be hidden from humans but reachable by bots (§4.8) */
.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

.form-note {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Generic alert block */
.alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-5);
}
.alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.alert--ok    { border-color: var(--status-active);    background: var(--status-active-bg); }
.alert--ok svg    { color: var(--status-active); }
.alert--warn  { border-color: var(--status-expiring);  background: var(--status-expiring-bg); }
.alert--warn svg  { color: var(--status-expiring); }
.alert--error { border-color: var(--corex-red);        background: var(--status-cancelled-bg); }
.alert--error svg { color: var(--corex-red); }


/* ============================================================================
   14. WARRANTY VERIFICATION  (§4.6)
   ========================================================================= */

.verify__panel {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--sp-6);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.verify__form {
    display: grid;
    gap: var(--sp-4);
}
.verify__form .field { margin-bottom: 0; }
.verify__form input[name='warranty_id'] {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Result panel — fades up, badge scales 0.9→1 (§2C.3 item 13) */
.verify__result {
    display: none;
    max-width: 640px;
    margin: var(--sp-5) auto 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.verify__result.is-shown { display: block; }

.verify__result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
}
.verify__result-id {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    color: var(--text-strong);
    letter-spacing: 0.04em;
}

/* Each dt/dd pair is wrapped in a div so the pair stays together as one grid
   cell — a bare dt/dd grid lets a long value in one column push its own label
   out of alignment with the next. div is valid inside dl in HTML5. */
.verify__result dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4) var(--sp-5);
    margin: 0;
    padding: var(--sp-5);
    font-size: var(--fs-xs);
}
.verify__result dt {
    margin-bottom: 2px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.verify__result dd {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--fs-sm);
    word-break: break-word;
}
.verify__result dd.mask {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

.verify__privacy {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* --- Status badge — colour + icon + text, never colour alone (§2B.4) ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; }
.badge--active    { color: var(--status-active);    background: var(--status-active-bg); }
.badge--expiring  { color: var(--status-expiring);  background: var(--status-expiring-bg); }
.badge--expired   { color: var(--status-expired);   background: var(--status-expired-bg); }
/* Border/background keep the brand red; the label uses the readable variant */
.badge--cancelled {
    color: var(--status-cancelled-text);
    border-color: var(--status-cancelled);
    background: var(--status-cancelled-bg);
}


/* ============================================================================
   15. WARRANTY COVERAGE  (§4.7)
   ========================================================================= */

.coverage__grid {
    display: grid;
    gap: var(--sp-5);
}

.coverage__col {
    padding: var(--sp-6);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.coverage__col--yes { border-top: 3px solid var(--status-active); }
.coverage__col--no  { border-top: 3px solid var(--text-muted); }

.coverage__col h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-md);
}
.coverage__col--yes h3 svg { color: var(--status-active); }
.coverage__col--no  h3 svg { color: var(--text-muted); }
.coverage__col h3 svg { width: 22px; height: 22px; }

.coverage__list { list-style: none; display: grid; gap: var(--sp-3); }
.coverage__list li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.55;
}
.coverage__list svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; }
.coverage__col--yes .coverage__list svg { color: var(--status-active); }
.coverage__col--no  .coverage__list svg { color: var(--text-muted); }

.coverage__req {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--status-expiring);
    border-radius: var(--radius);
}
.coverage__req h3 { font-size: var(--fs-md); }
.coverage__req ul { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-xs); }
.coverage__req li { display: flex; gap: var(--sp-3); }
.coverage__req svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; color: var(--status-expiring); }


/* ============================================================================
   15B. TESTIMONIALS  (client request, 17 Aug 2026)

   A CSS-driven carousel: the track is a flex row translated by a percentage
   that JS sets on --tmn-i. JS therefore only ever writes ONE number, and every
   width, gap and transition stays here where the breakpoints are — the same
   split that keeps the compare slider from fighting its own input.
   ========================================================================= */

.tmn { position: relative; }

/* overflow:hidden is what makes the off-screen slides unreachable. It must NOT
   become overflow:auto — that would let a trackpad scroll the track out of
   step with --tmn-i, and the dots would then lie about which slide is showing. */
.tmn__viewport {
    overflow: hidden;
    padding-block: var(--sp-2);
}

/* --tmn-per is read by JS ONLY. It is deliberately NOT used in any calc().
   -------------------------------------------------------------------------
   Widths and the translate step are restated with literal divisors at each
   breakpoint instead of derived from this property. One number is duplicated
   across three media queries, which is the cost; what it buys is that the
   layout depends on nothing but the media query itself.

   Both forms were tested and both measure correctly on a fresh load at 375,
   768 and 1280. The literal form was kept because an earlier measurement
   suggested the derived form went stale across a breakpoint — that turned out
   to be the browser pane failing to reflow (CLAUDE.md §9), NOT a real
   invalidation bug, so treat this as a preference for the explicit form and
   not as evidence against calc(). */
.tmn__track {
    --tmn-i: 0;
    --tmn-per: 1;
    list-style: none;
    display: flex;
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    /* Step = one slide + one gap, NOT 100%/per.
       The track is a flex row inside a fixed-width viewport, so its 100% is the
       viewport width — which excludes the gutters between slides. Translating
       by 100%/per falls one gutter short per step, and the cards drift out of
       alignment by (i × gap). A slide measures (100% - (per-1)·gap)/per, so
       slide + gap simplifies to (100% + gap)/per. */
    transform: translate3d(calc(var(--tmn-i) * (100% + var(--sp-5)) * -1), 0, 0);
    transition: transform .55s var(--ease-out);
    will-change: transform;
}

.tmn__slide {
    flex: 0 0 100%;
    display: flex;
}

.tmn__card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
    margin: 0;
    padding: var(--sp-6);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Stars use the raw brand accent deliberately: they are icons, not text, and
   CLAUDE.md §5 reserves --corex-red for exactly this. Gold would need a new
   token, and tokens.css is matched to physical product. */
.tmn__stars { display: flex; gap: 2px; }
.tmn__stars svg { width: 17px; height: 17px; }
.tmn__stars .is-on  { color: var(--corex-red); }
.tmn__stars .is-off { color: var(--border); }

.tmn__quote { margin: 0; flex: 1; }
.tmn__quote p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--corex-silver);
    text-wrap: pretty;
}

.tmn__by {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}
.tmn__name { font-weight: 600; color: var(--text-strong); }
.tmn__car {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.tmn__car svg { width: 15px; height: 15px; flex: none; }

/* --- Controls ----------------------------------------------------------- */

.tmn__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

/* 44px minimum touch target on every control (PRD §8). */
.tmn__arrow,
.tmn__play {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--corex-silver);
    cursor: pointer;
    transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tmn__arrow:hover,
.tmn__play:hover { color: var(--text-strong); border-color: var(--corex-silver); }
.tmn__arrow:disabled { opacity: .35; cursor: default; }

/* The toggle holds both glyphs and swaps which is shown, so the button never
   changes size between states and the row cannot shift on click. */
.tmn__play [data-icon], .tmn__play svg:last-child { display: none; }
.tmn__play.is-paused svg:first-of-type { display: none; }
.tmn__play.is-paused svg:last-child    { display: block; }

.tmn__dots { display: flex; align-items: center; gap: var(--sp-2); }

/* The visible dot is small, so the 44px target is delivered by a transparent
   ::before rather than by padding, which would space the dots apart. */
.tmn__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--border);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.tmn__dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}
.tmn__dot[aria-selected="true"] {
    background: var(--corex-red);
    transform: scale(1.35);
}

/* Two slides from 768 (container 720), three from 1200 (container 1140).
   Both land on container steps — CLAUDE.md §4B: a breakpoint that does not is
   how the hero ended up with 300px "columns".

   Width and step are restated with literal divisors at each breakpoint rather
   than derived from --tmn-per. See the note on .tmn__track above: deriving
   them silently survives a resize with stale values. */
@media (min-width: 768px) {
    .tmn__track {
        --tmn-per: 2;
        transform: translate3d(calc(var(--tmn-i) * (100% + var(--sp-5)) / 2 * -1), 0, 0);
    }
    .tmn__slide { flex-basis: calc(50% - var(--sp-5) / 2); }
}

@media (min-width: 1200px) {
    .tmn__track {
        --tmn-per: 3;
        transform: translate3d(calc(var(--tmn-i) * (100% + var(--sp-5)) / 3 * -1), 0, 0);
    }
    .tmn__slide { flex-basis: calc((100% - var(--sp-5) * 2) / 3); }
}

@media (prefers-reduced-motion: reduce) {
    .tmn__track { transition: none; }
    .tmn__dot   { transition: none; }
}


/* ============================================================================
   16. DEALER ENQUIRY  (§4.8)
   ========================================================================= */

.dealer__grid {
    display: grid;
    gap: var(--sp-7);
    align-items: start;
}

.dealer__benefits { list-style: none; display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.dealer__benefits li { display: flex; gap: var(--sp-3); }
.dealer__benefits svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--corex-red); }
.dealer__benefits strong {
    display: block;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.dealer__form {
    padding: var(--sp-6);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.form-row { display: grid; gap: var(--sp-4); }


/* ============================================================================
   17. FAQ  (§4.9)
   ========================================================================= */

.faq { max-width: 860px; margin-inline: auto; }

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

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    min-height: 64px;
    padding: var(--sp-4) 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-strong);
    transition: color var(--dur-hover) var(--ease-out);
}
.faq__q:hover { color: var(--corex-red-text); }

.faq__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--corex-red);
    transition: transform 0.45s var(--ease-inout),
                border-color var(--dur-hover) var(--ease-out);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__q[aria-expanded='true'] .faq__icon {
    transform: rotate(180deg);
    border-color: var(--corex-red);
}

/* Height transition via grid-template-rows — animates without touching
   layout properties like height/margin (§2C.3 performance rules) */
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease-inout);
}
.faq__a[data-open='true'] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
    padding-bottom: var(--sp-5);
    padding-right: var(--sp-7);
    font-size: var(--fs-sm);
    color: var(--corex-silver);
}


/* ============================================================================
   18. CONTACT & FOOTER  (§4.10)
   ========================================================================= */

.contact__grid {
    display: grid;
    gap: var(--sp-7);
    align-items: start;
}

.contact__list { list-style: none; display: grid; gap: var(--sp-5); }
.contact__list li { display: flex; gap: var(--sp-4); }
.contact__list .trust__icon { width: 44px; height: 44px; }
.contact__list strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact__list a, .contact__list span { color: var(--text-strong); font-size: var(--fs-sm); }
.contact__list a { display: inline-block; padding-block: var(--sp-2); }
.contact__list a:hover { color: var(--corex-red-text); }

/* Lazy-loaded map (§4.10) */
.contact__map {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }
.contact__map-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--sp-3);
    text-align: center;
    padding: var(--sp-5);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}
.contact__map-ph svg { width: 32px; height: 32px; color: var(--corex-red); }

/* Manufacturing-facility map — the Korean factory, shown until the client's
   own address arrives. The caption is load-bearing, not decoration: without it
   a pin inside a block headed "Contact COREX" reads as the company's address.
   It is therefore part of the same box and cannot be scrolled away from the
   map it labels.

   The variant drops the parent's fixed 4/3 box rather than dividing it. At
   375px the caption wraps to three lines and needed 140px of a 209px box,
   which left the map overflowing by 81px — silently clipped, because
   .contact__map is overflow:hidden. The box now takes its height from caption
   + map, and the map carries its own ratio with a floor so it never degrades
   into a letterbox. Modifier class rather than :has(), so the rule is not
   conditional on the markup matching a selector at read time. */
.contact__map--facility { aspect-ratio: auto; }

.contact__facility {
    display: block;
    margin: 0;
}
.contact__facility iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 200px;
}
.contact__facility figcaption {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.contact__facility figcaption svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--corex-red);
}
.contact__facility figcaption strong {
    display: block;
    color: var(--text-strong);
}
.contact__facility figcaption span span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    text-wrap: pretty;
}

.footer {
    padding-block: var(--sp-8) var(--sp-5);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}
.footer__grid {
    display: grid;
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid var(--border);
}
.footer__brand img { height: 44px; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-xs); color: var(--text-muted); max-width: 36ch; }
.footer h4 {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.footer ul { list-style: none; display: grid; }
/* Padded to a comfortable tap height. A 17px-tall link in a stacked list is
   easy to hit with a mouse and genuinely annoying with a thumb. */
.footer ul a {
    display: inline-block;
    padding-block: var(--sp-2);
    color: var(--corex-silver);
    font-size: var(--fs-xs);
}
.footer ul a:hover { color: var(--corex-red-text); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__bottom a { display: inline-block; padding-block: var(--sp-2); color: var(--text-muted); }
.footer__bottom a:hover { color: var(--corex-silver); }

/* Floating WhatsApp button */
.wa-float {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: calc(var(--z-header) - 1);
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    background: #25D366;
    border-radius: 50%;
    color: #052e16;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.wa-float:hover { transform: scale(1.07) translateY(-2px); color: #052e16; box-shadow: var(--shadow-3); }
.wa-float svg { width: 27px; height: 27px; }


/* ============================================================================
   19. SCROLL REVEAL
   Elements animate FROM a visible state. If JS fails or is disabled, content
   is fully visible — never left at opacity:0 in the HTML (§2C.3).
   The .js-ready class is set by main.js only after GSAP is confirmed present.
   ========================================================================= */

.js-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}
/* Showcase rows animate as a choreographed unit, so their parts start hidden
   too. Same guard as [data-reveal]: applied by JS only, never in the markup,
   so a JS failure leaves everything visible. */
.js-ready [data-showcase-media],
.js-ready [data-showcase-item] { opacity: 0; }
/* Reduced motion: never hide anything, even once JS is ready */
@media (prefers-reduced-motion: reduce) {
    .js-ready [data-reveal],
    .js-ready [data-showcase-media],
    .js-ready [data-showcase-item] { opacity: 1 !important; transform: none !important; }
}


/* ============================================================================
   20. RESPONSIVE  (§8 — 360 / 480 / 768 / 1024 / 1280 / 1440+)
   Mobile-first: everything above is the small-screen layout.
   ========================================================================= */

/* --- Below 480px --------------------------------------------------------- */
@media (max-width: 479.98px) {
    /* Phones: the portrait banner is the hero, so it is shown close to full.
       56vh leaves enough room below for the eyebrow, headline and subtext,
       with the CTAs a short thumb-scroll away — trying to force two 56px
       buttons above the fold as well would mean cropping the client's artwork
       roughly in half, which is the wrong trade on the view that matters most. */
    .hero__inner { padding-block: var(--sp-5) var(--sp-6); }
    .hero__title { margin-bottom: var(--sp-4); }
    .hero__sub   { margin-bottom: var(--sp-5); }

    /* Two 102px columns cannot hold "Nano ceramic (SiO₂)" or "Maximum gloss"
       without wrapping mid-value. One column per spec at this width. */
    .showcase__specs { grid-template-columns: 1fr; gap: var(--sp-3); }

    /* Warranty and CTAs stack rather than squeezing onto one line */
    .showcase__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
    .showcase__warranty { padding-right: 0; border-right: 0; }
    .showcase__actions { width: 100%; }
    .showcase__actions .btn { flex: 1; }
}

/* --- ≥480px ------------------------------------------------------------- */
@media (min-width: 480px) {
    .form-row--2 { grid-template-columns: 1fr 1fr; }
}


/* --- Comparison: cards below 992px, table above -------------------------
   The table needs ~700px of content width. The container only reaches that at
   the 992px breakpoint (960px container, 881px of content). Showing it earlier
   meant a table that either overflowed the page or scrolled sideways on a
   tablet — PRD §4.4 prefers the restructured cards over a scrolling table. */
@media (max-width: 991.98px) {
    .compare__wrap  { display: none; }
    .compare__cards { display: block; }
}

@media (min-width: 640px) {
    .trust__grid { grid-template-columns: repeat(2, 1fr); }
    .verify__result dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
    .trust__grid { grid-template-columns: repeat(4, 1fr); }
    .verify__result dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* --- ≥768px ------------------------------------------------------------- */
@media (min-width: 768px) {
    .coverage__grid--placeholder { display: none; }   /* (kept for ordering) */
}

/* ============================================================================
   HERO: two columns from 992px up
   ----------------------------------------------------------------------------
   Copy left, square image right, both inside the standard container so the
   headline lines up with every section below it. 992px is Bootstrap's `lg`
   breakpoint, where the container becomes 960px — wide enough for two real
   columns. Splitting earlier gave each side about 300px, which is not a column.

   The image sitting BESIDE the copy rather than behind it removes two problems
   that kept recurring: there is no text-safe zone to protect inside the
   artwork, and no separate mobile crop to keep in step with a desktop one.
   ========================================================================= */
@media (min-width: 992px) {
    .hero { padding-block: var(--sp-8) var(--sp-9); }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: clamp(2.5rem, 5vw, 5rem);
        align-items: center;
    }

    /* Back to source order: copy left, image right */
    .hero__media {
        order: 0;
        width: 100%;
        max-width: 620px;      /* a square must not become a very tall hero */
        margin-left: auto;
    }

    .hero__content { max-width: none; }
}

@media (min-width: 768px) {
    .coverage__grid  { grid-template-columns: repeat(2, 1fr); }
    .showcase__img   { aspect-ratio: 3 / 2; }
    .process__steps  { grid-template-columns: repeat(3, 1fr); }
    .footer__grid    { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* --- ≥1024px: desktop nav takes over from the hamburger ---------------- */
@media (min-width: 1024px) {

    .process__steps { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
    .process__line  { display: block; }

    /* ---- Product showcase: alternating rows ----
       Rows 1 and 3 put the image left; row 2 puts it right.

       Placement is explicit via grid-column rather than `order`. Both work in
       principle, but explicit columns say exactly where each half goes instead
       of leaving it to be inferred from source order plus two order values —
       and the markup stays in reading order either way, so screen readers and
       keyboard users get image-then-copy regardless of which side it renders. */
    .showcase {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
    .showcase > .showcase__media { grid-column: 1; grid-row: 1; }
    .showcase > .showcase__body  { grid-column: 2; grid-row: 1; }

    .showcase--reverse > .showcase__media { grid-column: 2; }
    .showcase--reverse > .showcase__body  { grid-column: 1; }

    .showcase__img { aspect-ratio: 4 / 3; }

    .about__grid    { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
    .dealer__grid   { grid-template-columns: 1fr 1.15fr; gap: var(--sp-9); }
    .contact__grid  { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
    .footer__grid   { grid-template-columns: 2fr 1fr 1fr 1fr; }

    .form-row--3    { grid-template-columns: repeat(3, 1fr); }
}

/* --- ≥1280px: the full desktop navbar ------------------------------------
   Logo + 8 links + two action buttons need roughly 1250px. Below that they
   overlap — which is exactly what happened at 1024px, with "Dealers" running
   into the Verify Warranty button. Between 1024 and 1279 the hamburger is the
   honest answer; the slide-in panel carries every link and both buttons. */
@media (min-width: 1280px) {
    .nav             { display: flex; }
    .header__actions { display: flex; }
    .hamburger       { display: none; }

    .nav__list { gap: var(--sp-4); }
}

/* --- ≥1440px: room to breathe -------------------------------------------- */
@media (min-width: 1440px) {
    .nav__list { gap: var(--sp-6); }
}

/* --- Below 768px: motion reduced to reveals + menu only (§2C.3) --------- */
@media (max-width: 767.98px) {
    /* Drop item 14 — ambient hex drift */
        /* Drop item 8 — the connecting line is not rendered at this width */
}

/* --- Coarse pointers: no hover-dependent behaviour ---------------------- */
@media (hover: none) {
    .btn::after { display: none; }
}


/* ============================================================================
   20B. LEGAL PAGES
   Long-form prose: Privacy Policy, Terms, Warranty Terms. Measure is capped for
   readability and headings are given real separation — these are documents
   people actually have to read, not marketing copy they skim.
   ========================================================================= */

.legal-body { max-width: 68ch; }

.legal-body h2 {
    margin: var(--sp-8) 0 var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    font-size: var(--fs-lg);
    color: var(--text-strong);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.legal-body h3 {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-md);
    color: var(--corex-silver);
    text-transform: none;
    letter-spacing: 0.01em;
}

.legal-body p { margin-bottom: var(--sp-4); line-height: 1.7; }

.legal-body ul,
.legal-body ol {
    margin: 0 0 var(--sp-5);
    padding-left: var(--sp-6);
    display: grid;
    gap: var(--sp-2);
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { line-height: 1.65; }
.legal-body li::marker { color: var(--corex-red-text); }

.legal-body strong { color: var(--text-strong); font-weight: 600; }

.legal-lead {
    padding: var(--sp-5);
    margin-bottom: var(--sp-7);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--corex-red);
    border-radius: var(--radius);
    font-size: var(--fs-md);
    color: var(--corex-silver);
}

.legal-note {
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    background: var(--status-expiring-bg);
    border: 1px solid var(--status-expiring);
    border-radius: var(--radius);
    font-size: var(--fs-xs);
}

.legal-mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    white-space: nowrap;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sp-5);
    font-size: var(--fs-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.legal-table th,
.legal-table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-soft);
    line-height: 1.6;
}
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    white-space: nowrap;
}
.legal-table tr:first-child th {
    background: var(--surface-3);
    color: var(--text-strong);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

/* Long documents on a phone: let wide tables scroll rather than break out */
@media (max-width: 639.98px) {
    .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
    .legal-table td, .legal-table th { white-space: normal; min-width: 130px; }
}


/* ============================================================================
   21. PRINT
   ========================================================================= */

@media print {
    .header, .mobile-menu, .mobile-menu__backdrop,
    .wa-float, .skip-link, .compare-slider { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1rem; }
}