/* Redesigned landing page (landing/index_v2.html, USE_NEW_LANDING=true).
 *
 * Its own file rather than additions to landing.css: landing.css is still
 * serving the legacy page, and the two designs disagree about type scale,
 * spacing and section rhythm. Keeping them apart means neither can break the
 * other, and deleting one later is a file removal rather than an archaeology
 * exercise.
 *
 * Everything here is namespaced .v2-*.
 */

/* ---------------------------------------------------------------- tokens */
.v2 {
    /* Steel theme, per CLAUDE.md. Note the legacy landing.css declares
     * --gold-primary: #ffd700 (pure yellow) while every newer surface uses
     * #D4AF37 (muted metallic); they sit 40px apart in the current hero.
     * This page commits to #D4AF37. */
    --gold: #D4AF37;
    --gold-dim: #B8912A;
    --ink: #ffffff;
    --ink-2: #A8A8A8;
    /* #6E6E6E measured 4.11:1 on black -- under AA for the stat labels,
     * the trust line and the whole footer, all of which are small text.
     * #808080 is 5.3:1 and still reads as the quiet tier. */
    --ink-3: #808080;
    --bg: #000000;
    --bg-card: #0A0A0A;
    --bg-card-2: #111111;
    --line: #1C1C1C;
    --line-2: #2A2A2A;
    --line-gold: #2A2418;
    --success: #28a745;

    /* Checkboxes, the search box's clear affordance and any scrollbar the
     * table gets: without this they render in the light UA palette. */
    color-scheme: dark;

    /* Bounded, derived type ramp. --h1 is the only size authored; the rest
     * derive from it by ratio, so the steps keep their relationship at every
     * viewport. The legacy sheet hardcodes .hero-title AND .section-title to
     * 64px, which is why every section heading currently shouts as loud as the
     * H1 -- a derived ramp cannot land in that state.
     *
     * The max() floors are not decoration. --h1 bottoms out at its 2.4rem
     * clamp on a phone, and 2.4rem * 0.29 is 11.1px -- so every H4 on the page
     * rendered SMALLER than the body copy underneath it. A ratio that holds at
     * 1280px inverts the hierarchy at 390px unless each step has a floor. */
    --h1: clamp(2.4rem, 4.6vw, 4.25rem);
    --h2: max(1.6rem,   calc(var(--h1) * 0.50));
    --h3: max(1.15rem,  calc(var(--h1) * 0.37));
    --h4: max(1.0625rem, calc(var(--h1) * 0.29));
    --body: clamp(1rem, 1.05vw, 1.0625rem);
    --lead: calc(var(--body) * 1.18);
    --small: calc(var(--body) * 0.82);

    --pad-x: clamp(1.25rem, 5vw, 4.5rem);
    --gap: clamp(2.5rem, 5vw, 5.5rem);

    background: var(--bg);
    color: var(--ink);
    font-family: 'Barlow', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 .display {
    font-family: 'Archivo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin: 0;
}
.v2 h1 { font-size: var(--h1); }
.v2 h2 { font-size: var(--h2); }
.v2 h3 { font-size: var(--h3); }
.v2 h4 { font-size: var(--h4); letter-spacing: -0.01em; }
.v2 p  { margin: 0; }

.v2 .v2-eyebrow {
    font-size: var(--small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}
.v2 .v2-lead  { font-size: var(--lead); color: var(--ink-2); line-height: 1.55; }
.v2 .v2-muted { color: var(--ink-2); }
.v2 .v2-dim   { color: var(--ink-3); font-size: var(--small); }

/* Links inside body prose. Without this they fall through to the user agent's
   #0000EE on a black page -- about 2.3:1 -- and on /materials that link is the
   shop's phone number. Scoped to the two prose containers so component links
   (.v2-back, .v2-btn, .v2-mat-cta, nav, footer) keep their own treatment
   instead of being overridden by a broader `main a` rule. */
.v2 .v2-lead a, .v2 .v2-muted a {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.4);
    text-underline-offset: 0.18em;
}
.v2 .v2-lead a:hover, .v2 .v2-lead a:focus-visible,
.v2 .v2-muted a:hover, .v2 .v2-muted a:focus-visible {
    color: #E8C963;
    text-decoration-color: currentColor;
}

.v2-section { padding: var(--gap) var(--pad-x); border-top: 1px solid var(--line); }
.v2-inner   { max-width: 1240px; margin: 0 auto; }

/* Skip link. Off-screen until focused -- in CSS rather than the onfocus/onblur
   pair this used to carry, so every v2 page can assert it has no on* attribute
   at all instead of an on* attribute that happens to be safe. */
.v2-skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.v2-skip:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------- buttons */
.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.75rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: var(--body);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .18s, color .18s, border-color .18s;
    /* 44px minimum touch target -- the live site's CTAs are under it on a
     * phone, which is why they are easy to miss and hard to hit. */
    min-height: 44px;
}
.v2-btn-primary { background: var(--gold); color: #000; }
.v2-btn-primary:hover, .v2-btn-primary:focus-visible { background: #E8C24A; color: #000; }
.v2-btn-ghost { border-color: #333; color: var(--ink); }
.v2-btn-ghost:hover, .v2-btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }

.v2 a:focus-visible, .v2 button:focus-visible, .v2 [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------- nav */
.v2-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.85rem var(--pad-x);
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.v2-nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem; }
.v2-nav-links a {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--body);
    padding: 0.5rem 0;
}
.v2-nav-links a:hover, .v2-nav-links a:focus-visible { color: var(--gold); }
.v2-nav-links .v2-nav-sep { padding-left: 1.75rem; border-left: 1px solid #242424; }

/* ----------------------------------------------------------------- hero */
.v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x) clamp(3.5rem, 6vw, 6rem);
    max-width: 1240px;
    margin: 0 auto;
}
.v2-hero-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.v2-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.v2-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    color: var(--ink-3);
    font-size: var(--small);
}

/* The 3D rack mounts into this box in Phase 8. It is sized here, not by the
 * script, so that mounting causes no layout shift -- the space is already
 * reserved whether or not WebGL ever runs. */
.v2-hero-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 320px;
    border: 1px solid var(--line-gold);
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 70% 20%, rgba(212, 175, 55, 0.10), transparent 60%),
        linear-gradient(160deg, #131313 0%, #050505 100%);
    overflow: hidden;
}
.v2-hero-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------- doors */
.v2-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.v2-door {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, background-color .18s, transform .18s;
}
.v2-door:hover, .v2-door:focus-visible {
    border-color: var(--gold);
    background: var(--bg-card-2);
    transform: translateY(-2px);
}
.v2-door-cta { color: var(--gold); font-weight: 700; margin-top: auto; }

/* ---------------------------------------------------------------- proof */
.v2-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    /* Not var(--gap): a full section gap here reads as the end of the section
     * rather than a step inside it, and on a shop with no testimonials yet it
     * leaves the stats stranded above a lone button. */
    margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
.v2-stat {
    /* Both children are spans: without a column here the number and its label
     * render on one line, and "2,000Projects completed" is what you get. */
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-left: 2px solid var(--gold);
    padding-left: 1rem;
}
.v2-stat-n {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: var(--h3);
    color: var(--gold);
    line-height: 1.1;
}
.v2-stat-l { color: var(--ink-3); font-size: var(--small); }

.v2-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.v2-quote {
    /* <figure> carries a UA margin of 16px 40px. Left unset it inset every
     * quote card 40px inside its own grid cell, so the row read as three
     * floating boxes that lined up with nothing else on the page. */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-card);
}
.v2-quote blockquote { margin: 0; color: #D8D8D8; }
.v2-quote figcaption { margin-top: auto; color: var(--ink-3); font-size: var(--small); }
.v2-quote figcaption strong { color: var(--ink); display: block; font-weight: 600; }

/* ------------------------------------------------------------------ how */
.v2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.v2-step-n {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: var(--h3);
    color: var(--gold-dim);
    display: block;
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ cta */
.v2-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* --------------------------------------------------------------- footer */
.v2-footer {
    border-top: 1px solid var(--line);
    padding: 2.5rem var(--pad-x);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    color: var(--ink-3);
    font-size: var(--small);
}
.v2-footer a { color: #CCCCCC; text-decoration: none; }
.v2-footer a:hover, .v2-footer a:focus-visible { color: var(--gold); }
.v2-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }

/* ------------------------------------------------------------ /work grid */
.v2-back { color: var(--ink-2); text-decoration: none; font-size: var(--small); }
.v2-back:hover, .v2-back:focus-visible { color: var(--gold); }

.v2-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.v2-tile {
    display: block;
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, transform .18s;
}
.v2-tile:hover, .v2-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.v2-tile img {
    display: block;
    width: 100%;
    /* No height: 100%. The tile is a grid item, so it has a definite stretched
     * height, and a 100%-tall image ate the whole box and pushed the caption
     * out under overflow: hidden -- twelve captions rendered, none visible.
     *
     * height: auto is not redundant. The width/height HTML attributes (there so
     * the grid does not reflow as photographs land) become a UA presentational
     * hint of `height: 700px`, and with both dimensions definite the browser
     * ignores aspect-ratio -- the portrait shots grew a head taller than the
     * landscape ones in the same row. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.v2-tile-cap {
    display: block;
    padding: 0.75rem 0.9rem 0.9rem;
    color: var(--ink-2);
    font-size: var(--small);
    line-height: 1.4;
}

/* -------------------------------------------------------------- lightbox */
.v2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(0, 0, 0, 0.94);
}
.v2-lightbox[hidden] { display: none; }
.v2-lightbox-figure {
    margin: 0;                       /* <figure> again -- see .v2-quote */
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: center;
    max-width: min(1200px, 100%);
}
.v2-lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
}
.v2-lightbox-figure figcaption {
    color: var(--ink-2);
    font-size: var(--small);
    text-align: center;
}
.v2-lightbox-close,
.v2-lightbox-nav {
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--line-2);
    color: var(--ink);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    /* 44px: a thumb target, not a mouse target. */
    min-width: 44px;
    min-height: 44px;
    font-size: 1.6rem;
    font-family: inherit;
}
.v2-lightbox-close:hover, .v2-lightbox-nav:hover,
.v2-lightbox-close:focus-visible, .v2-lightbox-nav:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
}
.v2-lightbox-close { top: 1rem; right: 1rem; }
.v2-lightbox-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.v2-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.v2-lightbox-count {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ink-3);
    font-size: var(--small);
}

/* --------------------------------------------------------- /materials */
.v2-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.v2-mat-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
    margin: 2.5rem 0 0.75rem;
    padding: 1rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--bg-card);
}
.v2-mat-controls[hidden] { display: none; }
.v2-mat-search { flex: 1 1 18rem; display: block; }
.v2-mat-search input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: #000;
    color: var(--ink);
    font: inherit;
}
.v2-mat-search input::placeholder { color: var(--ink-3); }
.v2-mat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.v2-chip {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--small);
    cursor: pointer;
}
.v2-chip:hover { border-color: var(--gold); color: var(--gold); }
.v2-chip.is-on {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    font-weight: 600;
}
.v2-mat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-2);
    font-size: var(--small);
    cursor: pointer;
}
.v2-mat-toggle input { accent-color: var(--gold); width: 1rem; height: 1rem; }
.v2-mat-count { font-size: var(--small); margin: 0; min-height: 1.2em; }

.v2-mat-group[hidden], .v2-mat-section[hidden], .v2-mat-row[hidden] { display: none; }
.v2-mat-group { margin: 2.75rem 0 0; }
.v2-mat-group-h { font-size: var(--h3); margin-bottom: 0.5rem; }
.v2-mat-section-h {
    font-size: var(--small);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

/* Wide content scrolls inside its own box; the page body never does. */
.v2-mat-scroll {
    overflow-x: auto;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--bg-card);
}
.v2-mat-table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.v2-mat-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--ink-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.v2-mat-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.v2-mat-table tr:last-child td { border-bottom: 0; }
.v2-mat-size { color: var(--ink); font-weight: 600; white-space: nowrap; }
.v2-mat-dim  { color: var(--ink-3); white-space: nowrap; }
.v2-price      { color: #7ee08a; font-weight: 700; white-space: nowrap; }
.v2-price-call { color: var(--gold); white-space: nowrap; }
.v2-mat-cta a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.v2-mat-cta a:hover, .v2-mat-cta a:focus-visible { text-decoration: underline; }

.v2-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78em;
    white-space: nowrap;
}
.v2-tag-stock { background: #14301a; color: #7ee08a; border: 1px solid #28a745; }
.v2-tag-lead  { background: #1A1A1A; color: var(--ink-2); border: 1px solid var(--line-2); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .v2-hero { grid-template-columns: minmax(0, 1fr); }
    /* Stage below the copy on a phone: the words are what the visitor came
     * for, and a 3D box above the fold pushes them off it. */
    .v2-hero-stage { order: 2; aspect-ratio: 16 / 10; min-height: 220px; }
    .v2-doors, .v2-quotes, .v2-steps { grid-template-columns: minmax(0, 1fr); }
    .v2-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-mat-perlb { display: none; }
    .v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-nav-links { gap: 1rem; font-size: var(--small); }
    .v2-nav-links .v2-nav-sep { padding-left: 1rem; }
}

@media (max-width: 620px) {
    /* The links take their own full-width row under the badge. Measured before
     * this existed: the nav was 611px wide against a 390px viewport, and every
     * section below it inherited that horizontal scroll -- the page looked like
     * six broken sections when only one element was too wide. */
    .v2-nav { padding-bottom: 0.5rem; }
    .v2-nav-links { width: 100%; justify-content: space-between; gap: 0.75rem; }
    .v2-nav-links .v2-nav-sep { padding-left: 0; border-left: 0; }
}

@media (max-width: 700px) {
    .v2-mat-scroll { overflow-x: visible; }
    .v2-mat-table thead { display: none; }
    .v2-mat-table, .v2-mat-table tbody { display: block; }
    .v2-mat-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.15rem 0.75rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--line);
    }
    .v2-mat-table tr:last-child { border-bottom: 0; }
    .v2-mat-table td { display: block; padding: 0; border: 0; }
    .v2-mat-size  { grid-area: 1 / 1; font-size: 1rem; }
    .v2-mat-avail { grid-area: 1 / 2; justify-self: end; }
    .v2-mat-wt    { grid-area: 2 / 1; }
    .v2-mat-price { grid-area: 3 / 1; margin-top: 0.15rem; }
    /* The CTA spans the weight and price lines rather than sitting on one of
       them: measured at 375px it was a 66x16 tap target, and the empty column
       beside the weight line is exactly the height that fixes it without
       making 53 cards taller. */
    .v2-mat-cta   { grid-area: 2 / 2 / 4 / 3; justify-self: end; align-self: stretch; }
    .v2-mat-cta a { display: flex; align-items: center; height: 100%; padding-left: 0.75rem; }
    /* The lead-time tag is the longest string on the row; let it wrap in its
       own column instead of setting the width of every card. */
    .v2-tag { white-space: normal; text-align: right; }
    /* `.v2-mat-table td` (0-1-1) outranks the 900px `.v2-mat-perlb` (0-1-0),
       so without this the per-pound cell comes BACK on a phone and lands in an
       unplaced grid row. Hiding a column takes a rule at least as specific as
       the one that laid the cells out. */
    .v2-mat-table .v2-mat-perlb { display: none; }
}

@media (max-width: 560px) {
    .v2-hero-ctas .v2-btn { flex: 1 1 100%; justify-content: center; }
    .v2-gallery { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .v2 *, .v2 *::before, .v2 *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}