/* ==========================================================================
   Maryland Local Merchants — Site Stylesheet
   Single shared stylesheet for all pages. Edit here, every page updates.
   --------------------------------------------------------------------------
   CONTENTS
   01. Tokens (colors, type, spacing)
   02. Reset & base
   03. Layout primitives
   04. Typography
   05. Buttons
   06. Flag stripe + decorative bits
   07. Header / nav
   08. Hero
   09. Trust bar
   10. Sections & section headers
   11. Cards / grids
   12. Steps (how it works)
   13. Split feature blocks
   14. Checklist
   15. Savings / highlight band
   16. Testimonials
   17. Logos strip
   18. FAQ accordion
   19. Form section + embed slot
   20. CTA band
   21. Footer
   22. Utilities
   23. Motion / reveal
   24. Print
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Maryland flag palette. Black and gold do the heavy lifting; red is an
     accent only — used at full strength it gets loud fast. */
  --md-black: #15171c;
  --md-black-soft: #23262e;
  --md-black-line: #32363f;
  --md-gold: #f4b41a;
  --md-gold-bright: #ffc837;
  --md-gold-deep: #cf9308;
  --md-red: #d3242c;
  --md-red-deep: #ac1a21;

  /* Neutrals */
  --paper: #ffffff;
  --paper-warm: #faf9f6;
  --paper-sink: #f2f1ec;
  --line: #e4e3dc;
  --line-soft: #efeee8;
  --ink: #15171c;
  --ink-2: #3d414b;
  --muted: #636773;
  --muted-light: #8b8f9b;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --accent: var(--md-gold);
  --accent-ink: var(--md-black);

  /* Type scale — fluid, clamps between mobile and desktop */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --fs-xl: clamp(1.1875rem, 1.09rem + 0.5vw, 1.375rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-h3: clamp(1.3125rem, 1.17rem + 0.7vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.125rem, 1.55rem + 2.85vw, 4rem);
  --fs-display: clamp(2.5rem, 1.7rem + 3.9vw, 4.75rem);

  /* Spacing */
  --gap: 1.5rem;
  --section-y: clamp(3.5rem, 2.4rem + 5.2vw, 7rem);
  --section-y-tight: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --container: 1200px;
  --container-narrow: 820px;

  /* Radius + shadow */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 23, 28, 0.05), 0 2px 6px rgba(21, 23, 28, 0.04);
  --shadow: 0 2px 4px rgba(21, 23, 28, 0.04), 0 12px 28px rgba(21, 23, 28, 0.08);
  --shadow-lg: 0 4px 8px rgba(21, 23, 28, 0.05), 0 24px 60px rgba(21, 23, 28, 0.13);

  --header-h: 86px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 860px) {
  :root { --header-h: 72px; }
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 3px solid var(--md-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--md-gold); color: var(--md-black); }

/* Skip link for keyboard + screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--md-black);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   03. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }

.section--warm { background: var(--paper-warm); }
.section--sink { background: var(--paper-sink); }

.section--dark {
  background: var(--md-black);
  color: #fff;
}
.section--dark .section-head p,
.section--dark .lede { color: rgba(255, 255, 255, 0.72); }
.section--dark .eyebrow { color: var(--md-gold); }

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 800;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.13;
  letter-spacing: -0.024em;
  font-weight: 800;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.016em;
  font-weight: 700;
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.011em;
  font-weight: 700;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--md-gold-deep);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--md-gold);
  flex: none;
}

.eyebrow--plain::before { display: none; }

.lede {
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
}

.text-muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

p + p { margin-top: 1.05em; }

strong, b { font-weight: 700; color: var(--ink); }
.section--dark strong { color: #fff; }

.gold-underline {
  background-image: linear-gradient(transparent 62%, rgba(244, 180, 26, 0.42) 0);
  background-repeat: no-repeat;
}

.text-gold { color: var(--md-gold); }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--md-gold);
  --btn-fg: var(--md-black);
  --btn-bd: var(--md-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  min-height: 52px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21, 23, 28, 0.18);
}

.btn:active { transform: translateY(0); }

.btn--lg { padding: 1.1rem 2.2rem; min-height: 60px; font-size: var(--fs-base); }
.btn--sm { padding: 0.65rem 1.25rem; min-height: 44px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn--dark { --btn-bg: var(--md-black); --btn-fg: #fff; --btn-bd: var(--md-black); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--md-black);
  --btn-bd: rgba(21, 23, 28, 0.22);
}
.btn--outline:hover { --btn-bd: var(--md-black); background: rgba(21, 23, 28, 0.04); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.32);
}
.btn--ghost-light:hover { --btn-bd: #fff; background: rgba(255, 255, 255, 0.09); }

.btn-arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  border-bottom: 2px solid var(--md-gold);
  padding-bottom: 2px;
  transition: gap 0.18s var(--ease), color 0.18s var(--ease);
}
.link-arrow:hover { gap: 0.65rem; color: var(--md-gold-deep); }

/* ==========================================================================
   06. FLAG STRIPE + DECORATIVE
   ========================================================================== */

/* The signature Maryland motif — four-part stripe. Used as a thin rule so the
   flag reads as a brand cue without turning the page into a flag. */
.flag-stripe {
  display: flex;
  height: 5px;
  width: 100%;
  overflow: hidden;
}
.flag-stripe span { flex: 1; }
.flag-stripe span:nth-child(1) { background: var(--md-black); }
.flag-stripe span:nth-child(2) { background: var(--md-gold); }
.flag-stripe span:nth-child(3) { background: var(--md-red); }
.flag-stripe span:nth-child(4) { background: var(--paper); }

.flag-stripe--short { width: 76px; height: 5px; border-radius: 3px; }
.flag-stripe--short span:nth-child(4) { background: var(--line); }

.section--dark .flag-stripe--short span:nth-child(4) { background: rgba(255,255,255,.85); }

/* Soft background glow used behind dark sections */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   07. HEADER / NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(21, 23, 28, 0.07);
}

.site-header .flag-stripe { height: 4px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  min-width: 0;
}

/* The mark is detailed (state outline + storefront), so it needs more height
   than a simple wordmark would to stay legible. */
.brand img {
  height: clamp(42px, 4.4vw, 60px);
  width: auto;
  flex: none;
}

/* Fallback wordmark — shown if the logo image is missing or while it loads */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}
.brand-text b {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--md-black);
  white-space: nowrap;
}
.brand-text span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--md-gold-deep);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .brand-text b { font-size: 0.92rem; }
  .brand-text span { font-size: 0.55rem; letter-spacing: 0.13em; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

/* :not(.btn) throughout — the CTA is also an <a> inside .nav-links, and these
   nav-item rules would otherwise flatten its pill shape and padding. */
.nav-links a:not(.btn) {
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  white-space: nowrap;
}
.nav-links a:not(.btn):hover { color: var(--md-black); background: var(--paper-sink); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--md-black); }
.nav-links a[aria-current="page"]:not(.btn)::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--md-gold);
  margin-top: 3px;
}

.nav-cta { flex: none; margin-left: 0.4rem; }

/* Dropdown for the Industries menu */
.nav-drop { position: relative; }

.nav-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.nav-drop > button:hover { color: var(--md-black); background: var(--paper-sink); }
.nav-drop > button svg { transition: transform 0.2s var(--ease); }
.nav-drop.is-open > button svg { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0.18s;
}

.nav-drop.is-open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.nav-drop-menu a:hover { background: var(--paper-warm); color: var(--md-black); }
.nav-drop-menu a::after { display: none; }
.nav-drop-menu .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--md-gold); flex: none;
}

/* Hamburger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-black);
  transition: background-color 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-black);
  transition: transform 0.24s var(--ease), top 0.2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }

  /* backdrop-filter establishes a containing block for fixed-position
     descendants, which would clip the drawer below to the header's own box.
     The glass effect only earns its keep on desktop, so drop it here. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .nav-links {
    position: fixed;
    inset: calc(var(--header-h) + 4px) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1.25rem clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem) 3rem;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    border-top: 1px solid var(--line);
  }

  body.nav-open .nav-links { transform: translateX(0); }

  .nav-links a:not(.btn) {
    padding: 1rem 0.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav-links a:not(.btn):hover { background: none; }
  .nav-links a[aria-current="page"]:not(.btn) { color: var(--md-gold-deep); }
  .nav-links a[aria-current="page"]:not(.btn)::after { display: none; }

  .nav-cta { margin: 1.4rem 0 0; }
  .nav-cta .btn { width: 100%; }

  /* Dropdown becomes a plain expanded list on mobile */
  .nav-drop { position: static; }
  .nav-drop > button {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav-drop > button:hover { background: none; }
  .nav-drop-menu {
    position: static;
    transform: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0.35rem 0 0.5rem 0.25rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-drop.is-open .nav-drop-menu { display: block; transform: none; }
  .nav-drop-menu a { border: 0; padding: 0.7rem 0.5rem; font-size: 1rem; }
}

/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--md-black);
  color: #fff;
  overflow: hidden;
  /* Kept deliberately tight: the hero now carries the form, so every pixel of
     padding pushes the primary conversion path further down the page. */
  padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
}

.hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -230px;
  top: -290px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 180, 26, 0.2), transparent 68%);
  pointer-events: none;
}

.hero > .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  /* start, not center: the form column is much taller than the copy column,
     and centring would push the headline halfway down the viewport. */
  align-items: start;
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero .eyebrow { color: var(--md-gold); }
.hero .eyebrow::before { background: var(--md-gold); }

.hero h1 { color: #fff; margin-bottom: 1.35rem; }

.hero-sub {
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
  max-width: 40ch;
  margin-bottom: 2rem;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.hero-points svg { flex: none; color: var(--md-gold); }

/* Hero side card — holds the form or a value summary */
.hero-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.hero-card-head {
  padding: 1.5rem 1.6rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-warm);
}
.hero-card-head h2 {
  font-size: var(--fs-h4);
  margin-bottom: 0.3rem;
}
.hero-card-head p { font-size: var(--fs-sm); color: var(--muted); }

.hero-card-body { padding: 1.5rem 1.6rem 1.6rem; }

/* ==========================================================================
   09. TRUST BAR
   ========================================================================== */

.trust-bar {
  background: var(--md-black-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.5rem;
}

.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem 2rem;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

.trust-item svg { flex: none; color: var(--md-gold); }

/* Stat variant used mid-page */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.stat {
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
}
.stat b {
  display: block;
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--md-black);
  margin-bottom: 0.5rem;
}
.stat span { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }

/* ==========================================================================
   10. SECTION HEADERS
   ========================================================================== */

.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { font-size: var(--fs-lg); color: var(--muted); line-height: 1.6; }

/* Head that sits beside a CTA on desktop */
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
}
.section-head-row .section-head { margin-bottom: 0; }

/* ==========================================================================
   11. CARDS / GRIDS
   ========================================================================== */

.grid { display: grid; gap: clamp(1.1rem, 0.85rem + 1.1vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.62; }

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(244, 180, 26, 0.55);
}

.section--warm .card, .section--sink .card { background: #fff; }

.card--dark {
  background: var(--md-black-soft);
  border-color: var(--md-black-line);
  color: #fff;
}
.card--dark h3 { color: #fff; }
.card--dark p { color: rgba(255, 255, 255, 0.68); }

/* Icon chip at the top of a card */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(244, 180, 26, 0.16);
  color: var(--md-gold-deep);
  margin-bottom: 1.15rem;
  flex: none;
}
.icon-chip svg { width: 24px; height: 24px; }

.icon-chip--red { background: rgba(211, 36, 44, 0.1); color: var(--md-red); }
.icon-chip--ink { background: rgba(21, 23, 28, 0.07); color: var(--md-black); }
.card--dark .icon-chip { background: rgba(244, 180, 26, 0.16); color: var(--md-gold); }

/* Industry card — links to a landing page */
.industry-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(244, 180, 26, 0.6);
}
.industry-card h3 { font-size: var(--fs-h4); }
.industry-card p { font-size: var(--fs-sm); color: var(--muted); flex: 1; }
.industry-card .go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-gold-deep);
  margin-top: 0.35rem;
}
.industry-card:hover .go .btn-arrow { transform: translateX(3px); }

/* Numbered card */
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--md-black);
  color: var(--md-gold);
  font-weight: 800;
  font-size: var(--fs-sm);
  margin-bottom: 1.1rem;
  flex: none;
}

/* ==========================================================================
   12. STEPS
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  counter-reset: step;
}

.step { position: relative; padding-top: 2.5rem; }

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--md-gold-deep);
}

.step::after {
  content: "";
  position: absolute;
  top: 1.65rem;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--md-gold);
}

.step h3 { margin-bottom: 0.55rem; }
.step p { color: var(--muted); font-size: var(--fs-sm); }

.section--dark .step::before { color: var(--md-gold); }
.section--dark .step p { color: rgba(255, 255, 255, 0.68); }

/* ==========================================================================
   13. SPLIT FEATURE BLOCKS
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  align-items: center;
}

.split--reverse > *:first-child { order: 2; }

@media (max-width: 820px) {
  .split--reverse > *:first-child { order: 0; }
}

.split-visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-sink);
  border: 1px solid var(--line);
}

.split-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder panel used where a product photo will go */
.visual-ph {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(244, 180, 26, 0.1), rgba(21, 23, 28, 0.04)),
    var(--paper-sink);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ==========================================================================
   14. CHECKLIST
   ========================================================================== */

.checklist { display: grid; gap: 0.85rem; }

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-base);
  line-height: 1.55;
}

.checklist svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--md-gold-deep);
}

.checklist--dark li { color: rgba(255, 255, 255, 0.84); }
.checklist--dark svg { color: var(--md-gold); }

.checklist--compact li { font-size: var(--fs-sm); }
.checklist--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 0.85rem 1.75rem; }

/* Cross list — used for "the old way" pain points */
.crosslist { display: grid; gap: 0.85rem; }
.crosslist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--muted);
}
.crosslist svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  color: var(--md-red);
}

/* ==========================================================================
   15. SAVINGS / HIGHLIGHT BAND
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}

.compare-col {
  border-radius: var(--r);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  border: 1px solid var(--line);
  background: #fff;
}

.compare-col--bad { background: var(--paper-sink); }

.compare-col--good {
  border-color: var(--md-black);
  border-width: 2px;
  box-shadow: var(--shadow);
  position: relative;
}

.compare-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.compare-col--bad .compare-tag { background: rgba(21,23,28,.08); color: var(--muted); }
.compare-col--good .compare-tag { background: var(--md-gold); color: var(--md-black); }

.compare-col h3 { margin-bottom: 1.15rem; }

/* Highlight callout box */
.callout {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  background: rgba(244, 180, 26, 0.1);
  border: 1px solid rgba(244, 180, 26, 0.4);
  border-radius: var(--r);
}
.callout svg { flex: none; color: var(--md-gold-deep); width: 26px; height: 26px; }
.callout p { font-size: var(--fs-sm); color: var(--ink-2); }
.callout h4 { margin-bottom: 0.35rem; }

.callout--dark {
  background: rgba(244, 180, 26, 0.1);
  border-color: rgba(244, 180, 26, 0.3);
}
.callout--dark p { color: rgba(255, 255, 255, 0.75); }
.callout--dark h4 { color: #fff; }
.callout--dark svg { color: var(--md-gold); }

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */

.quote-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
}

.quote-mark {
  font-size: 3rem;
  line-height: 0.7;
  font-weight: 800;
  color: var(--md-gold);
  margin-bottom: 0.75rem;
}

.quote-card blockquote {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
  margin-bottom: 1.5rem;
}

.quote-by {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}

.quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--md-black);
  color: var(--md-gold);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  flex: none;
}

.quote-by b { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.quote-by span { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Marks placeholder content that must be replaced before launch. Delete the
   class (and the .ph-note element) once real content is in. */
.is-placeholder {
  border-style: dashed;
  border-color: var(--muted-light);
  background: repeating-linear-gradient(
    -45deg,
    rgba(99, 103, 115, 0.028) 0 12px,
    transparent 12px 24px
  ), #fff;
}

.ph-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-red);
  background: rgba(211, 36, 44, 0.08);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   17. LOGOS STRIP
   ========================================================================== */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 3rem;
}

.logos span {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-light);
}

/* ==========================================================================
   18. FAQ ACCORDION
   ========================================================================== */

.faq { display: grid; gap: 0.75rem; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.faq-item.is-open {
  border-color: rgba(244, 180, 26, 0.6);
  box-shadow: var(--shadow-sm);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.2rem 1.35rem;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.011em;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper-sink);
  transition: background-color 0.2s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-black);
  transform: translate(-50%, -50%);
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.is-open .faq-icon { background: var(--md-gold); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

.faq-a > div { overflow: hidden; }

.faq-a p {
  padding: 0 1.35rem 1.35rem;
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.62;
  max-width: 70ch;
}
.faq-a p + p { padding-top: 0; margin-top: -0.45rem; }

/* ==========================================================================
   19. FORM SECTION + EMBED SLOT
   ========================================================================== */

.form-section { position: relative; overflow: hidden; }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  align-items: center;
}

@media (max-width: 940px) {
  .form-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---- THE EMBED SLOT ------------------------------------------------------
   Paste your form embed code inside .form-embed, replacing the placeholder
   markup. The wrapper handles all the styling, padding and responsiveness,
   so an unstyled iframe or script embed will still sit correctly on the page.
   -------------------------------------------------------------------------- */
.form-embed-shell {
  background: #fff;
  /* The shell sits inside a dark section (.hero / .section--dark), which sets
     color:#fff. Without resetting here, every heading in the card inherits
     white and disappears against the cream header. */
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.form-embed-head {
  padding: 1.6rem 1.75rem 1.35rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line-soft);
}
.form-embed-head h2,
.form-embed-head h3 {
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.011em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.form-embed-head p { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Form sitting inside the hero -------------------------------------
   The form is the page's primary conversion path, so it lives in the hero
   rather than halfway down. Slightly tighter than the standalone version so
   it doesn't push the hero to an absurd height. */
.hero-form { align-self: start; }
.hero-form .form-embed { padding: 1.25rem; min-height: 0; }
.hero-form .form-embed-head { padding: 1.35rem 1.5rem 1.15rem; }

@media (max-width: 940px) {
  /* Stacked: give the form a little breathing room from the hero copy. */
  .hero-form { margin-top: 0.5rem; }
  .hero-form .form-embed { padding: 1rem; }

  /* The trust bar sits immediately below the hero and makes the same
     reassurances. Dropping these on phones pulls the form roughly 120px
     further up, which matters a lot when the form is the whole point. */
  .hero-points { display: none; }
}

.form-embed {
  padding: 1.75rem;
  min-height: 380px;
}

/* Make embedded iframes behave — most form builders output a raw iframe and
   then resize it from a script.
   NOTE: do NOT set min-width here. The embed script wraps the iframe in its own
   containers and manages width itself; a min-width of 100% resolved against the
   wrong containing block and pushed the iframe to full viewport width, which
   .form-embed-shell (overflow: hidden) then clipped on mobile. max-width is the
   safe constraint — it can only ever pull the iframe back inside its box. */
.form-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  display: block;
}

/* Constrain the wrappers the embed script injects around the iframe. */
.form-embed > div,
.form-embed .ep-wrapper,
.form-embed .ep-iFrameContainer {
  max-width: 100% !important;
}

/* The visible "paste here" placeholder. Delete this block when you paste the
   real embed in. */
.embed-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
  min-height: 380px;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: repeating-linear-gradient(
    -45deg,
    rgba(99, 103, 115, 0.03) 0 14px,
    transparent 14px 28px
  );
}
.embed-placeholder .icon-chip { margin-bottom: 0; }
.embed-placeholder b { font-size: var(--fs-lg); letter-spacing: -0.014em; }
.embed-placeholder p { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.embed-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: var(--paper-sink);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  color: var(--ink-2);
}

.form-aside .checklist li { color: rgba(255, 255, 255, 0.84); }

/* ==========================================================================
   20. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  background: var(--md-gold);
  color: var(--md-black);
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(21, 23, 28, 0.045) 0 40px,
    transparent 40px 80px
  );
  pointer-events: none;
}

.cta-band > .container { position: relative; z-index: 2; }

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-band h2 { max-width: 22ch; margin-bottom: 0.65rem; }
.cta-band p { color: rgba(21, 23, 28, 0.72); font-size: var(--fs-lg); max-width: 46ch; }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--md-black);
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-sm);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  padding-block: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);
}

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-main { grid-template-columns: 1fr; gap: 2.25rem; }
}

.footer-brand .brand { margin-bottom: 1.15rem; }
.footer-brand .brand-text b { color: #fff; }
.footer-brand p { max-width: 38ch; line-height: 1.62; }

.footer-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.15rem;
}

.footer-col ul { display: grid; gap: 0.7rem; }

.footer-col a {
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.15s var(--ease);
}
.footer-col a:hover { color: var(--md-gold); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.48);
}

.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { transition: color 0.15s var(--ease); }
.footer-bottom a:hover { color: var(--md-gold); }

.footer-disclaimer {
  padding-bottom: 2.25rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  max-width: 80ch;
}

/* ==========================================================================
   22. UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }

/* Keeps a phrase from breaking across lines — used in the homepage h1 so
   "We go find it." always reads as one unit. Only use it on short phrases;
   a long one will overflow rather than wrap. */
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; }

.stack { display: grid; gap: 1.5rem; }
.stack-sm { display: grid; gap: 0.85rem; }
.stack-lg { display: grid; gap: 2.25rem; }

.hide-mobile { }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }

.maxw-60 { max-width: 60ch; }

/* ==========================================================================
   23. MOTION / REVEAL
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   24. PHOTOGRAPHY
   --------------------------------------------------------------------------
   Photo backgrounds are applied per page by setting a custom property on the
   element itself, e.g.

     <section class="hero hero--photo" style="--photo:url('/assets/img/hero-retail.jpg')">

   so the shared stylesheet never has to know about individual pages. Every
   photo sits under a scrim heavy enough to keep white text at accessible
   contrast — the scrim is the thing that must not be lightened.
   ========================================================================== */

.hero--photo {
  background-color: var(--md-black);
  background-image:
    linear-gradient(
      100deg,
      rgba(21, 23, 28, 0.97) 0%,
      rgba(21, 23, 28, 0.94) 34%,
      rgba(21, 23, 28, 0.74) 58%,
      rgba(21, 23, 28, 0.58) 100%
    ),
    var(--photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* Once the hero stacks to one column the text sits over the middle of the
   photo, so the scrim has to become flat and much stronger. */
@media (max-width: 940px) {
  .hero--photo {
    /* 0.86 is the lightest this can go and still clear WCAG AA comfortably:
       against a pure-white pixel it composites to ~rgb(54,55,60), which is
       still better than 10:1 against white text. Don't raise it further. */
    background-image:
      linear-gradient(rgba(21, 23, 28, 0.86), rgba(21, 23, 28, 0.91)),
      var(--photo);
  }
}

/* Full-width photo band for dark sections. */
.section--photo {
  background-color: var(--md-black);
  background-image:
    linear-gradient(rgba(21, 23, 28, 0.9), rgba(21, 23, 28, 0.93)),
    var(--photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  /* Deliberately NOT background-attachment: fixed — it stutters badly on iOS
     and forces expensive repaints on every scroll frame. */
}

/* Photo inside a .split-visual frame. Replaces the .visual-ph placeholder. */
.split-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Subtle warm wash over split photos so they sit in the palette rather than
   fighting it. */
.split-visual--tinted { position: relative; }
.split-visual--tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(244, 180, 26, 0.14), rgba(21, 23, 28, 0.1));
  pointer-events: none;
}

/* ==========================================================================
   25. EQUIPMENT SHOWCASE
   --------------------------------------------------------------------------
   Product shots are transparent PNGs, so they sit on any background. Cards
   stay light even inside dark sections — dark hardware on a dark panel
   disappears.
   ========================================================================== */

.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.35rem);
}

.equip-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem 1.15rem 1.35rem;
  text-align: center;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.equip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(244, 180, 26, 0.6);
}

.equip-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 180, 26, 0.13), transparent 66%),
    var(--paper-warm);
}

.equip-media img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.equip-card h4 {
  font-size: var(--fs-sm);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.equip-card p {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Platform logo strip (e-commerce page) */
.platform-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.35rem);
  align-items: center;
}

.platform-tile {
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 118px;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.platform-tile:hover { border-color: rgba(244, 180, 26, 0.6); transform: translateY(-3px); }
.platform-tile img { max-height: 54px; width: auto; object-fit: contain; }

/* A single hero product shot beside copy */
.equip-hero-shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 45%, rgba(244, 180, 26, 0.16), transparent 68%),
    var(--paper-warm);
  padding: 2rem;
}
.equip-hero-shot img { max-width: 78%; max-height: 88%; object-fit: contain; }

/* ==========================================================================
   26. PRINT
   ========================================================================== */

@media print {
  .site-header, .cta-band, .form-section, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .section--dark, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}