/* ==========================================================================
   DISCOUNT EMBROIDERY v2 — LOUD CRAFT SYSTEM
   Production stylesheet (single file)
   ========================================================================== */

/* --- DESIGN TOKENS ------------------------------------------------------- */
:root {
  /* Palette */
  --ink:        #0D0D0D;
  --ink-soft:   #1A1A1A;
  --paper:      #F4EFE5;
  --paper-2:    #ECE6D9;
  --white:      #FFFFFF;
  --pink:       #FF2D87;
  --acid:       #D4FF3D;
  --blue:       #1E4FFF;
  --orange:     #FF5B1F;
  --muted:      #6B6257;
  --line:       #1D1D1D;

  /* Typography */
  --f-display:  'Anton', 'Arial Narrow', sans-serif;
  --f-accent:   'Bungee', 'Arial Black', sans-serif;
  --f-body:     'Archivo', system-ui, -apple-system, sans-serif;
  --f-mono:     'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --container:  1200px;
  --radius:     0;

  /* Shadows */
  --s-hard:     6px 6px 0 var(--ink);
  --s-hard-sm:  4px 4px 0 var(--ink);
  --s-hard-lg:  10px 10px 0 var(--ink);
  --s-pink:     6px 6px 0 var(--pink);
  --s-acid:     6px 6px 0 var(--acid);

  /* Spacing scale */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
}

/* --- RESET --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--acid); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }

/* --- TYPOGRAPHY ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(52px, 10vw, 128px); letter-spacing: -.02em; }
h2 { font-size: clamp(36px, 5.5vw, 72px); margin-bottom: var(--s-5); }
h3 { font-size: clamp(24px, 3vw, 36px); }
h4 { font-size: 22px; }
p  { max-width: 66ch; }
strong { font-weight: 700; }
em { font-style: italic; }

.lead       { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.eyebrow    { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.accent-pink { color: var(--pink); }
.accent-acid { color: var(--acid); }
.accent-blue { color: var(--blue); }

/* --- LAYOUT -------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

section { padding: var(--s-24) 0; position: relative; }
section.sm { padding: var(--s-16) 0; }
section.ink    { background: var(--ink); color: var(--paper); }
section.paper  { background: var(--paper); }
section.paper2 { background: var(--paper-2); }
section.acid   { background: var(--acid); color: var(--ink); }
section.pink   { background: var(--pink); color: var(--ink); }

section.ink p,
section.ink .lead { color: rgba(244, 239, 229, 0.85); }
section.ink p.muted { color: rgba(244, 239, 229, 0.65); }

.section-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--ink);
  color: var(--acid);
  padding: 6px 14px;
  margin-bottom: var(--s-6);
  text-transform: uppercase;
}
.section-num .dot { width: 8px; height: 8px; background: var(--acid); border-radius: 50%; }
section.ink .section-num  { background: var(--acid); color: var(--ink); }
section.ink .section-num .dot { background: var(--ink); }
section.acid .section-num { background: var(--ink); color: var(--acid); }
section.pink .section-num { background: var(--ink); color: var(--paper); }

/* --- MARQUEE ------------------------------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  z-index: 20;
}
.marquee-track {
  display: inline-flex;
  gap: 40px;
  white-space: nowrap;
  animation: scroll 45s linear infinite;
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.marquee-track > span { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; }
.marquee-track .star { color: var(--pink); font-family: var(--f-accent); font-size: 14px; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- HEADER -------------------------------------------------------------- */
.header {
  background: var(--ink);
  color: var(--paper);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--acid);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 96px; width: auto; display: block; }

.nav {
  display: flex;
  gap: var(--s-8);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
}
.nav a {
  color: var(--paper);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a.active { border-color: var(--acid); color: var(--acid); }

.header-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: transparent;
  color: var(--paper);
  border: 2px solid var(--paper);
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

@media (max-width: 980px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ink);
    flex-direction: column;
    padding: var(--s-5) var(--s-6);
    gap: var(--s-4);
    border-bottom: 3px solid var(--pink);
  }
  .nav-toggle { display: grid; }
  .header-cta .btn-phone { display: none; }
}

/* --- BUTTONS ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn-lg { font-size: 22px; padding: 16px 32px; }
.btn-sm { font-size: 13px; padding: 8px 14px; border-width: 2px; font-family: var(--f-body); font-weight: 700; letter-spacing: .05em; }

.btn-acid    { background: var(--acid);  color: var(--ink); box-shadow: var(--s-hard); }
.btn-pink    { background: var(--pink);  color: var(--ink); box-shadow: var(--s-hard); }
.btn-ink     { background: var(--ink);   color: var(--paper); box-shadow: 6px 6px 0 var(--pink); border-color: var(--ink); }
.btn-paper   { background: var(--paper); color: var(--ink); box-shadow: var(--s-hard); }
.btn-outline { background: transparent;  color: var(--paper); border-color: var(--paper); }
.btn-outline-ink { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-acid:hover, .btn-pink:hover, .btn-paper:hover {
  transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink);
}
.btn-ink:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--pink); }
.btn-outline:hover { background: var(--paper); color: var(--ink); }
.btn-outline-ink:hover { background: var(--ink); color: var(--paper); }

.btn-acid:active, .btn-pink:active, .btn-paper:active {
  transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink);
}

/* --- HERO ---------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-20) 0 var(--s-24);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1.2px, transparent 1.2px);
  background-size: 6px 6px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  column-gap: var(--s-8);
  align-items: center;
}
.hero-body { min-width: 0; grid-column: 1; }

/* --- Hero logo card (right column) -------------------------------------- */
.hero-media {
  grid-column: 2;
  justify-self: end;
  align-self: start;
  margin-top: var(--s-10);
  position: relative;
  width: 100%;
  max-width: 440px;
}
.hero-logo-card {
  background: var(--paper);
  border: 4px solid var(--paper);
  box-shadow: 12px 12px 0 var(--pink), 14px 14px 0 0 var(--ink);
  padding: 36px 28px;
  transform: rotate(2.5deg);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  z-index: 2;
}
.hero-logo-card::before {
  /* dotted "stitch" ring around the card edge for patch feel */
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--ink);
  pointer-events: none;
  opacity: .35;
}
.hero-logo-card:hover {
  transform: rotate(0deg) scale(1.015);
  box-shadow: 16px 16px 0 var(--pink), 18px 18px 0 0 var(--ink);
}
.hero-logo-card img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* "Est. 2008" rotated stamp overlapping the corner */
.hero-stamp {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--acid);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  transform: rotate(8deg);
  z-index: 3;
  box-shadow: 3px 3px 0 var(--ink);
}

/* Stack below 1040px so the 168px heading never collides with the logo column */
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; row-gap: var(--s-10); }
  .hero-body { grid-column: 1; }
  .hero-media {
    grid-column: 1;
    justify-self: start;
    max-width: 300px;
    margin-top: var(--s-4);
  }
  .hero-logo-card { padding: 24px 20px; box-shadow: 8px 8px 0 var(--pink), 10px 10px 0 0 var(--ink); }
}
@media (max-width: 540px) {
  .hero-media { max-width: 240px; }
  .hero-stamp { font-size: 10px; padding: 5px 10px; }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
  border: 2px solid var(--ink);
  transform: rotate(-2deg);
}

.hero h1 .hit  { color: var(--pink); }
.hero h1 .acid { color: var(--acid); }
.hero h1 .outline {
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
}

.hero h2 .hit  { color: var(--pink); }
.hero h2 .acid { color: var(--acid); }
.hero h2 .outline {
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
}

.hero h3 .hit  { color: var(--pink); }
.hero h3 .acid { color: var(--acid); }
.hero h3 .outline {
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
}

.hero-lead {
  color: rgba(244,239,229,.85);
  font-size: clamp(17px, 1.5vw, 22px);
  margin-top: var(--s-6);
  max-width: 56ch;
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: var(--s-10);
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-12);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-wrap: wrap;
  color: rgba(244,239,229,.75);
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.hero-meta .dot { width: 8px; height: 8px; background: var(--acid); }

/* Page hero (shorter, for interior pages) */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-20) 0 var(--s-16);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1.2px, transparent 1.2px);
  background-size: 6px 6px;
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 {
  color: var(--paper);
  font-size: clamp(48px, 8vw, 104px);
  line-height: .9;
  max-width: 18ch;
}
.page-hero h1 .hit  { color: var(--pink); }
.page-hero h1 .acid { color: var(--acid); }
.page-hero p { color: rgba(244,239,229,.8); font-size: clamp(16px, 1.3vw, 19px); margin-top: var(--s-5); max-width: 62ch; }

/* --- BIG QUOTE / POSITIONING BLOCK --------------------------------------- */
.big-quote {
  margin: var(--s-12) 0;
  padding: var(--s-8) var(--s-10);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-.5deg);
  border: 3px solid var(--ink);
  box-shadow: var(--s-pink);
  max-width: 960px;
}
.big-quote .hit  { color: var(--acid); }
.big-quote .pink { color: var(--pink); }

/* --- CONCEPT / INTRO GRID ------------------------------------------------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: start;
  margin-top: var(--s-6);
}
.intro-grid p { font-size: 18px; line-height: 1.65; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* --- PILLARS / FEATURE TRIO --------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-12);
}
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--white);
  border: 3px solid var(--ink);
  padding: var(--s-8) var(--s-6);
  box-shadow: var(--s-hard);
  transition: transform .2s, box-shadow .2s;
}
.pillar:hover { transform: translate(-3px, -3px); box-shadow: var(--s-hard-lg); }
.pillar-num {
  font-family: var(--f-accent);
  font-size: 13px;
  color: var(--pink);
  margin-bottom: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pillar h3 { color: var(--ink); margin-bottom: 10px; font-size: 26px; line-height: .95; }
.pillar p  { font-size: 15px; color: var(--muted); }

/* --- PRODUCT TYPE CARDS (Embroidered, PVC, Woven) ------------------------ */
.types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-12);
}
@media (max-width: 900px) { .types { grid-template-columns: 1fr; } }

.type {
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--s-hard);
  padding: var(--s-8);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.type:hover { transform: translate(-3px, -3px); box-shadow: var(--s-hard-lg); }

.type-mark {
  width: 80px; height: 80px;
  margin-bottom: var(--s-5);
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
}
.type-mark svg { width: 44px; height: 44px; }
.type:nth-child(1) .type-mark { background: var(--pink); }
.type:nth-child(2) .type-mark { background: var(--acid); }
.type:nth-child(3) .type-mark { background: var(--blue); }

.type h3 { color: var(--ink); font-size: clamp(30px, 3.5vw, 44px); margin-bottom: 8px; }
/* Specificity bump — beats section.ink p (0,1,2) */
section.ink .type h3,
.type h3 { color: var(--ink); }
section.ink .type p,
.type p { color: var(--ink); font-size: 15px; line-height: 1.55; }
.type-meta {
  display: flex;
  gap: 8px;
  margin: var(--s-4) 0 var(--s-5);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.type-meta span {
  padding: 4px 10px;
  background: var(--paper-2);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.type-cta { margin-top: auto; padding-top: var(--s-6); }

/* --- FEATURES ------------------------------------------------------------ */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-12);
}
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

.feat {
  padding: var(--s-8) var(--s-6);
  background: var(--white);
  border: 3px solid var(--ink);
  border-left: 10px solid var(--pink);
}
.feat:nth-child(3n-1) { border-left-color: var(--acid); }
.feat:nth-child(3n)   { border-left-color: var(--blue); }
.feat h4 { font-size: 24px; margin-bottom: 8px; color: var(--ink); line-height: 1; }
.feat p  { font-size: 15px; color: var(--muted); }

/* --- PROCESS STEPS ------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-12);
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  padding: var(--s-8) var(--s-5) var(--s-6) 72px;
  background: var(--ink-soft);
  border: 3px solid var(--paper);
  position: relative;
  color: var(--paper);
}
.step-num {
  position: absolute;
  left: 18px;
  top: 24px;
  font-family: var(--f-display);
  font-size: 44px;
  color: var(--pink);
  line-height: 1;
}
.step h4 { color: var(--paper); font-size: 22px; margin-bottom: 6px; line-height: 1; }
.step p  { color: rgba(244,239,229,.72); font-size: 14px; }

/* --- PRICING CALCULATOR -------------------------------------------------- */
.calc-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
@media (max-width: 980px) { .calc-wrap { grid-template-columns: 1fr; } }

.calc {
  background: var(--white);
  border: 3px solid var(--ink);
  padding: var(--s-8);
  box-shadow: var(--s-hard);
}
@media (max-width: 620px) { .calc { padding: var(--s-5); } }

.calc-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 2px solid var(--paper-2);
  align-items: center;
}
.calc-row:last-of-type { border-bottom: none; }
@media (max-width: 700px) {
  .calc-row { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
}

.calc-label {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
}
.calc-label small {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .05em;
}

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--acid); }

.slider-row { display: flex; align-items: center; gap: var(--s-4); }
.slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  background: var(--pink);
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: transform .1s;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.slider::-moz-range-thumb {
  width: 28px; height: 28px;
  background: var(--pink);
  border: 3px solid var(--ink);
  cursor: pointer;
}
.slider-value {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--acid);
  padding: 6px 12px;
  border: 2px solid var(--ink);
  min-width: 76px;
  text-align: center;
}

.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.toggle input { opacity: 0; position: absolute; pointer-events: none; }
.toggle-track {
  width: 44px; height: 24px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 18px; height: 18px;
  background: var(--ink);
  transition: transform .2s;
}
.toggle input:checked + .toggle-track { background: var(--acid); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--acid); outline-offset: 3px; }
.toggle-label {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
}

/* Calc output panel */
.calc-output {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-8);
  border: 3px solid var(--ink);
  box-shadow: var(--s-acid);
  position: sticky;
  top: 100px;
}
.calc-output .out-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,239,229,.65);
  margin-bottom: 4px;
}
.calc-output .per-patch {
  font-family: var(--f-display);
  font-size: 40px;
  color: var(--acid);
  line-height: 1;
}
.calc-output .total-label { margin-top: var(--s-5); }
.calc-output .total {
  font-family: var(--f-display);
  font-size: 64px;
  color: var(--paper);
  line-height: 1;
}
.calc-output .config {
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(244,239,229,.75);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(244,239,229,.2);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.calc-adds { margin: var(--s-4) 0; }
.calc-line {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 6px 0;
  color: rgba(244,239,229,.85);
  letter-spacing: .03em;
}
.calc-line strong { color: var(--acid); font-weight: 700; }
.calc-output .out-cta { margin-top: var(--s-5); }

/* --- PRICING TABLES ------------------------------------------------------ */
.price-tabs {
  display: flex;
  gap: 0;
  margin-top: var(--s-12);
  margin-bottom: -3px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.price-tab {
  padding: 14px 24px;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-bottom: none;
  font-family: var(--f-display);
  font-size: 20px;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin-right: -3px;
}
.price-tab[aria-selected="true"] { background: var(--acid); }
.price-tab:hover { background: var(--pink); }

.price-table-wrap {
  border: 3px solid var(--ink);
  background: var(--white);
  overflow: auto;
  box-shadow: var(--s-hard);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 13px;
  min-width: 700px;
}
.price-table th, .price-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--paper-2);
}
.price-table th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-align: center;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
}
.price-table td:first-child, .price-table th:first-child {
  text-align: left;
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 2px solid var(--ink);
}
.price-table th:first-child {
  background: var(--ink);
  color: var(--paper);
}
.price-table tbody tr:hover td { background: var(--acid); }
.price-table tbody tr:hover td:first-child { background: var(--pink); }

/* --- GALLERY ------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: var(--s-10);
}
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery-item {
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: grid;
  place-items: center;
}
.gallery-item:hover { transform: translate(-3px, -3px); box-shadow: var(--s-hard); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-item .placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--muted);
  text-transform: uppercase;
  background: var(--paper-2);
  background-image: radial-gradient(circle, var(--muted) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* --- TESTIMONIALS -------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-12);
}
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  padding: var(--s-8);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: var(--s-hard);
}
.quote .stars {
  color: var(--pink);
  font-family: var(--f-accent);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.quote blockquote {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  color: var(--ink);
}
.quote cite {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* --- CALLOUT / CTA BAND -------------------------------------------------- */
.callout {
  padding: var(--s-16) var(--s-12);
  background: var(--acid);
  border: 3px solid var(--ink);
  text-align: center;
  box-shadow: var(--s-hard);
}
@media (max-width: 720px) { .callout { padding: var(--s-10) var(--s-6); } }
.callout h2 { color: var(--ink); font-size: clamp(40px, 6vw, 80px); margin-bottom: 12px; line-height: .95; }
.callout p  { color: var(--ink); font-size: 18px; margin: 0 auto var(--s-6); max-width: 60ch; }
.callout-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: var(--s-10); }
.faq-item {
  border-bottom: 3px solid var(--ink);
  padding: var(--s-5) 0;
}
.faq-item summary {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.5vw, 28px);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  line-height: 1.05;
  gap: var(--s-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--f-display);
  font-size: 40px;
  color: var(--pink);
  line-height: .7;
  transition: transform .2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 72ch;
}

/* --- OPTIONS CARDS (coverage, borders, backings, threads) ---------------- */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-10);
}
.option {
  background: var(--white);
  border: 3px solid var(--ink);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--s-hard);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.option:hover { transform: translate(-3px, -3px); box-shadow: var(--s-hard-lg); }
.option-visual {
  height: 180px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  border-bottom: 3px solid var(--ink);
  position: relative;
}
.option-visual svg { width: 80%; height: 80%; }
.option-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.option-body h4 { color: var(--ink); font-size: 24px; margin-bottom: 6px; line-height: 1; }
.option-body p  { font-size: 14px; color: var(--muted); flex: 1; }
.option-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--acid);
  margin-top: var(--s-4);
  align-self: flex-start;
}

/* --- OPTION STEP SPLIT --------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  margin-top: var(--s-12);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }
.split-visual {
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--s-hard);
}
.split-visual svg { width: 70%; height: 70%; }

/* --- FORM WRAPPER (Machform iframe) -------------------------------------- */
.form-wrap {
  background: var(--white);
  border: 3px solid var(--ink);
  padding: var(--s-6);
  box-shadow: var(--s-hard);
  margin-top: var(--s-8);
}
.form-wrap iframe { width: 100%; border: none; display: block; background: var(--white); }

.quote-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-8);
  margin-top: var(--s-10);
}
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-sidebar {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-8);
  border: 3px solid var(--ink);
  align-self: start;
}
.quote-sidebar h3 { color: var(--paper); margin-bottom: var(--s-5); }
.quote-sidebar ul { list-style: none; padding: 0; margin: 0; }
.quote-sidebar li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(244,239,229,.18);
  font-family: var(--f-body);
  font-size: 15px;
  color: rgba(244,239,229,.85);
  display: flex;
  gap: 10px;
}
.quote-sidebar li::before {
  content: '✓';
  color: var(--acid);
  font-weight: 700;
  flex-shrink: 0;
}
.quote-sidebar li:last-child { border-bottom: none; }
.sidebar-contact {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 2px solid rgba(244,239,229,.18);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
}
.sidebar-contact strong { display: block; color: var(--acid); font-size: 11px; letter-spacing: .1em; margin-bottom: 4px; }
.sidebar-contact a { color: var(--paper); }
.sidebar-contact a:hover { color: var(--acid); }

/* --- LEGAL PAGES --------------------------------------------------------- */
.legal {
  max-width: 780px;
  margin: 0 auto;
}
.legal h2 {
  font-size: 36px;
  margin-top: var(--s-10);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--ink);
}
.legal h3 { font-size: 24px; margin-top: var(--s-6); margin-bottom: var(--s-3); }
.legal p { font-size: 16px; margin-bottom: var(--s-4); color: var(--ink); line-height: 1.65; }
.legal ul, .legal ol { margin-bottom: var(--s-4); padding-left: 24px; }
.legal li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; }
.legal .updated {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border: 2px dashed var(--muted);
  display: inline-block;
  margin-bottom: var(--s-6);
}

/* --- 404 ----------------------------------------------------------------- */
.four-oh-four {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.four-oh-four .big-num {
  font-family: var(--f-display);
  font-size: clamp(120px, 22vw, 280px);
  line-height: .8;
  color: var(--pink);
  letter-spacing: -.04em;
}
.four-oh-four .nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-10);
  text-align: left;
}
.four-oh-four .nav-card {
  padding: var(--s-5);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--s-hard-sm);
  transition: transform .2s, box-shadow .2s;
}
.four-oh-four .nav-card:hover { transform: translate(-2px, -2px); box-shadow: var(--s-hard); }
.four-oh-four .nav-card strong {
  display: block;
  font-family: var(--f-display);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.four-oh-four .nav-card span { color: var(--muted); font-size: 13px; }

/* --- FOOTER -------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-16) 0 var(--s-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-10);
  padding-bottom: var(--s-10);
  border-bottom: 2px solid rgba(244,239,229,.18);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand-logo { height: 60px; }
.footer-brand p {
  color: rgba(244,239,229,.7);
  font-size: 14px;
  margin-top: var(--s-4);
  max-width: 40ch;
}
.footer h4 {
  color: var(--acid);
  font-family: var(--f-accent);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--paper); font-size: 14px; transition: color .2s; }
.footer li a:hover { color: var(--acid); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(244,239,229,.5);
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--paper); }
.footer-bottom a:hover { color: var(--acid); }

/* --- REVEAL ON SCROLL ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* --- REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- MACHFORM IFRAME ---------------------------------------------------- */
.mf-iframe {
  display: block;
  width: 100%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(212, 255, 61, 0.15) 50%, transparent 100%),
    var(--paper);
  background-size: 200% 100%, 100% 100%;
  background-position: -100% 0, 0 0;
  animation: mf-shimmer 1.6s ease-in-out infinite;
  
  
}
.mf-iframe.mf-ready {
  animation: none;
  background: var(--paper);
}
@keyframes mf-shimmer {
  0%   { background-position: -100% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

/* --- PRINT --------------------------------------------------------------- */
@media print {
  .marquee, .header .header-cta, .nav-toggle, .footer, .hero-actions, .callout-actions, .quote-sidebar { display: none; }
  body { background: white; color: black; }
  section { padding: 16px 0; break-inside: avoid; }
  .price-table { font-size: 10px; }
}