/* ==========================================================================
   SUPERDOLL TRAILER MANUFACTURER — DESIGN SYSTEM
   Display: Bebas Neue (stamped/signage feel — echoes truck livery + decals)
   Body: Inter
   Mono/Utility: IBM Plex Mono (spec labels, stats, catalog numbers)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* ---- color: sampled directly from the Superdoll wordmark + house style ---- */
  --ink:        #0E0E0F;   /* near-black, primary dark / text */
  --ink-soft:   #1A1A1C;   /* lifted black, cards/panels on dark */
  --ink-line:   rgba(255,255,255,0.14);
  --paper:      #F7F4EE;   /* warm off-white, not stark white */
  --paper-dim:  #EFE9DD;   /* deeper warm tone, alternating sections */
  --paper-line: rgba(14,14,15,0.12);
  --amber:      #FEAF17;   /* exact brand yellow */
  --amber-deep: #C97D02;   /* hover / depth */
  --amber-pale: #FFE3A8;
  --steel:      #4A4B4D;   /* body copy on light bg */
  --steel-soft: #84858A;   /* muted / captions */
  --white:      #FFFFFF;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 96px;
  --space-2xl: 144px;

  --container: 1280px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ---- type ---- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:0.01em; line-height:1.02; text-transform:uppercase; }
h1{ font-size:clamp(2.6rem, 6vw, 5.4rem); }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); }
h3{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); }
h4{ font-size:1.15rem; letter-spacing:0.04em; }
p{ color:var(--steel); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--steel); max-width:60ch; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber-deep);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--space-xs);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--amber-deep); display:inline-block; }
.on-dark .eyebrow{ color:var(--amber); }
.on-dark .eyebrow::before{ background:var(--amber); }

.amber-ink{ color:var(--amber); }
.amber-text{ color:var(--amber-deep); }

/* ---- layout helpers ---- */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-md); }
.section{ padding:var(--space-xl) 0; position:relative; }
.section-tight{ padding:var(--space-lg) 0; }
.on-dark{ background:var(--ink); color:var(--white); }
.on-dark p{ color:rgba(255,255,255,0.72); }
.on-dim{ background:var(--paper-dim); }
.grid{ display:grid; gap:var(--space-md); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .g-3,.g-4,.g-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .g-2,.g-3,.g-4,.g-5{ grid-template-columns:1fr; } }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-md); margin-bottom:var(--space-lg); flex-wrap:wrap; }
.section-head h2{ margin-bottom:0; }

/* ---- hazard stripe — signature motif, mirrors the safety striping cast on
   Superdoll's own trailer bumpers; used as a structural section divider ---- */
.stripe-rule{
  height:10px;
  background:repeating-linear-gradient(135deg, var(--ink) 0 18px, var(--amber) 18px 36px);
}
.stripe-rule.thin{ height:6px; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-weight:600; font-size:0.82rem;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:16px 28px;
  border:2px solid transparent;
  border-radius:var(--radius);
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:var(--ink); color:var(--amber); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:var(--amber); color:var(--ink); transform:translateY(-2px); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.on-dark .btn-outline{ border-color:rgba(255,255,255,0.5); color:var(--white); }
.on-dark .btn-outline:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-arrow{ transition:transform .25s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }
.btn-row{ display:flex; gap:var(--space-sm); flex-wrap:wrap; align-items:center; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--ink);
  border-bottom:1px solid var(--ink-line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--space-md); max-width:var(--container); margin:0 auto; gap:var(--space-md); }
.brand-badge{ display:flex; align-items:center; }
.brand-badge img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--space-md); font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; font-weight:600; }
.nav-links a{ color:rgba(255,255,255,0.78); position:relative; padding:6px 0; transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color:var(--amber); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber); }
.nav-right{ display:flex; align-items:center; gap:var(--space-md); }
.nav-cta{ font-size:0.76rem; padding:12px 22px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--white); display:block; transition:transform .25s, opacity .25s; }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:940px){
  .nav-links{ position:fixed; inset:62px 0 0 0; background:var(--ink); flex-direction:column; align-items:flex-start; padding:var(--space-md); gap:var(--space-sm); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); overflow-y:auto; }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; color:var(--white);
  min-height:78vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,7,8,0.88) 0%, rgba(7,7,8,0.52) 38%, rgba(7,7,8,0.18) 64%, rgba(7,7,8,0.1) 100%),
    linear-gradient(0deg, rgba(7,7,8,0.85) 0%, rgba(7,7,8,0.45) 46%, rgba(7,7,8,0.3) 100%);
}
.hero-inner h1, .hero-inner .hero-tag, .hero-inner .lede{ text-shadow:0 2px 28px rgba(0,0,0,0.35); }
.hero-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; padding:var(--space-xl) var(--space-md) var(--space-lg); }
.hero-tag{ font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:var(--space-sm); animation:fade-up .7s var(--ease) both; }
.hero-tag::before{ content:""; width:8px; height:8px; background:var(--amber); display:inline-block; }
.hero h1{ max-width:16ch; margin-bottom:var(--space-sm); animation:fade-up .7s var(--ease) .1s both; }
.hero .lede{ color:rgba(255,255,255,0.82); margin-bottom:var(--space-md); animation:fade-up .7s var(--ease) .2s both; }
.hero .btn-row{ animation:fade-up .7s var(--ease) .3s both; }
.hero-stats{ display:flex; gap:var(--space-xl); margin-top:var(--space-lg); flex-wrap:wrap; animation:fade-up .7s var(--ease) .4s both; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.hero-stat .num{ font-family:var(--font-display); font-size:2.4rem; color:var(--amber); line-height:1; }
.hero-stat .label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.68); margin-top:6px; }

.hero-sm{ min-height:46vh; }
.hero-sm .hero-inner{ padding-top:var(--space-lg); padding-bottom:var(--space-lg); }
.hero-sm::before{
  background:
    linear-gradient(100deg, rgba(6,6,7,0.92) 0%, rgba(6,6,7,0.66) 40%, rgba(6,6,7,0.3) 68%, rgba(6,6,7,0.18) 100%),
    linear-gradient(0deg, rgba(6,6,7,0.7) 0%, rgba(6,6,7,0.55) 100%);
}

/* text-only page header (no photo) — used on directory-style interior pages */
.page-header{ background:var(--ink); color:var(--white); padding:var(--space-xl) 0 var(--space-lg); }
.page-header h1{ color:var(--white); max-width:18ch; margin-bottom:var(--space-sm); }
.page-header .lede{ color:rgba(255,255,255,0.7); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:var(--white);
  border:1px solid var(--paper-line);
  padding:var(--space-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,14,15,0.1); border-color:transparent; }

/* offering card with index + icon */
.offer-card{ display:flex; flex-direction:column; gap:var(--space-sm); }
.offer-card .idx{ font-family:var(--font-mono); font-size:0.75rem; color:var(--amber-deep); letter-spacing:0.1em; }
.offer-card .icon{ width:46px; height:46px; color:var(--ink); }
.offer-card h3{ text-transform:none; font-size:1.3rem; letter-spacing:0; font-family:var(--font-body); font-weight:700; }
.offer-card p{ font-size:0.94rem; }
.offer-card .go{ margin-top:auto; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); padding-top:var(--space-xs); }
.offer-card .go svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.offer-card:hover .go svg{ transform:translateX(4px); }

/* value card */
.value-card{ text-align:left; padding-top:var(--space-md); border-top:2px solid var(--ink); }
.value-card .icon{ width:34px; height:34px; margin-bottom:var(--space-sm); color:var(--amber-deep); }
.value-card h4{ text-transform:none; font-family:var(--font-body); font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.value-card p{ font-size:0.9rem; }

/* stat block */
.stat{ border-left:2px solid var(--amber); padding-left:var(--space-sm); }
.stat .num{ font-family:var(--font-display); font-size:3rem; line-height:1; }
.stat .label{ font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-soft); margin-top:8px; }
.on-dark .stat .label{ color:rgba(255,255,255,0.6); }

/* trailer / product spec card */
.spec-card{ background:var(--ink-soft); color:var(--white); padding:var(--space-md); display:flex; flex-direction:column; gap:var(--space-sm); height:100%; border-top:3px solid var(--amber); }
.spec-card .idx{ font-family:var(--font-mono); color:var(--amber); font-size:0.8rem; letter-spacing:0.1em; }
.spec-card h3{ text-transform:none; font-family:var(--font-body); font-weight:700; font-size:1.25rem; }
.spec-card p{ color:rgba(255,255,255,0.68); font-size:0.92rem; }
.spec-card .feat-list{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:var(--space-sm); border-top:1px solid var(--ink-line); }
.spec-card .feat-list li{ font-size:0.84rem; color:rgba(255,255,255,0.78); display:flex; gap:8px; align-items:flex-start; }
.spec-card .feat-list li svg{ width:14px; height:14px; flex-shrink:0; margin-top:3px; color:var(--amber); }

/* location card */
.loc-card{ border:1px solid var(--paper-line); padding:var(--space-sm) var(--space-md); background:var(--white); }
.loc-card .tag{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:8px; }
.loc-card h4{ text-transform:none; font-family:var(--font-body); font-weight:700; font-size:1.05rem; margin-bottom:10px; }
.loc-card .line{ font-size:0.86rem; color:var(--steel); display:flex; gap:8px; margin-bottom:6px; }
.loc-card .line svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--steel-soft); }

/* service item */
.svc-item{ border:1px solid var(--paper-line); background:var(--white); padding:var(--space-sm); text-align:left; display:flex; flex-direction:column; gap:10px; position:relative; }
.svc-item.popular{ border-color:var(--amber); }
.svc-item .pop-tag{ position:absolute; top:-11px; left:var(--space-sm); background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.07em; padding:3px 8px; text-transform:uppercase; font-weight:700; }
.svc-item .icon{ width:30px; height:30px; color:var(--amber-deep); }
.svc-item h4{ text-transform:none; font-family:var(--font-body); font-weight:600; font-size:0.95rem; color:var(--ink); }
.svc-item p{ color:var(--steel); }

/* logo / brand wordmark strip */
.brand-strip{ display:flex; flex-wrap:wrap; gap:var(--space-md) var(--space-xl); align-items:center; justify-content:space-between; }
.brand-strip span{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:0.03em; color:rgba(255,255,255,0.45); white-space:nowrap; transition:color .25s; }
.brand-strip span:hover{ color:var(--white); }
.on-light .brand-strip span{ color:var(--steel-soft); }
.on-light .brand-strip span:hover{ color:var(--ink); }

/* quote / pull */
.pull-quote{ border-left:3px solid var(--amber); padding-left:var(--space-md); font-size:clamp(1.1rem,1.8vw,1.4rem); font-style:italic; color:var(--ink); max-width:62ch; }
.pull-quote cite{ display:block; margin-top:var(--space-sm); font-style:normal; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; color:var(--steel-soft); }

/* badge — stamped plaque, echoes the bordered rectangular wordmark on the
   Superdoll logo itself, used for the Superbrands recognition */
.badge-plate{ flex-shrink:0; width:148px; border:2px solid var(--amber-deep); padding:14px 10px; text-align:center; font-family:var(--font-mono); }
.badge-plate .v{ font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--steel-soft); }
.badge-plate strong{ display:block; font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.03em; color:var(--amber-deep); line-height:1.1; margin:4px 0; }
.badge-plate .y{ font-size:0.62rem; letter-spacing:0.06em; color:var(--steel-soft); }

/* ==========================================================================
   IMAGE TREATMENTS
   ========================================================================== */
.media-frame{ position:relative; overflow:hidden; }
.media-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.media-frame:hover img{ transform:scale(1.04); }
.media-frame::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--amber) 14px 28px); }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{ background:var(--amber); padding:var(--space-lg) 0; }
.cta-banner-inner{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); flex-wrap:wrap; }
.cta-banner h2{ color:var(--ink); margin-bottom:6px; }
.cta-banner p{ color:rgba(14,14,15,0.72); font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.02em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.7); }
.footer-top{ padding:var(--space-xl) 0 var(--space-lg); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--space-lg); }
.footer-grid h4{ color:var(--white); text-transform:none; font-family:var(--font-body); font-weight:700; font-size:0.95rem; letter-spacing:0.02em; margin-bottom:var(--space-sm); }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:0.9rem; color:rgba(255,255,255,0.62); transition:color .2s; }
.footer-grid a:hover{ color:var(--amber); }
.footer-brand img{ height:28px; margin-bottom:var(--space-sm); }
.footer-brand p{ font-size:0.88rem; color:rgba(255,255,255,0.55); max-width:34ch; margin-bottom:var(--space-md); }
.footer-contact-line{ display:flex; gap:10px; font-size:0.88rem; margin-bottom:10px; color:rgba(255,255,255,0.7); }
.footer-contact-line svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:var(--amber); }
.social-row{ display:flex; gap:10px; margin-top:var(--space-md); }
.social-row a{ width:36px; height:36px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
.social-row a:hover{ background:var(--amber); border-color:var(--amber); }
.social-row svg{ width:16px; height:16px; color:var(--white); }
.social-row a:hover svg{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--ink-line); padding:var(--space-sm) 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.03em; color:rgba(255,255,255,0.45); }

@media (max-width:880px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm) var(--space-md); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-soft); }
.field input, .field select, .field textarea{
  border:1px solid var(--paper-line); background:var(--white); padding:14px 16px; font-size:0.95rem; color:var(--ink); border-radius:var(--radius);
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--amber-deep); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-sm{ gap:var(--space-sm); }
.center-text{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top:var(--space-lg); }
.mb-md{ margin-bottom:var(--space-md); }
.divider{ height:1px; background:var(--paper-line); width:100%; }
.on-dark .divider{ background:var(--ink-line); }

/* .reveal is intentionally not hidden by default — content should never
   depend on scroll-triggered JS to become visible. Hover micro-interactions
   elsewhere (cards, media-frame, buttons) provide motion instead. */

/* numbered list (genuinely sequential content only) */
.num-list{ counter-reset:item; }
.num-list li{ counter-increment:item; }

/* back to top */
.to-top{ position:fixed; right:24px; bottom:24px; width:46px; height:46px; background:var(--ink); color:var(--amber); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; z-index:150; border:1px solid var(--ink-line); }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top svg{ width:18px; height:18px; }