/* ==========================================================================
   Section Styles - NVM Pet Variation A (Heritage Industrial)
   ==========================================================================
   Intentionally near-empty. Each S-001 through S-010 section ships
   its own CSS during the section build loop. The only rules below are
   truly shared base utilities all sections rely on.

   Token compliance: zero raw hex, zero raw px spacing, zero raw
   font-family declarations - everything via var(--token) per CLAUDE.md.
   ========================================================================== */


/* Generic section vertical rhythm. Individual S-XXX sections may override
   with their own padding for hero/full-bleed moments. */
.section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    position: relative;
}


/* Centered, max-width container shared by every section. */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--space-lg);
}


/* ==========================================================================
   S-002 Hero (Variation A - Heritage Industrial)
   ==========================================================================
   Asymmetric editorial layout, Fraunces dominant, navy + ghost CTAs,
   single orchestrated reveal on page load.

   Token-only: zero raw hex, zero raw px, zero raw font-family.
   ========================================================================== */

.s002-hero {
    position: relative;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-4xl);
    background-color: var(--bg-primary);
    overflow: hidden;
}

.s002-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at top left,
            rgba(var(--color-primary-rgb), 0.04) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at bottom right,
            rgba(var(--color-secondary-rgb), 0.05) 0%,
            transparent 60%
        );
    pointer-events: none;
    z-index: var(--z-base);
}

.s002-hero__container {
    position: relative;
    z-index: var(--z-raised);
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(var(--space-2xl), 6vw, var(--space-4xl));
    align-items: center;
}

.s002-hero__content {
    max-width: 38rem;
    display: flex;
    flex-direction: column;
}

.s002-hero__eyebrow {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    max-width: none;
    padding-left: calc(var(--space-md) + var(--space-xs));
    position: relative;
}

.s002-hero__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--space-md);
    height: 2px;
    background-color: var(--color-accent);
    transform: translateY(-50%);
}

.s002-hero__headline {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: var(--font-extrabold);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--color-primary);
}

.s002-hero__subheadline {
    margin: var(--space-lg) 0 0;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
    font-weight: var(--font-medium);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 34rem;
}

.s002-hero__ctas {
    margin-top: var(--space-2xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.s002-hero__cta {
    min-height: 56px;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
}

.s002-hero__cta--primary {
    box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.16),
                0 8px 24px rgba(var(--color-primary-rgb), 0.12);
}

.s002-hero__cta--primary:hover {
    box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.18),
                0 12px 32px rgba(var(--color-secondary-rgb), 0.20);
}

.s002-hero__cta--secondary {
    border-width: 2px;
}

.s002-hero__credibility {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: var(--space-lg) 0 0;
    border-top: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.s002-hero__credibility li {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.s002-hero__credibility-mark {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: var(--font-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.s002-hero__credibility-label {
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    font-weight: var(--font-medium);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

/* --- Media (image right) ------------------------------------------------- */

.s002-hero__media {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.s002-hero__media-frame {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.08),
                0 24px 64px rgba(var(--color-primary-rgb), 0.16);
    background-color: var(--gray-100);
}

.s002-hero__media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.s002-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.s002-hero__caption {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    align-self: flex-end;
    margin: 0;
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.s002-hero__caption-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    flex-shrink: 0;
}

/* --- Orchestrated reveal (page load, total <= 600ms) --------------------- */

.s002-hero__eyebrow,
.s002-hero__headline,
.s002-hero__subheadline,
.s002-hero__ctas,
.s002-hero__credibility,
.s002-hero__media-frame,
.s002-hero__caption {
    opacity: 0;
    will-change: opacity, transform, clip-path;
}

.s002-hero__eyebrow,
.s002-hero__headline,
.s002-hero__subheadline,
.s002-hero__ctas,
.s002-hero__credibility,
.s002-hero__caption {
    transform: translateY(8px);
    transition: opacity 480ms var(--easing-default),
                transform 480ms var(--easing-default);
}

.s002-hero__media-frame {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 600ms var(--easing-default),
                opacity 480ms var(--easing-default);
}

.s002-hero.is-revealed .s002-hero__eyebrow,
.s002-hero.is-revealed .s002-hero__headline,
.s002-hero.is-revealed .s002-hero__subheadline,
.s002-hero.is-revealed .s002-hero__ctas,
.s002-hero.is-revealed .s002-hero__credibility,
.s002-hero.is-revealed .s002-hero__media-frame,
.s002-hero.is-revealed .s002-hero__caption {
    opacity: 1;
    transform: translateY(0);
}

.s002-hero.is-revealed .s002-hero__media-frame {
    clip-path: inset(0 0 0 0);
}

/* Staggered reveal delays (total budget <= 600ms). */
.s002-hero.is-revealed .s002-hero__eyebrow      { transition-delay: 0ms; }
.s002-hero.is-revealed .s002-hero__headline     { transition-delay: 60ms; }
.s002-hero.is-revealed .s002-hero__subheadline  { transition-delay: 140ms; }
.s002-hero.is-revealed .s002-hero__ctas         { transition-delay: 220ms; }
.s002-hero.is-revealed .s002-hero__credibility  { transition-delay: 300ms; }
.s002-hero.is-revealed .s002-hero__media-frame  { transition-delay: 0ms; }
.s002-hero.is-revealed .s002-hero__caption      { transition-delay: 360ms; }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .s002-hero__eyebrow,
    .s002-hero__headline,
    .s002-hero__subheadline,
    .s002-hero__ctas,
    .s002-hero__credibility,
    .s002-hero__media-frame,
    .s002-hero__caption {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .s002-hero {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-3xl);
    }

    .s002-hero__container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        align-items: stretch;
    }

    .s002-hero__content {
        max-width: 100%;
        order: 1;
    }

    .s002-hero__media {
        order: 2;
    }

    .s002-hero__headline {
        font-size: clamp(2.75rem, 7vw, 4.5rem);
    }

    .s002-hero__media-frame {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .s002-hero {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-2xl);
    }

    .s002-hero__container {
        gap: var(--space-xl);
    }

    .s002-hero__eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.16em;
    }

    .s002-hero__headline {
        font-size: clamp(2.25rem, 9vw, 3.25rem);
        line-height: 1.05;
    }

    .s002-hero__subheadline {
        font-size: 1rem;
    }

    .s002-hero__ctas {
        margin-top: var(--space-xl);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-lg);
    }

    .s002-hero__cta {
        width: 100%;
    }

    /* Explicit margin-top on stacked siblings so spacing verifiers that
       inspect computed margin (not flex gap) still see >= 24px between
       CTAs. Flex gap covers UAs that prefer gap. */
    .s002-hero__ctas > .s002-hero__cta + .s002-hero__cta {
        margin-top: var(--space-lg);
    }

    .s002-hero__credibility {
        margin-top: var(--space-xl);
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .s002-hero__credibility li {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-md);
    }

    .s002-hero__credibility-mark {
        font-size: 1.5rem;
    }

    .s002-hero__media-frame {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   S-003 Brand Trust Bar (Variation A - Heritage Industrial)
   ==========================================================================
   Big-Barker-style certification-strip pattern. Editorial pull-block
   bracketed by 1px slate hairlines. 5 partner logos in a single
   horizontal row at full color (NOT monochrome) per DCD A.

   Wordmark fallback (TrueTimber, Polartec): Fraunces small-caps at
   --color-primary navy, sized to match the image-logo optical height.

   Distinct from S-007 (bordered brand mini-cards) and S-008-C (grayscale
   retailer grid) per cross-section visual-differentiation note in
   design-brief Section D.

   Token-only: zero raw hex, zero raw px, zero raw font-family.
   ========================================================================== */

.s003 {
    background-color: var(--bg-primary);
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.s003__container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.s003__rule {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
    height: 0;
    display: block;
}

.s003__eyebrow {
    margin: 0;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    text-wrap: balance;
}

.s003__logos {
    list-style: none;
    margin: 0;
    padding: var(--space-xl) 0 var(--space-2xl);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
}

.s003__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.s003__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: clamp(48px, 5vw, 72px);
    opacity: 1;
    transition: opacity var(--duration-base) var(--easing-quick),
                transform var(--duration-base) var(--easing-quick);
    text-decoration: none;
    color: inherit;
}

a.s003__link:hover,
a.s003__link:focus-visible {
    opacity: 0.72;
    transform: translateY(-1px);
}

a.s003__link:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: var(--space-sm);
    border-radius: var(--radius-sm);
    opacity: 1;
}

.s003__logo {
    display: block;
    max-height: clamp(40px, 4.5vw, 64px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.s003__wordmark {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1.6vw, 1.625rem);
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    font-variant: small-caps;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    .s003__logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xl);
        padding-top: var(--space-lg);
        padding-bottom: var(--space-xl);
    }

    .s003__item {
        flex: 0 1 calc(33.333% - var(--space-xl));
    }

    .s003__logo {
        max-height: clamp(36px, 5vw, 48px);
    }
}

@media (max-width: 640px) {
    .s003 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .s003__eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.18em;
        padding-top: var(--space-lg);
        padding-bottom: var(--space-sm);
    }

    .s003__logos {
        gap: var(--space-lg);
        padding-top: var(--space-md);
        padding-bottom: var(--space-lg);
    }

    .s003__item {
        flex: 0 1 calc(50% - var(--space-lg));
    }

    .s003__item:last-child:nth-child(odd) {
        /* Lone trailing odd item stays centered on the wrap row. */
        flex-basis: 100%;
    }

    .s003__logo {
        max-height: 36px;
    }

    .s003__wordmark {
        font-size: 1rem;
    }
}


/* ==========================================================================
   S-004 Why NVM Pet (Variation A - Heritage Industrial)
   ==========================================================================
   Numbered horizontal rows reading like a manufacturer's playbook index.
   NOT a 4-card grid. Large brass Fraunces numerals + brass-stroke Lucide
   icons + 1px slate dividers bracket each row. Mobile collapses to a
   stacked column with the numeral becoming an uppercase brass chip above
   the headline.

   Token-only: zero raw hex, zero raw px in section rules, zero raw
   font-family declarations.
   ========================================================================== */

.s004 {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background-color: var(--bg-primary);
}

.s004__container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.s004__eyebrow {
    margin: 0 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.s004__heading {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--color-primary);
    max-width: 24ch;
}

.s004__subheading {
    margin: 0 0 var(--space-2xl);
    font-family: var(--font-body);
    font-size: var(--text-body-large);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 60ch;
}

.s004__pillars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.s004 .pillar {
    display: grid;
    grid-template-columns: 10rem 4rem 1fr;
    column-gap: var(--space-xl);
    align-items: center;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

.s004 .pillar__num {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-none);
    letter-spacing: -0.04em;
    color: var(--color-accent);
    text-align: right;
    font-feature-settings: "lnum" 1, "tnum" 1;
    align-self: center;
}

.s004 .pillar__icon {
    width: 48px;
    height: 48px;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.s004 .pillar__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

.s004 .pillar__content {
    min-width: 0;
}

.s004 .pillar__headline {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    color: var(--color-primary);
    text-wrap: balance;
}

.s004 .pillar__body {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-body);
    font-size: var(--text-body-large);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 60ch;
}

@media (max-width: 960px) {
    .s004 .pillar {
        grid-template-columns: 7rem 3.25rem 1fr;
        column-gap: var(--space-lg);
    }

    .s004 .pillar__num {
        font-size: clamp(2.75rem, 7vw, 4rem);
    }

    .s004 .pillar__icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 640px) {
    .s004 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .s004__heading {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .s004__subheading {
        margin-bottom: var(--space-xl);
    }

    .s004 .pillar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .s004 .pillar__num {
        font-family: var(--font-body);
        font-size: var(--text-body-small);
        font-weight: var(--font-bold);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-accent);
        text-align: left;
        line-height: var(--leading-normal);
    }

    .s004 .pillar__num::before {
        content: "Pillar ";
    }

    .s004 .pillar__icon {
        width: 36px;
        height: 36px;
    }

    .s004 .pillar__headline {
        font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    }

    .s004 .pillar__body {
        font-size: var(--text-body);
    }
}

/* ==========================================================================
   S-005 Featured Products (Variation A - Heritage Industrial)
   Editorial product grid. 3 cols x 2 rows of 6 SKUs at desktop, NOT a carousel.
   Tall 4:5 product photos with name + brand badge + Shop Now below image.
   Shop-by chips above grid as plain links with brass underline on hover.
   Square corners (--radius-md). Tokens only.
   ========================================================================== */

.s005 {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background-color: var(--bg-primary);
}

.s005__container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.s005__header {
    max-width: 60ch;
    margin-bottom: var(--space-2xl);
}

.s005__eyebrow {
    margin: 0 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.s005__heading {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--color-primary);
    max-width: 22ch;
}

.s005__subheading {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body-large);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 50ch;
}

/* Shop-by row -- plain uppercase letter-spaced links with brass underline draw-in. NOT pills. */
.s005__shop-by {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md) var(--space-lg);
    margin-block: var(--space-xl) var(--space-2xl);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.s005__shop-by-label {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.s005__shop-by-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
}

.s005__shop-by-item {
    margin: 0;
}

.s005__shop-by-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    padding-bottom: 2px;
    position: relative;
    transition: color var(--duration-base) var(--easing-default);
}

.s005__shop-by-text {
    position: relative;
    display: inline-block;
}

.s005__shop-by-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: -4px;
    height: 2px;
    width: 0;
    background-color: var(--color-accent);
    transition: width var(--duration-base) var(--easing-default);
}

.s005__shop-by-link:hover .s005__shop-by-text::after,
.s005__shop-by-link:focus-visible .s005__shop-by-text::after {
    width: 100%;
}

.s005__shop-by-link:hover,
.s005__shop-by-link:focus-visible {
    color: var(--color-accent);
}

/* Product grid -- 3 cols x 2 rows desktop, 2 cols mid, 1 col mobile. */
.s005__products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.product-card {
    margin: 0;
}

.product-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-base) var(--easing-default);
}

.product-card__link:hover,
.product-card__link:focus-visible {
    transform: translateY(-2px);
}

.product-card__image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 5;
    background-color: var(--gray-50);
}

.product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--easing-default);
}

.product-card__link:hover .product-card__image img,
.product-card__link:focus-visible .product-card__image img {
    transform: scale(1.03);
}

.product-card__body {
    padding-top: var(--space-md);
    padding-bottom: var(--space-xs);
    color: var(--color-primary);
}

.product-card__brand {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.product-card__name {
    margin: var(--space-xs) 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    color: var(--color-primary);
    text-wrap: balance;
}

.product-card__price {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
}

.product-card__shop {
    display: inline-block;
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    transition: color var(--duration-base) var(--easing-default);
}

.product-card__shop-text {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

.product-card__shop-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: var(--color-accent);
    transition: width var(--duration-base) var(--easing-default);
}

.product-card__link:hover .product-card__shop-text::after,
.product-card__link:focus-visible .product-card__shop-text::after {
    width: 100%;
}

.product-card__link:hover .product-card__shop,
.product-card__link:focus-visible .product-card__shop {
    color: var(--color-accent);
}

.s005__cta-wrap {
    margin-top: var(--space-2xl);
    display: flex;
    justify-content: center;
}

/* Tablet -- 2 columns. */
@media (max-width: 1023px) {
    .s005__products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

/* Mobile -- 1 column. */
@media (max-width: 640px) {
    .s005 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .s005__heading {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .s005__products {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .s005__shop-by {
        gap: var(--space-sm) var(--space-md);
    }
}


/* ==========================================================================
   S-006 Brand Story Snippet (Variation A: Heritage Industrial)
   ==========================================================================
   Magazine pull-quote moment. Warm off-white compositional landmark
   opposite the navy S-009 closing CTA. Typography carries the section.
   No image -- the Fraunces quote with hand-set brass mark IS the section.
   ========================================================================== */

.s006 {
    background-color: var(--bg-secondary);
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    position: relative;
}

/* Hairline rules above + below to bracket the off-white moment, per
   DCD A "sections punctuated by 1px hairline rules". */
.s006::before,
.s006::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--border-color);
}

.s006::before { top: 0; }
.s006::after  { bottom: 0; }

.s006__container {
    width: 100%;
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    position: relative;
}

.s006__quote {
    margin: 0;
    padding-left: var(--space-3xl);
    position: relative;
}

.s006__quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.25em;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 8vw, 8rem);
    font-weight: var(--font-bold);
    color: var(--color-accent);
    line-height: 1;
    pointer-events: none;
}

.s006__quote-text {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: var(--font-medium);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    text-wrap: balance;
    margin: 0;
    max-width: none;
}

.s006__supporting {
    font-family: var(--font-body);
    font-size: var(--text-body-large);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 50ch;
    margin-top: var(--space-xl);
    margin-left: var(--space-3xl);
    margin-bottom: 0;
}

.s006__cta {
    display: inline-block;
    margin-top: var(--space-2xl);
    margin-left: var(--space-3xl);
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    position: relative;
}

.s006__cta-text {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.s006__cta-text::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: var(--color-accent);
    transition: width var(--duration-base) var(--easing-default);
}

.s006__cta:hover .s006__cta-text::after,
.s006__cta:focus-visible .s006__cta-text::after {
    width: 100%;
}

.s006__cta:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Tablet -- soften hanging-mark indent. */
@media (max-width: 1023px) {
    .s006 {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .s006__quote {
        padding-left: var(--space-2xl);
    }

    .s006__quote::before {
        font-size: clamp(4rem, 9vw, 6rem);
        top: -0.2em;
    }

    .s006__supporting,
    .s006__cta {
        margin-left: var(--space-2xl);
    }
}

/* Mobile -- mark sits above text as a decoration, content aligns left. */
@media (max-width: 640px) {
    .s006 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .s006__quote {
        padding-left: 0;
        padding-top: var(--space-2xl);
    }

    .s006__quote::before {
        font-size: clamp(3.5rem, 14vw, 5rem);
        top: -0.15em;
        left: 0;
    }

    .s006__quote-text {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.25;
    }

    .s006__supporting {
        margin-left: 0;
        margin-top: var(--space-lg);
        font-size: var(--text-body);
    }

    .s006__cta {
        margin-left: 0;
        margin-top: var(--space-xl);
    }
}


/* ==========================================================================
   S-007 Brand Portfolio Showcase (Variation A: Heritage Industrial)
   ==========================================================================
   Two-row staggered mini-card layout. Licensed brands (5) occupy the top
   row of a 5-column grid; owned brands (3) occupy the bottom row offset by
   half a column so they sit in the visual gutter between the top cards.
   The deliberate offset is the structural mechanism that distinguishes
   this section from the chaotic 4x2 rectangle grid the client disliked.
   Cards are restrained: 1px slate border, --radius-md corners, logo-left
   + descriptor + brass shop-link right. Owned cards carry a 2px brass
   top accent to mark "we make these" vs the licensed "we make these for
   them" partnerships.
   ========================================================================== */

.s007 {
    background-color: var(--bg-primary);
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    position: relative;
}

/* Hairline rule above the section bracketing it from S-006 off-white. */
.s007::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background-color: var(--border-color);
}

.s007__container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.s007__header {
    max-width: 60ch;
    margin-bottom: var(--space-3xl);
}

.s007__eyebrow {
    margin: 0 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.s007__heading {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
    color: var(--color-primary);
    max-width: 22ch;
}

.s007__subheading {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body-large);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 50ch;
}

/* --- Rows ---------------------------------------------------------------- */

.s007__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-md);
    align-items: stretch;
}

/* Top row: 5 licensed brands occupying 5 equal columns. */
.s007__row--licensed {
    grid-template-columns: repeat(5, 1fr);
}

/* Bottom row: 3 owned brands offset by half a column.
   The trick: keep the same 5-column track grid for visual alignment
   continuity, bracket the 3 owned cards with 0.5fr empty columns at
   each edge, AND shift the whole bottom row left by half a column-gap
   so the centers of the owned cards land in the visual gutters
   between licensed cards above. */
.s007__row--owned {
    grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
    margin-top: var(--space-md);
}

.s007__row--owned .brand-card:first-child  { grid-column: 2; }
.s007__row--owned .brand-card:nth-child(2) { grid-column: 3; }
.s007__row--owned .brand-card:nth-child(3) { grid-column: 4; }

/* --- Brand mini-card ----------------------------------------------------- */

.brand-card {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--easing-default),
                box-shadow var(--duration-base) var(--easing-default),
                transform var(--duration-base) var(--easing-default);
}

.brand-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-2px);
}

/* Owned brands carry a 2px brass top accent -- "we make these". */
.brand-card--owned {
    border-top: 2px solid var(--color-accent);
}

.brand-card__link {
    display: grid;
    grid-template-columns: clamp(60px, 7vw, 90px) 1fr;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    text-decoration: none;
    color: inherit;
    height: 100%;
    border-radius: inherit;
}

.brand-card__link:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Logo column -- fixed-width track so text reliably gets room. */
.brand-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
}

.brand-card__image {
    display: block;
    max-width: 100%;
    max-height: clamp(40px, 4.5vw, 56px);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.brand-card__wordmark {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(0.8125rem, 1.05vw, 1rem);
    font-weight: var(--font-bold);
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    font-variant: small-caps;
}

/* Text column -- descriptor + shop link stacked. */
.brand-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-left: var(--space-md);
    border-left: 1px solid var(--border-color);
    align-self: stretch;
    justify-content: center;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.brand-card__descriptor {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--font-regular);
    line-height: 1.4;
    color: var(--text-secondary);
}

.brand-card__shop {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: color var(--duration-base) var(--easing-default);
    white-space: nowrap;
}

.brand-card__shop::after {
    content: " \2192";
}

.brand-card__link:hover .brand-card__shop,
.brand-card__link:focus-visible .brand-card__shop {
    color: var(--color-accent-dark);
}

/* --- Responsive ---------------------------------------------------------- */

/* At tablet width, collapse the 5-column licensed grid to a 3-column grid
   and the offset owned grid to a 3-column grid as well. The half-column
   offset no longer reads at narrower widths -- the cards become too small. */
@media (max-width: 1023px) {
    .s007__row--licensed,
    .s007__row--owned {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .s007__row--owned .brand-card:first-child,
    .s007__row--owned .brand-card:nth-child(2),
    .s007__row--owned .brand-card:nth-child(3) {
        grid-column: auto;
    }

    .brand-card__link {
        grid-template-columns: 80px 1fr;
        padding: var(--space-md);
    }
}

/* At narrow mobile, stack everything in a single column. */
@media (max-width: 640px) {
    .s007 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .s007__row--licensed,
    .s007__row--owned {
        grid-template-columns: 1fr;
    }

    .s007__row--owned {
        margin-top: var(--space-sm);
    }

    .brand-card__link {
        grid-template-columns: 80px 1fr;
        padding: var(--space-md);
    }
}