/* =============================================================================
   IMTREX WHOLESALE — Page-local component styles
   Used by /wholesale/index.html (and any future wholesale surface that
   adopts the wholesale-* class system). Pairs with design-system.css tokens.

   Sections:
     1. Hero split (wholesale-hero)
     2. Metric strip (wholesale-metrics)
     3. Trust strip (wholesale-trust)
     4. Brand divider grid (wholesale-brands)
     5. Partnership grid (wholesale-partnership)
     6. How-it-works timeline (wholesale-steps)
     7. Closing CTA card (wholesale-close)
     8. Expanded footer (site-footer--expanded)
   ============================================================================= */

/* 1. Hero — 60/40 asymmetric split with warm photography */
.wholesale-hero{background:var(--background-cream);padding-block:clamp(5rem,10vw,9rem);padding-inline:var(--container-pad)}
.wholesale-hero__inner{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:960px){.wholesale-hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.wholesale-hero__eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--brand-terracotta);margin-block-end:var(--space-5);display:inline-block}
.wholesale-hero__headline{font-family:var(--font-serif);font-size:clamp(2.75rem,1.6rem + 4.8vw,5.25rem);font-weight:300;line-height:1.02;letter-spacing:var(--tracking-display-tighter);max-width:14ch;margin-block-end:var(--space-5);color:var(--text-primary);text-wrap:balance}
.wholesale-hero__headline em{font-weight:600;font-style:italic;color:var(--brand-olive)}
.wholesale-hero__sub{font-family:var(--font-sans);font-size:var(--type-lg);color:var(--text-secondary);line-height:1.55;max-width:56ch;margin-block-end:var(--space-7)}
.wholesale-hero__ctas{display:flex;gap:var(--space-4);flex-wrap:wrap}
.wholesale-hero__visual{position:relative;aspect-ratio:4/5;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-warm-lg);margin:0}
.wholesale-hero__visual img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.wholesale-hero__visual:hover img{transform:scale(1.01)}
.wholesale-hero__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(30,26,21,.42) 100%);pointer-events:none}
.wholesale-hero__visual-meta{position:absolute;inset-block-end:var(--space-5);inset-inline-start:var(--space-5);color:#fff;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);z-index:2;max-width:calc(100% - 3rem);margin:0}

/* 2. Metric strip — Fraunces 300 numbers with Geist Mono labels */
.wholesale-metrics{background:var(--background-white);border-block-start:1px solid var(--divider);border-block-end:1px solid var(--divider);padding-block:clamp(2.5rem,4vw,3.5rem);padding-inline:var(--container-pad)}
.wholesale-metrics__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-7)}
@media (min-width:820px){.wholesale-metrics__grid{grid-template-columns:repeat(4,1fr)}}
.wholesale-metric__num{font-family:var(--font-serif);font-size:clamp(2.25rem,1.5rem + 2.5vw,3.75rem);font-weight:300;letter-spacing:var(--tracking-display-tighter);line-height:.95;color:var(--text-primary);font-variant-numeric:tabular-nums;display:block}
.wholesale-metric__num sup{font-size:.5em;vertical-align:super;font-weight:400;color:var(--brand-terracotta);margin-inline-start:.1em;font-variant-numeric:normal}
.wholesale-metric__label{font-family:var(--font-mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--text-muted);margin-block-start:var(--space-3);display:block;line-height:1.3}

/* 3. Trust meta strip — Stripe-style dense credential bar */
.wholesale-trust{background:var(--background-cream);padding-block:var(--space-6);padding-inline:var(--container-pad);border-block-end:1px solid var(--divider)}
.wholesale-trust__inner{max-width:var(--container-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center}
.wholesale-trust__item{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--text-muted);display:inline-flex;align-items:center;gap:var(--space-3)}
.wholesale-trust__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-terracotta);flex-shrink:0}
.wholesale-trust__item:first-child::before{display:none}

/* 4. Brand divider grid — 4-col editorial family on cream */
.wholesale-brands{background:var(--background-cream);padding-block:clamp(4rem,8vw,7rem);padding-inline:var(--container-pad)}
.wholesale-brands__inner{max-width:var(--container-max);margin:0 auto}
.wholesale-brands__headline{font-family:var(--font-serif);font-size:var(--type-h2);font-weight:700;line-height:1.15;max-width:22ch;margin-block-end:var(--space-7);color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.wholesale-brands__grid{display:grid;grid-template-columns:1fr;border-block-start:1px solid var(--divider)}
@media (min-width:600px){.wholesale-brands__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.wholesale-brands__grid{grid-template-columns:repeat(4,1fr)}}
.wholesale-brand{padding:var(--space-6) 0;border-block-end:1px solid var(--divider);transition:background-color var(--duration-fast) var(--ease-out)}
@media (min-width:600px){
  .wholesale-brand{padding:var(--space-6) var(--space-5);border-inline-start:1px solid var(--divider)}
  .wholesale-brand:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
}
@media (min-width:960px){
  .wholesale-brand{border-inline-start:1px solid var(--divider);padding-inline-start:var(--space-5)}
  .wholesale-brand:nth-child(2n+1){border-inline-start:1px solid var(--divider);padding-inline-start:var(--space-5)}
  .wholesale-brand:nth-child(4n+1){border-inline-start:0;padding-inline-start:0}
}
.wholesale-brand:hover{background-color:rgba(139,58,42,0.03)}
.wholesale-brand__name{font-family:var(--font-serif);font-size:clamp(1.5rem,1rem + 1vw,1.875rem);font-weight:600;letter-spacing:-0.015em;line-height:1.1;color:var(--text-primary);margin-block-end:var(--space-2);display:block}
.wholesale-brand__since{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-terracotta);margin-block-end:var(--space-4);display:block}
.wholesale-brand__cat{font-size:.875rem;color:var(--text-secondary);line-height:1.55;margin-block-end:var(--space-3);max-width:30ch}
.wholesale-brand__meta{font-family:var(--font-mono);font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--text-muted);display:block}

/* 5. Partnership section — 3x2 fixed divider grid (kills auto-fit orphans) */
.wholesale-partnership{background:var(--background-white);padding-block:clamp(4rem,8vw,7rem);padding-inline:var(--container-pad)}
.wholesale-partnership__inner{max-width:var(--container-max);margin:0 auto}
.wholesale-partnership__headline{font-family:var(--font-serif);font-size:var(--type-h2);font-weight:700;line-height:1.15;max-width:20ch;margin-block-end:var(--space-7);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.wholesale-partnership__grid{display:grid;grid-template-columns:1fr;border-block-start:1px solid var(--divider)}
@media (min-width:600px){.wholesale-partnership__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.wholesale-partnership__grid{grid-template-columns:repeat(3,1fr)}}
.wholesale-partnership__item{padding:var(--space-7) 0 var(--space-6) 0;border-block-end:1px solid var(--divider);transition:background-color var(--duration-fast) var(--ease-out)}
@media (min-width:600px){
  .wholesale-partnership__item{padding:var(--space-7) var(--space-6) var(--space-6) var(--space-6);border-inline-start:1px solid var(--divider)}
  .wholesale-partnership__item:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
}
@media (min-width:960px){
  .wholesale-partnership__item{border-inline-start:1px solid var(--divider);padding-inline-start:var(--space-6)}
  .wholesale-partnership__item:nth-child(2n+1){border-inline-start:1px solid var(--divider);padding-inline-start:var(--space-6)}
  .wholesale-partnership__item:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
}
.wholesale-partnership__item:hover{background-color:rgba(139,58,42,0.03)}
.wholesale-partnership__num{font-family:var(--font-serif);font-size:2.75rem;font-weight:300;letter-spacing:var(--tracking-display-tight);color:var(--brand-terracotta);line-height:1;margin-block-end:var(--space-4);display:block;font-variant-numeric:tabular-nums}
.wholesale-partnership__item-title{font-family:var(--font-serif);font-size:var(--type-xl);font-weight:600;line-height:1.2;margin-block-end:var(--space-3);color:var(--text-primary)}
.wholesale-partnership__item-body{font-size:var(--type-base);color:var(--text-secondary);line-height:1.65;max-width:40ch}

/* 6. How it works — dark olive section with gold step connector */
.wholesale-steps{background:var(--brand-olive);padding-block:clamp(4rem,8vw,7rem);padding-inline:var(--container-pad)}
.wholesale-steps__inner{max-width:var(--container-max);margin:0 auto}
.wholesale-steps__eyebrow{color:var(--brand-gold)!important}
.wholesale-steps__headline{font-family:var(--font-serif);font-size:var(--type-h2);font-weight:700;line-height:1.15;max-width:22ch;margin-block-end:var(--space-8);color:var(--olive-text-readable);letter-spacing:var(--tracking-tight)}
.wholesale-steps__grid{display:grid;grid-template-columns:1fr;gap:var(--space-7)}
@media (min-width:600px){.wholesale-steps__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-8) var(--space-6)}}
@media (min-width:960px){.wholesale-steps__grid{grid-template-columns:repeat(4,1fr);gap:var(--space-6)}}
.wholesale-step{position:relative}
.wholesale-step__num{font-family:var(--font-serif);font-size:4rem;font-weight:300;letter-spacing:var(--tracking-display-tighter);color:var(--brand-gold);line-height:1;margin-block-end:var(--space-4);display:block;position:relative;font-variant-numeric:tabular-nums}
@media (min-width:960px){
  .wholesale-step__num::after{content:"";position:absolute;inset-block-start:calc(50% - 0.5px);inset-inline-start:calc(100% + var(--space-5));width:calc(100% - 3.5rem);height:1px;background:linear-gradient(90deg,rgba(212,168,83,.55) 0%,rgba(212,168,83,.15) 100%);pointer-events:none}
  .wholesale-step:last-child .wholesale-step__num::after{display:none}
}
.wholesale-step__title{font-family:var(--font-serif);font-size:var(--type-xl);font-weight:600;color:var(--olive-text-readable);margin-block-end:var(--space-3);line-height:1.2}
.wholesale-step__body{font-size:var(--type-base);color:var(--olive-text-readable);opacity:.78;line-height:1.65}
.wholesale-steps__cta{margin-block-start:var(--space-8)}

/* 7. Closing CTA — centered olive card with radial gold glow */
.wholesale-close{background:var(--background-cream);padding-block:clamp(4rem,8vw,7rem);padding-inline:var(--container-pad)}
.wholesale-close__card{max-width:960px;margin:0 auto;background:var(--brand-olive);border-radius:var(--radius-2xl);padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem);text-align:center;box-shadow:var(--shadow-warm-lg);position:relative;overflow:hidden}
.wholesale-close__card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 20%,rgba(212,168,83,.18),transparent 55%);pointer-events:none}
.wholesale-close__inner{position:relative;z-index:2}
.wholesale-close__eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--brand-gold);margin-block-end:var(--space-4);display:inline-block}
.wholesale-close__headline{font-family:var(--font-serif);font-size:clamp(2rem,1.4rem + 2.5vw,3rem);font-weight:400;line-height:1.1;color:var(--olive-text-readable);letter-spacing:var(--tracking-display-tight);max-width:22ch;margin-inline:auto;margin-block-end:var(--space-5);text-wrap:balance}
.wholesale-close__sub{font-size:var(--type-lg);color:var(--olive-text-readable);opacity:.85;max-width:52ch;margin-inline:auto;margin-block-end:var(--space-7);line-height:1.55}
.wholesale-close__ctas{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}

/* 8. Expanded footer — Airbnb tall-footer pattern adapted to Imtrex */
.site-footer--expanded{background:#1E1A15;color:#F8F3ED;padding-block:clamp(4rem,7vw,5rem) var(--space-7);padding-inline:var(--container-pad)}
.site-footer__inner{max-width:var(--container-max);margin:0 auto}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);padding-block-end:var(--space-7);border-block-end:1px solid rgba(248,243,237,0.12)}
@media (min-width:600px){.site-footer__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-7)}}
@media (min-width:960px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}}
.site-footer__brand{display:block}
.site-footer__logo{font-family:var(--font-serif);font-size:1.75rem;font-weight:900;letter-spacing:-0.02em;color:#F8F3ED;text-decoration:none;display:inline-block;margin-block-end:var(--space-4)}
.site-footer__tagline{font-size:.875rem;line-height:1.6;color:rgba(248,243,237,.6);max-width:36ch;margin-block-end:var(--space-5)}
.site-footer__address{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:rgba(248,243,237,.5);line-height:1.7;font-style:normal}
.site-footer__col-heading{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);color:var(--brand-gold);margin-block-end:var(--space-5);display:block}
.site-footer__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__link{color:rgba(248,243,237,.72);text-decoration:none;font-size:.875rem;transition:color var(--duration-fast)}
.site-footer__link:hover{color:#F8F3ED;text-decoration:underline;text-underline-offset:4px}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);justify-content:space-between;padding-block-start:var(--space-6);font-family:var(--font-mono);font-size:.6875rem;color:rgba(248,243,237,.45);text-transform:uppercase;letter-spacing:var(--tracking-meta-wide);line-height:1.6}
.site-footer__bottom p{max-width:none;margin:0}