/* G.A. Rittenhouse - Shared Styles */

:root {
    --gar-orange: #E86A17;
    --gar-orange-light: #F58220;
    --gar-orange-dark: #C45A12;
    --gar-black: #0A0A0A;
    --gar-charcoal: #1A1A1A;
    --gar-gray: #2D2D2D;
    --gar-light-gray: #E5E5E5;
    --gar-white: #FFFFFF;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--gar-black);
    color: var(--gar-white);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Background Pattern */
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 50px,
            var(--gar-orange) 50px,
            var(--gar-orange) 52px
        );
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10,10,10,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.logo img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--gar-white);
}

.nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav a {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gar-light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--gar-orange);
}

.header-cta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.header-phone {
    font-family: var(--font-condensed);
    font-weight: 600;
    font-size: 1rem;
    color: var(--gar-orange);
    text-decoration: none;
    letter-spacing: 0.05em;
}

.header-btn {
    padding: 0.6rem 1.25rem;
    background: var(--gar-orange);
    color: var(--gar-black);
    text-decoration: none;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid var(--gar-orange);
    transition: all 0.3s ease;
}

.header-btn:hover {
    background: transparent;
    color: var(--gar-orange);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 8rem 3rem 4rem;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.8) 50%,
        rgba(10, 10, 10, 0.6) 100%
    );
    z-index: -1;
}

.hero-content {
    max-width: 700px;
}

.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.hero-breadcrumb a {
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gar-light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-breadcrumb a:hover {
    color: var(--gar-orange);
}

.hero-breadcrumb span {
    color: var(--gar-orange);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.hero-title .highlight {
    color: var(--gar-orange);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--gar-light-gray);
    margin-bottom: 2.5rem;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary {
    padding: 1rem 2rem;
    background: var(--gar-orange);
    color: var(--gar-black);
    text-decoration: none;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid var(--gar-orange);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-primary:hover {
    background: var(--gar-orange-dark);
    border-color: var(--gar-orange-dark);
}

.btn-secondary {
    padding: 1rem 2rem;
    background: transparent;
    color: var(--gar-white);
    text-decoration: none;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid var(--gar-white);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--gar-white);
    color: var(--gar-black);
}

/* Sections */
.section {
    position: relative;
    padding: 5rem 3rem;
    z-index: 1;
}

.section--dark {
    background: var(--gar-charcoal);
}

.section--orange {
    background: var(--gar-orange);
}

.section--orange h2,
.section--orange h3,
.section--orange p {
    color: var(--gar-black);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-label {
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gar-orange);
    margin-bottom: 0.75rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: 0.02em;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--gar-gray);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2rem;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--gar-orange);
    transform: translateY(-3px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    color: var(--gar-orange);
    margin-bottom: 1.25rem;
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gar-light-gray);
}

/* Process Steps */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    counter-reset: step;
}

.process-step {
    position: relative;
    padding: 2rem;
    background: var(--gar-gray);
    border: 1px solid rgba(255,255,255,0.1);
}

.process-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--gar-orange);
    opacity: 0.3;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

.process-step h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.process-step p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gar-light-gray);
}

/* CTA Section */
.cta-section {
    text-align: center;
    padding: 5rem 3rem;
    background: linear-gradient(135deg, var(--gar-charcoal) 0%, var(--gar-black) 100%);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cta-section h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    color: var(--gar-light-gray);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.footer {
    background: var(--gar-black);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 4rem 3rem 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.footer-brand h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gar-light-gray);
    max-width: 300px;
}

.footer-col h4 {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gar-orange);
    margin-bottom: 1.25rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.6rem;
}

.footer-col a {
    color: var(--gar-light-gray);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--gar-orange);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: var(--gar-light-gray);
}

.footer-legal {
    display: flex;
    gap: 2rem;
}

.footer-legal a {
    font-size: 0.85rem;
    color: var(--gar-light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--gar-orange);
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 1rem 1.5rem;
    }
    
    .header-cta .header-phone {
        display: none;
    }
    
    .hero {
        padding: 7rem 1.5rem 3rem;
        min-height: 70vh;
    }
    
    .section {
        padding: 3.5rem 1.5rem;
    }
    
    .features-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-brand p {
        max-width: 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* ── Hero video ────────────────────────────────────────────────────────────
   Sits behind .hero::before, which already supplies the left-dark gradient the
   headline needs. The poster is also set as the .hero background-image, so if
   the video is blocked, slow, or the visitor prefers reduced motion, the frame
   still shows and nothing shifts. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.hero > .hero-content { position: relative; z-index: 2; }
.hero::before { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
}
/* Motion is decoration on small screens and costs mobile data — poster only. */
@media (max-width: 767px) {
    .hero-video { display: none; }
}

/* ── Mobile navigation ─────────────────────────────────────────────────────
   .nav is display:none under 1024px, so without this the site has no navigation
   at all on phones and tablets. The hamburger reveals the existing .nav rather
   than duplicating the links. */
@media (max-width: 1024px) {
    .header { position: relative; }
    .mobile-menu-btn { display: block; background: none; border: none; cursor: pointer; padding: .5rem; }
    .mobile-menu-btn span { display: block; width: 24px; height: 2px; margin: 5px 0;
        background: var(--gar-white, #fff); transition: transform .2s ease, opacity .2s ease; }
    .header.menu-open .mobile-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header.menu-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
    .header.menu-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .header.menu-open .nav {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--gar-black, #0A0A0A);
        border-top: 1px solid rgba(255,255,255,.10);
        padding: .5rem 1.5rem 1.25rem;
        z-index: 60;
    }
    .header.menu-open .nav a {
        padding: .95rem 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        font-family: var(--font-condensed, inherit);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .header.menu-open .nav a:last-child { border-bottom: none; }
}

@media (max-width: 1024px) {
    /* the desktop nav uses a large gap for a horizontal row; as a stacked panel
       that leaves the links floating far apart */
    .header.menu-open .nav { gap: 0 !important; align-items: stretch !important; }
    .header.menu-open .nav a { text-align: left; margin: 0 !important; }
}

/* Intro line under a section title. Some sections need a sentence of context
   before the card grid; without this the paragraph inherits body type and
   fights the centred header above it. */
.section-lede {
    max-width: 60ch;
    margin: 1.1rem auto 0;
    font-size: 1.05rem;
    line-height: 1.65;
    opacity: 0.82;
}

/* ============================================================
   Metal pages. Each metal gets its own identity from --metal,
   a true colour for that material, so eight sibling pages do not
   read as one page repeated. Set --metal on .hero per page.
   ============================================================ */
.hero--metal {
    background-color: #0A0A0A;
    background-image:
        /* hot edge, so the material reads as metal rather than as a flat fill */
        radial-gradient(85% 130% at 88% 8%,
            color-mix(in srgb, var(--metal) 92%, #FFF3E0) 0%,
            color-mix(in srgb, var(--metal) 70%, transparent) 26%,
            transparent 64%),
        /* brushed striations */
        repeating-linear-gradient(64deg,
            rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px,
            transparent 1px, transparent 7px),
        /* rolled sheen across the face */
        linear-gradient(104deg,
            #0A0A0A 0%,
            color-mix(in srgb, var(--metal) 38%, #0A0A0A) 38%,
            color-mix(in srgb, var(--metal) 88%, #FFFFFF) 58%,
            color-mix(in srgb, var(--metal) 44%, #0A0A0A) 72%,
            #121212 100%);
    background-size: cover;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .hero--metal {
        background-image:
            repeating-linear-gradient(64deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px, transparent 1px, transparent 7px),
            linear-gradient(104deg, #0A0A0A 0%, var(--metal) 58%, #121212 100%);
    }
}
/* A real photograph, washed in the page's own colour, so pages sharing the
   same shot still read as different pages. */
.hero--tinted {
    background-blend-mode: overlay, normal;
    background-image:
        linear-gradient(112deg,
            color-mix(in srgb, var(--metal) 78%, transparent) 0%,
            color-mix(in srgb, var(--metal) 30%, transparent) 55%,
            transparent 100%),
        var(--shot-img);
    background-size: cover;
    background-position: center;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .hero--tinted { background-image: var(--shot-img); background-blend-mode: normal; }
}
.hero--metal .hero-title .highlight { color: var(--metal); }

/* Forms we buy — the shape material actually arrives in */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem;
}
.form-card {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid var(--metal, var(--gar-orange));
    padding: 1.35rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.form-card svg { width: 46px; height: 34px; display: block; flex: 0 0 auto; }
.form-card h4 {
    font-family: var(--font-condensed);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gar-white);
}
.form-card p { font-size: .93rem; line-height: 1.55; opacity: .74; }

/* Grade tables */
.spec-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); }
table.spec { border-collapse: collapse; width: 100%; min-width: 480px; }
table.spec th {
    font-family: var(--font-condensed);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: left;
    padding: .85rem 1.1rem;
    background: rgba(255,255,255,.05);
    color: var(--metal, var(--gar-orange));
    border-bottom: 1px solid rgba(255,255,255,.12);
    white-space: nowrap;
}
table.spec td {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .94rem;
    line-height: 1.5;
    vertical-align: top;
}
table.spec tr:last-child td { border-bottom: none; }
table.spec td:first-child { font-weight: 600; white-space: nowrap; }

/* Process flow — intake to shipped metal */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.flow-step {
    position: relative;
    padding: 1.3rem 1.15rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    margin: -1px 0 0 -1px;
}
.flow-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gar-orange);
    opacity: .85;
    margin-bottom: .5rem;
}
.flow-step h4 {
    font-family: var(--font-condensed);
    font-size: 1rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .45rem;
}
.flow-step p { font-size: .89rem; line-height: 1.5; opacity: .72; }

/* Metal index cards on /metals/ */
.metal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
a.metal-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    padding: 0;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
a.metal-card:hover, a.metal-card:focus-visible {
    border-color: var(--mc, var(--gar-orange));
    transform: translateY(-2px);
}
a.metal-card:focus-visible { outline: 2px solid var(--gar-orange); outline-offset: 2px; }
.metal-card .swatch {
    height: 86px;
    background:
        repeating-linear-gradient(58deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 3px, transparent 3px, transparent 12px),
        linear-gradient(135deg, var(--mc) 0%, color-mix(in srgb, var(--mc) 55%, #0A0A0A) 100%);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .metal-card .swatch { background: linear-gradient(135deg, var(--mc) 0%, #0A0A0A 100%); }
}
.metal-card .mc-body { padding: 1.15rem 1.3rem 1.4rem; }
.metal-card h3 {
    font-family: var(--font-condensed);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .45rem;
}
.metal-card p { font-size: .92rem; line-height: 1.55; opacity: .74; }
.metal-card .mc-forms {
    margin-top: .8rem;
    font-family: var(--font-condensed);
    font-size: .82rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mc);
    opacity: .95;
}

/* Photo slot. Carries a real caption now and takes a photograph later
   by setting --shot to a url(); it must never render as a broken box. */
.shot {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(255,255,255,.14);
    background-color: #121110;
    background-image:
        radial-gradient(70% 100% at 78% 12%,
            color-mix(in srgb, var(--metal, #E86A17) 34%, transparent) 0%, transparent 62%),
        repeating-linear-gradient(64deg,
            rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 1px,
            transparent 1px, transparent 9px),
        linear-gradient(140deg, #221E1A 0%, #0E0D0C 100%);
    background-size: cover;
    background-position: center;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .shot { background-image: repeating-linear-gradient(64deg, rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 1px, transparent 1px, transparent 9px), linear-gradient(140deg,#221E1A 0%,#0E0D0C 100%); }
}
.shot--has-photo { background-image: var(--shot); }
.shot-cap {
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(to top, rgba(10,10,10,.92), rgba(10,10,10,0));
    font-family: var(--font-condensed);
    font-size: .88rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .8;
}
.shot-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    a.metal-card { transition: none; }
    a.metal-card:hover { transform: none; }
}

/* Sibling-stream list at the foot of each metal page */
ul.pages-inline {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 0;
}
ul.pages-inline li a {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid rgba(255,255,255,.16);
    color: var(--gar-white);
    text-decoration: none;
    font-family: var(--font-condensed);
    font-size: .95rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: border-color .18s ease, color .18s ease;
}
ul.pages-inline li a:hover,
ul.pages-inline li a:focus-visible { border-color: var(--gar-orange); color: var(--gar-orange); }
ul.pages-inline li a:focus-visible { outline: 2px solid var(--gar-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { ul.pages-inline li a { transition: none; } }

/* Photo heroes were unreadable. The base .hero::before runs 95% black on the
   left to 60% on the right, but the pour sits dead centre in every frame, so
   the subject was under ~85% black while the visible right edge held nothing
   but dark background. Five genuinely different photographs all rendered as
   the same dark rectangle. Keep the heavy scrim only under the text column,
   then open up fast so the image is actually seen. */
.hero--photo::before {
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.94) 0%,
        rgba(10, 10, 10, 0.86) 26%,
        rgba(10, 10, 10, 0.52) 46%,
        rgba(10, 10, 10, 0.22) 68%,
        rgba(10, 10, 10, 0.30) 100%
    );
}
/* Below the text wrap the columns stack, so a horizontal scrim stops working:
   go vertical and keep the type on the dark half. */
@media (max-width: 860px) {
    .hero--photo::before {
        background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.62) 0%,
            rgba(10, 10, 10, 0.80) 45%,
            rgba(10, 10, 10, 0.93) 100%
        );
    }
}

/* Article banner. The Insights pieces are 1,600-1,900 words each and carried
   no imagery at all -- the best-ranking content on the site was a wall of
   text. Full-bleed strip above the typographic header, same scrim language
   as the service-page heroes. */
.article-banner {
    position: relative;
    z-index: 1;
    height: 330px;
    background-size: cover;
    background-position: center;
    margin-bottom: -1rem;
}
.article-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10,10,10,0.55) 0%,
        rgba(10,10,10,0.35) 45%,
        rgba(10,10,10,0.92) 100%
    );
}
@media (max-width: 860px) { .article-banner { height: 210px; } }

/* In-body figure, so a long read has something to break the column. */
figure.article-figure {
    margin: 2.5rem 0;
}
figure.article-figure .fig-img {
    height: 300px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.1);
}
figure.article-figure figcaption {
    margin-top: 0.7rem;
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
@media (max-width: 860px) { figure.article-figure .fig-img { height: 200px; } }

/* Credibility band. Competitors lead with track record and coverage
   (Maynards: 120+ years, $10B+; USW: $21M insured, zero violations) and this
   site carried no numbers at all. Sits directly under the hero. */
.proof {
    border-top: 1px solid rgba(255,255,255,0.09);
    border-bottom: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.025);
    position: relative;
    z-index: 1;
}
.proof-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.2rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.6rem 2rem;
}
.proof-item { display: flex; flex-direction: column; gap: 0.35rem; }
.proof-num {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1;
    color: var(--gar-orange);
    letter-spacing: 0.02em;
}
.proof-lab {
    font-family: var(--font-condensed);
    font-size: 0.86rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    line-height: 1.35;
}
@media (max-width: 700px) { .proof-grid { padding: 1.8rem 1.5rem; gap: 1.4rem; } }