/* ========================================
   ETHICAL MECHANIC — Industrial Authority
   Palette pulled from the OEM logo:
   Slate blue, dark navy, steel blue
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Libre+Franklin:wght@300;400;500;600;700&display=swap');

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Logo-derived palette */
  --navy: #2f3a4a;
  --slate: #516079;
  --slate-mid: #64798f;
  --steel: #b8cfe0;
  --steel-light: #dae8f0;
  --ice: #eef4f8;

  /* Neutrals */
  --charcoal: #1e2530;
  --gray-700: #3a4250;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --white: #ffffff;

  /* Accent */
  --accent: #c0392b;
  --accent-hover: #a93226;

  /* Type */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Libre Franklin', system-ui, sans-serif;

  /* Spacing */
  --section-pad: clamp(2.5rem, 4.5vw, 4rem);

  /* Effects */
  --shadow-card: 0 2px 8px rgba(47,58,74,0.08), 0 1px 3px rgba(47,58,74,0.06);
  --shadow-lift: 0 8px 24px rgba(47,58,74,0.12), 0 2px 6px rgba(47,58,74,0.08);
  --radius: 6px;
  --radius-lg: 12px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; text-wrap: balance; overflow-x: hidden; }
html.modal-open, html.modal-open body { overflow: hidden !important; height: 100%; }

/* Universal text-flow rule — keep overflow-wrap so runaway URLs / unbreakable
   strings don't blow out the layout, but DROP word-break:break-word, which was
   licensing the browser to orphan single letters from button labels (e.g.
   "UNSUBSCRIB / E") whenever a single-word label sat in a tight container.
   Body text in pages like the FAQ never relied on word-break here — normal
   whitespace wrapping handles those cases. */
*, *::before, *::after { overflow-wrap: break-word; }

/* Site-wide button protection — buttons must NEVER break a label mid-word.
   Default behavior: keep label on a single line and let the button grow
   horizontally to fit. Specific button instances can override `white-space`
   if their layout actually wants the label to wrap (e.g. wide CTAs on a
   narrow column), but they still inherit no-mid-word-breaks. */
button,
.btn,
[class*="__btn"],
[class*="-btn"] {
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--gray-700);
  line-height: 1.7;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--slate);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--navy); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 400;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; color: var(--navy); }

/* --- Layout --- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow { max-width: 740px; }

/* ========================================
   HEADER
   ======================================== */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.logo:hover { text-decoration: none; }

.logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links-desktop {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.header-cta {
  margin-left: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.header-cta:hover {
  background: var(--accent-hover);
  color: var(--white);
  text-decoration: none;
}

.nav-links {
  display: none;
}

.nav-link {
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius);
  transition: all var(--transition);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-body);
  text-decoration: none;
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.nav-link.active {
  color: var(--white);
}

@media (min-width: 821px) {
  .nav-link.active {
    background: rgba(255,255,255,0.12);
  }
}

.nav-close,
.nav-brand,
.nav-divider,
.nav-overlay { display: none; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: var(--transition);
}

/* ========================================
   HERO — Full-screen centered
   ======================================== */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  overflow: hidden;
}

.hero--full {
  min-height: 85vh;
  align-items: center;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 20s ease;
}

.hero--full .hero-bg {
  animation: heroZoom 25s ease forwards;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(30,37,48,0.55) 0%,
    rgba(30,37,48,0.7) 50%,
    rgba(30,37,48,0.85) 100%
  );
  z-index: 1;
}

.hero-center {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 2rem 0;
}

.hero-badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 2rem;
  border: 3px solid rgba(184,207,224,0.35);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.hero-headline {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 1rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  line-height: 1.2;
}

.hero-sub {
  color: var(--steel);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Legacy hero (inner pages) */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.5rem 0;
  background: linear-gradient(to top, rgba(30,37,48,0.92) 0%, rgba(30,37,48,0.6) 100%);
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hero-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid rgba(184,207,224,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-text h1 {
  color: var(--white);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.hero-text p {
  color: var(--steel);
  font-size: 1.05rem;
  max-width: 520px;
  line-height: 1.6;
}

/* ========================================
   SECTION PATTERNS
   ======================================== */
.section { padding: var(--section-pad) 0; }
.section--ice { background: var(--ice); }
.section--gray { background: var(--gray-100); }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--slate {
  background: var(--slate);
  color: var(--white);
}
.section--steel {
  background: var(--steel-light);
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-mid);
  margin-bottom: 0.5rem;
}

.section--navy .section-eyebrow,
.section--slate .section-eyebrow {
  color: var(--steel);
}

.section-title {
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--gray-500);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.6;
}

.section--navy .section-subtitle { color: var(--steel); }
.section--navy h2 { color: var(--white); }

.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ========================================
   HOMEPAGE HERO — Image showcase + message
   ======================================== */
.hp-hero {
  position: relative;
}

.hp-hero__image {
  position: relative;
  overflow: hidden;
  max-height: 58vh;
  background: var(--navy);
}

.hp-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroZoom 30s ease forwards;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.hp-hero__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, var(--charcoal), transparent);
  pointer-events: none;
  z-index: 1;
}

.hp-hero__message {
  background: var(--charcoal);
  padding: 2.25rem 0 2.5rem;
  position: relative;
  margin-top: -2rem;
  text-align: center;
}

.hp-hero__accent-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.hp-hero__message-inner {
  max-width: 640px;
  margin: 0 auto;
}

.hp-hero__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 2px;
  background: rgba(192,57,43,0.06);
}

.hp-hero__title {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

.hp-hero__rule {
  width: 45px;
  height: 3px;
  background: var(--accent);
  margin: 1.25rem auto;
  border-radius: 2px;
}

.hp-hero__sub {
  color: var(--steel);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  margin: 0 auto 2rem;
  line-height: 1.7;
  max-width: 500px;
}

.hp-hero__actions {
  display: flex;
  justify-content: center;
}

.hp-hero__verify-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--accent);
  color: var(--white);
  padding: 1rem 1.75rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 20px rgba(192,57,43,0.3);
  width: 100%;
  max-width: 480px;
  cursor: pointer;
}

.hp-hero__verify-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(192,57,43,0.4);
  color: var(--white);
}

.hp-hero__verify-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-hero__verify-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}

.hp-hero__verify-text strong {
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: 0.01em;
}

.hp-hero__verify-text span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.15rem;
}

.hp-hero__verify-arrow {
  font-size: 1.25rem;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform var(--transition), opacity var(--transition);
}

.hp-hero__verify-btn:hover .hp-hero__verify-arrow {
  transform: translateX(4px);
  opacity: 1;
}

.btn--lg {
  padding: 0.85rem 2.25rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

/* Trust strip inside hero */
.hp-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(184,207,224,0.1);
}

.hp-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-hero__trust-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.hp-hero__trust-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(184,207,224,0.6);
}

.hp-hero__trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(184,207,224,0.15);
}

/* ========================================
   HOMEPAGE OFFERS (bento grid)
   ======================================== */
.hp-offers {
  background: var(--ice);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  position: relative;
}

.hp-offers__header {
  text-align: center;
  margin-bottom: 2rem;
}

.hp-offers__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.hp-offers__header h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.3;
}

.hp-offers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 290px 260px;
  gap: 1rem;
}

.hp-offers__card:nth-child(1) { grid-column: 1 / 3; }
.hp-offers__card:nth-child(2) { grid-column: 3 / 4; }
.hp-offers__card:nth-child(3) { grid-column: 1 / 2; }
.hp-offers__card:nth-child(4) { grid-column: 2 / 4; }

.hp-offers__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 4px 20px rgba(47,58,74,0.15);
  transition: box-shadow 0.4s ease;
}

.hp-offers__card:hover {
  text-decoration: none;
  color: var(--white);
  box-shadow: 0 8px 35px rgba(47,58,74,0.25);
}

.hp-offers__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-offers__card:hover .hp-offers__img {
  transform: scale(1.08);
}

.hp-offers__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,37,48,0.05) 0%, rgba(30,37,48,0.45) 50%, rgba(30,37,48,0.9) 100%);
  transition: background 0.5s ease;
}

.hp-offers__card:hover .hp-offers__card-overlay {
  background: linear-gradient(180deg, rgba(30,37,48,0.1) 0%, rgba(30,37,48,0.35) 50%, rgba(30,37,48,0.82) 100%);
}

.hp-offers__card-body {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1.75rem;
  width: 100%;
}

.hp-offers__num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-style: italic;
  color: rgba(255,255,255,0.08);
  line-height: 1;
  margin-bottom: 0.25rem;
  transition: color 0.5s ease;
}

.hp-offers__card:hover .hp-offers__num {
  color: rgba(192,57,43,0.35);
}

.hp-offers__card h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hp-offers__card--featured h3 {
  font-size: 1.65rem;
}

.hp-offers__card p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0;
  max-width: 420px;
}

.hp-offers__card--featured .hp-offers__num {
  font-size: 4rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn-navy:hover {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-dark:hover {
  background: var(--navy);
  color: var(--white);
}

/* (values-bar replaced by hp-values above) */

/* ========================================
   HOMEPAGE SCAM — Left-aligned warning
   ======================================== */
.hp-scam {
  background: var(--navy);
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  position: relative;
  overflow: hidden;
}

.hp-scam::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 36px,
      rgba(192,57,43,0.02) 36px,
      rgba(192,57,43,0.02) 38px
    );
  pointer-events: none;
}

.hp-scam__content {
  position: relative;
  max-width: 580px;
  border-left: 4px solid var(--accent);
  padding-left: 2rem;
}

.hp-scam__badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(192,57,43,0.12);
  border: 2px solid rgba(192,57,43,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 1.25rem;
  box-shadow: 0 0 25px rgba(192,57,43,0.12);
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(192,57,43,0.08); }
  50% { box-shadow: 0 0 35px rgba(192,57,43,0.2); }
}

.hp-scam__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.hp-scam h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.hp-scam p {
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.hp-scam__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.hp-scam__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hp-scam__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  max-height: 320px;
}

.hp-scam__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 320px;
}

/* ========================================
   HOMEPAGE CLOSING (mission + subscribe)
   ======================================== */
/* ========================================
   HOMEPAGE — FAQ PREVIEW
   ======================================== */

.hp-faq {
  padding: var(--section-pad) 0;
  background: var(--ice);
}

.hp-faq__header {
  text-align: center;
  margin-bottom: 2rem;
}

.hp-faq__header h2 {
  margin-top: 0.25rem;
}

.hp-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.hp-faq__item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}

.hp-faq__item:hover {
  box-shadow: var(--shadow-card);
}

.hp-faq__item h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.hp-faq__item p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.65;
}

.hp-faq__item a {
  color: var(--accent);
  font-weight: 600;
}

.hp-faq__more {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .hp-faq__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   HOMEPAGE — LATEST BLOG POSTS
   ======================================== */

.hp-latest {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.hp-latest__header {
  text-align: center;
  margin-bottom: 2rem;
}

.hp-latest__header h2 {
  margin-top: 0.25rem;
}

.hp-latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hp-latest__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.hp-latest__card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.hp-latest__img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--ice);
  flex-shrink: 0;
}

.hp-latest__img[style*="ym-logo"],
.hp-latest__img[style*="dm-photo"],
.hp-latest__img[style*="oem-logo"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--charcoal);
}

.hp-latest__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hp-latest__date {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.hp-latest__body h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-latest__body p {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.hp-latest__more {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 820px) {
  .hp-latest__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

.hp-closing {
  position: relative;
  color: var(--white);
  padding: clamp(2.5rem, 4.5vw, 3.5rem) 0;
  overflow: hidden;
}

.hp-closing__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hp-closing__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,37,48,0.92);
}

.hp-closing__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hp-closing__divider {
  width: 1px;
  height: 90px;
  background: linear-gradient(180deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.6;
}

.hp-closing__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel);
  margin-bottom: 0.75rem;
}

.hp-closing__mission h3 {
  color: var(--white);
}

.hp-closing__mission p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--gray-400);
  margin: 0 0 1.25rem;
}

.hp-closing__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--steel);
  text-decoration: none;
  transition: all var(--transition);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.hp-closing__link:hover {
  color: var(--white);
  border-bottom-color: var(--accent);
}

.hp-closing__subscribe h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  margin: 0 0 0.5rem;
}

.hp-closing__subscribe > p {
  font-size: 0.88rem;
  color: var(--gray-400);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.hp-closing__form {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.hp-closing__form input {
  flex: 1;
  padding: 0.78rem 1rem;
  border: 1px solid rgba(184,207,224,0.15);
  border-right: none;
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: rgba(255,255,255,0.05);
  color: var(--white);
  outline: none;
  transition: all var(--transition);
}

.hp-closing__form input::placeholder {
  color: rgba(184,207,224,0.35);
}

.hp-closing__form input:focus {
  background: rgba(255,255,255,0.1);
  border-color: rgba(184,207,224,0.3);
}

.hp-closing__form button {
  padding: 0.78rem 1.75rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.hp-closing__form button:hover {
  background: var(--accent-hover);
}

.hp-closing__fine {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.75rem;
}

/* ========================================
   SCROLL REVEAL
   ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ========================================
   PAGE HEADER (inner pages)
   ======================================== */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: 2rem 0 1.75rem;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.02) 60px,
      rgba(255,255,255,0.02) 62px
    );
  pointer-events: none;
}

.page-header h1 {
  color: var(--white);
  position: relative;
}

.page-header .subtitle {
  color: var(--steel);
  font-size: 1.05rem;
  position: relative;
  margin-top: 0.5rem;
}

.page-content {
  padding: 3rem 0 5rem;
}

.page-content p { margin-bottom: 1.25rem; }
.page-content h2 { margin: 2.5rem 0 0.75rem; }
.page-content h3 { margin: 2rem 0 0.5rem; }
.page-content ul, .page-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; }

/* ========================================
   ACCORDION / FAQ
   ======================================== */
.accordion-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: var(--white);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--navy);
  text-align: left;
  transition: background var(--transition);
}

.accordion-trigger:hover { background: var(--ice); }

.accordion-trigger .arrow {
  font-size: 1.1rem;
  transition: transform var(--transition);
  color: var(--gray-400);
}

.accordion-item.open .accordion-trigger { background: var(--ice); }
.accordion-item.open .accordion-trigger .arrow { transform: rotate(180deg); }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.accordion-item.open .accordion-content { max-height: 600px; }

.accordion-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--gray-500);
  line-height: 1.75;
}

/* ========================================
   BLOG
   ======================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  padding: 2rem 0 4rem;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

/* Blog pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 0 1rem;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}

.pg-btn:hover {
  background: var(--slate);
  border-color: var(--slate);
}

.pg-btn.pg-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pg-btn.pg-disabled:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.pg-info {
  font-size: 0.88rem;
  color: var(--gray-500);
  font-weight: 500;
}

.pg-info strong {
  color: var(--navy);
}

.pg-load-more {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 0.85rem 2rem;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}

.pg-load-more:hover {
  background: var(--slate);
  border-color: var(--slate);
}

@media (max-width: 640px) {
  .blog-pagination {
    gap: 1rem;
  }
  .pg-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  .pg-info {
    font-size: 0.8rem;
  }
}

.blog-card-thumb {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--charcoal);
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card-thumb img[src*="ym-logo"],
.blog-card-thumb img[src*="dm-photo"],
.blog-card-thumb img[src*="oem-logo"] {
  object-fit: contain;
  padding: 1rem;
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.05);
}

.blog-card-body { padding: 1.4rem; }

.blog-card .meta {
  font-size: 0.78rem;
  color: var(--gray-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.blog-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.blog-card h3 a { color: var(--navy); text-decoration: none; }
.blog-card h3 a:hover { color: var(--slate-mid); }

.blog-card .excerpt {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.55;
}

/* Blog Post single */
.post-header {
  background: var(--charcoal);
  color: var(--white);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.post-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 30%, rgba(81,96,121,0.08) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 50px,
      rgba(255,255,255,0.012) 50px,
      rgba(255,255,255,0.012) 51px
    );
  pointer-events: none;
}


.post-meta {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.post-meta .separator { margin: 0 0.5rem; color: var(--gray-300); }

.post-hero-img {
  background: var(--ice);
  padding: 2rem 0 0;
}

.post-hero-img img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  max-height: 420px;
  box-shadow: 0 8px 30px rgba(47,58,74,0.12);
  margin: 0 auto;
  display: block;
}

.post-body {
  padding: 2.5rem 0 2rem;
  background: var(--ice);
  overflow-x: hidden;
}

.post-body a,
.post-body td,
.post-body code {
  word-break: break-word;
  overflow-wrap: break-word;
}

.post-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.post-body > .container {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 2px 12px rgba(47,58,74,0.06);
  border: 1px solid var(--gray-200);
}

.post-body p {
  margin-bottom: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--gray-700);
}

.post-body strong {
  color: var(--navy);
}

.post-body img {
  width: 100%;
  border-radius: var(--radius);
  margin: 2rem 0;
  box-shadow: 0 4px 16px rgba(47,58,74,0.1);
}

/* Evidence grid — small clickable thumbnails for SMS / document screenshots
   used inside investigative posts. Click any thumb to open the full-size
   image in a new tab. Avoids burning vertical space when there are many. */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}
.evidence-thumb {
  display: block;
  position: relative;
  background: var(--ice, #f4f1ea);
  border: 1px solid var(--gray-200, #d8d2bf);
  border-radius: 2px;
  padding: 0.5rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.evidence-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #c0392b);
  box-shadow: 0 8px 20px -4px rgba(192,57,43,0.25);
}
.evidence-thumb img {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 1px;
  box-shadow: none !important;
  display: block;
  background: #fff;
}
.evidence-thumb__caption {
  display: block;
  margin-top: 0.45rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--slate, #516079);
  text-transform: uppercase;
  line-height: 1.4;
}
.evidence-thumb__zoom {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(30,37,48,0.78);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.evidence-thumb:hover .evidence-thumb__zoom { opacity: 1; }
@media (max-width: 600px) {
  .evidence-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

.post-body h2 {
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.post-body h3 {
  margin: 2rem 0 0.5rem;
}

.post-body h4 {
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.post-body ul, .post-body ol {
  margin: 1.25rem 0;
  padding-left: 0;
  list-style: none;
}

.post-body ul li, .post-body ol li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.98rem;
  line-height: 1.75;
}

.post-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.post-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--charcoal);
  color: var(--white);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
}

.post-body blockquote p {
  color: var(--steel);
  margin: 0;
  font-size: 1.02rem;
}

/* Inline CTA banner inside blog posts */
.post-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--accent);
}

.post-cta-banner__text {
  font-size: 0.92rem;
  color: var(--steel);
  line-height: 1.5;
  margin: 0;
}

.post-cta-banner__text strong {
  color: var(--white);
}

.post-cta-banner .btn {
  flex-shrink: 0;
  font-size: 0.82rem;
  padding: 0.6rem 1.25rem;
}

@media (max-width: 640px) {
  .post-cta-banner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

.post-body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(192,57,43,0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition);
}

.post-body a:hover {
  text-decoration-color: var(--accent);
}

/* ========================================
   POST CTA BANNER (below every article)
   ======================================== */

.inline-cta {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-top: 1.5rem;
}

.inline-cta h3 {
  margin-bottom: 0.4rem;
}

.inline-cta p {
  color: var(--gray-500);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.inline-cta .btn {
  margin: 0 0.35rem;
  color: var(--white);
}

.inline-cta .btn-navy {
  color: var(--white);
}

@media (max-width: 500px) {
  .inline-cta .btn {
    display: block;
    margin: 0 auto 0.5rem;
    max-width: 280px;
  }
}

.post-footer {
  padding: 1.5rem 0 3rem;
  background: var(--ice);
}

.post-footer > .container {
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.tag {
  background: var(--ice);
  color: var(--slate);
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--steel-light);
}

.back-link { font-weight: 600; color: var(--slate); }
.back-link:hover { color: var(--navy); }

/* ========================================
   COMMUNITY
   ======================================== */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.city-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.city-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--slate), var(--steel));
  opacity: 0;
  transition: opacity var(--transition);
}

.city-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--steel);
}

.city-card:hover::before { opacity: 1; }

.city-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.city-card .state { color: var(--gray-400); font-size: 0.85rem; margin-bottom: 1rem; font-weight: 500; }
.city-card .btn { font-size: 0.82rem; padding: 0.45rem 1.25rem; }

/* ========================================
   ALERT / INFO
   ======================================== */
.alert-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.alert-box h3 { color: var(--accent); font-size: 1rem; margin-bottom: 0.4rem; font-family: var(--font-body); font-weight: 700; }

.info-card {
  background: var(--ice);
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.info-card h3 { margin-bottom: 0.5rem; }

/* ========================================
   PRINCIPLE ITEMS (Code of Conduct)
   ======================================== */
.principle {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.principle:last-child { border-bottom: none; }
.principle h3 { margin-bottom: 0.5rem; }
.principle p { color: var(--gray-500); }

/* ========================================
   CTA SECTION
   ======================================== */
.cta-section {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-pad) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 50px,
      rgba(255,255,255,0.015) 50px,
      rgba(255,255,255,0.015) 52px
    );
  pointer-events: none;
}

.cta-section h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.cta-section p {
  max-width: 550px;
  margin: 0 auto 2rem;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.7;
  position: relative;
}

/* ========================================
   FORMS
   ======================================== */
.form-group { margin-bottom: 1.15rem; }

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
  color: var(--gray-700);
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--slate-mid); }
.form-group textarea { resize: vertical; min-height: 110px; }

/* ========================================
   BENEFITS
   ======================================== */
.benefits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.benefit-item { display: flex; gap: 0.75rem; align-items: flex-start; }

.benefit-number {
  background: var(--navy);
  color: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.benefit-content h4 { margin-bottom: 0.2rem; }
.benefit-content p { font-size: 0.88rem; color: var(--gray-500); }

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
  padding: 2.5rem 0 0;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--slate), var(--steel), var(--slate));
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }

.footer-readmore {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--steel);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-readmore:hover {
  color: var(--white);
  text-decoration: none;
}

.footer-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
}

.footer-brand-tagline {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}

.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
  font-weight: 700;
}

.footer-col a {
  display: block;
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  padding: 0.25rem 0;
  transition: color var(--transition);
  text-decoration: none;
}

.footer-col a:hover { color: var(--white); text-decoration: none; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  color: rgba(255,255,255,0.45);
  font-size: 1.1rem;
  transition: color var(--transition);
  text-decoration: none;
}

.footer-social a:hover { color: var(--white); text-decoration: none; }

.footer-login {
  color: rgba(255,255,255,0.2);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color var(--transition);
}

.footer-login:hover {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}

/* Copyright + privacy link cluster on the footer bottom row */
.footer-bottom__copy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom__sep {
  color: rgba(255,255,255,0.25);
  letter-spacing: 0;
}
.footer-bottom__link {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom__link:hover {
  color: var(--white);
  text-decoration: none;
}

/* ========================================
   COMING SOON BADGE
   ======================================== */
.coming-soon-badge {
  display: inline-block;
  padding: 0.5rem 1.75rem;
  background: var(--slate);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 50px;
  margin-top: 1.5rem;
}

/* ========================================
   SERVICES GRID (3-col info cards)
   ======================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CITY CARD ALERT VARIANT
   ======================================== */
.city-card--alert {
  border-color: #e8b4b4;
  background: #fef8f8;
}

.city-card--alert::before {
  background: linear-gradient(90deg, var(--accent), #e74c3c);
  opacity: 1;
}

.city-card--alert h3 a { color: var(--accent); }

/* ========================================
   PARTNER FORM ON DARK BG
   ======================================== */
.section--slate .form-group label { color: var(--white); }
.section--slate .form-group input,
.section--slate .form-group textarea {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
}
.section--slate .form-group input::placeholder,
.section--slate .form-group textarea::placeholder {
  color: rgba(255,255,255,0.4);
}
.section--slate .form-group input:focus,
.section--slate .form-group textarea:focus {
  border-color: var(--steel);
  background: rgba(255,255,255,0.15);
}

/* ========================================
   PODCAST SHOWCASE
   ======================================== */
.podcast-showcase {
  text-align: center;
  padding: var(--section-pad) 0;
}

.podcast-showcase img {
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(47,58,74,0.15);
}

.podcast-showcase h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
}

.podcast-showcase .tagline {
  color: var(--gray-500);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* ========================================
   LEGAL PAGES (Terms + Code of Conduct)
   ======================================== */
.legal-body {
  background: var(--ice);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.legal-intro {
  max-width: 740px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700);
  text-align: center;
}

.legal-intro a {
  color: var(--accent);
  font-weight: 600;
}

.legal-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.legal-item {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--gray-100);
}

.legal-item:last-child {
  border-bottom: none;
}

.legal-item__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.legal-item__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: rgba(192,57,43,0.15);
  line-height: 1;
  flex-shrink: 0;
}

.legal-item h2 {
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.3;
}

.legal-item p {
  font-size: 0.92rem;
  color: var(--gray-500);
  line-height: 1.75;
  margin: 0;
}

.legal-item a {
  color: var(--accent);
  font-weight: 600;
}

.legal-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-item ul li {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.7;
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.4rem;
}

.legal-item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

.legal-closing {
  max-width: 740px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--gray-500);
  line-height: 1.75;
}

.legal-closing a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .legal-item {
    padding: 1.25rem 1.25rem;
  }
}

/* ========================================
   AVOIDING SCAMS PAGE
   ======================================== */
.scams-hero {
  background: var(--charcoal);
  padding: 2rem 0 1.75rem;
  position: relative;
  overflow: hidden;
}

.scams-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 85% 40%, rgba(192,57,43,0.06) 0%, transparent 70%),
    repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,0.01) 40px, rgba(255,255,255,0.01) 41px);
  pointer-events: none;
}

.scams-hero__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 120px, rgba(184,207,224,0.1) 120px);
}

.scams-hero__inner {
  position: relative;
  max-width: 620px;
}

.scams-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 2px;
  background: rgba(192,57,43,0.06);
}

.scams-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.scams-hero__sub {
  color: var(--steel);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.7;
  max-width: 480px;
}

/* Warning box */
.scams-warning {
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.scams-warning__box {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  max-width: 740px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-700);
}

.scams-warning__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

/* Shop vs Mobile comparison */
.scams-compare {
  background: var(--white);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.scams-compare__header {
  text-align: center;
  margin-bottom: 2rem;
}

.scams-compare__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate-mid);
  margin-bottom: 0.5rem;
  display: block;
}

.scams-compare__header h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 0.5rem;
}

.scams-compare__sub {
  color: var(--gray-500);
  font-size: 0.95rem;
  max-width: 520px;
  margin: 0 auto;
}

.scams-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

.scams-compare__col {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.scams-compare__col-header {
  padding: 1.25rem 1.5rem;
  background: var(--navy);
}

.scams-compare__col-header h3 {
  color: var(--white);
  font-size: 1.05rem;
  margin: 0;
}

.scams-compare__col--mobile .scams-compare__col-header {
  background: var(--charcoal);
}

.scams-compare__item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
}

.scams-compare__item:last-child {
  border-bottom: none;
}

.scams-compare__item strong {
  display: block;
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.scams-compare__item p {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin: 0;
}

/* Red flags section */
.scams-flags {
  background: var(--ice);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.scams-flags__header {
  text-align: center;
  margin-bottom: 2rem;
}

.scams-flags__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.scams-flags__header h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.scams-flags__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

.scams-flag {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  border: 1px solid var(--gray-200);
  position: relative;
  transition: all 0.35s ease;
}

.scams-flag:hover {
  box-shadow: 0 8px 30px rgba(47,58,74,0.1);
  border-color: var(--steel);
}

.scams-flag__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  color: rgba(192,57,43,0.1);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.scams-flag h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.scams-flag p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 0;
}

/* Credentials section */
.scams-creds {
  background: var(--white);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.scams-creds__header {
  text-align: center;
  margin-bottom: 2rem;
}

.scams-creds__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate-mid);
  margin-bottom: 0.5rem;
  display: block;
}

.scams-creds__header h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.scams-creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

.scams-cred {
  background: var(--ice);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.scams-cred:hover {
  box-shadow: 0 6px 25px rgba(47,58,74,0.08);
}

.scams-cred__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.scams-cred:hover .scams-cred__bar {
  transform: scaleX(1);
}

.scams-cred h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.scams-cred p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 0;
}

/* Action steps section */
.scams-action {
  background: var(--ice);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.scams-action__header {
  text-align: center;
  margin-bottom: 2rem;
}

.scams-action__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.scams-action__header h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 0.5rem;
}

.scams-action__sub {
  color: var(--gray-500);
  font-size: 0.95rem;
  max-width: 520px;
  margin: 0 auto;
}

.scams-action__steps {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scams-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--white);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  transition: all 0.3s ease;
}

.scams-step:hover {
  box-shadow: 0 4px 18px rgba(47,58,74,0.08);
  border-color: var(--steel);
}

.scams-step__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.scams-step h3 {
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.scams-step p {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin: 0;
}

.scams-step a {
  color: var(--accent);
  font-weight: 600;
}

/* Scams CTA */
.scams-cta {
  background: var(--navy);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  position: relative;
  overflow: hidden;
}

.scams-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 38px, rgba(255,255,255,0.015) 38px, rgba(255,255,255,0.015) 40px);
  pointer-events: none;
}

.scams-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.scams-cta__text h2 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.scams-cta__text p {
  color: var(--steel);
  font-size: 0.92rem;
  margin: 0;
}

.scams-cta__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Scams responsive */
@media (max-width: 820px) {
  .scams-compare__grid,
  .scams-flags__grid,
  .scams-creds__grid {
    grid-template-columns: 1fr;
  }
  .scams-cta__inner {
    flex-direction: column;
    text-align: center;
  }
  .scams-cta__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ========================================
   FAQ PAGE
   ======================================== */
.faq-section {
  background: var(--ice);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.faq-group {
  max-width: 860px;
  margin: 0 auto 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group--alt {
  background: var(--white);
}

.faq-group__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  background: var(--navy);
  color: var(--white);
}

.faq-group__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  color: rgba(255,255,255,0.15);
  line-height: 1;
  flex-shrink: 0;
}

.faq-group__header h2 {
  color: var(--white);
  font-size: 1.2rem;
  margin: 0 0 0.1rem;
  line-height: 1.2;
}

.faq-group__header p {
  font-size: 0.8rem;
  color: var(--steel);
  margin: 0;
  font-weight: 500;
}

.faq-group__items {
  padding: 0.5rem 0;
}

.faq-item {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.25s ease;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item:hover {
  background: rgba(238,244,248,0.5);
}

.faq-item h3 {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
  line-height: 1.35;
  position: relative;
  padding-left: 1.25rem;
}

.faq-item h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

.faq-item p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.75;
  margin: 0;
  padding-left: 1.25rem;
}

.faq-item a {
  color: var(--accent);
  font-weight: 600;
}

.faq-item a:hover {
  color: var(--accent-hover);
}

/* FAQ responsive */
@media (max-width: 640px) {
  .faq-group__header {
    padding: 1.25rem 1.25rem;
  }
  .faq-item {
    padding: 1rem 1.25rem;
  }
  .faq-item h3,
  .faq-item p {
    padding-left: 1rem;
  }
}

/* FAQ CTA */
.faq-cta {
  background: var(--navy);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  position: relative;
  overflow: hidden;
}

.faq-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 38px, rgba(255,255,255,0.015) 38px, rgba(255,255,255,0.015) 40px);
  pointer-events: none;
}

.faq-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.faq-cta__text h2 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.faq-cta__text p {
  color: var(--steel);
  font-size: 0.92rem;
  margin: 0;
}

.faq-cta__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .faq-cta__inner {
    flex-direction: column;
    text-align: center;
  }
  .faq-cta__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.6s ease forwards;
}

.fade-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.fade-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.fade-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
.fade-up-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 968px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .benefits-list { grid-template-columns: 1fr; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text p { margin-left: auto; margin-right: auto; }

  .hp-hero__image { max-height: 50vh; }
  .hp-hero__trust { gap: 1rem; }
  .hp-hero__trust-label { font-size: 0.72rem; }
  .hp-offers__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .hp-offers__card:nth-child(1),
  .hp-offers__card:nth-child(2),
  .hp-offers__card:nth-child(3),
  .hp-offers__card:nth-child(4) { grid-column: auto; }
  .hp-offers__card { min-height: 240px; }
  .hp-offers__card--featured h3 { font-size: 1.3rem; }
  .hp-closing__grid { grid-template-columns: 1fr; }
  .hp-closing__divider { width: 60px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
}

@media (max-width: 820px) {
  .nav-links-desktop { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }

  /* ── Mobile drawer — full-screen dossier takeover ── */
  .nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background:
      radial-gradient(900px 600px at 100% 0%, rgba(192,57,43,0.05), transparent 60%),
      radial-gradient(800px 500px at 0% 100%, rgba(47,58,74,0.04), transparent 60%),
      #f7f4ec;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    box-shadow: none;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
  }
  .nav-links::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(47,58,74,0.02) 0 1px, transparent 1px 3px);
    z-index: 0;
  }
  .nav-links > * { position: relative; z-index: 1; }

  .nav-links.open {
    transform: translateX(0);
    box-shadow: none;
  }

  /* Top row: navy classification stripe with inline close button */
  .nav-toprow {
    display: flex;
    align-items: stretch;
    background: var(--navy);
    color: #fff;
  }
  .nav-strip {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.4rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .nav-strip__sep { opacity: 0.5; }

  .nav-close {
    flex-shrink: 0;
    width: 54px;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    position: static;
    transition: background 0.25s, color 0.25s;
  }
  .nav-close:hover {
    background: var(--accent);
    color: #fff;
  }
  .nav-close:active { background: var(--accent-hover); }

  /* Masthead — left-aligned editorial */
  .nav-masthead {
    padding: clamp(2.2rem, 6vw, 3.2rem) clamp(1.4rem, 5vw, 1.9rem) clamp(1.4rem, 3vw, 1.75rem);
  }
  .nav-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--slate-mid);
    font-weight: 700;
    margin-bottom: 0.55rem;
  }
  .nav-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, 3.6rem);
    line-height: 1;
    color: var(--charcoal);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .nav-title-dot { color: var(--accent); }

  /* Nav list — chapter-style index */
  .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: navitem;
    border-top: 1px solid rgba(47,58,74,0.14);
  }
  .nav-list li {
    counter-increment: navitem;
    border-bottom: 1px solid rgba(47,58,74,0.14);
  }

  .nav-links .nav-link {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem clamp(1.4rem, 5vw, 1.9rem);
    background: transparent;
    text-decoration: none;
    color: var(--charcoal);
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    letter-spacing: 0;
    transition: background 0.25s, border-color 0.25s;
  }
  .nav-links .nav-link:hover,
  .nav-links .nav-link:focus,
  .nav-links .nav-link.active {
    background: rgba(192, 57, 43, 0.04);
    border-left-color: var(--accent);
  }

  .nav-link__num {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--slate-mid);
    line-height: 1;
    transition: color 0.25s;
  }
  .nav-link__num::before { content: counter(navitem, decimal-leading-zero); }

  .nav-link__name {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 5.5vw, 1.95rem);
    line-height: 1.1;
    color: var(--charcoal);
    letter-spacing: -0.005em;
    font-weight: 400;
    transition: color 0.25s;
  }
  .nav-link__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s, transform 0.25s;
  }
  .nav-links .nav-link:hover .nav-link__arrow,
  .nav-links .nav-link:focus .nav-link__arrow,
  .nav-links .nav-link.active .nav-link__arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .nav-links .nav-link:hover .nav-link__name,
  .nav-links .nav-link:focus .nav-link__name,
  .nav-links .nav-link.active .nav-link__name { color: var(--accent); }
  .nav-links .nav-link:hover .nav-link__num,
  .nav-links .nav-link:focus .nav-link__num,
  .nav-links .nav-link.active .nav-link__num { color: var(--accent); }

  /* CTA — pinned near bottom */
  .nav-cta-wrap {
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.4rem, 5vw, 1.9rem);
    margin-top: auto;
    background: rgba(47, 58, 74, 0.03);
    border-top: 1px solid rgba(47,58,74,0.14);
  }
  .nav-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.05rem 1.4rem;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1px;
    border: 1px solid var(--navy);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .nav-cta:hover,
  .nav-cta:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    text-decoration: none;
  }
  .nav-cta__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s;
  }
  .nav-cta:hover .nav-cta__arrow,
  .nav-cta:focus .nav-cta__arrow { transform: translateX(3px); }

  /* Tail — tracked uppercase footer line inside the drawer.
     Stacked vertically (one item per row) so the long "Our Legal Rights"
     label never wraps awkwardly and the heterogeneous spans/anchors stay
     vertically aligned. Separators are hidden in the stacked layout —
     vertical gap takes their place. */
  .nav-tail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 1.1rem clamp(1.4rem, 5vw, 1.9rem) clamp(1.4rem, 3.5vw, 1.85rem);
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--slate-mid);
    font-weight: 600;
    line-height: 1.4;
    border-top: 1px solid rgba(47,58,74,0.08);
  }
  /* Reset every child element's metrics so spans and anchors share the
     same baseline and box. Without this the <a> rendered ~14px higher
     than the <span>s on iOS Safari due to default link line-height.
     The :not(.nav-tail__sep) is load-bearing: without it, this rule's
     `display: block` outranks the .nav-tail__sep { display: none } below
     on specificity (1 class + 1 tag > 1 class) and the separators leak
     back into the stacked layout as stray dots. */
  .nav-tail > span:not(.nav-tail__sep),
  .nav-tail > a {
    display: block;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
  }
  .nav-tail a {
    color: var(--slate);
    text-decoration: none;
    transition: color 0.25s;
  }
  .nav-tail a:hover,
  .nav-tail a:focus { color: var(--accent); }
  /* Separators are redundant in the stacked layout — hide them while
     keeping the markup intact in case we want to revert to an inline
     layout at very wide viewports later. */
  .nav-tail__sep { display: none; }

  /* Overlay — invisible behind the full-screen drawer; kept for JS compat */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30,37,48,0.5);
    z-index: 150;
  }
  .nav-overlay.open { display: block; }

  /* Stagger reveal when drawer opens */
  @media (prefers-reduced-motion: no-preference) {
    .nav-links.open .nav-toprow,
    .nav-links.open .nav-masthead,
    .nav-links.open .nav-list li,
    .nav-links.open .nav-cta-wrap,
    .nav-links.open .nav-tail {
      opacity: 0;
      animation: nav-reveal 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    }
    .nav-links.open .nav-toprow { animation-delay: 0.06s; }
    .nav-links.open .nav-masthead { animation-delay: 0.14s; }
    .nav-links.open .nav-list li:nth-child(1) { animation-delay: 0.22s; }
    .nav-links.open .nav-list li:nth-child(2) { animation-delay: 0.28s; }
    .nav-links.open .nav-list li:nth-child(3) { animation-delay: 0.34s; }
    .nav-links.open .nav-list li:nth-child(4) { animation-delay: 0.40s; }
    .nav-links.open .nav-list li:nth-child(5) { animation-delay: 0.46s; }
    .nav-links.open .nav-cta-wrap { animation-delay: 0.40s; }
    .nav-links.open .nav-tail { animation-delay: 0.50s; }
    @keyframes nav-reveal {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }

  .blog-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .trust-stats { flex-direction: column; gap: 1rem; }

  .hero { min-height: 340px; }
  .hero-logo { width: 70px; height: 70px; }

  .hp-hero__image { max-height: none; padding: 1rem 0; background: var(--navy); min-height: 200px; }
  .hp-hero__img { object-fit: cover; height: 100%; width: 100%; }
  .hp-hero__message { padding: 2rem 0 2.5rem; }
  .hp-hero__title { font-size: clamp(1.6rem, 5.5vw, 2rem); }
  .hp-hero__actions { flex-direction: column; align-items: center; }
  .hp-hero__verify-btn { max-width: 100%; }
  .hp-hero__trust { flex-wrap: wrap; gap: 0.75rem; }
  .hp-hero__trust-sep { display: none; }

  .hp-offers__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .hp-offers__card:nth-child(n) { grid-column: auto; min-height: 220px; }
  .hp-offers__card--featured h3 { font-size: 1.25rem; }
  .hp-offers__card--featured .hp-offers__num { font-size: 3rem; }

  .hp-scam__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hp-scam__content { border-left-width: 3px; padding-left: 1.25rem; }
  .hp-scam__actions { flex-direction: column; }
  .hp-closing__form { flex-direction: column; }
  .hp-closing__form input { border-right: 1px solid rgba(184,207,224,0.15); }
  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  .footer-bottom__copy { justify-content: center; }
}

/* Footer bottom — narrow-mobile cleanup so links stack without em-dashes
   stranded at line starts when Privacy Policy + Our Legal Rights both wrap. */
@media (max-width: 480px) {
  .footer-bottom__copy {
    flex-direction: column;
    gap: 0.4rem;
  }
  .footer-bottom__sep { display: none; }
}

/* Tablet: 2-column grids between 640-820px */
@media (min-width: 640px) and (max-width: 820px) {
  .hp-offers__grid { grid-template-columns: 1fr 1fr; }
  .hp-offers__card:nth-child(n) { grid-column: auto; }
  .hp-latest__grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .partner-benefits { grid-template-columns: 1fr 1fr; }
}

/* ========================================
   404 ERROR PAGE
   ======================================== */

.error-page {
  position: relative;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  overflow: hidden;
  padding: var(--section-pad) 0;
}

.error-page__bg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  opacity: 0.04;
}

.error-page__stripe {
  width: 2px;
  height: 100%;
  background: var(--white);
  transform: skewX(-12deg);
}

.error-page__content {
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.error-page__code-wrap {
  margin-bottom: 2rem;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--steel);
  letter-spacing: -0.02em;
  display: block;
  position: relative;
  animation: error-flicker 4s ease-in-out infinite;
}

@keyframes error-flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.6; }
  52% { opacity: 1; }
  78% { opacity: 1; }
  80% { opacity: 0.7; }
  81% { opacity: 1; }
}

.error-page__gauge {
  max-width: 280px;
  margin: 1rem auto 0;
}

.error-page__gauge-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.error-page__gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 8%;
  background: var(--accent);
  border-radius: 3px;
  animation: gauge-drain 2s ease-out 0.5s both;
}

@keyframes gauge-drain {
  from { width: 65%; background: var(--steel); }
  to { width: 8%; background: var(--accent); }
}

.error-page__gauge-label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.error-page__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel);
  margin-bottom: 0.75rem;
  display: block;
}

.error-page__text h1 {
  color: var(--white);
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
}

.error-page__text p {
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto;
}

.error-page__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.error-page__links {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.error-page__links-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.error-page__links-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.error-page__links-list a {
  color: var(--steel);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition);
}

.error-page__links-list a:hover {
  color: var(--white);
}

.error-page__links-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-500);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .error-page { min-height: calc(100vh - 160px); padding-top: 4rem; }
  .error-page__actions { flex-direction: column; align-items: center; }
  .error-page__actions .btn { width: 100%; max-width: 280px; }
}

/* ========================================
   PODCAST PAGE
   ======================================== */

.podcast-preview {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gray-200);
}

.podcast-preview__art img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.podcast-preview__badge {
  display: inline-block;
  background: var(--ice);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  border: 1px solid var(--steel-light);
  margin-bottom: 1rem;
}

.podcast-preview__info h2 {
  margin-bottom: 0.75rem;
}

.podcast-preview__info p {
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.podcast-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.podcast-topic {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}

.podcast-topic:hover {
  box-shadow: var(--shadow-lift);
}

.podcast-topic__icon {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.podcast-topic h3 {
  margin-bottom: 0.5rem;
}

.podcast-topic p {
  color: var(--gray-500);
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .podcast-preview {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .podcast-preview__art {
    max-width: 160px;
    margin: 0 auto;
  }
  .podcast-topics {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TOAST NOTIFICATION
   ======================================== */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.85rem 1.75rem;
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  white-space: nowrap;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================================
   DIRECTORY PAGE
   ======================================== */

.dir-search {
  background: var(--ice);
  padding: 2rem 0;
}

.dir-type-selector {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.dir-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid var(--gray-200);
  border-radius: 50px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition);
}

.dir-type-btn:hover { border-color: var(--slate); color: var(--navy); }
.dir-type-btn--active { border-color: var(--accent); color: var(--accent); background: rgba(192,57,43,0.04); }

.dir-search-bar {
  display: flex;
  gap: 0.75rem;
  max-width: 700px;
  margin: 0 auto;
}

.dir-search-fields {
  display: flex;
  flex: 1;
  gap: 0.5rem;
}

.dir-input, .dir-select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--white);
  flex: 1;
}

.dir-input--zip { max-width: 90px; flex: 0; }
.dir-select { max-width: 130px; flex: 0; appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }

.dir-input:focus, .dir-select:focus { outline: none; border-color: var(--slate); }

.dir-search-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }

.dir-results { padding: 2.5rem 0; min-height: 300px; }

.dir-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.dir-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dir-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.dir-card__photo {
  height: 160px;
  margin: -1.25rem -1.25rem 1rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-200);
}

.dir-card:has(.dir-card__photo) .dir-card__type { top: 0.75rem; right: 0.75rem; }

.dir-card__type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
}

.dir-card__type--shop { background: var(--ice); color: var(--slate); }
.dir-card__type--mobile { background: #fef3c7; color: #92400e; }
.dir-card__type--both { background: #d1fae5; color: #065f46; }

.dir-card__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.dir-card__score {
  width: 48px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  flex-shrink: 0;
  position: relative;
  color: var(--white);
}

.dir-card__score svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dir-card__score span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.dir-card__info { flex: 1; padding-right: 4rem; }
.dir-card__info h3 { font-size: 1rem; margin-bottom: 0.15rem; }

.dir-card__phone {
  font-size: 0.85rem;
  color: var(--slate);
  font-weight: 500;
  display: block;
  margin-top: 0.15rem;
}

.dir-card__location {
  font-size: 0.8rem;
  color: var(--gray-400);
  display: block;
  margin-top: 0.1rem;
}

.dir-card__creds {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
  padding: 0.65rem 0.75rem;
  background: var(--gray-100);
  border-radius: var(--radius);
}

.dir-card__cred {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dir-card__cred--yes { color: #16a34a; }

.dir-card__view {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dir-empty, .dir-no-results {
  text-align: center;
  padding: 3rem 0;
}

.dir-empty__icon {
  color: var(--gray-400);
  margin-bottom: 1rem;
}

.dir-empty h3, .dir-no-results h3 { margin-bottom: 0.5rem; }
.dir-empty p, .dir-no-results p { color: var(--gray-500); max-width: 400px; margin: 0 auto 1.5rem; line-height: 1.6; }

.dir-no-results__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.dir-cta { padding: var(--section-pad) 0; background: var(--ice); }

.dir-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dir-cta__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-200);
  text-align: center;
}

.dir-cta__card h3 { margin-bottom: 0.5rem; }
.dir-cta__card p { color: var(--gray-500); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1.25rem; }

@media (max-width: 700px) {
  .dir-search-bar { flex-direction: column; }
  .dir-search-btn { width: 100%; justify-content: center; }
  .dir-search-fields { flex-wrap: wrap; }
  .dir-search-fields .dir-input:first-child { width: 100%; flex: 1 1 100%; }
  .dir-search-fields .dir-select,
  .dir-search-fields .dir-input--zip { max-width: none; flex: 1; }
  .dir-results__grid { grid-template-columns: repeat(2, 1fr); }
  .dir-cta__grid { grid-template-columns: 1fr; }
  .dir-type-selector { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .dir-type-btn { display: flex; justify-content: center; width: 100%; padding: 0.5rem 1rem; font-size: 0.8rem; }
  .dir-type-btn:first-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .dir-results__grid { grid-template-columns: 1fr; }
  .dir-card__info { padding-right: 2rem; }
}

@media (max-width: 320px) {
  .dir-type-selector { grid-template-columns: 1fr !important; }
}

/* ========================================
   PROVIDER PROFILE PAGE
   ======================================== */

.prov-hero {
  background: var(--charcoal);
  position: relative;
  padding: 2.5rem 0 2rem;
  overflow: hidden;
}

.prov-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192,57,43,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(81,96,121,0.12) 0%, transparent 50%);
  pointer-events: none;
}

.prov-hero__content {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2rem;
}

.prov-hero__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prov-hero__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.prov-hero__photo {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.prov-hero__score-wrap {
  text-align: center;
}

.prov-hero__score {
  width: 72px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  position: relative;
  color: var(--white);
  margin: 0 auto;
}

.prov-hero__score svg.shield-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.prov-hero__score span {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.prov-hero__type {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.65rem;
  border-radius: 50px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.prov-hero__type--shop { background: rgba(184,207,224,0.15); color: var(--steel); }
.prov-hero__type--mobile { background: rgba(254,243,199,0.15); color: #fbbf24; }
.prov-hero__type--both { background: rgba(209,250,229,0.15); color: #34d399; }

.prov-hero h1 {
  color: var(--white);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-bottom: 0.5rem;
}

.prov-hero__meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.prov-hero__loc,
.prov-hero__phone {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--steel);
  font-size: 0.88rem;
}

.prov-hero__phone a { color: var(--steel); text-decoration: none; }
.prov-hero__phone a:hover { color: var(--white); }

.prov-hero__creds {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.prov-hero__grade {
  font-family: var(--font-display);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* Credential Pills */
.prov-cred-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}

.prov-cred-pill__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.prov-cred-pill--yes { color: #34d399; }
.prov-cred-pill--yes .prov-cred-pill__icon { background: rgba(52,211,153,0.15); color: #34d399; }

/* Details Layout */
.prov-details {
  padding: 2rem 0 3rem;
  background: var(--ice);
}

.prov-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

.prov-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.prov-card__title {
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-100);
}

.prov-card__text {
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.7;
}

.prov-card__address {
  margin-top: 0.75rem;
}

/* Contact Card */
.prov-card--contact {
  border-color: var(--navy);
  border-width: 2px;
}

.prov-contact-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-400);
}

.prov-contact-row:last-of-type { border-bottom: none; }

.prov-contact-row a {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.prov-contact-row a:hover { color: var(--accent); }

/* CTA Card */
.prov-card--cta {
  background: var(--charcoal);
  border-color: var(--charcoal);
  text-align: center;
}

.prov-card--cta h3 { color: var(--white); font-size: 1rem; margin-bottom: 0.25rem; }
.prov-card--cta p { color: var(--gray-400); font-size: 0.85rem; }

/* Score Breakdown */
.prov-breakdown { margin-top: 0.25rem; }

.prov-bd-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.prov-bd-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  width: 120px;
  text-align: right;
  flex-shrink: 0;
}

.prov-bd-track {
  flex: 1;
  height: 7px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.prov-bd-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.prov-bd-score {
  font-size: 0.72rem;
  color: var(--gray-500);
  width: 35px;
  font-weight: 600;
}

/* Map */
.prov-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0;
}

/* Back */
.prov-back {
  padding: 1.5rem 0 3rem;
  background: var(--ice);
}

@media (max-width: 820px) {
  .prov-hero__content { flex-direction: column; }
  .prov-hero__right { justify-content: flex-start; }
  .prov-hero__photo { width: 100px; height: 100px; }
  .prov-grid { grid-template-columns: 1fr; }
  .prov-sidebar { order: -1; }
  .prov-bd-label { width: 80px; font-size: 0.68rem; }
}

@media (max-width: 480px) {
  .prov-hero__right { flex-direction: column; align-items: flex-start; }
  .prov-hero__creds { flex-direction: column; gap: 0.4rem; }
}

/* ========================================
   VERIFY A MECHANIC MODAL
   ======================================== */

.verify-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,37,48,0.7);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 1rem;
  overflow-y: auto;
}

.verify-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.verify-modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.verify-overlay.open .verify-modal {
  transform: translateY(0);
}

.verify-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
  z-index: 1;
}

.verify-close:hover { color: var(--navy); }

.verify-hidden { display: none !important; }

.verify-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.verify-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: block;
}

.verify-logo--spin {
  animation: verify-spin 2s linear infinite;
}

@keyframes verify-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.verify-header h2 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.verify-header p {
  color: var(--gray-500);
  font-size: 0.9rem;
  line-height: 1.5;
}

.verify-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.verify-row--3 {
  grid-template-columns: 1.5fr 1fr 1fr;
}

.verify-optional {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.verify-required {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.verify-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin: 1.25rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-100);
}

.verify-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.verify-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--gray-100);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.verify-form select:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(81,96,121,0.1);
  background-color: var(--white);
}

.verify-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.verify-link-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem;
}

.verify-link-row select {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
}

.verify-link-row input {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--gray-100);
  transition: border-color var(--transition);
}

.verify-link-row input:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--white);
}

.verify-add-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0;
  text-align: left;
  transition: color var(--transition);
}

.verify-add-link:hover {
  color: var(--accent-hover);
}

.verify-disclaimer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-top: 0.75rem;
}

/* Loading */
.verify-loading {
  text-align: center;
  padding: 2rem 0;
}

.verify-loading h2 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.verify-progress {
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.verify-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--slate));
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s ease;
}

.verify-status {
  font-size: 0.88rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* Verification Report — Clean Report Card */
.verify-modal--wide { overflow-y: auto; }

/* --- Report Card Styles --- */

/* Search-unavailable notice banner */
.vr-unavail-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  color: #92400e;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
}

/* Header row */
.vr-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.vr-timestamp {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--gray-400);
  white-space: nowrap;
}

/* Business name */
.vr-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0 0 0.15rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.vr-overview {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

/* Score row — horizontal: badge + info */
.vr-score-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gray-100);
}
.vr-badge-shield {
  flex-shrink: 0;
  width: 72px;
  height: 86px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
.vr-shield-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vr-shield-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding-bottom: 4px;
}
.vr-badge-num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
}
.vr-badge-of {
  font-size: 0.55rem;
  opacity: 0.8;
  margin-top: 1px;
}
.vr-score-info { flex: 1; }
.vr-score-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.vr-grade {
  display: inline-block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  font-weight: 700;
}
.vr-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.vr-score-meta {
  font-size: 0.75rem;
  color: var(--gray-400);
}
.vr-score-meta strong { color: var(--navy); }

/* Breakdown grid — 2 columns */
.vr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gray-100);
}
.vr-grid-item {}
.vr-grid-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--gray-400);
  margin-bottom: 0.2rem;
}
.vr-grid-val {
  font-weight: 600;
  color: var(--navy);
}
.vr-grid-track {
  height: 5px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.vr-grid-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sections (findings, red flags) */
.vr-section {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gray-100);
}
.vr-section:last-of-type { border-bottom: none; }
.vr-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.vr-section-title--alert { color: #dc2626; }
.vr-section-title--clear { color: #059669; }
.vr-section--alert {
  background: #fef2f2;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  border-bottom: none;
}
.vr-section--clear {
  background: #f0fdf4;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  border-bottom: none;
}

/* Finding rows */
.vr-f {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.45;
  padding: 0.15rem 0;
}
.vr-f-icon {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.vr-f--pos .vr-f-icon { color: #059669; }
.vr-f--neg .vr-f-icon { color: #dc2626; }
.vr-f--neu .vr-f-icon { color: #9ca3af; }

/* Red flag items */
.vr-alert-item {
  font-size: 0.8rem;
  color: #991b1b;
  line-height: 1.45;
  padding: 0.1rem 0 0.1rem 0.2rem;
}

/* Bottom line */
.vr-bottom {
  margin-bottom: 0.65rem;
}
.vr-bottom-text {
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

/* Footer */
.vr-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--gray-100);
}
.vr-foot-id {
  font-size: 0.65rem;
  color: var(--gray-300);
  font-family: var(--font-body);
}
.vr-foot-disc {
  font-size: 0.6rem;
  color: var(--gray-300);
  text-align: right;
  flex: 1;
}

/* Actions */
.vr-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.65rem;
}
.vr-actions .btn {
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* Email CTA */
.verify-email-cta {
  margin-bottom: 1rem;
}

.verify-email-cta p {
  font-size: 0.88rem;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.verify-email-row {
  display: flex;
  gap: 0.5rem;
}

.verify-email-row input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--gray-100);
}

.verify-email-row input:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--white);
}

.verify-email-row .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
}

.verify-new {
  width: 100%;
  margin-top: 0.5rem;
}

/* Wizard Progress */
.wiz-progress {
  margin-bottom: 1.75rem;
  position: relative;
}

.wiz-progress__track {
  height: 3px;
  background: var(--gray-200);
  border-radius: 2px;
  position: absolute;
  top: 14px;
  left: 40px;
  right: 40px;
}

.wiz-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wiz-progress__steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.wiz-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.wiz-step-dot span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.wiz-step-dot em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  transition: color 0.3s ease;
}

.wiz-step-dot--active span {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(192,57,43,0.3);
}

.wiz-step-dot--active em {
  color: var(--navy);
}

.wiz-step-dot--done span {
  background: var(--navy);
  color: var(--white);
}

.wiz-step-dot--done em {
  color: var(--slate);
}

/* Wizard Pages */
.wiz-page { animation: wizFadeIn 0.3s ease; }
.wiz-page--hidden { display: none !important; }

@keyframes wizFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.wiz-page__header {
  margin-bottom: 1.25rem;
}

.wiz-page__header h2 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.wiz-page__header p {
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wiz-links-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin: 1rem 0 0.5rem;
}

/* Business-type card selector (page 2) — Shop vs Mobile, single-select */
.vm-type-group {
  margin-bottom: 1.25rem;
}
.vm-type-group__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin: 0 0 0.5rem;
}
.vm-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.vm-type-card {
  position: relative;
  display: block;
  cursor: pointer;
  /* Match the input-field border so cards read as defined, clickable elements
     against the cream modal background (was too soft at gray-100). */
  border: 1px solid rgba(47, 58, 74, 0.28);
  background: #fff;
  border-radius: 4px;
  padding: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.vm-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vm-type-card__inner {
  display: block;
  padding: 0.95rem 0.95rem 0.85rem;
}
.vm-type-card__icon {
  display: block;
  color: var(--slate);
  margin-bottom: 0.35rem;
}
.vm-type-card__title {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.005em;
  margin-bottom: 0.15rem;
}
.vm-type-card__sub {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--gray-600, #5a6473);
}
.vm-type-card:hover {
  border-color: var(--slate);
}
.vm-type-card--selected,
.vm-type-card:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.vm-type-card--selected .vm-type-card__icon,
.vm-type-card:has(input[type="radio"]:checked) .vm-type-card__icon {
  color: var(--accent);
}
.vm-type-card input[type="radio"]:focus-visible + .vm-type-card__inner {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 540px) {
  .vm-type-cards { grid-template-columns: 1fr; }
}

/* ─── Attention-grab on modal open ────────────────────────────────────────
   Two one-shot animations layered on the cards: a soft pulsing drop shadow
   (~3s, ~12% opacity) and a counter-phase bounce (~1s, two oscillations).
   Both keyframes start AND end at the resting state, so when the animation
   finishes the cards leave no residual styling — exactly as described. */
@keyframes vm-pulse-attention {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  16%  { box-shadow: 0 4px 22px 4px rgba(192, 57, 43, 0.15); }
  33%  { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  50%  { box-shadow: 0 4px 22px 4px rgba(192, 57, 43, 0.15); }
  66%  { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  83%  { box-shadow: 0 4px 22px 4px rgba(192, 57, 43, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
/* Card 1 leads up while card 2 leads down — counter-phase bounce. */
@keyframes vm-bounce-up-first {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-6px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-4px); }
}
@keyframes vm-bounce-down-first {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(6px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(4px); }
}
.vm-type-card--attention {
  animation: vm-pulse-attention 3s ease-out 1 both;
}
/* Counter-phase bounce — applied via :nth-child to the two cards in the grid */
.vm-type-cards--attention .vm-type-card:nth-child(1) {
  animation: vm-pulse-attention 3s ease-out 1 both, vm-bounce-up-first 1s ease-in-out 1 both;
}
.vm-type-cards--attention .vm-type-card:nth-child(2) {
  animation: vm-pulse-attention 3s ease-out 1 both, vm-bounce-down-first 1s ease-in-out 1 both;
}
/* Respect reduced-motion preference — drop the bounce, keep a faint pulse only. */
@media (prefers-reduced-motion: reduce) {
  .vm-type-cards--attention .vm-type-card:nth-child(1),
  .vm-type-cards--attention .vm-type-card:nth-child(2) {
    animation: vm-pulse-attention 2s ease-out 1 both;
  }
}

/* Locked address fields (city/state on page 2) — visually distinct so user knows they can't edit */
.vm-locked-input,
.vm-locked-input:focus {
  background-color: var(--gray-50, #f6f7f9);
  color: var(--gray-700, #3a4250);
  cursor: not-allowed;
  border-color: var(--gray-100, #e5e7eb);
}
.verify-locked {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600, #5a6473);
  background: var(--gray-50, #f6f7f9);
  border: 1px solid var(--gray-100, #e5e7eb);
  border-radius: 2px;
}

/* Collapsible notes block on page 2 — "Have more info?" toggle reveals a textarea */
.vm-notes__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px dashed var(--gray-200, #d4d8df);
  border-radius: 3px;
  color: var(--slate);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.vm-notes__toggle:hover,
.vm-notes__toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(192, 57, 43, 0.04);
}
.vm-notes__plus {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  width: 14px;
  text-align: center;
  font-weight: 700;
  transition: transform 160ms ease;
}
.vm-notes__toggle[aria-expanded="true"] .vm-notes__plus {
  transform: rotate(45deg);
}
.vm-notes__panel {
  margin-top: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--gray-100, #e5e7eb);
  border-radius: 3px;
  background: var(--gray-50, #f9fafb);
}
.vm-notes__panel[hidden] {
  display: none;
}
.vm-notes__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 0.35rem;
}
.vm-notes__panel textarea {
  width: 100%;
  min-height: 90px;
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--gray-100, #e5e7eb);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  transition: border-color 140ms ease;
}
.vm-notes__panel textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.vm-notes__rules {
  display: block;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.vm-notes__rules strong {
  color: var(--ink);
}
.vm-notes__rules-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.vm-notes__rules-link:hover,
.vm-notes__rules-link:focus {
  color: var(--accent);
  text-decoration: underline;
  filter: brightness(0.9);
}

/* ─── Site-wide soft-failure modal (EMError) ──────────────────────────
   Brand-aligned dossier styling, shown when something unexpectedly fails.
   Replaces raw 500 / stack trace / "fetch failed" experiences. */
.emerror-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1rem;
  animation: emerror-fade-in 180ms ease-out;
}
.emerror-overlay--hidden { display: none; }
@keyframes emerror-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.emerror-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fdfbf6;
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-top: 3px solid var(--accent, #c0392b);
  border-radius: 4px;
  padding: 2rem 1.85rem 1.6rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  animation: emerror-slide-up 220ms ease-out;
}
@keyframes emerror-slide-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.emerror-card__strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body, 'Libre Franklin', system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent, #c0392b);
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed rgba(192, 57, 43, 0.28);
}
.emerror-card__strip-sep { opacity: 0.55; }
.emerror-card__close {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-500, #5a6473);
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 140ms ease, color 140ms ease;
}
.emerror-card__close:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--charcoal, #0f172a);
}
.emerror-card__icon {
  color: var(--accent, #c0392b);
  margin-bottom: 0.6rem;
}
.emerror-card__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--charcoal, #0f172a);
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
}
.emerror-card__msg {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray-700, #3a4250);
  margin: 0 0 1rem;
}
.emerror-card__ref {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  color: var(--gray-500, #5a6473);
  margin: -0.4rem 0 1rem;
}
.emerror-card__ref code {
  font-family: 'Courier New', Courier, monospace;
  background: rgba(15, 23, 42, 0.06);
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  font-size: 0.78rem;
  color: var(--charcoal, #0f172a);
}
.emerror-card__actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.emerror-btn {
  flex: 1 1 auto;
  padding: 0.65rem 0.85rem;
  border-radius: 2px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  border: 1px solid transparent;
}
.emerror-btn--primary {
  background: var(--accent, #c0392b);
  color: #fff;
  border-color: var(--accent, #c0392b);
}
.emerror-btn--primary:hover { filter: brightness(1.05); }
.emerror-btn--primary:disabled {
  background: var(--gray-300, #98a0ad);
  border-color: var(--gray-300, #98a0ad);
  cursor: not-allowed;
}
.emerror-btn--ghost {
  background: transparent;
  color: var(--charcoal, #0f172a);
  border-color: rgba(15, 23, 42, 0.18);
}
.emerror-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.32);
}
.emerror-card__sent {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.7rem;
  background: rgba(34, 139, 86, 0.08);
  border-left: 3px solid #228b56;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-700, #3a4250);
  border-radius: 2px;
}

.wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-100);
}

.wiz-submit {
  display: inline-flex;
  align-items: center;
}

/* Loader Animation */
.wiz-loader {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto 1.25rem;
}

.wiz-loader__ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--gray-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wizSpin 1s linear infinite;
}

@keyframes wizSpin {
  to { transform: rotate(360deg); }
}

.wiz-loader__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

.verify-loading__sub {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 1.5rem;
}

.wiz-captcha {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.wiz-captcha__question {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  padding: 0.75rem 1rem;
  background: var(--gray-100);
}

.wiz-captcha__input {
  width: 70px;
  padding: 0.75rem 0.5rem;
  border: none;
  border-left: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--charcoal);
  background: var(--white);
  flex-shrink: 0;
}

.wiz-captcha__input:focus {
  outline: none;
  background: var(--ice);
}

.verify-terms {
  margin: 1rem 0 0;
}

.verify-terms__label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gray-500);
  cursor: pointer;
}

.verify-terms__label input { accent-color: var(--accent); margin-top: 3px; }
.verify-terms__label a { color: var(--accent); font-weight: 600; }

.verify-modal--wide {
  max-width: 720px;
  max-height: 95vh;
  padding: 1.5rem 2rem;
}

/* Terms Popup */
.verify-terms-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 440px;
  max-height: 75%;
  background: var(--white);
  border-radius: var(--radius-lg);
  z-index: 3;
  overflow-y: auto;
  padding: 1.75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border: 1px solid var(--gray-200);
}

.verify-terms-popup h3 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding-right: 2rem;
}

.verify-terms-popup__body p {
  font-size: 0.82rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.verify-terms-popup__body strong {
  color: var(--navy);
}

.verify-terms-popup .verify-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.verify-terms-back {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.65rem;
  text-align: center;
  font-size: 0.85rem;
}

/* --- Preview Snapshot Card --- */
.preview-snapshot {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  min-height: 60px;
  position: relative;
  overflow: hidden;
}
.preview-snapshot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--slate) 50%, var(--steel) 100%);
}

.preview-snapshot__loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gray-400);
  font-size: 0.82rem;
  padding: 0.25rem 0;
}
.preview-snapshot__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel);
  animation: snapshotPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes snapshotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.preview-snapshot__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.preview-snapshot__row:last-child { border-bottom: none; }

.preview-snapshot__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  font-weight: 600;
}
.preview-snapshot__value {
  font-size: 0.82rem;
  color: var(--steel-light);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-snapshot__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.preview-snapshot__badge--found {
  background: rgba(5,150,105,0.15);
  color: #34d399;
}
.preview-snapshot__badge--none {
  background: rgba(156,163,175,0.12);
  color: var(--gray-400);
}
.preview-snapshot__badge--cached {
  background: rgba(37,99,235,0.15);
  color: #60a5fa;
}

.preview-snapshot__creds {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.preview-snapshot__cred {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #34d399;
  font-weight: 600;
}
.preview-snapshot__cred svg { flex-shrink: 0; }

.preview-snapshot__empty {
  color: var(--gray-400);
  font-size: 0.82rem;
  padding: 0.25rem 0;
}

/* --- What Your Full Report Includes --- */
.preview-includes {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--ice);
  border-radius: var(--radius);
  border: 1px solid var(--steel-light);
}
.preview-includes__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin-bottom: 0.6rem;
}
.preview-includes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
}
.preview-cat {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--navy);
  font-weight: 500;
  padding: 0.2rem 0;
}
.preview-cat__icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--slate);
}

/* --- Email Section on Preview --- */
.preview-email-section {
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  margin-top: 0.25rem;
}

/* --- Success Confirmation --- */
.verify-success {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.verify-success__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #34d399);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--white);
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow: 0 4px 16px rgba(5,150,105,0.25);
}
@keyframes successPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.verify-success h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.verify-success__sub {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.verify-success__sub strong {
  color: var(--navy);
  font-weight: 600;
}
.verify-success__tip {
  background: var(--ice);
  border: 1px solid var(--steel-light);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  text-align: left;
}
.verify-success__tip strong {
  color: var(--navy);
}
.verify-success .btn {
  min-width: 200px;
}

/* --- Email Failed Retry --- */
.verify-email-fail {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.verify-email-fail p {
  font-size: 0.85rem;
  color: #991b1b;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.verify-email-fail .btn {
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
}

@media (max-width: 500px) {
  .verify-row,
  .verify-row--3 {
    grid-template-columns: 1fr;
  }
  .verify-link-row {
    grid-template-columns: 1fr;
  }
  .verify-modal,
  .verify-modal--wide {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius);
    padding: 1.25rem;
  }
  .preview-includes__grid { grid-template-columns: 1fr; }
  .preview-snapshot { padding: 0.85rem 1rem; }
  .preview-snapshot__value { max-width: 55%; }
  .verify-success h2 { font-size: 1.2rem; }
}

/* ========================================
   LOGIN PAGE
   ======================================== */

.login-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ice);
  padding: 3rem 1rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 2.75rem);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--gray-200);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
}

.login-header h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.login-header p {
  color: var(--gray-500);
  font-size: 0.92rem;
}

.login-field {
  margin-bottom: 1.25rem;
}

.login-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--gray-100);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.login-field input:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(81,96,121,0.1);
  background: var(--white);
}

.login-password-wrap {
  position: relative;
}

.login-password-wrap input {
  padding-right: 3rem;
}

.login-toggle-pw {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  padding: 0.25rem;
  transition: color var(--transition);
}

.login-toggle-pw:hover {
  color: var(--navy);
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-500);
  cursor: pointer;
}

.login-remember input {
  accent-color: var(--accent);
}

.login-forgot {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.login-forgot:hover {
  color: var(--accent-hover);
}

.login-submit {
  width: 100%;
  padding: 0.85rem;
  font-size: 0.95rem;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.login-divider span {
  color: var(--gray-400);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.login-alt {
  text-align: center;
}

.login-create {
  font-size: 0.9rem;
  color: var(--gray-500);
  text-decoration: none;
}

.login-create strong {
  color: var(--accent);
}

.login-create:hover strong {
  color: var(--accent-hover);
}

/* Login Modals */

.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,37,48,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 1rem;
}

.login-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.login-modal {
  width: 100%;
  max-width: 420px;
  min-height: 380px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow-lift);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.login-modal-overlay.open .login-modal {
  transform: translateY(0);
}

.login-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}

.login-modal-close:hover {
  color: var(--navy);
}

.login-modal h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.login-modal p {
  color: var(--gray-500);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.login-modal-form .login-field {
  margin-bottom: 1rem;
}

.login-modal-form .login-submit {
  margin-top: 0.5rem;
}

.login-modal--full {
  max-width: 420px;
}

.login-modal--full .login-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-modal--full .login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
}

.login-admin-cog {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-300);
  opacity: 0.35;
  padding: 0.25rem;
  transition: opacity 0.2s;
  z-index: 1;
}

.login-admin-cog:hover {
  opacity: 0.7;
}

.login-modal--full .login-header h2 {
  font-size: 1.35rem;
  margin-bottom: 0.2rem;
}

.login-modal--full .login-header p {
  margin-bottom: 0;
}

/* ========================================
   PARTNERS PAGE
   ======================================== */

.partner-intro p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-700);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.partner-why {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}

.partner-why__text h2 {
  margin-bottom: 1rem;
}

.partner-why__text p {
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.partner-why__stats {
  display: grid;
  gap: 1.25rem;
}

.partner-stat {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-card);
}

.partner-stat__number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.partner-stat__label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.partner-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.partner-benefit {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition), transform var(--transition);
}

.partner-benefit:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.partner-benefit__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ice);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent);
}

.partner-benefit h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.partner-benefit p {
  color: var(--gray-500);
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .partner-why {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .partner-why__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .partner-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .partner-why__stats {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   CODE OF CONDUCT PAGE
   ======================================== */

.coc-intro p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-700);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.coc-intro a {
  color: var(--accent);
  font-weight: 600;
}

.coc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.coc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}

.coc-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.coc-card--accent {
  background: var(--navy);
  border-color: var(--navy);
}

.coc-card--accent h2 {
  color: var(--white);
}

.coc-card--accent .coc-card__number {
  color: var(--accent);
}

.coc-card--accent .coc-card__divider {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.coc-card--accent ul li {
  color: var(--steel);
}

.coc-card--accent ul li::before {
  color: var(--accent);
}

.coc-card--wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 1.5rem;
  align-items: center;
}

.coc-card--wide .coc-card__number {
  grid-row: 1 / 3;
}

.coc-card--wide .coc-card__divider {
  display: none;
}

.coc-card--wide h2 {
  grid-column: 2;
  margin: 0;
}

.coc-card--wide ul {
  grid-column: 2 / 4;
}

.coc-card__number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  color: var(--steel);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.coc-card h2 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.coc-card__divider {
  height: 2px;
  width: 40px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-bottom: 1rem;
}

.coc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.coc-card ul li {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.65;
  padding: 0.35rem 0 0.35rem 1.25rem;
  position: relative;
}

.coc-card ul li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 820px) {
  .coc-grid {
    grid-template-columns: 1fr;
  }
  .coc-card--wide {
    grid-column: span 1;
    display: block;
  }
}

/* ========================================
   TERMS PAGE
   ======================================== */

.terms-highlight {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--white);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-card);
}

.terms-highlight__icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.terms-highlight p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0;
}

.terms-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}

.terms-section:hover {
  box-shadow: var(--shadow-card);
}

.terms-section--final {
  border-color: var(--navy);
}

.terms-section__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.terms-section--final .terms-section__header {
  background: var(--navy);
}

.terms-section--final .terms-section__header h2 {
  color: var(--white);
}

.terms-section--final .terms-section__tag {
  color: var(--steel);
  border-color: var(--slate);
}

.terms-section__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}

.terms-section__header h2 {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

.terms-section__tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  padding: 0.15rem 0.6rem;
  border-radius: 50px;
  display: inline-block;
  margin-top: 0.25rem;
}

.terms-section__body {
  padding: 1.5rem 1.75rem;
}

.terms-section__body p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--gray-500);
  margin: 0;
}

.terms-section__body a {
  color: var(--accent);
  font-weight: 600;
}

.terms-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  text-align: center;
}

.terms-footer p {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 0.25rem;
}

.terms-footer a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 600px) {
  .terms-highlight {
    flex-direction: column;
    gap: 0.75rem;
  }
  .terms-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ========================================
   LOADING DOSSIER — verify-form wait screen
   ======================================== */
.loading-dossier {
  text-align: center;
  padding: 1.5rem 0.5rem 1rem;
  font-family: var(--font-body);
}

.loading-dossier__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.loading-dossier__spinner {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  position: relative;
}
.loading-dossier__spinner svg {
  width: 100%;
  height: 100%;
  animation: ld-spin 6s linear infinite;
}
.loading-dossier__track {
  stroke: rgba(47, 58, 74, 0.12);
}
.loading-dossier__arc {
  stroke: var(--accent);
  stroke-dasharray: 70 200;
  transform-origin: center;
  animation: ld-arc-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.loading-dossier__seal-ring {
  stroke: var(--slate);
  opacity: 0.5;
  /* counter-spins so the seal text and ring stay visually upright */
  transform-origin: center;
  animation: ld-counter-spin 6s linear infinite;
}
.loading-dossier__seal-text {
  fill: var(--navy);
  font-weight: 400;
  /* counter-spin against parent svg rotation */
  transform-origin: center;
  animation: ld-counter-spin 6s linear infinite;
}

@keyframes ld-spin {
  to { transform: rotate(360deg); }
}
@keyframes ld-counter-spin {
  to { transform: rotate(-360deg); }
}
@keyframes ld-arc-spin {
  0%   { stroke-dashoffset: 0;    transform: rotate(0deg); }
  100% { stroke-dashoffset: -270; transform: rotate(360deg); }
}

.loading-dossier__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--charcoal);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.loading-dossier__sub {
  font-size: 0.88rem;
  color: var(--slate-mid);
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

.loading-dossier__bar {
  position: relative;
  height: 4px;
  background: rgba(47, 58, 74, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto 1.75rem;
  max-width: 360px;
}
.loading-dossier__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, #e74c3c 100%);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-dossier__bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: ld-shimmer 1.6s ease-in-out infinite;
}
@keyframes ld-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.loading-dossier__stages {
  list-style: none;
  margin: 0 auto 1.75rem;
  padding: 0;
  text-align: left;
  max-width: 320px;
  font-family: var(--font-body);
}
.loading-stage {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  font-size: 0.88rem;
  color: var(--gray-400);
  transition: color 0.4s ease;
}
.loading-stage__mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-400);
  background: transparent;
  position: relative;
  transition: all 0.4s ease;
  flex-shrink: 0;
}
/* Active stage — the one currently happening */
.loading-stage--active {
  color: var(--charcoal);
  font-weight: 600;
}
.loading-stage--active .loading-stage__mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.18);
  animation: ld-pulse 1.4s ease-in-out infinite;
}
/* Completed stages */
.loading-stage--done {
  color: var(--slate-mid);
}
.loading-stage--done .loading-stage__mark {
  border-color: #047857;
  background: #047857;
}
.loading-stage--done .loading-stage__mark::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 4px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
@keyframes ld-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0.08); }
}

.loading-dossier__hint {
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .loading-dossier__spinner svg,
  .loading-dossier__arc,
  .loading-dossier__seal-ring,
  .loading-dossier__seal-text,
  .loading-dossier__bar-fill::after,
  .loading-stage--active .loading-stage__mark {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .loading-dossier__spinner { width: 76px; height: 76px; margin-bottom: 1.25rem; }
  .loading-dossier__title { font-size: 1.25rem; }
  .loading-dossier__sub { font-size: 0.82rem; margin-bottom: 1.25rem; }
  .loading-dossier__stages { font-size: 0.82rem; }
}

/* ========================================
   VERIFY MODAL — DOSSIER REDESIGN
   Scoped via .verify-modal--dossier so existing modal styles
   remain available as a fallback if needed.
   ======================================== */

/* Backdrop — slightly heavier than default for the document feel */
.verify-overlay:has(.verify-modal--dossier) {
  background: rgba(20, 26, 36, 0.78);
}

/* Modal frame — paper tone, fine border, document shadow */
.verify-modal.verify-modal--dossier {
  max-width: 640px;
  padding: 0;
  background-color: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 30px 80px -20px rgba(20, 26, 36, 0.55),
    0 4px 16px rgba(20, 26, 36, 0.18);
  color: var(--navy);
  overflow-x: hidden;
  overflow-y: auto;  /* allow vertical scrolling — content is taller than viewport */
}

/* Close button — refined, sits over the classification stripe */
.verify-modal--dossier .verify-close {
  top: 0.5rem;
  right: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all var(--transition);
}
.verify-modal--dossier .verify-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Classification stripe */
.verify-modal--dossier .vm-classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.65rem 1.5rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.verify-modal--dossier .vm-classification__sep {
  color: rgba(255, 255, 255, 0.32);
}
.verify-modal--dossier .vm-classification__step {
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* Masthead block */
.verify-modal--dossier .vm-masthead {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: end;
  border-bottom: 1px solid rgba(47, 58, 74, 0.12);
}
.verify-modal--dossier .vm-masthead__main { min-width: 0; }
.verify-modal--dossier .vm-masthead__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.7rem;
  font-family: var(--font-body);
}
.verify-modal--dossier .vm-masthead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.verify-modal--dossier .vm-masthead__sub {
  font-size: 0.85rem;
  color: var(--slate-mid);
  line-height: 1.55;
  margin: 0;
  font-family: var(--font-body);
}
.verify-modal--dossier .vm-masthead__seal {
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  flex-shrink: 0;
  color: var(--slate);
  opacity: 0.7;
  align-self: end;
}
.verify-modal--dossier .vm-masthead__seal svg { width: 100%; height: 100%; display: block; }

/* Hide the original blue-dot wiz-progress — the classification stripe carries the step now */
.verify-modal--dossier .wiz-progress { display: none !important; }

/* Hide masthead + classification on chromeless pages (loading / success / error) */
.verify-modal--dossier.verify-modal--chromeless .vm-masthead,
.verify-modal--dossier.verify-modal--chromeless .vm-classification {
  display: none;
}
.verify-modal--dossier.verify-modal--chromeless .verify-close {
  color: var(--slate-mid);
  top: 0.85rem;
  right: 0.85rem;
}
.verify-modal--dossier.verify-modal--chromeless .verify-close:hover {
  color: var(--charcoal);
  background: rgba(47, 58, 74, 0.08);
}

/* Form body */
.verify-modal--dossier .verify-form,
.verify-modal--dossier #wizLoading,
.verify-modal--dossier #wizReport,
.verify-modal--dossier #wizError {
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2rem);
}

/* Wiz page header — editorial section title */
.verify-modal--dossier .wiz-page__header {
  margin-bottom: 1.5rem;
}
.verify-modal--dossier .wiz-page__header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}
.verify-modal--dossier .wiz-page__roman {
  font-style: italic;
  color: var(--slate-mid);
  font-size: 0.78em;
  flex-shrink: 0;
}
.verify-modal--dossier .wiz-page__header p {
  color: var(--slate-mid);
  font-size: 0.86rem;
  line-height: 1.55;
  font-family: var(--font-body);
}

/* Refined inputs — printed-document feel */
.verify-modal--dossier .login-field {
  margin-bottom: 1rem;
}
.verify-modal--dossier .login-field label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
}
.verify-modal--dossier .verify-optional {
  font-size: 0.62rem;
  color: var(--gray-400);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  margin-left: 0.35rem;
}
.verify-modal--dossier .verify-required {
  font-size: 0.62rem;
  color: var(--accent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  margin-left: 0.35rem;
}
/* Pending state — shown on each field's required/optional slot before a Business Type is chosen */
.verify-modal--dossier .verify-pending {
  font-size: 0.62rem;
  color: var(--gray-400);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  margin-left: 0.35rem;
  opacity: 0.75;
}
/* "Pick a type above to fill out the rest." hint — sits between type cards and the locked fields */
.verify-modal--dossier .vm-pending-hint {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--gray-500, #8a93a3);
  text-align: center;
  padding: 0.45rem 0;
  margin: 0.4rem 0 0.6rem;
  border-top: 1px dashed var(--gray-100, #e5e7eb);
  border-bottom: 1px dashed var(--gray-100, #e5e7eb);
}
/* Disabled inputs on page 1 — visually inert but layout-stable. Browser default
   would gray-out OK, but this gives a more deliberate "locked" feel. */
.verify-modal--dossier .login-field input:disabled,
.verify-modal--dossier .login-field select:disabled {
  background-color: var(--gray-50, #f6f7f9);
  color: var(--gray-400, #98a0ad);
  cursor: not-allowed;
  border-color: var(--gray-100, #e5e7eb);
}
.verify-modal--dossier .wiz-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.verify-modal--dossier .login-field input[type="text"],
.verify-modal--dossier .login-field input[type="tel"],
.verify-modal--dossier .login-field input[type="email"],
.verify-modal--dossier .verify-form select,
.verify-modal--dossier .verify-link-row input,
.verify-modal--dossier .verify-link-row select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--charcoal);
  transition: all var(--transition);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.verify-modal--dossier .login-field input:focus,
.verify-modal--dossier .verify-form select:focus,
.verify-modal--dossier .verify-link-row input:focus,
.verify-modal--dossier .verify-link-row select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.verify-modal--dossier .login-field input::placeholder,
.verify-modal--dossier .verify-link-row input::placeholder {
  color: var(--gray-400);
  font-style: italic;
}

/* Field hint — explains why an optional field improves the report */
.verify-modal--dossier .verify-hint {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--slate-mid);
  line-height: 1.4;
  letter-spacing: 0;
}
.verify-modal--dossier .verify-hint::before {
  content: '↳ ';
  color: var(--gray-400);
  margin-right: 0.15rem;
  font-style: normal;
}

/* Custom select styling — keep the chevron */
.verify-modal--dossier .verify-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23516079' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
  cursor: pointer;
}

/* Verify row — two-up form layout */
.verify-modal--dossier .verify-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.verify-modal--dossier .verify-row--3 {
  grid-template-columns: 1.5fr 1fr 1fr;
}

/* Online presence section */
.verify-modal--dossier .wiz-links-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin: 1.25rem 0 0.45rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(47, 58, 74, 0.1);
}
.verify-modal--dossier .verify-link-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.verify-modal--dossier .verify-link-row select,
.verify-modal--dossier .verify-link-row input {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
}
.verify-modal--dossier .verify-add-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-top: 0.25rem;
  text-align: left;
  transition: color var(--transition);
}
.verify-modal--dossier .verify-add-link:hover { color: var(--accent-hover); }

/* Wizard navigation — stamp-style buttons */
.verify-modal--dossier .wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(47, 58, 74, 0.12);
}
.verify-modal--dossier .wiz-nav .btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 1px;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all var(--transition);
  cursor: pointer;
}
.verify-modal--dossier .wiz-nav .btn-primary,
.verify-modal--dossier .wiz-submit.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.25);
}
.verify-modal--dossier .wiz-nav .btn-primary:hover,
.verify-modal--dossier .wiz-submit.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}
.verify-modal--dossier .wiz-nav .btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border-color: rgba(47, 58, 74, 0.3);
}
.verify-modal--dossier .wiz-nav .btn-outline-dark:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Step 1 alone — push the Next button to the right */
.verify-modal--dossier #wizPage1 .wiz-nav > div:empty {
  display: none;
}
.verify-modal--dossier #wizPage1 .wiz-nav {
  justify-content: flex-end;
}

/* Preliminary findings card — Step 2 snapshot */
.verify-modal--dossier .preview-card {
  margin-bottom: 1.5rem;
}
.verify-modal--dossier .preview-card__heading {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.verify-modal--dossier .preview-card__heading-text {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  flex-shrink: 0;
}
.verify-modal--dossier .preview-card__heading-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 58, 74, 0.22), transparent);
}
.verify-modal--dossier .preview-snapshot {
  background: rgba(47, 58, 74, 0.03);
  border: 1px solid rgba(47, 58, 74, 0.12);
  border-radius: 2px;
  padding: 0.85rem 1rem;
}
.verify-modal--dossier .preview-snapshot__loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--slate-mid);
  font-size: 0.85rem;
  padding: 0.35rem 0;
  font-style: italic;
}
.verify-modal--dossier .preview-snapshot__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: vm-pulse 1.4s ease-in-out infinite;
}
@keyframes vm-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}
.verify-modal--dossier .preview-snapshot__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted rgba(47, 58, 74, 0.18);
  font-size: 0.85rem;
}
.verify-modal--dossier .preview-snapshot__row:last-child { border-bottom: none; }
.verify-modal--dossier .preview-snapshot__label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  flex-shrink: 0;
}
.verify-modal--dossier .preview-snapshot__value {
  font-family: var(--font-display);
  color: var(--charcoal);
  text-align: right;
  font-size: 0.95rem;
}
.verify-modal--dossier .preview-snapshot__badge {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 1px;
  font-family: var(--font-body);
}
.verify-modal--dossier .preview-snapshot__badge--found {
  background: #047857;
  color: #fff;
}
.verify-modal--dossier .preview-snapshot__badge--cached {
  background: var(--accent);
  color: #fff;
}
.verify-modal--dossier .preview-snapshot__badge--none {
  background: rgba(47, 58, 74, 0.1);
  color: var(--slate);
}
.verify-modal--dossier .preview-snapshot__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}
.verify-modal--dossier .preview-snapshot__cred {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(4, 120, 87, 0.1);
  color: #064e3b;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 1px;
}

/* What your full report includes — list */
.verify-modal--dossier .preview-includes {
  margin-bottom: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(47, 58, 74, 0.1);
}
.verify-modal--dossier .preview-includes__label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin-bottom: 0.85rem;
}
.verify-modal--dossier .preview-includes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}
.verify-modal--dossier .preview-cat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--gray-700);
  font-family: var(--font-body);
}
.verify-modal--dossier .preview-cat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  flex-shrink: 0;
}

/* Email + captcha + terms */
.verify-modal--dossier .preview-email-section {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(47, 58, 74, 0.1);
}
.verify-modal--dossier .preview-email-section .login-field label span[style*="accent"] {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-style: normal;
  margin-left: 0.35rem;
}
.verify-modal--dossier .wiz-captcha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  margin: 0 0 1rem;
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  overflow: hidden;
  max-width: none;
  background: #fff;
}
.verify-modal--dossier .wiz-captcha__question {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--charcoal);
  background: rgba(47, 58, 74, 0.04);
  padding: 0.7rem 0.95rem;
  border-right: 1px dotted rgba(47, 58, 74, 0.22);
  text-align: left;
}
.verify-modal--dossier .wiz-captcha__input {
  width: 80px;
  padding: 0.7rem 0.5rem;
  border: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
  color: var(--charcoal);
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.verify-modal--dossier .wiz-captcha__input:focus {
  outline: none;
  background: rgba(192, 57, 43, 0.06);
}

/* Terms checkbox */
.verify-modal--dossier .verify-terms {
  margin: 0;
}
.verify-modal--dossier .verify-terms__label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--slate-mid);
  cursor: pointer;
  line-height: 1.5;
  font-family: var(--font-body);
}
.verify-modal--dossier .verify-terms__label input {
  accent-color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}
.verify-modal--dossier .verify-terms__label a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.3);
  text-underline-offset: 2px;
}
.verify-modal--dossier .verify-terms__label a:hover {
  text-decoration-color: var(--accent);
}

/* Error / Retry page within the dossier */
.verify-modal--dossier #wizError .verify-loading {
  text-align: center;
  padding: 2rem 0 1rem;
}
.verify-modal--dossier #wizError h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.verify-modal--dossier #wizError p {
  font-size: 0.9rem;
  color: var(--slate-mid);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.verify-modal--dossier #wizError .btn-primary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.85rem 1.75rem;
  border-radius: 1px;
  cursor: pointer;
}

/* Success / fallback page (mostly unused, but kept on-brand) */
.verify-modal--dossier .verify-success {
  text-align: center;
}
.verify-modal--dossier .verify-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  color: #047857;
  background: rgba(4, 120, 87, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verify-modal--dossier .verify-success h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.verify-modal--dossier .verify-success__sub {
  font-size: 0.92rem;
  color: var(--slate-mid);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.verify-modal--dossier .verify-success__tip {
  background: rgba(47, 58, 74, 0.04);
  border: 1px solid rgba(47, 58, 74, 0.1);
  border-left: 3px solid var(--steel);
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: var(--slate-mid);
  text-align: left;
  margin-bottom: 1rem;
  border-radius: 1px;
}

/* Terms popup — full-viewport overlay with backdrop, sits ABOVE the modal.
   The OUTER .verify-terms-popup is the dimmed backdrop; the INNER __content
   is the actual paper-tone card. Fixes the previous transparent-text bug. */
/* ========================================
   TERMS OVERLAY — top-level, replaces verify modal while open.
   No nesting. Single clean layer over a dark backdrop.
   ======================================== */

/* Hide the verify modal while terms overlay is open */
.verify-overlay.verify-overlay--hidden-while-terms {
  opacity: 0;
  pointer-events: none;
}

.terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 16, 24, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1.5rem;
  z-index: 10000;
  overflow: hidden;
  animation: terms-fade-in 0.22s ease;
}
.terms-overlay.terms-overlay--hidden { display: none; }

@keyframes terms-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.terms-overlay__card {
  position: relative;
  background-color: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 30px 80px -20px rgba(20, 26, 36, 0.65),
    0 4px 16px rgba(20, 26, 36, 0.25);
  font-family: var(--font-body);
  color: var(--navy);
}

/* Classification stripe + close × — fixed at top */
.terms-overlay__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.65rem 3rem;
}
.terms-overlay__classification {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
.terms-overlay__close {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.4rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  line-height: 1;
  transition: all var(--transition);
}
.terms-overlay__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Title — fixed below the stripe */
.terms-overlay__title-block {
  flex-shrink: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3.5vw, 2rem) 1rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.1);
}
.terms-overlay__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Body — the only scrolling region */
.terms-overlay__body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 0.5rem clamp(1.5rem, 3.5vw, 2rem) 0.75rem;
}

/* Sections inside the body */
.terms-overlay__body .vt-section {
  padding: 1rem 0;
  border-top: 1px solid rgba(47, 58, 74, 0.1);
}
.terms-overlay__body .vt-section:first-child {
  padding-top: 0.5rem;
  border-top: none;
}
.terms-overlay__body .vt-section__title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.55rem;
}
.terms-overlay__body .vt-section__roman {
  font-style: italic;
  color: var(--slate-mid);
  font-size: 0.85em;
  flex-shrink: 0;
}
.terms-overlay__body .vt-section p {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.65;
  margin: 0;
  font-family: var(--font-body);
}

/* CTA footer — fixed at bottom */
.terms-overlay__cta {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.05rem 1.25rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.terms-overlay__cta:hover {
  background: var(--charcoal);
}

/* Mobile: full-bleed */
@media (max-width: 600px) {
  .terms-overlay {
    padding: 0;
  }
  .terms-overlay__card {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

/* Animation: modal slides up subtly when opening, like a folder */
.verify-overlay .verify-modal--dossier {
  transform: translateY(28px) scale(0.985);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.verify-overlay.open .verify-modal--dossier {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .verify-modal.verify-modal--dossier {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .verify-modal--dossier .vm-classification {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    padding: 0.55rem 1rem;
  }
  .verify-modal--dossier .vm-masthead {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1.25rem 1.25rem 1rem;
  }
  .verify-modal--dossier .vm-masthead__seal {
    width: 56px;
    height: 56px;
    align-self: start;
  }
  .verify-modal--dossier .verify-form,
  .verify-modal--dossier #wizLoading,
  .verify-modal--dossier #wizReport,
  .verify-modal--dossier #wizError {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .verify-modal--dossier .verify-row {
    grid-template-columns: 1fr;
  }
  .verify-modal--dossier .verify-row--3 {
    grid-template-columns: 1fr 1fr;
  }
  .verify-modal--dossier .verify-row--3 .login-field:first-child {
    grid-column: 1 / -1;
  }
  .verify-modal--dossier .preview-includes__grid {
    grid-template-columns: 1fr;
  }
  /* Sticky action bar on mobile — Next/Submit always visible at the bottom
     of the modal regardless of how far the user has scrolled. Background
     matches the paper tone with a subtle blur so content fades behind it. */
  .verify-modal--dossier .wiz-nav {
    position: sticky;
    bottom: 0;
    flex-direction: column-reverse;
    align-items: stretch;
    margin-top: 1.5rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: -1.5rem;
    padding: 0.85rem 1.25rem 1rem;
    background: rgba(251, 250, 246, 0.96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid rgba(47, 58, 74, 0.14);
    z-index: 5;
  }
  .verify-modal--dossier .wiz-nav .btn {
    width: 100%;
  }
  .verify-modal--dossier .verify-link-row {
    grid-template-columns: 110px 1fr;
  }
  /* Keep some breathing room above the sticky bar so the last form field
     isn't pinned right against it visually */
  .verify-modal--dossier #wizPage1,
  .verify-modal--dossier #wizPage2 {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   NEWS / BLOG — Editorial Magazine
   Hero stays compact (matches old page-header height). The big visual moves
   live in the featured-article card and the article grid below the fold.
   ========================================================================== */

/* --- Hero (compact!) --- */
.news-dossier-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.news-dossier-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.news-dossier-hero__sep { color: rgba(255, 255, 255, 0.32); }
.news-dossier-hero__masthead {
  padding: 1.5rem 0 1.4rem;
  text-align: left;
}
.news-dossier-hero__eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}
.news-dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.news-dossier-hero__sub {
  font-family: var(--font-body);
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* --- Feed wrapper --- */
.news-feed {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Featured article (the big card) --- */
.news-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-radius: 2px;
  text-decoration: none;
  color: var(--charcoal);
  margin-bottom: 2.5rem;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px -8px rgba(20, 26, 36, 0.18);
}
.news-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(20, 26, 36, 0.28);
}
.news-feature__img {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: var(--navy);
}
.news-feature__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Logo-style images render fully (contained), not cropped by cover */
.news-feature__img img[src*="ym-logo"],
.news-feature__img img[src*="oem-logo"],
.news-feature__img img[src*="dm-photo"] {
  object-fit: contain;
  padding: 1.5rem;
  background: #fff;
}
.news-feature:hover .news-feature__img img { transform: scale(1.04); }
.news-feature__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-feature__classification {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.news-feature__badge {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 1px;
  background: rgba(192, 57, 43, 0.04);
}
.news-feature__featured-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--slate-mid);
}
.news-feature__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.85rem;
}
.news-feature:hover .news-feature__title { color: var(--accent); }
.news-feature__excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0 0 1.1rem;
}
.news-feature__meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
}
.news-feature__sep {
  margin: 0 0.4rem;
  color: var(--gray-400);
}

/* --- Section heading between featured and grid --- */
.news-feed__heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1.5rem 0 1.5rem;
}
.news-feed__heading-text {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  flex-shrink: 0;
}
.news-feed__heading-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 58, 74, 0.22), transparent);
}

/* --- Grid of remaining articles --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.news-card {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.12);
  border-radius: 2px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(20, 26, 36, 0.25);
}
.news-card__link {
  display: block;
  text-decoration: none;
  color: var(--charcoal);
  height: 100%;
}
.news-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}
.news-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Logo-style images render fully (contained), not cropped by cover */
.news-card__thumb img[src*="ym-logo"],
.news-card__thumb img[src*="oem-logo"],
.news-card__thumb img[src*="dm-photo"] {
  object-fit: contain;
  padding: 1rem;
  background: #fff;
}
.news-card:hover .news-card__thumb img { transform: scale(1.04); }
.news-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
}
.news-card__classification {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.news-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
.news-card:hover .news-card__title { color: var(--accent); }
.news-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0 0 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
}
.news-card__sep {
  margin: 0 0.4rem;
  color: var(--gray-400);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .news-feature { grid-template-columns: 1fr; }
  .news-feature__img { min-height: 200px; aspect-ratio: 16/9; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-dossier-hero__masthead { padding: 1.25rem 0 1.15rem; }
}

/* ==========================================================================
   POST DOSSIER — individual article pages
   Adaptive: drop cap is universal (CSS-only, applied to first paragraph).
   Pull quotes / blockquotes / horizontal rules style up nicely if the post
   uses them, but never break a post that doesn't.
   ========================================================================== */

.post-dossier {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Classification banner — top of every post */
.post-dossier__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.7rem 1.5rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.post-dossier__sep { color: rgba(255, 255, 255, 0.34); }

/* Masthead: headline + kicker + byline */
.post-dossier__masthead {
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  text-align: left;
}
.post-dossier__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
.post-dossier__kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.98rem, 1.8vw, 1.2rem);
  color: var(--slate-mid);
  line-height: 1.45;
  margin: 0 0 1.1rem;
  max-width: 62ch;
  text-wrap: pretty;
}
.post-dossier__byline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  padding-top: 1rem;
  border-top: 1px solid rgba(47, 58, 74, 0.14);
}

/* Hero image — print-magazine treatment.
   Soft shadow gives lift, no border. Works automatically across photographs
   AND logo PNGs (which typically come with their own white/padded backdrops
   baked in). The image defines its own edge through depth, not by a hard
   line drawn on top of it. */
.post-dossier__hero-img {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.post-dossier__hero-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),       /* tiny inner highlight */
    0 6px 20px -8px rgba(20, 26, 36, 0.18),   /* the lift */
    0 2px 6px rgba(20, 26, 36, 0.08);         /* the close ground shadow */
}

/* Body — wraps the rendered markdown content. Inherits .post-body styles
   for h2/h3/p/ul/etc., plus dossier additions below. */
.post-dossier__body {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.post-dossier__content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Override the legacy .post-body styling that wrapped content in a white card
   on a blue (--ice) backdrop — that clashes with the warm paper-tone we're
   using everywhere else. Inside the dossier, the paper carries straight through. */
.post-dossier__body.post-dossier__body { background: transparent; padding: 0; }
.post-dossier__content.post-body { background: transparent; padding: 0; overflow-x: visible; }
.post-dossier__body > .container,
.post-dossier__body > .container--narrow {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 3vw, 2rem) 1.5rem clamp(2rem, 4vw, 3rem);
}

/* Pull quotes — editorial callout blocks. Subtle warm-tinted card with
   red border-left accent. The original .post-body blockquote was designed
   for a dark navy fill (white text, steel-blue <p>); on the new paper-tone
   page we override BOTH the outer block AND the inner <p> color so text
   reads as proper dark charcoal instead of inheriting the legacy light blue. */
.post-dossier__content blockquote {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.1rem 1.4rem 1.1rem 1.6rem;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  background: rgba(47, 58, 74, 0.04);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.post-dossier__content blockquote p,
.post-dossier__content blockquote {
  /* explicit override of the legacy --steel color from .post-body blockquote p */
  color: var(--charcoal);
}
.post-dossier__content blockquote p {
  margin: 0 0 0.55rem;
  color: var(--charcoal);
  font-size: inherit;
}
.post-dossier__content blockquote p:last-child { margin-bottom: 0; }
.post-dossier__content blockquote cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
}

/* Section dividers — when posts have markdown horizontal rules */
.post-dossier__content hr {
  border: none;
  text-align: center;
  margin: clamp(2rem, 3.5vw, 2.5rem) 0;
  height: 1rem;
  background: none;
  position: relative;
}
.post-dossier__content hr::before {
  content: '· · ·';
  font-family: var(--font-display);
  color: var(--slate-mid);
  font-size: 1rem;
  letter-spacing: 0.55em;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline links inside body */
.post-dossier__content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition);
}
.post-dossier__content a:hover {
  text-decoration-color: var(--accent);
}

/* Footer / signature block */
.post-dossier__footer {
  border-top: 1px solid rgba(47, 58, 74, 0.12);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  background: rgba(47, 58, 74, 0.025);
}
.post-dossier__signature {
  text-align: center;
  margin-bottom: 1.5rem;
}
.post-dossier__divider {
  font-family: var(--font-display);
  color: var(--slate-mid);
  font-size: 1rem;
  letter-spacing: 0.55em;
  margin-bottom: 0.85rem;
}
.post-dossier__sigtext {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
  margin: 0;
}
.post-dossier__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.post-dossier__tag {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  background: rgba(47, 58, 74, 0.06);
  border: 1px solid rgba(47, 58, 74, 0.12);
  border-radius: 1px;
}

/* Reader Response — plain text, views left / heart right.
   Sits at the bottom of the article body section. */
.post-dossier__response {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 2.5rem 0 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--slate);
}
.post-dossier__views [data-views-count] {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
}
.post-dossier__heart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--slate);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.post-dossier__heart:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
.post-dossier__heart-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
}
.post-dossier__heart-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  fill: transparent;
  transition: fill var(--transition), transform var(--transition);
}
.post-dossier__heart.is-hearted .post-dossier__heart-icon { fill: var(--accent); }
.post-dossier__heart.is-locked { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .post-dossier__heart-icon.is-pop {
    animation: post-heart-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes post-heart-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.32); }
    100% { transform: scale(1); }
  }
}
@media (max-width: 480px) {
  .post-dossier__response { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
}

.post-dossier__back {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  max-width: 260px;
  margin: 0 auto;
  transition: all var(--transition);
}
.post-dossier__back:hover {
  background: var(--accent);
  color: #fff;
}

/* Mobile */
@media (max-width: 600px) {
  .post-dossier__title { font-size: 1.5rem; }
  .post-dossier__content { font-size: 1rem; }
}

/* ==========================================================================
   HOMEPAGE LATEST POSTS — dossier card treatment.
   Same editorial voice as news index cards. Uses cardImage fallback so
   logo-style canonical images don't get cropped here.
   ========================================================================== */
.hp-latest__card {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.12);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.hp-latest__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(20, 26, 36, 0.25);
}
.hp-latest__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}
.hp-latest__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Logo-style images render fully, not cropped */
.hp-latest__thumb img[src*="ym-logo"],
.hp-latest__thumb img[src*="oem-logo"],
.hp-latest__thumb img[src*="dm-photo"],
.hp-latest__thumb img[src*="logo-blue"] {
  object-fit: contain;
  padding: 1rem;
  background: #fff;
}
.hp-latest__card:hover .hp-latest__thumb img { transform: scale(1.04); }

.hp-latest__body {
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hp-latest__classification {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.hp-latest__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-latest__card:hover .hp-latest__title { color: var(--accent); }
.hp-latest__excerpt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0 0 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.hp-latest__meta {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
}
.hp-latest__sep {
  margin: 0 0.4rem;
  color: var(--gray-400);
}

/* ==========================================================================
   FIND A MECHANIC — DIRECTORY DOSSIER
   Same editorial voice as the rest of the site. The JavaScript that renders
   mechanic cards stays untouched — the existing .dir-card class names are
   re-skinned via CSS only. Search functionality is preserved exactly.
   ========================================================================== */

/* --- Hero (compact, mirrors news-dossier-hero) --- */
.dir-dossier-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.dir-dossier-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dir-dossier-hero__sep { color: rgba(255, 255, 255, 0.32); }
.dir-dossier-hero__masthead {
  padding: 1.5rem 0 1.4rem;
}
.dir-dossier-hero__eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}
.dir-dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.dir-dossier-hero__sub {
  font-family: var(--font-body);
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* --- Search section: paper-tone backdrop, refined controls --- */
.dir-search {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(47, 58, 74, 0.1);
}

/* Editorial filter chips */
.dir-search .dir-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}
.dir-search .dir-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 1px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: all var(--transition);
}
.dir-search .dir-type-btn svg {
  width: 14px;
  height: 14px;
}
.dir-search .dir-type-btn:hover {
  border-color: var(--slate);
  color: var(--charcoal);
}
.dir-search .dir-type-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.2);
}

/* Search bar */
.dir-search .dir-search-bar {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  max-width: 720px;
  margin: 0 auto;
}
.dir-search .dir-search-fields {
  display: flex;
  gap: 0.5rem;
  flex: 1;
}
.dir-search .dir-input,
.dir-search .dir-select {
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--charcoal);
  transition: all var(--transition);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  flex: 1;
  min-width: 0;
}
.dir-search .dir-input::placeholder { color: var(--gray-400); font-style: italic; }
.dir-search .dir-input:focus,
.dir-search .dir-select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dir-search .dir-input--zip { max-width: 110px; flex: 0 0 110px; }
.dir-search .dir-select {
  max-width: 130px;
  flex: 0 0 130px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23516079' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
  cursor: pointer;
}
.dir-search .dir-search-btn {
  white-space: nowrap;
  padding: 0.7rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.22);
  transition: all var(--transition);
}
.dir-search .dir-search-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}

/* --- Results section --- */
.dir-results {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.dir-results .dir-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* --- Mechanic result card — dossier treatment --- */
.dir-results .dir-card {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.dir-results .dir-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(20, 26, 36, 0.28);
}
.dir-results .dir-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
}

/* Type label as classification badge */
.dir-results .dir-card__type {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 1px;
  z-index: 2;
  background: var(--navy);
  color: #fff;
}
.dir-results .dir-card:has(.dir-card__photo) .dir-card__type {
  top: 0.85rem;
  right: 0.85rem;
}
.dir-results .dir-card__type--shop { background: var(--navy); color: #fff; }
.dir-results .dir-card__type--mobile { background: #b45309; color: #fff; }
.dir-results .dir-card__type--both { background: #047857; color: #fff; }

/* Header: score shield + business info */
.dir-results .dir-card__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.25rem 0.75rem;
  border-bottom: 1px dotted rgba(47, 58, 74, 0.18);
}
.dir-results .dir-card__score {
  position: relative;
  width: 52px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.dir-results .dir-card__score svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dir-results .dir-card__score span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: #fff;
  padding-bottom: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dir-results .dir-card__info {
  flex: 1;
  padding-right: 0;
  min-width: 0;
}
.dir-results .dir-card__info h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}
.dir-results .dir-card__phone {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.dir-results .dir-card__location {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Credentials as stamp-style chips */
.dir-results .dir-card__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1.25rem;
  background: rgba(47, 58, 74, 0.025);
}
.dir-results .dir-card__cred {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 1px;
  background: rgba(47, 58, 74, 0.06);
  color: var(--slate);
  border: 1px solid rgba(47, 58, 74, 0.1);
}
.dir-results .dir-card__cred--yes {
  background: rgba(4, 120, 87, 0.08);
  color: #047857;
  border-color: rgba(4, 120, 87, 0.25);
}

/* View Profile CTA */
.dir-results .dir-card__view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(47, 58, 74, 0.1);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  transition: background var(--transition), color var(--transition);
}
.dir-results .dir-card:hover .dir-card__view {
  background: var(--accent);
  color: #fff;
}

/* --- Empty / no-results states — editorial typography --- */
.dir-results .dir-empty,
.dir-results .dir-no-results {
  text-align: center;
  padding: 2.5rem 1rem;
}
.dir-results .dir-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  color: var(--slate);
  opacity: 0.55;
}
.dir-results .dir-empty h3,
.dir-results .dir-no-results h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--charcoal);
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
}
.dir-results .dir-empty p,
.dir-results .dir-no-results p {
  font-family: var(--font-body);
  color: var(--slate-mid);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto 1.5rem;
}
.dir-results .dir-no-results__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.dir-results .dir-no-results__actions .btn {
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 1px;
}

/* --- Bottom CTA section — paper-card editorial treatment --- */
.dir-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
}
.dir-cta .dir-cta__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.dir-cta .dir-cta__card {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 24px -10px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.dir-cta .dir-cta__card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.85rem;
}
.dir-cta .dir-cta__card p {
  font-family: var(--font-body);
  color: var(--gray-700);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.dir-cta .dir-cta__card .btn {
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition);
}
.dir-cta .dir-cta__card .btn:hover { transform: translateY(-1px); }

/* --- Mobile responsive --- */
@media (max-width: 700px) {
  .dir-search .dir-search-bar { flex-direction: column; }
  .dir-search .dir-search-fields { flex-wrap: wrap; }
  .dir-search .dir-input--zip,
  .dir-search .dir-select { flex: 1 1 calc(50% - 0.25rem); max-width: none; }
  .dir-results .dir-results__grid { grid-template-columns: 1fr; }
  .dir-cta .dir-cta__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ — DOSSIER TREATMENT
   Three numbered groups (§ I., § II., § III.) with editorial Q&A items.
   No accordion — every question stays expanded so the page is skim-friendly
   and SEO-optimal.
   ========================================================================== */

/* --- Hero (compact, mirrors other dossier heroes) --- */
.faq-dossier-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.faq-dossier-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.faq-dossier-hero__sep { color: rgba(255, 255, 255, 0.32); }
.faq-dossier-hero__masthead {
  padding: 1.5rem 0 1.4rem;
}
.faq-dossier-hero__eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}
.faq-dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.faq-dossier-hero__sub {
  font-family: var(--font-body);
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* --- Body wrapper --- */
.faq-dossier {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
}

/* --- Group block --- */
.faq-dossier__group {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.faq-dossier__group:last-of-type { margin-bottom: 0; }

/* Group header: Roman numeral + title + subtitle */
.faq-dossier__group-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.14);
}
.faq-dossier__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--slate-mid);
  flex-shrink: 0;
  line-height: 1;
}
.faq-dossier__group-title h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 0.35rem;
}
.faq-dossier__group-title p {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0;
}

/* --- Q&A items --- */
.faq-dossier__items {
  margin-left: 0;
}
.faq-dossier__item {
  padding: 1.1rem 0;
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.faq-dossier__item:first-child { border-top: none; padding-top: 0.5rem; }
.faq-dossier__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}
.faq-dossier__item p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-700);
  margin: 0;
}
.faq-dossier__item p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition);
}
.faq-dossier__item p a:hover { text-decoration-color: var(--accent); }

/* --- Bottom CTA — paper card on navy backdrop --- */
.faq-dossier-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
}
.faq-dossier-cta__card {
  max-width: 800px;
  margin: 0 auto;
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.faq-dossier-cta__text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.faq-dossier-cta__text p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.faq-dossier-cta__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.faq-dossier-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 1px;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.faq-dossier-cta__btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.22);
}
.faq-dossier-cta__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}
.faq-dossier-cta__btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.faq-dossier-cta__btn--secondary:hover {
  background: var(--navy);
  color: #fff;
}
.faq-dossier-cta__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.faq-dossier-cta__btn:hover .faq-dossier-cta__arrow { transform: translateX(3px); }

/* --- Mobile responsive --- */
@media (max-width: 700px) {
  .faq-dossier__group-header { gap: 0.75rem; flex-wrap: wrap; }
  .faq-dossier-cta__card { grid-template-columns: 1fr; text-align: center; }
  .faq-dossier-cta__text p { margin-left: auto; margin-right: auto; }
  .faq-dossier-cta__actions { justify-content: center; }
}

/* ==========================================================================
   AVOIDING SCAMS — DOSSIER CONSUMER PROTECTION GUIDE
   Reads as a serious institutional guide. Roman-numeraled sections.
   "Cardinal Rule" advisory stamp at the top. Editorial numbered lists.
   ========================================================================== */

/* --- Hero --- */
.scams-dossier-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.scams-dossier-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.scams-dossier-hero__sep { color: rgba(255, 255, 255, 0.32); }
.scams-dossier-hero__masthead {
  padding: 1.5rem 0 1.4rem;
}
.scams-dossier-hero__eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}
.scams-dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.scams-dossier-hero__sub {
  font-family: var(--font-body);
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* --- Body wrapper --- */
.scams-dossier-body {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
}

/* --- Cardinal Rule advisory callout --- */
.scams-advisory {
  position: relative;
  background: linear-gradient(180deg, #fff5f4 0%, #fef0ef 100%);
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 1.4rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  box-shadow: 0 2px 12px rgba(192, 57, 43, 0.08);
}
.scams-advisory__stamp {
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 1px;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.32);
}
.scams-advisory__text {
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: #7f1d1d;
}
.scams-advisory__text strong {
  color: #581015;
  font-weight: 700;
}

/* --- Section blocks (§ I., § II., § III., § IV.) --- */
.scams-section {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.scams-section:last-of-type { margin-bottom: 0; }

.scams-section__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.14);
}
.scams-section__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--slate-mid);
  flex-shrink: 0;
  line-height: 1;
}
.scams-section__title-block {
  flex: 1;
  min-width: 0;
}
.scams-section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.scams-section__title-block h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.45rem;
}
.scams-section__sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--slate-mid);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

/* --- §I. Compare grid (Shop vs Mobile) --- */
.scams-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.scams-compare-col {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-radius: 2px;
  padding: 1.25rem 1.4rem 1.1rem;
}
.scams-compare-col__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.12);
}
.scams-compare-col__item {
  padding: 0.85rem 0;
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.scams-compare-col__item:first-of-type { border-top: none; padding-top: 0.25rem; }
.scams-compare-col__item strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--charcoal);
  margin-bottom: 0.3rem;
}
.scams-compare-col__item p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gray-700);
  margin: 0;
}

/* --- §II. Numbered red-flags list --- */
.scams-flags-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scams-flag-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.scams-flag-item:first-child { border-top: none; padding-top: 0.5rem; }
.scams-flag-item__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.85rem;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}
.scams-flag-item__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}
.scams-flag-item__body p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* --- §III. Credentials grid (3 cards) --- */
.scams-creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.scams-cred-card {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-radius: 2px;
  padding: 1.5rem 1.4rem 1.4rem;
  position: relative;
}
.scams-cred-card__seal {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--slate-mid);
  display: block;
  margin-bottom: 0.55rem;
}
.scams-cred-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.scams-cred-card p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
}

/* --- §IV. Action steps (numbered procedure) --- */
.scams-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scams-step-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.scams-step-item:first-child { border-top: none; padding-top: 0.5rem; }
.scams-step-item__num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-variant-numeric: lining-nums;
}
.scams-step-item__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}
.scams-step-item__body p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* --- Bottom CTA — paper card on navy backdrop --- */
.scams-dossier-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
}
.scams-dossier-cta__card {
  max-width: 800px;
  margin: 0 auto;
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.4);
  /* With 3 buttons, the side-by-side grid was guaranteed to crush the text
     column. Stack vertically — text on top, buttons row below — and center.
     Predictable at every viewport width. */
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: center;
  align-items: center;
}
.scams-dossier-cta__text { width: 100%; max-width: 56ch; }
.scams-dossier-cta__text p { margin-left: auto; margin-right: auto; }
.scams-dossier-cta__actions {
  width: 100%;
  justify-content: center;
}
.scams-dossier-cta__text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.scams-dossier-cta__text p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.scams-dossier-cta__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.scams-dossier-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 1px;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.scams-dossier-cta__btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.22);
}
.scams-dossier-cta__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}
.scams-dossier-cta__btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.scams-dossier-cta__btn--secondary:hover {
  background: var(--navy);
  color: #fff;
}
.scams-dossier-cta__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.scams-dossier-cta__btn:hover .scams-dossier-cta__arrow { transform: translateX(3px); }

/* --- Mobile responsive --- */
@media (max-width: 800px) {
  .scams-compare-grid { grid-template-columns: 1fr; }
  .scams-creds-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .scams-section__header { gap: 0.75rem; flex-wrap: wrap; }
  .scams-flag-item { grid-template-columns: auto 1fr; gap: 1rem; }
  .scams-flag-item__num { font-size: 1.5rem; }
  .scams-step-item { gap: 1rem; }
  /* On small screens, also let the buttons fill width for easier tapping */
  .scams-dossier-cta__btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   LEGAL DOSSIER — shared by Code of Conduct + Terms of Use
   Reads as printed institutional documents — bylaws, charter, regulations.
   Both pages use identical visual treatment for consistency.
   ========================================================================== */

/* --- Hero --- */
.legal-dossier-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.legal-dossier-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.legal-dossier-hero__sep { color: rgba(255, 255, 255, 0.32); }
.legal-dossier-hero__masthead {
  padding: 1.5rem 0 1.4rem;
}
.legal-dossier-hero__eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}
.legal-dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.legal-dossier-hero__sub {
  font-family: var(--font-body);
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* --- Body wrapper --- */
.legal-dossier {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
}

/* --- Intro paragraph (Code of Conduct) --- */
.legal-dossier__intro {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0 0 1.5rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.14);
}
.legal-dossier__intro p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  color: var(--slate-mid);
  margin: 0;
  max-width: 62ch;
}
.legal-dossier__intro a {
  color: var(--accent);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
}

/* --- Executive Summary advisory (Terms) --- */
.legal-dossier__advisory {
  position: relative;
  background: linear-gradient(180deg, #fff5f4 0%, #fef0ef 100%);
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 1.4rem;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  box-shadow: 0 2px 12px rgba(192, 57, 43, 0.08);
}
.legal-dossier__advisory-stamp {
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 1px;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.32);
}
.legal-dossier__advisory-text {
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: #7f1d1d;
}
.legal-dossier__advisory-text strong {
  color: #581015;
  font-weight: 700;
}

/* --- Article (a numbered section) --- */
.legal-dossier__article {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(47, 58, 74, 0.1);
}
.legal-dossier__article:last-of-type {
  border-bottom: none;
  padding-bottom: 0.5rem;
}

.legal-dossier__article-header {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.legal-dossier__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: var(--slate-mid);
  flex-shrink: 0;
  line-height: 1;
}
.legal-dossier__article-title {
  flex: 1;
  min-width: 0;
}
.legal-dossier__article-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.legal-dossier__article-title h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

.legal-dossier__article-body {
  padding-left: 0;
}
.legal-dossier__article-body p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 0.85rem;
  max-width: 64ch;
}
.legal-dossier__article-body p:last-child { margin-bottom: 0; }

.legal-dossier__article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition);
}
.legal-dossier__article-body a:hover { text-decoration-color: var(--accent); }

.legal-dossier__article-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 64ch;
}
.legal-dossier__article-body ul li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-700);
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.legal-dossier__article-body ul li:first-child { border-top: none; padding-top: 0.25rem; }
.legal-dossier__article-body ul li::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 1.1rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.legal-dossier__article-body ul li:first-child::before { top: 0.85rem; }

/* --- Signature block --- */
.legal-dossier__signature {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.85rem;
  border-top: 1px solid rgba(47, 58, 74, 0.14);
}
.legal-dossier__signature-divider {
  font-family: var(--font-display);
  color: var(--slate-mid);
  font-size: 1rem;
  letter-spacing: 0.55em;
  margin-bottom: 0.85rem;
}
.legal-dossier__signature-text {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--slate);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
}
.legal-dossier__signature-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--slate-mid);
  margin: 0;
  line-height: 1.55;
}
.legal-dossier__signature-meta a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
}

/* --- Bottom CTA — paper card on navy backdrop --- */
.legal-dossier-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
}
.legal-dossier-cta__card {
  max-width: 800px;
  margin: 0 auto;
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.legal-dossier-cta__text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.legal-dossier-cta__text p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.legal-dossier-cta__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.legal-dossier-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 1px;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.legal-dossier-cta__btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.22);
}
.legal-dossier-cta__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}
.legal-dossier-cta__btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.legal-dossier-cta__btn--secondary:hover {
  background: var(--navy);
  color: #fff;
}
.legal-dossier-cta__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.legal-dossier-cta__btn:hover .legal-dossier-cta__arrow { transform: translateX(3px); }

/* --- Mobile responsive --- */
@media (max-width: 700px) {
  .legal-dossier__article-header { gap: 0.75rem; flex-wrap: wrap; }
  .legal-dossier-cta__card { grid-template-columns: 1fr; text-align: center; }
  .legal-dossier-cta__text p { margin-left: auto; margin-right: auto; }
  .legal-dossier-cta__actions { justify-content: center; }
}

/* ==========================================================================
   404 — NOT FOUND DOSSIER
   Treat the missing page as a missing case file. Keeps the existing
   automotive personality (Wrong Turn / Health Check) but renders it as a
   forensic dossier item.
   ========================================================================== */

/* ─── 404 page (Case File 404) ─────────────────────────────────────────────
   Brand-aligned editorial layout. Big "404" mark in a horizontal rule, then
   three "Recommended Routes" cards that match the homepage Departments
   aesthetic — get the user moving toward a high-intent flow instead of
   leaving them stranded with two generic buttons. */
.not-found-dossier {
  min-height: calc(100vh - 68px - 280px);  /* viewport minus header and footer-ish */
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  display: flex;
  flex-direction: column;
}

.not-found-dossier__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.65rem 1.5rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.not-found-dossier__sep { color: rgba(255, 255, 255, 0.32); }
.not-found-dossier__status { color: var(--accent); }

.not-found-dossier__shell {
  margin: clamp(2rem, 5vw, 3.5rem) auto;
}

/* Masthead — horizontal "STATUS · 404 · NOT IN OUR RECORDS" rule, then title + sub */
.not-found-dossier__masthead {
  text-align: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.not-found-dossier__code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  flex-wrap: nowrap;
}
.not-found-dossier__code-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.not-found-dossier__code-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(47, 58, 74, 0.22);
  max-width: 80px;
}
.not-found-dossier__code {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 0.85;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  flex: 0 0 auto;
}
.not-found-dossier__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 auto 0.85rem;
  text-wrap: balance;
  max-width: 22ch;
}
.not-found-dossier__sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  color: var(--slate-mid);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Routes section — heading + 3-card grid */
.not-found-dossier__routes {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.not-found-dossier__routes-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.not-found-dossier__routes-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  flex: 0 0 auto;
}
.not-found-dossier__routes-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(47, 58, 74, 0.18);
}
.not-found-dossier__routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .not-found-dossier__routes-grid { grid-template-columns: 1fr; }
}

/* Individual route card */
.not-found-dossier__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  padding: 1.2rem 1.25rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.not-found-dossier__card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px -12px rgba(20, 26, 36, 0.22), inset 0 0 0 1px rgba(192, 57, 43, 0.18);
  transform: translateY(-2px);
}
.not-found-dossier__card--featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(192, 57, 43, 0.04) 0%, #ffffff 60%);
}
.not-found-dossier__card-classification {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.not-found-dossier__card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0 0 0.45rem;
}
.not-found-dossier__card-body {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--slate-mid);
  margin: 0 0 0.85rem;
  flex: 1 1 auto;
}
.not-found-dossier__card-cta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.not-found-dossier__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.not-found-dossier__card:hover .not-found-dossier__arrow { transform: translateX(4px); }

/* Secondary links — clean inline row at the bottom, no footer treatment */
.not-found-dossier__secondary {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px dashed rgba(47, 58, 74, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.not-found-dossier__secondary-label {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin-right: 0.3rem;
}
.not-found-dossier__secondary a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
  font-weight: 600;
  transition: text-decoration-color var(--transition);
}
.not-found-dossier__secondary a:hover { text-decoration-color: var(--accent); }
.not-found-dossier__secondary-sep { color: var(--gray-400); }

/* Mobile */
@media (max-width: 600px) {
  .not-found-dossier__report-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .not-found-dossier__report-value { font-size: 0.9rem; }
  .not-found-dossier__actions { flex-direction: column; align-items: stretch; }
  .not-found-dossier__btn { justify-content: center; }
}

/* ==========================================================================
   HOMEPAGE — DOSSIER VOICE
   Preserves the existing photographic hero + card rhythm. Upgrades typography,
   adds classification stripe, and matches the rest of the site's editorial
   vocabulary without flattening the homepage's visual texture.
   ========================================================================== */

/* --- HERO — Magazine spread: text left, photo right --- */
.hp-cinema-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
}

/* Top classification stripe */
.hp-cinema-hero__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.6rem 1.5rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hp-cinema-hero__sep { color: rgba(255, 255, 255, 0.32); }
.hp-cinema-hero__est { color: var(--accent); }

/* Single navy band — text on left, photo "floating" on right with editorial caption */
.hp-cinema-hero__band {
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.hp-cinema-hero__split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Photo — framed like a printed photograph on the right */
.hp-cinema-hero__figure {
  margin: 0;
  position: relative;
}
.hp-cinema-hero__figure-frame {
  position: relative;
  background: #fff;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 36px -12px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.22);
  transform: rotate(-0.4deg);
}
.hp-cinema-hero__figure-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Editorial caption under the photo */
.hp-cinema-hero__figcaption {
  margin-top: 1rem;
  text-align: center;
}
.hp-cinema-hero__figcaption-mark {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.hp-cinema-hero__figcaption-text {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--steel);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

/* URL eyebrow — small red caps above the headline */
.hp-cinema-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Headline */
.hp-cinema-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.hp-cinema-hero__title em {
  font-style: italic;
  color: var(--steel);
  font-weight: 400;
}

.hp-cinema-hero__rule {
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin: 0 0 1.25rem;
}

.hp-cinema-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--steel);
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Verify CTA — the star button */
.hp-cinema-hero__verify {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.4rem 1rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(192, 57, 43, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all var(--transition);
  max-width: 480px;
}
.hp-cinema-hero__verify:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(192, 57, 43, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
}
.hp-cinema-hero__verify-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  flex-shrink: 0;
}
.hp-cinema-hero__verify-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.hp-cinema-hero__verify-text strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hp-cinema-hero__verify-text span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.hp-cinema-hero__verify-arrow {
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  transition: transform var(--transition);
}
.hp-cinema-hero__verify:hover .hp-cinema-hero__verify-arrow { transform: translateX(3px); }

/* Shimmer sweep across the button */
.hp-cinema-hero__verify-shimmer {
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 0;
  animation: hp-cinema-shimmer 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hp-cinema-shimmer {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-cinema-hero__verify-shimmer { animation: none; opacity: 0; }
}

/* Right column wrapper — figure + Report a Scam button stacked */
.hp-cinema-hero__rightcol {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;        /* tight gap = "slide the image up a cunt hair" */
}

/* Report a Scam — paired secondary CTA. Navy fill so it doesn't compete with
   the red Verify primary, but with a red alarm icon so it still reads as
   urgent / formal-investigation action. Same proportions as Verify so they
   feel like siblings. */
.hp-cinema-hero__report {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.4rem 0.95rem 1.1rem;
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.32);
  border-left: 3px solid var(--accent);
  border-radius: 1px;
  text-decoration: none;
  transition: all var(--transition);
  width: 100%;
  max-width: 100%;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hp-cinema-hero__report:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  border-left-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  color: #fff;
}
.hp-cinema-hero__report-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(192, 57, 43, 0.18);
  color: var(--accent);
  border: 1px solid rgba(192, 57, 43, 0.4);
  border-radius: 1px;
  flex-shrink: 0;
  transition: all var(--transition);
}
.hp-cinema-hero__report:hover .hp-cinema-hero__report-icon {
  background: rgba(192, 57, 43, 0.28);
  border-color: var(--accent);
}
.hp-cinema-hero__report-text {
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.hp-cinema-hero__report-text strong {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.hp-cinema-hero__report-text span {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.005em;
}
.hp-cinema-hero__report-arrow {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.6);
  transition: transform var(--transition), color var(--transition);
}
.hp-cinema-hero__report:hover .hp-cinema-hero__report-arrow {
  transform: translateX(3px);
  color: #fff;
}

/* Mobile: same width treatment as the verify button */
@media (max-width: 700px) {
  .hp-cinema-hero__rightcol { gap: 0.7rem; }
  .hp-cinema-hero__report { padding: 0.85rem 1rem; }
  .hp-cinema-hero__report-text strong { font-size: 0.85rem; }
}

/* Trust badges */
.hp-cinema-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
.hp-cinema-hero__trust-item { color: var(--steel); }
.hp-cinema-hero__trust-sep { color: rgba(255, 255, 255, 0.3); }


/* --- OFFERS / DEPARTMENTS --- */
.hp-dossier-offers {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.hp-dossier-offers__heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hp-dossier-offers__heading-text {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  flex-shrink: 0;
}
.hp-dossier-offers__heading-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 58, 74, 0.22), transparent);
}
.hp-dossier-offers__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1.25rem;
}

.hp-dossier-card {
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.14);
  border-radius: 2px;
  text-decoration: none;
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.hp-dossier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(20, 26, 36, 0.28);
}
.hp-dossier-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
  flex-shrink: 0;
}
.hp-dossier-card--featured .hp-dossier-card__img { aspect-ratio: 16 / 9; }
.hp-dossier-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hp-dossier-card__classification {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.hp-dossier-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.55rem;
}
.hp-dossier-card--featured h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.hp-dossier-card:hover h3 { color: var(--accent); }
.hp-dossier-card p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0 0 0.85rem;
  flex: 1;
}
.hp-dossier-card__cta {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  display: inline-block;
  transition: transform var(--transition);
}
.hp-dossier-card:hover .hp-dossier-card__cta { transform: translateX(3px); }

/* --- SCAM ALERT --- */
.hp-dossier-alert {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 62px);
  color: #fff;
}
.hp-dossier-alert__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hp-dossier-alert__content {
  position: relative;
}
.hp-dossier-alert__stamp {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 1px;
  margin-bottom: 1.1rem;
  box-shadow: 0 3px 8px rgba(192, 57, 43, 0.32);
}
.hp-dossier-alert__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.hp-dossier-alert__content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.hp-dossier-alert__content p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 52ch;
}
.hp-dossier-alert__actions {
  display: flex;
  gap: 0.65rem;
  /* Desktop: never wrap. Both buttons must stay on the same row. If the
     content column is narrow, individual button labels can wrap to two lines
     (see white-space override on .hp-dossier-alert__btn below) but the buttons
     themselves stay side by side. */
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  /* Only on small mobile do we allow the buttons to stack. Layout becomes a
     vertical column at this breakpoint. */
  .hp-dossier-alert__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
.hp-dossier-alert__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 1px;
  text-decoration: none;
  transition: all var(--transition);
  /* Override the universal button no-wrap default — these specific CTAs
     live in a narrow column on desktop and need the option to wrap their
     label across two lines (e.g. "7 RED FLAGS / TO WATCH FOR") rather than
     overflow the container. word-break: keep-all (inherited from the
     button rule) still prevents mid-word breaks. */
  white-space: normal;
  text-align: center;
}
.hp-dossier-alert__btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.28);
}
.hp-dossier-alert__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.hp-dossier-alert__btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hp-dossier-alert__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}
.hp-dossier-alert__btn .arrow { transition: transform var(--transition); }
.hp-dossier-alert__btn:hover .arrow { transform: translateX(3px); }

.hp-dossier-alert__photo {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
.hp-dossier-alert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- FAQ PREVIEW --- */
.hp-dossier-faq {
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.hp-dossier-faq__header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(47, 58, 74, 0.14);
}
.hp-dossier-faq__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.hp-dossier-faq__header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 0.7rem;
}
.hp-dossier-faq__sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--slate-mid);
  margin: 0 auto;
  max-width: 50ch;
  line-height: 1.55;
}
.hp-dossier-faq__sub a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
}
.hp-dossier-faq__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 2rem;
}
.hp-dossier-faq__item {
  padding: 1.15rem 1.5rem;
  border-top: 1px dotted rgba(47, 58, 74, 0.18);
}
.hp-dossier-faq__item:nth-child(odd) { border-right: 1px dotted rgba(47, 58, 74, 0.18); }
.hp-dossier-faq__item:nth-child(1),
.hp-dossier-faq__item:nth-child(2) { border-top: none; padding-top: 0.5rem; }
.hp-dossier-faq__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}
.hp-dossier-faq__item p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}
.hp-dossier-faq__item p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 2px;
}
.hp-dossier-faq__more {
  text-align: center;
}
.hp-dossier-faq__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--navy);
  color: #fff;
  border: 1.5px solid var(--navy);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition);
}
.hp-dossier-faq__btn:hover {
  background: var(--charcoal);
  color: #fff;
  transform: translateY(-1px);
}
.hp-dossier-faq__btn .arrow { transition: transform var(--transition); }
.hp-dossier-faq__btn:hover .arrow { transform: translateX(3px); }

/* --- CLOSING / SUBSCRIBE --- */
.hp-dossier-closing {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}
.hp-dossier-closing__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
}
.hp-dossier-closing__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 26, 36, 0.92) 0%, rgba(20, 26, 36, 0.78) 100%);
}
.hp-dossier-closing .container {
  position: relative;
  z-index: 1;
}
.hp-dossier-closing__card {
  max-width: 920px;
  margin: 0 auto;
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.16);
  border-radius: 2px;
  padding: clamp(1.85rem, 4vw, 2.75rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 16px 40px -10px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.hp-dossier-closing__divider {
  width: 1px;
  background: rgba(47, 58, 74, 0.16);
}
.hp-dossier-closing__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.hp-dossier-closing__card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  color: var(--charcoal);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.hp-dossier-closing__card p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0 0 1.15rem;
}
.hp-dossier-closing__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition);
}
.hp-dossier-closing__btn:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}
.hp-dossier-closing__btn .arrow { transition: transform var(--transition); }
.hp-dossier-closing__btn:hover .arrow { transform: translateX(3px); }

/* Stack the two CTAs (Learn More + Are You a Mechanic?) — wraps to a single
   column on narrow viewports. */
.hp-dossier-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* Secondary CTA — filled accent button to differentiate from the outline
   primary. Used for the "Are you a mechanic? Join us" link. */
.hp-dossier-closing__btn--secondary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hp-dossier-closing__btn--secondary:hover {
  background: var(--accent-deep, #8a1f15);
  border-color: var(--accent-deep, #8a1f15);
  color: #fff;
}

.hp-dossier-closing__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
}
.hp-dossier-closing__form input {
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.18);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  transition: all var(--transition);
}
.hp-dossier-closing__form input::placeholder { color: var(--gray-400); font-style: italic; }
.hp-dossier-closing__form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}
.hp-dossier-closing__form button {
  padding: 0 1.4rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.hp-dossier-closing__form button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.hp-dossier-closing__fine {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--slate-mid);
  font-style: italic;
}
/* Subscribe form inline status — success / error feedback without leaving the page */
.hp-dossier-closing__status {
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  border-radius: 2px;
  border-left: 3px solid;
}
.hp-dossier-closing__status--ok {
  background: rgba(34, 139, 86, 0.10);
  border-left-color: #228b56;
  color: #155233;
}
.hp-dossier-closing__status--err {
  background: rgba(192, 57, 43, 0.10);
  border-left-color: var(--accent);
  color: #7a2519;
}

/* --- Mobile responsive --- */
@media (max-width: 1000px) {
  .hp-dossier-offers__grid { grid-template-columns: 1fr 1fr; }
  .hp-dossier-card--featured { grid-column: 1 / -1; }
  .hp-dossier-card--featured .hp-dossier-card__img { aspect-ratio: 21 / 9; }
}
@media (max-width: 800px) {
  .hp-dossier-alert__grid { grid-template-columns: 1fr; }
  .hp-dossier-faq__items { grid-template-columns: 1fr; }
  .hp-dossier-faq__item:nth-child(odd) { border-right: none; }
  .hp-dossier-faq__item:nth-child(2) { border-top: 1px dotted rgba(47, 58, 74, 0.18); padding-top: 1.15rem; }
  .hp-dossier-closing__card { grid-template-columns: 1fr; }
  .hp-dossier-closing__divider { width: auto; height: 1px; }
}
@media (max-width: 900px) {
  /* Stack the hero on tablet/phone: photo on top, then text. */
  .hp-cinema-hero__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hp-cinema-hero__figure {
    order: -1;
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }
  .hp-cinema-hero__figure-frame { transform: none; }
}
@media (max-width: 600px) {
  .hp-dossier-offers__grid { grid-template-columns: 1fr; }
  .hp-dossier-card--featured { grid-column: auto; }
  .hp-dossier-card--featured .hp-dossier-card__img { aspect-ratio: 16 / 9; }
  .hp-cinema-hero__verify { width: 100%; }
  /* Stack the subscribe form vertically — on narrow phones the SUBSCRIBE button
     was getting clipped past the right edge because the input + uppercase
     letter-spacing button didn't fit on one row inside the dossier card. */
  .hp-dossier-closing__form {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .hp-dossier-closing__form button {
    padding: 0.85rem 1rem;
    width: 100%;
  }
}

/* ==========================================================================
   NEWS PAGINATION + LOAD MORE
   Desktop: page-by-page navigation. Mobile: progressive load-more button.
   JS in news/index.njk swaps between modes based on viewport.
   ========================================================================== */

/* Desktop pagination */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(47, 58, 74, 0.14);
  font-family: var(--font-body);
}
.news-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(47, 58, 74, 0.3);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.news-pagination__btn:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: translateY(-1px);
}
.news-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.news-pagination__arrow {
  font-size: 0.95rem;
}
.news-pagination__btn--prev .news-pagination__arrow,
.news-pagination__btn--next .news-pagination__arrow {
  transition: transform var(--transition);
}
.news-pagination__btn:hover:not(:disabled) .news-pagination__arrow {
  transform: translateX(0);
}
.news-pagination__btn--prev:hover:not(:disabled) .news-pagination__arrow {
  transform: translateX(-3px);
}
.news-pagination__btn--next:hover:not(:disabled) .news-pagination__arrow {
  transform: translateX(3px);
}
.news-pagination__status {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--slate-mid);
  letter-spacing: 0.005em;
}
.news-pagination__status strong {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

/* Mobile load-more */
.news-loadmore {
  display: none;  /* shown by JS on mobile */
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(47, 58, 74, 0.14);
}
.news-loadmore__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.85rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.28);
  transition: all var(--transition);
  width: 100%;
  max-width: 360px;
}
.news-loadmore__btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(192, 57, 43, 0.36);
}
.news-loadmore__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.news-loadmore__btn:hover .news-loadmore__arrow { transform: translateY(2px); }
.news-loadmore__status {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  font-weight: 600;
}

@media (max-width: 700px) {
  /* Mobile keeps load-more visible (JS sets display flex), pagination hidden */
  .news-loadmore { display: flex; }
}

/* ==========================================================================
   News — search & filter (client-side over rendered cards)
   Visual language: editorial card-catalog. Hairline rules, paper tone,
   italic placeholder, navy active state matching pagination buttons.
   ========================================================================== */

.news-search-wrap {
  margin: clamp(2rem, 4vw, 2.75rem) 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(47, 58, 74, 0.14);
}

.news-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.22);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 1px 0 rgba(47, 58, 74, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.news-search-bar:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(47, 58, 74, 0.08);
}
.news-search-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-mid);
  flex-shrink: 0;
}
.news-search-bar__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  padding: 0.15rem 0;
  min-width: 0;
}
.news-search-bar__input::placeholder {
  color: var(--slate-mid);
  font-style: italic;
  letter-spacing: 0.01em;
}
.news-search-bar__input::-webkit-search-cancel-button { display: none; }
.news-search-bar__clear {
  border: 0;
  background: transparent;
  color: var(--slate-mid);
  font-size: 1.4rem;
  line-height: 1;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
  border-radius: 2px;
}
.news-search-bar__clear:hover {
  color: var(--accent);
  background: rgba(192, 57, 43, 0.06);
}

.news-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.news-filter-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(47, 58, 74, 0.28);
  border-radius: 1px;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.news-filter-chip:hover {
  border-color: var(--navy);
  background: rgba(47, 58, 74, 0.05);
}
.news-filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.news-filter-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.news-filter-chip.is-active:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

/* --- Empty state — "No Match On File" --- */
.news-empty {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
  text-align: center;
  background: rgba(47, 58, 74, 0.025);
  border: 1px dashed rgba(47, 58, 74, 0.28);
  border-radius: 2px;
}
.news-empty__stamp {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 0.35rem 0.75rem;
  margin-bottom: 1rem;
  transform: rotate(-2deg);
}
.news-empty__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--navy);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.news-empty__sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--slate-mid);
  margin: 0 0 1.5rem;
}
.news-empty__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.24);
  transition: all var(--transition);
}
.news-empty__reset:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
}

@media (max-width: 700px) {
  .news-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .news-filter-chips::-webkit-scrollbar { display: none; }
  .news-filter-chip { flex-shrink: 0; }
  .news-search-bar { padding: 0.6rem 0.75rem; }
  .news-search-bar__input { font-size: 0.92rem; }
}

/* ==========================================================================
   SHARE-YOUR-STORY MODAL — witness statement intake
   Triggered by [data-story-trigger]; submits via Netlify Forms (AJAX).
   ========================================================================== */

.story-modal[hidden] { display: none; }
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0rem, 3vw, 2rem);
}
.story-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 32, 0.78);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.story-modal__panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fbfaf6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  border: 1px solid rgba(47, 58, 74, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 22px 44px -14px rgba(0, 0, 0, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

.story-modal__classification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.65rem 2.5rem 0.65rem 1rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
}
.story-modal__sep { color: rgba(255, 255, 255, 0.32); }
.story-modal__est { color: var(--accent); }

.story-modal__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background var(--transition);
}
.story-modal__close:hover { background: rgba(255, 255, 255, 0.12); }

.story-modal__body {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
}

.story-modal__masthead { margin-bottom: 1.5rem; }
.story-modal__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.story-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}
.story-modal__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--slate-mid);
  line-height: 1.5;
  margin: 0;
}

/* Form */
.story-form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.story-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.story-form__row { display: block; }
.story-form__label {
  display: block;
  font-family: var(--font-body);
}
.story-form__label-text {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.story-form__req,
.story-form__opt {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.story-form__req { color: var(--accent); }
.story-form__opt { color: var(--slate-mid); }

.story-form__input,
.story-form__textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(47, 58, 74, 0.22);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.story-form__input:focus,
.story-form__textarea:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(47, 58, 74, 0.08);
}
.story-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  font-family: var(--font-body);
}
.story-form__input--narrow {
  max-width: 120px;
}

.story-form__captcha {
  padding: 0.85rem 0.95rem;
  background: rgba(47, 58, 74, 0.04);
  border: 1px dashed rgba(47, 58, 74, 0.28);
  border-radius: 2px;
}

.story-form__error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(192, 57, 43, 0.08);
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.8rem;
  margin: 0;
  border-radius: 1px;
}

.story-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.story-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: 0 6px 16px -4px rgba(192, 57, 43, 0.4);
  transition: all var(--transition);
}
.story-form__submit:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(192, 57, 43, 0.5);
}
.story-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.story-form__submit-arrow {
  font-size: 1rem;
  transition: transform var(--transition);
}
.story-form__submit:hover:not(:disabled) .story-form__submit-arrow {
  transform: translateX(2px);
}

/* Success state */
.story-modal__success {
  text-align: center;
  padding: 1rem 0;
}
.story-modal__success-stamp {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 0.4rem 0.85rem;
  margin-bottom: 1rem;
  transform: rotate(-2deg);
}
.story-modal__success-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.story-modal__success-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--slate-mid);
  line-height: 1.55;
  margin: 0 auto 1.5rem;
  max-width: 44ch;
}
.story-modal__success-close {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  transition: background var(--transition);
}
.story-modal__success-close:hover { background: var(--charcoal); }

@media (max-width: 600px) {
  .story-modal { padding: 0; align-items: stretch; }
  .story-modal__panel {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .story-modal__body { padding: 1.25rem 1rem 1.5rem; }
}

/* ============================================================
   Directory tier badges (Stage 7)
   Three tiers: Verified Mechanic / Claimed / Unclaimed
   ============================================================ */

/* find-a-mechanic.njk dir-card variants */
.dir-card__tier {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.62rem;
  font-family: var(--font-body);
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  border-radius: 1px;
  border: 1px solid;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.dir-card__tier svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}

.dir-card__tier--verified {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(192,57,43,0.32);
}
.dir-card__tier--claimed {
  color: var(--navy);
  background: rgba(255,255,255,0.95);
  border-color: var(--navy);
}
.dir-card__tier--unclaimed {
  color: var(--slate);
  background: rgba(255,255,255,0.92);
  border-color: var(--gray-300);
}

/* Tier-driven card styling — subtle but distinct */
.dir-card--tier-verified {
  border-color: rgba(192,57,43,0.28);
  box-shadow: 0 2px 10px rgba(192,57,43,0.06);
}
.dir-card--tier-verified:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -8px rgba(192,57,43,0.22);
}
.dir-card--tier-unclaimed {
  background: var(--white);
  border-color: var(--gray-200);
  opacity: 0.94;
}
.dir-card--tier-unclaimed .dir-card__info h3 { color: var(--slate); }

/* When the card has a photo, the tier badge sits at the top-left of the
   photo (mirroring the type badge at top-right). Previous rule put it at
   the bottom of the card where it overlapped the View Profile CTA. */
.dir-card:has(.dir-card__photo) .dir-card__tier {
  top: 0.75rem;
  bottom: auto;
  left: 0.75rem;
}

/* When the card has NO photo, both pills sit absolutely at the top of the
   card and overlap the header (score + business name). Push the header
   content down so the pills get their own row of breathing space. */
.dir-results .dir-card:not(:has(.dir-card__photo)) .dir-card__header {
  padding-top: 2.85rem;
}

/* find-a-mechanic/city.njk city-card variants */
.city-card__tier {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  border-radius: 1px;
  border: 1px solid;
  margin-left: auto;
}
.city-card__tier svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.city-card__tier--verified {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(192,57,43,0.28);
}
.city-card__tier--claimed {
  color: var(--navy);
  background: rgba(255,255,255,0.95);
  border-color: var(--navy);
}
.city-card__tier--unclaimed {
  color: var(--slate);
  background: var(--ice);
  border-color: var(--gray-300);
}
.city-card--tier-verified {
  border-color: rgba(192,57,43,0.3);
}
.city-card--tier-verified:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 28px -8px rgba(192,57,43,0.22);
}

/* ============================================================
   Mobile tap-target audit fixes (Apr 26 audit, 40 moderate items)
   Apple HIG / WCAG 2.5.5 minimum: 44x44 CSS px on touch surfaces.
   Apply ONLY on touch viewports so desktop layouts don't grow.
   ============================================================ */
@media (max-width: 1024px), (hover: none) {

  /* Universal floor: any link or button gets a touch-friendly target */
  a, button, [role="button"], input[type="submit"], input[type="button"],
  .btn, .p-btn, .p-cred-pill, .verify-close, .login-modal__close {
    min-height: 44px;
    min-width: 44px;
  }

  /* Inline links inside flowing text shouldn't grow — exempt them */
  p > a, li > a, span > a, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
  .post-body a, .terms-overlay a, .verify-modal a {
    min-height: 0;
    min-width: 0;
  }

  /* Header / nav — top toggle buttons (38x32, 36x36 in audit) */
  .nav-toggle, .menu-toggle, .header-menu-btn,
  .site-header__menu-toggle, .nav__toggle, .verify-modal__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* "Read more →" cards/links across the site — were 327x22 (too thin) */
  .news-card__readmore, .post-card__readmore,
  a[class*="readmore"], a[class*="read-more"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0;
  }

  /* Footer link rows — were 327x32 each. Use BLOCK-level flex so links stack
     vertically inside each column instead of flowing inline. The original
     .footer-col a rule used display:block; we keep that stacking behavior but
     add the 44px tap target via flex centering. */
  .site-footer a, .footer-nav a, .footer__nav a,
  footer a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.3rem 0;
  }
  /* Footer columns: ensure each link still occupies its own row */
  .footer-col a, .site-footer .footer-col a {
    display: flex;
    width: 100%;
  }

  /* Modal close X buttons (.verify-close, .verify-modal__close, .login-modal__close) */
  .verify-close, .verify-modal__close, .login-modal__close,
  .terms-overlay__close, .modal-close, button[aria-label="Close"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Subscribe / form submit buttons — already wide, but make sure they're 44 tall */
  .subscribe-btn, .form-submit, button[type="submit"] {
    min-height: 44px;
  }

  /* Inline FAQ-style mini-links that ended up too small */
  .quick-link, .quick-links a, .meta-link, .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* On the smallest screens, give a little extra breathing room around link rows */
@media (max-width: 480px) {
  .site-footer a, footer a {
    padding: 0.4rem 0;
  }
}

/* ─── EMError modal: user-mode textarea (added when proactive Report-an-issue
       button opens the modal). Auto-fired mode hides this field. ─── */
.emerror-card__usertext {
  margin: 12px 0 6px;
  text-align: left;
}
.emerror-card__label {
  display: block;
  font-family: var(--font-body, Arial), Arial, sans-serif;
  font-size: 0.78rem;
  color: #3a4250;
  line-height: 1.5;
  margin-bottom: 8px;
}
#emErrorUserText {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--font-body, Arial), Arial, sans-serif;
  font-size: 0.88rem;
  color: #1e2530;
  background: #fff;
  border: 1px solid #d8d2bf;
  border-radius: 2px;
  resize: vertical;
  min-height: 90px;
  outline: none;
}
#emErrorUserText:focus {
  border-color: #2f3a4a;
  box-shadow: 0 0 0 2px rgba(47, 58, 74, 0.08);
}

/* ─── Contextual "Report an issue" link.
       Used inline beneath form submit buttons and in admin/portal sidebars.
       Subtle text-link style; no fixed positioning, no overlay. Stays out of
       the way when nothing is wrong, present when the user wants to flag
       something mid-task. The JS handler is window.EMError.openReport(). ─── */
.em-report-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--font-body, Arial), Arial, sans-serif;
  font-size: 0.74rem;
  color: var(--d-slate, #6a7a8e);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.em-report-link:hover,
.em-report-link:focus-visible {
  color: var(--d-accent, #c0392b);
  outline: none;
  text-decoration: underline;
}
.em-report-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.em-report-link:hover svg { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE — WORKSHOP PALETTE OVERRIDE
   Re-skins the existing .hp-* sections to match /providers and /find-a-mechanic.
   Loaded last in the cascade so existing rules are overridden cleanly.
   To revert: delete this entire block. Nothing else changes.

   Palette mirror — same vars as view-city/view-provider but global-scoped here.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hp-paper:   #f1ede0;
  --hp-sheet:   #faf7ec;
  --hp-ink:     #1a1f27;
  --hp-slate:   #5a6577;
  --hp-rule:    #c4bca0;
  --hp-steel:   #26303d;
  --hp-steel-2: #161c25;
  --hp-brass:   #c79a4f;
  --hp-brass-l: #e0b56a;
  --hp-copper:  #b97849;
  --hp-link:    #7d3f1c;
  --hp-link-d:  #4f2510;
}

/* ─── HERO — brushed gunmetal masthead with brass ribbons */
.hp-cinema-hero,
.hp-cinema-hero__band {
  background: var(--hp-steel);
}
.hp-cinema-hero__band {
  position: relative;
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
}
.hp-cinema-hero__band::before,
.hp-cinema-hero__band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.92;
  z-index: 2;
}
.hp-cinema-hero__band::before { top: 0; }
.hp-cinema-hero__band::after  { bottom: 0; }
.hp-cinema-hero__classification {
  background: var(--hp-ink);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: #cfd4dd;
  border-bottom-color: rgba(255,255,255,0.06);
}
.hp-cinema-hero__est { color: var(--hp-brass-l); }
.hp-cinema-hero__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
}
.hp-cinema-hero__title em {
  color: var(--hp-brass-l);
  font-style: italic;
}
.hp-cinema-hero__rule {
  width: 68px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
}
.hp-cinema-hero__sub {
  color: rgba(244,241,231,0.78);
}
.hp-cinema-hero__figure-frame {
  background: rgba(244,241,231,0.96);
  border-color: rgba(244,241,231,0.45);
  box-shadow:
    0 14px 30px -10px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.18);
}
.hp-cinema-hero__figcaption-mark {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
}
.hp-cinema-hero__figcaption-text {
  color: rgba(244,241,231,0.72);
}
.hp-cinema-hero__trust { color: rgba(244,241,231,0.66); }
.hp-cinema-hero__trust-item { color: var(--hp-brass-l); }
.hp-cinema-hero__trust-sep  { color: rgba(255,255,255,0.22); }
/* Verify CTA stays red — that's the brand pulse. No override. */

/* ─── OFFERS / DEPARTMENTS — warm paper with dossier cards */
.hp-dossier-offers {
  background-color: var(--hp-paper);
}
.hp-dossier-offers__heading-text {
  color: var(--hp-steel);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}
.hp-dossier-offers__heading-rule {
  background: linear-gradient(90deg, var(--hp-rule) 0%, transparent 100%);
}
.hp-dossier-card {
  position: relative;
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  overflow: hidden;
}
.hp-dossier-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.hp-dossier-card:hover {
  border-color: var(--hp-copper);
  box-shadow: 0 18px 36px -16px rgba(26,31,39,0.28);
}
.hp-dossier-card:hover::before { opacity: 1; }
.hp-dossier-card__classification {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.24em;
}
.hp-dossier-card h3 { color: var(--hp-ink); }
.hp-dossier-card:hover h3 { color: var(--hp-link); }
.hp-dossier-card p { color: var(--hp-slate); }
.hp-dossier-card__cta {
  color: var(--hp-link);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
}

/* ─── SCAM ALERT — gunmetal w/ brass ribbon, red stamp stays */
.hp-dossier-alert {
  position: relative;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(199,154,79,0.08), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
}
.hp-dossier-alert::before,
.hp-dossier-alert::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.8;
  z-index: 2;
}
.hp-dossier-alert::before { top: 0; }
.hp-dossier-alert::after  { bottom: 0; }
/* Red "Advisory" stamp stays — it's a literal warning */
.hp-dossier-alert__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
}
.hp-dossier-alert__content h2 { color: #f4f1e7; }
.hp-dossier-alert__content p { color: rgba(244,241,231,0.74); }
/* Primary "Avoiding Scams Guide" button stays red */
.hp-dossier-alert__btn--secondary {
  border-color: rgba(224,181,106,0.5);
  color: var(--hp-brass-l);
}
.hp-dossier-alert__btn--secondary:hover {
  background: rgba(224,181,106,0.08);
  border-color: var(--hp-brass-l);
  color: #f4f1e7;
}
.hp-dossier-alert__photo {
  border-color: rgba(244,241,231,0.18);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(199,154,79,0.18);
}

/* ─── FAQ — paper section */
.hp-dossier-faq {
  background-color: var(--hp-paper);
}
.hp-dossier-faq__header {
  border-bottom-color: var(--hp-rule);
}
.hp-dossier-faq__eyebrow {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
}
.hp-dossier-faq__header h2 { color: var(--hp-ink); }
.hp-dossier-faq__sub { color: var(--hp-slate); }
.hp-dossier-faq__sub a {
  color: var(--hp-link);
  text-decoration-color: rgba(125,63,28,0.4);
}
.hp-dossier-faq__sub a:hover { color: var(--hp-link-d); }
.hp-dossier-faq__item {
  border-top-color: var(--hp-rule);
  border-top-style: dashed;
}
.hp-dossier-faq__item:nth-child(odd) { border-right-color: var(--hp-rule); border-right-style: dashed; }
.hp-dossier-faq__item:nth-child(2) { border-top-color: var(--hp-rule); }
.hp-dossier-faq__item h3 { color: var(--hp-ink); }
.hp-dossier-faq__item p { color: var(--hp-slate); }
.hp-dossier-faq__item p a {
  color: var(--hp-link);
  text-decoration-color: rgba(125,63,28,0.4);
}
.hp-dossier-faq__btn {
  background: var(--hp-steel);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
}
.hp-dossier-faq__btn:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
}

/* ─── CLOSING / SUBSCRIBE — dark BG, paper card */
.hp-dossier-closing__overlay {
  background: linear-gradient(135deg, rgba(26,31,39,0.92) 0%, rgba(22,28,37,0.82) 100%);
}
.hp-dossier-closing__card {
  background-color: var(--hp-paper);
  border-color: var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.hp-dossier-closing__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
}
.hp-dossier-closing__divider { background: var(--hp-rule); }
.hp-dossier-closing__eyebrow {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
}
.hp-dossier-closing__card h3 { color: var(--hp-ink); }
.hp-dossier-closing__card p { color: var(--hp-slate); }
/* Primary outline button → gunmetal w/ brass inset shadow */
.hp-dossier-closing__btn {
  background: var(--hp-steel);
  color: var(--hp-sheet);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
}
.hp-dossier-closing__btn:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
  color: var(--hp-sheet);
}
/* Secondary "Are you a mechanic?" stays red — brand pulse + signup CTA */
/* Subscribe form input — paper sheet with brass focus */
.hp-dossier-closing__form input {
  background: var(--hp-sheet);
  border-color: var(--hp-rule);
  color: var(--hp-ink);
  border-radius: 0;
}
.hp-dossier-closing__form input:focus {
  border-color: var(--hp-copper);
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12);
}
/* Subscribe button stays red */
.hp-dossier-closing__fine { color: var(--hp-slate); }

/* ─── LATEST FROM BLOG — paper section */
.hp-latest {
  background-color: var(--hp-paper);
}
.hp-latest__header h2 { color: var(--hp-ink); }
.hp-latest__card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.hp-latest__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.hp-latest__card:hover {
  border-color: var(--hp-copper);
  box-shadow: 0 18px 36px -16px rgba(26,31,39,0.28);
}
.hp-latest__card:hover::before { opacity: 1; }
.hp-latest__classification {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
}
.hp-latest__title { color: var(--hp-ink); }
.hp-latest__card:hover .hp-latest__title { color: var(--hp-link); }
.hp-latest__excerpt { color: var(--hp-slate); }
.hp-latest__meta { color: var(--hp-slate); }
.hp-latest__more .btn-navy {
  background: var(--hp-steel);
  color: var(--hp-sheet);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
  border-radius: 0;
}
.hp-latest__more .btn-navy:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
  color: var(--hp-sheet);
}

/* Section eyebrow (used in "Latest from the Blog") */
.hp-latest__header .section-eyebrow {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 4 — SITE CHROME (header, footer, mobile drawer, modals, toast)
   Workshop palette applied to shared chrome that appears on every page.
   Same --hp-* vars from the home block above. Red CTAs preserved.
   To revert: delete this entire block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SITE HEADER */
.site-header {
  background: linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  box-shadow: 0 1px 0 var(--hp-brass), 0 4px 16px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo-text {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
  letter-spacing: 0.005em;
}
.nav-links-desktop .nav-link {
  font-family: 'JetBrains Mono', monospace;
  color: rgba(244,241,231,0.72);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0;
}
.nav-links-desktop .nav-link:hover {
  color: var(--hp-brass-l);
  background: rgba(199,154,79,0.08);
}
.nav-links-desktop .nav-link.active {
  color: var(--hp-brass-l);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--hp-brass);
}
@media (min-width: 821px) {
  .nav-links-desktop .nav-link.active {
    background: transparent;
  }
}
/* Header CTA — red stays (brand pulse) */
.header-cta {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.menu-toggle span { background: var(--hp-brass-l); }

/* ─── MOBILE DRAWER */
.nav-links {
  background: linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
}
.nav-toprow {
  border-bottom-color: rgba(199,154,79,0.18) !important;
}
.nav-strip {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.nav-strip__sep { color: rgba(224,181,106,0.4) !important; }
.nav-close {
  color: rgba(244,241,231,0.7) !important;
  border-color: rgba(244,241,231,0.18) !important;
}
.nav-close:hover {
  color: #f4f1e7 !important;
  background: rgba(199,154,79,0.12) !important;
  border-color: var(--hp-brass) !important;
}
.nav-masthead { border-bottom-color: rgba(199,154,79,0.18) !important; }
.nav-eyebrow {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.nav-title { color: #f4f1e7 !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.nav-title-dot { color: var(--hp-copper) !important; }
.nav-list .nav-link {
  border-bottom-color: rgba(199,154,79,0.14) !important;
}
.nav-link__num {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.nav-link__name {
  color: rgba(244,241,231,0.82) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.nav-link__arrow { color: var(--hp-brass) !important; }
.nav-links .nav-link:hover .nav-link__name,
.nav-links .nav-link:focus .nav-link__name,
.nav-links .nav-link.active .nav-link__name { color: var(--hp-brass-l) !important; }
.nav-links .nav-link:hover .nav-link__num,
.nav-links .nav-link:focus .nav-link__num,
.nav-links .nav-link.active .nav-link__num { color: var(--hp-copper) !important; }
/* Mobile CTA — red stays */
.nav-cta {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
.nav-tail {
  color: rgba(244,241,231,0.5) !important;
  border-top-color: rgba(199,154,79,0.18) !important;
}
.nav-tail a { color: rgba(224,181,106,0.85) !important; }
.nav-tail a:hover { color: #f4f1e7 !important; }
.nav-tail__sep { color: rgba(224,181,106,0.35) !important; }
.nav-overlay { background: rgba(22,28,37,0.6) !important; }

/* ─── SITE FOOTER */
.site-footer {
  background: linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: rgba(244,241,231,0.7);
}
.site-footer::before {
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  height: 4px;
  opacity: 0.92;
}
.footer-top { border-bottom-color: rgba(199,154,79,0.16); }
.footer-brand-name {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.footer-brand-tagline { color: rgba(244,241,231,0.55); }
.footer-readmore {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer-readmore:hover { color: #f4f1e7; }
.footer-col h4 {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.28em;
  font-size: 0.66rem;
}
.footer-col a { color: rgba(244,241,231,0.55); }
.footer-col a:hover { color: var(--hp-brass-l); }
.footer-bottom { color: rgba(244,241,231,0.4); }
.footer-bottom__sep { color: rgba(199,154,79,0.35); }
.footer-bottom__link { color: rgba(244,241,231,0.5); }
.footer-bottom__link:hover { color: var(--hp-brass-l); }
.footer-login { color: rgba(244,241,231,0.22); }
.footer-login:hover { color: var(--hp-brass-l); }

/* ─── TOAST */
.toast {
  background: linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: #f4f1e7;
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px var(--hp-brass),
    0 12px 28px rgba(0,0,0,0.35);
  padding: 1rem 1.85rem;
}

/* ─── LOGIN MODAL — paper sheet with brass top-rule */
.login-modal-overlay {
  background: rgba(22,28,37,0.62);
}
.login-modal {
  background: var(--hp-paper);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
  box-shadow: 0 22px 50px -10px rgba(0,0,0,0.45);
}
.login-modal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.85;
}
.login-modal-close { color: var(--hp-slate); }
.login-modal-close:hover { color: var(--hp-link); }
.login-modal h2 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.login-modal p { color: var(--hp-slate); }
.login-modal-form .login-field input,
.login-modal-form .login-field textarea {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  color: var(--hp-ink);
}
.login-modal-form .login-field input:focus,
.login-modal-form .login-field textarea:focus {
  border-color: var(--hp-copper);
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12);
  outline: none;
}
/* Login submit stays red (it's the primary action) — but with workshop chrome */
.login-modal-form .login-submit {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT REQUEST MODAL
   Workshop dossier — paper sheet, brass top-rule, mono classification, etc.
   Triggered by [data-support-request="<subject>"] elements (see main.js).
   ═══════════════════════════════════════════════════════════════════════════ */

.support-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22,28,37,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 1rem;
  overflow-y: auto;
}
.support-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.support-modal {
  width: 100%;
  max-width: 540px;
  background: var(--hp-paper);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
  box-shadow: 0 22px 50px -10px rgba(0,0,0,0.45);
  transform: translateY(20px);
  transition: transform 0.25s ease;
  margin: auto;
}
.support-modal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.85;
  z-index: 1;
}
.support-overlay.open .support-modal { transform: translateY(0); }
.support-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--hp-slate);
  cursor: pointer;
  padding: 0.5rem 0.65rem;
  z-index: 2;
  transition: color 0.18s ease;
}
.support-close:hover { color: var(--hp-link); }

/* Classification stripe */
.support-classification {
  background: var(--hp-ink);
  color: #cfd4dd;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 3px;
}
.support-classification__sep { color: rgba(255,255,255,0.22); }
.support-classification__subject { color: var(--hp-brass-l); font-weight: 700; }
.support-classification__step { color: rgba(255,255,255,0.62); }

/* Masthead */
.support-masthead {
  padding: 1.75rem 1.75rem 1.25rem;
  text-align: left;
  border-bottom: 1px dashed var(--hp-rule);
}
.support-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--hp-copper);
  font-weight: 700;
  margin-bottom: 12px;
}
.support-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--hp-ink);
  margin: 0 0 10px;
}
.support-title em {
  font-style: italic;
  color: var(--hp-copper);
}
.support-sub {
  color: var(--hp-slate);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Form */
.support-form {
  padding: 1.5rem 1.75rem 1.75rem;
}
.support-field {
  margin-bottom: 1.1rem;
}
.support-field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-steel);
  font-weight: 700;
  margin-bottom: 6px;
}
.support-field input,
.support-field textarea {
  display: block;
  width: 100%;
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--hp-ink);
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.support-field input:focus,
.support-field textarea:focus {
  outline: none;
  border-color: var(--hp-copper);
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12);
}
.support-field textarea {
  resize: vertical;
  min-height: 110px;
}
.support-field__hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-slate);
  margin-top: 6px;
}

/* Submit */
.support-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.support-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #c0392b;
  color: #fff;
  border: 1.5px solid #c0392b;
  border-radius: 0;
  padding: 0.85rem 1.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(192,57,43,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.18s ease, transform 0.18s ease;
}
.support-submit:hover {
  background: #a93324;
  border-color: #a93324;
  transform: translateY(-1px);
}
.support-submit:disabled {
  background: var(--hp-slate);
  border-color: var(--hp-slate);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.support-submit__arrow { transition: transform 0.18s ease; }
.support-submit:hover .support-submit__arrow { transform: translateX(3px); }

/* Status */
.support-status {
  margin-top: 0.95rem;
  padding: 0.65rem 0.85rem;
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  border-left: 3px solid;
}
.support-status--ok {
  background: rgba(74,140,94,0.10);
  border-left-color: #2e6b40;
  color: #1d4e2e;
}
.support-status--err {
  background: rgba(192,57,43,0.10);
  border-left-color: #c0392b;
  color: #7a2519;
}

@media (max-width: 480px) {
  .support-masthead { padding: 1.5rem 1.25rem 1rem; }
  .support-form { padding: 1.25rem 1.25rem 1.5rem; }
  .support-classification { font-size: 0.5rem; letter-spacing: 0.18em; padding: 0.55rem 1rem; }
  .support-actions { justify-content: stretch; }
  .support-submit { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 1 — /find-a-mechanic/  (the all-cities directory index)
   Workshop palette override. Red preserved on primary CTAs only.
   ═══════════════════════════════════════════════════════════════════════════ */

.dir-dossier-hero {
  position: relative;
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: #f4f1e7;
}
.dir-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
}
.dir-dossier-hero__classification {
  background: var(--hp-ink);
  color: #cfd4dd;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}
.dir-dossier-hero__sep { color: rgba(255,255,255,0.22); }
.dir-dossier-hero__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
}
.dir-dossier-hero__title {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.dir-dossier-hero__sub { color: rgba(244,241,231,0.78); }

/* Search section */
.dir-search {
  background-color: var(--hp-paper);
  border-bottom-color: var(--hp-rule);
}
.dir-search .dir-type-btn {
  background: var(--hp-sheet);
  border-color: var(--hp-rule);
  color: var(--hp-slate);
  font-family: 'JetBrains Mono', monospace;
  border-radius: 0;
}
.dir-search .dir-type-btn:hover {
  border-color: var(--hp-copper);
  color: var(--hp-ink);
  background: var(--hp-sheet);
}
.dir-search .dir-type-btn--active {
  background: var(--hp-ink);
  border-color: var(--hp-ink);
  color: var(--hp-brass-l);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
}
.dir-input,
.dir-select {
  background: var(--hp-sheet);
  border-color: var(--hp-rule);
  border-radius: 0;
  color: var(--hp-ink);
}
.dir-input:focus,
.dir-select:focus {
  border-color: var(--hp-copper);
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12);
  outline: none;
}

/* Result cards */
.dir-card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.dir-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
  z-index: 1;
  transition: opacity 0.18s ease;
}
.dir-card:hover {
  border-color: var(--hp-copper);
  box-shadow: 0 18px 36px -16px rgba(26,31,39,0.28);
}
.dir-card:hover::before { opacity: 1; }

/* Empty / placeholder state — shown by default until a state is picked */
.dir-empty,
.dir-no-results {
  background: var(--hp-sheet);
  border: 1px dashed var(--hp-rule);
  border-radius: 0;
  position: relative;
  text-align: center;
  padding: 56px 24px 60px;
}
.dir-empty::before,
.dir-no-results::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.6;
}
.dir-empty__stamp {
  display: inline-block;
  border: 2px solid var(--hp-steel);
  color: var(--hp-steel);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 14px;
  transform: rotate(-3deg);
  margin-bottom: 22px;
}
.dir-empty h3,
.dir-no-results h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 12px;
}
.dir-empty p,
.dir-no-results p {
  color: var(--hp-slate);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}
.dir-no-results__actions {
  margin-top: 22px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Bottom CTA strip (Are You a Mechanic? + Not Sure About a Mechanic?) */
.dir-cta {
  background: var(--hp-paper);
}
.dir-cta__card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.dir-cta__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.65;
}
.dir-cta__card h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.dir-cta__card p { color: var(--hp-slate); }

/* ─── Result cards — mirror the city directory's card design exactly */
.dir-results {
  background: var(--hp-paper) !important;
  background-image: none !important;
}
.dir-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.city-card {
  position: relative;
  background: var(--hp-sheet);
  color: var(--hp-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hp-rule);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border-radius: 0;
}
.city-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.city-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(26,31,39,0.28);
  border-color: var(--hp-copper);
}
.city-card:hover::before { opacity: 1; }
.city-card--tier-verified::before {
  background: linear-gradient(90deg, #4a8c5e 0%, #6ba87b 100%);
  opacity: 1;
}
.city-card--tier-claimed::before {
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-brass-l) 100%);
  opacity: 0.85;
}
.city-card__photo {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #2c3744;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--hp-rule);
  position: relative;
}
.city-card__photo--empty {
  background:
    repeating-linear-gradient(135deg, rgba(244,241,231,0.05) 0 6px, transparent 6px 12px),
    linear-gradient(165deg, #2f3a47, #1c232d);
  display: flex; align-items: center; justify-content: center;
}
.city-card__photo-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(224,181,106,0.7);
  border: 1px solid rgba(224,181,106,0.4);
  padding: 6px 12px;
  transform: rotate(-3deg);
}
.city-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.city-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.city-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hp-slate);
  font-weight: 600;
}
.city-card__tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}
.city-card__tier svg { display: inline-block; }
.city-card__tier--verified { color: #2e6b40; background: rgba(74,140,94,0.08); }
.city-card__tier--claimed   { color: var(--hp-copper); background: rgba(185,120,73,0.06); }
.city-card__tier--unclaimed { color: var(--hp-slate); background: transparent; opacity: 0.85; }
.city-card__name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  margin: 0 0 8px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.city-card__meta {
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--hp-slate);
  margin: 0 0 18px;
  line-height: 1.45;
}
.city-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--hp-rule);
}
.city-card__score {
  font-family: 'DM Serif Display', Georgia, serif;
  line-height: 1;
  flex-shrink: 0;
}
.city-card__score-num {
  font-size: 2.1rem;
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
}
.city-card__score-grade {
  font-size: 1rem;
  opacity: 0.55;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}
.city-card__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  max-width: 60%;
}
.city-card__cred {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 7px;
  background: var(--hp-ink);
  color: var(--hp-sheet);
  line-height: 1;
}
.city-card__cred-none {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-slate);
  opacity: 0.7;
  text-align: right;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .city-card__photo { height: 150px; }
  .city-card__body { padding: 18px 18px 20px; }
  .city-card__top { margin-bottom: 12px; }
  .city-card__name { font-size: 1.3rem; }
  .city-card__meta { font-size: 0.86rem; margin-bottom: 16px; }
  .city-card__row { gap: 10px; padding-top: 12px; }
  .city-card__score-num { font-size: 1.85rem; }
  .city-card__score-grade { font-size: 0.9rem; }
  .city-card__creds { max-width: 65%; }
}
@media (max-width: 380px) {
  .city-card__top { flex-wrap: wrap; }
  .city-card__row { flex-direction: column; align-items: flex-start; }
  .city-card__creds { max-width: 100%; justify-content: flex-start; }
  .city-card__cred-none { text-align: left; }
}

/* ─── INTERACTIVE US MAP ("Browse by State") */
.dir-map {
  background: var(--hp-paper);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hp-rule);
  border-bottom: 1px solid var(--hp-rule);
}
.dir-map__heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.dir-map__heading-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-steel);
  font-weight: 700;
  flex-shrink: 0;
}
.dir-map__heading-rule {
  height: 1px;
  flex: 1;
  background: var(--hp-rule);
}
.dir-map__inner {
  position: relative;
}
.dir-map__svg-wrap {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  padding: 22px 22px 14px;
  position: relative;
  overflow: hidden;
}
.dir-map__svg-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.65;
}
.dir-map__svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 960px;
  margin: 0 auto;
}
/* State paths — default = dim (no coverage). Only target state-ID elements,
   not connector lines (path67) or other decorative paths. */
.dir-map__svg-wrap svg path[id]:not([id^="path"]),
.dir-map__svg-wrap svg circle[id]:not([id^="circle"]) {
  fill: #d8d2bf;
  stroke: var(--hp-paper);
  stroke-width: 1.2;
  transition: fill 0.18s ease;
}
/* Connector line (Alaska/Hawaii insets) — keep as a thin hairline */
.dir-map__svg-wrap svg path[id^="path"] {
  fill: none;
  stroke: rgba(90, 101, 119, 0.35);
  stroke-width: 1.2;
}
/* DC group's inner path + circle */
.dir-map__svg-wrap svg g#DC path,
.dir-map__svg-wrap svg g#DC circle {
  fill: #d8d2bf;
  stroke: var(--hp-paper);
}
.dir-map__svg-wrap svg g#DC.has-coverage path,
.dir-map__svg-wrap svg g#DC.has-coverage circle {
  fill: var(--hp-brass);
  cursor: pointer;
}
.dir-map__svg-wrap svg g#DC.has-coverage:hover path,
.dir-map__svg-wrap svg g#DC.has-coverage:hover circle {
  fill: var(--hp-copper);
}
.dir-map__svg-wrap svg g#DC.is-selected path,
.dir-map__svg-wrap svg g#DC.is-selected circle {
  fill: var(--hp-ink);
}
.dir-map__svg-wrap svg path[id].has-coverage,
.dir-map__svg-wrap svg circle[id].has-coverage {
  fill: var(--hp-brass);
  cursor: pointer;
}
.dir-map__svg-wrap svg path[id].has-coverage:hover,
.dir-map__svg-wrap svg circle[id].has-coverage:hover,
.dir-map__svg-wrap svg path[id].has-coverage:focus,
.dir-map__svg-wrap svg circle[id].has-coverage:focus {
  fill: var(--hp-copper);
  outline: none;
}
.dir-map__svg-wrap svg path[id].is-selected,
.dir-map__svg-wrap svg circle[id].is-selected {
  fill: var(--hp-ink);
}
/* Tooltip — floats above SVG, follows cursor */
.dir-map__tooltip {
  position: absolute;
  z-index: 10;
  background: var(--hp-ink);
  color: #f4f1e7;
  padding: 10px 14px 11px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  border-left: 2px solid var(--hp-brass);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45);
}
.dir-map__tooltip.is-visible { opacity: 1; }
.dir-map__tooltip-name {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  color: var(--hp-brass-l);
  margin-bottom: 3px;
  line-height: 1.1;
}
.dir-map__tooltip-count {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,231,0.82);
}
/* Caption + legend below the map */
.dir-map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--hp-rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: var(--hp-slate);
  text-transform: uppercase;
}
.dir-map__legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dir-map__legend-swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border: 1px solid rgba(0,0,0,0.1);
}
.dir-map__legend-swatch--has    { background: var(--hp-brass); }
.dir-map__legend-swatch--none   { background: #d8d2bf; }
.dir-map__legend-swatch--sel    { background: var(--hp-ink); }
/* Mobile fallback list — hidden on desktop */
.dir-map__list { display: none; }

@media (max-width: 760px) {
  .dir-map__svg-wrap { display: none; }
  .dir-map__caption { display: none; }
  .dir-map__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dir-map__list-item {
    background: var(--hp-sheet);
    border: 1px solid var(--hp-rule);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    position: relative;
  }
  .dir-map__list-item::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
    opacity: 0.5;
  }
  .dir-map__list-item:hover {
    border-color: var(--hp-copper);
  }
  .dir-map__list-name {
    font-family: 'DM Serif Display', Georgia, serif;
    color: var(--hp-ink);
    font-size: 0.95rem;
  }
  .dir-map__list-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: var(--hp-copper);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
  }
}
@media (max-width: 400px) {
  .dir-map__list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 2 — /faq/
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-dossier-hero {
  position: relative;
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: #f4f1e7;
}
.faq-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
}
.faq-dossier-hero__classification {
  background: var(--hp-ink);
  color: #cfd4dd;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}
.faq-dossier-hero__sep { color: rgba(255,255,255,0.22); }
.faq-dossier-hero__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
}
.faq-dossier-hero__title {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.faq-dossier-hero__sub { color: rgba(244,241,231,0.78); }

.faq-dossier {
  background-color: var(--hp-paper);
}

.faq-dossier__group {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.faq-dossier__group::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
  z-index: 1;
}
.faq-dossier__group-header {
  border-bottom: 1px dashed var(--hp-rule) !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}
.faq-dossier__roman {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.32em;
}
.faq-dossier__group-title h2 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.faq-dossier__group-title p {
  color: var(--hp-slate);
}

.faq-dossier__item {
  border-top: 1px dotted var(--hp-rule) !important;
  border-bottom: none !important;
  padding: 1.25rem 0 1.35rem !important;
}
.faq-dossier__item:first-child {
  border-top: none !important;
  padding-top: 0.25rem !important;
}
.faq-dossier__item:last-child {
  padding-bottom: 0.25rem !important;
}
.faq-dossier__item h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.faq-dossier__item p { color: var(--hp-slate); }
.faq-dossier__item a {
  color: #c0392b;
  text-decoration: underline;
  text-decoration-color: rgba(192,57,43,0.4);
  text-underline-offset: 3px;
  font-weight: 600;
}
.faq-dossier__item a:hover {
  color: #a93324;
  text-decoration-color: #a93324;
}

.faq-dossier-cta {
  background: var(--hp-paper);
}
.faq-dossier-cta__card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.faq-dossier-cta__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
}
.faq-dossier-cta__text h2 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.faq-dossier-cta__text p { color: var(--hp-slate); }
.faq-dossier-cta__btn {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
}
/* Primary "Avoiding Scams" stays red — safety-critical CTA */
/* Secondary "Read the News" — gunmetal w/ brass inset */
.faq-dossier-cta__btn--secondary {
  background: var(--hp-steel);
  color: var(--hp-sheet);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
}
.faq-dossier-cta__btn--secondary:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
  color: var(--hp-sheet);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 3 — /avoiding-scams/
   Red preserved on: ADVISORY callout, Report band button, primary CTAs.
   ═══════════════════════════════════════════════════════════════════════════ */

.scams-dossier-hero {
  position: relative;
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: #f4f1e7;
}
.scams-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
}
.scams-dossier-hero__classification {
  background: var(--hp-ink);
  color: #cfd4dd;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}
.scams-dossier-hero__sep { color: rgba(255,255,255,0.22); }
.scams-dossier-hero__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
}
.scams-dossier-hero__title {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-dossier-hero__sub { color: rgba(244,241,231,0.78); }

/* Body wrapper */
.scams-dossier-body {
  background-color: var(--hp-paper);
}

/* Advisory callout — red stays (literal warning) but workshop chrome */
.scams-advisory {
  background: linear-gradient(180deg, rgba(192,57,43,0.06) 0%, rgba(192,57,43,0.03) 100%);
  border: 1px solid rgba(192,57,43,0.32);
  border-left: 3px solid #c0392b;
  border-radius: 0;
}

/* Section headers */
.scams-section__header {
  border-bottom-color: var(--hp-rule) !important;
}
.scams-section__roman {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.32em;
  font-style: normal !important;
}
.scams-section__eyebrow {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.32em;
}
.scams-section__title-block h2 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-section__sub { color: var(--hp-slate); }

/* §I. Compare grid */
.scams-compare-col {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.scams-compare-col::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.65;
}
.scams-compare-col__title {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
  border-bottom: 1px dashed var(--hp-rule) !important;
}
.scams-compare-col__item {
  border-top: 1px dotted var(--hp-rule) !important;
}
.scams-compare-col__item strong { color: var(--hp-ink); }
.scams-compare-col__item p { color: var(--hp-slate); }

/* §II. Flag list */
.scams-flag-item {
  border-top: 1px dotted var(--hp-rule) !important;
}
.scams-flag-item__num {
  color: var(--hp-copper);
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-flag-item__body h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-flag-item__body p { color: var(--hp-slate); }

/* §III. Cred cards */
.scams-cred-card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.scams-cred-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
}
.scams-cred-card__seal {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  font-style: normal !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}
.scams-cred-card h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
  border-bottom: 2px solid var(--hp-copper) !important;
}
.scams-cred-card p { color: var(--hp-slate); }

/* §IV. Steps */
.scams-step-item {
  border-top: 1px dotted var(--hp-rule) !important;
}
.scams-step-item__num {
  background: var(--hp-steel) !important;
  color: var(--hp-brass-l) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px var(--hp-brass);
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.scams-step-item__body h3 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-step-item__body p { color: var(--hp-slate); }
.scams-step-link {
  color: #c0392b !important;
  border-bottom-color: rgba(192,57,43,0.5) !important;
}
.scams-step-link:hover {
  color: #a93324 !important;
  border-bottom-color: #a93324 !important;
}

/* Report band — keep red CTA, workshop the band background */
.scams-report-band {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative !important;
  border-top: none !important;
}
.scams-report-band::before,
.scams-report-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.85;
  z-index: 2;
}
.scams-report-band::before { top: 0; }
.scams-report-band::after  { bottom: 0; }
.scams-report-band__eyebrow {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.scams-report-band__title em {
  color: var(--hp-brass-l) !important;
  font-style: italic !important;
}
.scams-report-band__text { color: rgba(244,241,231,0.78) !important; }
.scams-report-band__bullets { color: rgba(244,241,231,0.78) !important; }
.scams-report-band__bullets li::before { background: var(--hp-brass) !important; }
.scams-report-band__btn {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Closing CTA */
.scams-dossier-cta {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
}
.scams-dossier-cta__card {
  background: var(--hp-paper);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.scams-dossier-cta__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
}
.scams-dossier-cta__text h2 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.scams-dossier-cta__text p { color: var(--hp-slate); }
.scams-dossier-cta__btn {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
}
/* Primary stays red */
/* Secondary outline — gunmetal w/ brass inset */
.scams-dossier-cta__btn--secondary {
  background: var(--hp-steel);
  color: var(--hp-sheet);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
}
.scams-dossier-cta__btn--secondary:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
  color: var(--hp-sheet);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 4 — /news/ index + individual /news/posts/<slug>/ pages
   ═══════════════════════════════════════════════════════════════════════════ */

.news-dossier-hero {
  position: relative;
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  color: #f4f1e7;
}
.news-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
}
.news-dossier-hero__classification {
  background: var(--hp-ink);
  color: #cfd4dd;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}
.news-dossier-hero__sep { color: rgba(255,255,255,0.22); }
.news-dossier-hero__eyebrow {
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
}
.news-dossier-hero__title {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.news-dossier-hero__sub { color: rgba(244,241,231,0.78); }

.news-feed {
  background-color: var(--hp-paper);
}

.news-feature {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.news-feature::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
  z-index: 1;
}
.news-feature:hover { border-color: var(--hp-copper); }
.news-feature__classification {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.24em;
}
.news-feature__badge {
  background: var(--hp-ink);
  color: var(--hp-brass-l);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
  border-radius: 0;
}
.news-feature__featured-mark {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.28em;
}
.news-feature__title {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.news-feature:hover .news-feature__title { color: var(--hp-link); }
.news-feature__excerpt { color: var(--hp-slate); }
.news-feature__meta { color: var(--hp-slate); }

.news-feed__heading-text {
  color: var(--hp-steel);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.28em;
}
.news-feed__heading-rule { background: var(--hp-rule); }

.news-search-bar {
  background: var(--hp-sheet) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: 0 !important;
}
.news-search-bar:focus-within {
  border-color: var(--hp-copper) !important;
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12) !important;
}
.news-search-bar__input {
  background: transparent;
  border: 0;
  color: var(--hp-ink);
  font-family: 'Libre Franklin', system-ui, sans-serif;
}
.news-search-bar__icon { color: var(--hp-slate); }
.news-search-bar__clear { color: var(--hp-slate); }
.news-search-bar__clear:hover {
  color: var(--hp-link);
  background: rgba(185,120,73,0.08) !important;
}

.news-filter-chip {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  color: var(--hp-slate);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2em;
  border-radius: 0;
}
.news-filter-chip:hover {
  border-color: var(--hp-copper);
  color: var(--hp-ink);
}
.news-filter-chip.is-active {
  background: var(--hp-ink);
  border-color: var(--hp-ink);
  color: var(--hp-brass-l);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
}

.news-card {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.news-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.news-card:hover {
  border-color: var(--hp-copper);
  box-shadow: 0 18px 36px -16px rgba(26,31,39,0.28);
}
.news-card:hover::before { opacity: 1; }
.news-card__classification {
  color: var(--hp-copper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.24em;
}
.news-card__title {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.news-card:hover .news-card__title { color: var(--hp-link); }
.news-card__excerpt { color: var(--hp-slate); }
.news-card__meta { color: var(--hp-slate); }
.news-card__sep { color: var(--hp-copper); }

.news-pagination__btn {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  color: var(--hp-ink);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
}
.news-pagination__btn:hover:not(:disabled) {
  background: var(--hp-ink);
  color: var(--hp-brass-l);
  border-color: var(--hp-ink);
}
.news-pagination__status { color: var(--hp-slate); }
.news-pagination__status strong { color: var(--hp-ink); }
.news-loadmore__btn {
  background: var(--hp-steel);
  color: var(--hp-sheet);
  border-color: var(--hp-steel);
  box-shadow: inset 0 0 0 1px var(--hp-brass);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
  border-radius: 0;
}
.news-loadmore__btn:hover {
  background: var(--hp-steel-2);
  border-color: var(--hp-steel-2);
}

.news-empty {
  background: var(--hp-sheet);
  border: 1px dashed var(--hp-rule);
  border-radius: 0;
}
.news-empty__stamp {
  border: 2px solid var(--hp-steel);
  color: var(--hp-steel);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.28em;
  transform: rotate(-3deg);
}
.news-empty__title {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.news-empty__sub { color: var(--hp-slate); }
.news-empty__reset { color: var(--hp-link); }

/* Bottom CTA section */
.cta-section {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  position: relative;
}
/* Restore the original subtle diagonal-line texture (not the brass ribbon) */
.cta-section::before {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 50px,
    rgba(255,255,255,0.018) 50px,
    rgba(255,255,255,0.018) 52px
  ) !important;
  opacity: 1 !important;
}
/* Add brass+copper ribbon as separate ::after, constrained to a thin top strip */
.cta-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}
.cta-section h2 {
  color: #f4f1e7 !important;
  font-family: 'DM Serif Display', Georgia, serif;
  position: relative;
}
/* Brass+copper rule under the h2 — matches the dossier feel of other sections */
.cta-section h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  margin: 18px auto 0;
}
.cta-section p { color: rgba(244,241,231,0.78) !important; }
/* Workshop styling on CTA buttons */
.cta-section .btn {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}
.cta-section .btn-primary {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.cta-section .btn-outline-dark {
  background: transparent !important;
  border-color: var(--hp-brass-l) !important;
  color: var(--hp-brass-l) !important;
}
.cta-section .btn-outline-dark:hover {
  background: var(--hp-brass-l) !important;
  color: var(--hp-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   /news/posts/<slug>/ — individual blog posts
   ═══════════════════════════════════════════════════════════════════════════ */
.post-header {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%);
  position: relative;
}
.post-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
}
.post-header h1 {
  color: #f4f1e7;
  font-family: 'DM Serif Display', Georgia, serif;
}
.post-header h1 em { color: var(--hp-brass-l); }
.post-meta {
  color: rgba(244,241,231,0.65);
  border-bottom-color: rgba(199,154,79,0.22);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
}
.post-meta .separator { color: rgba(224,181,106,0.4); }
.post-hero-img {
  background: var(--hp-paper);
}
.post-hero-img img {
  border-radius: 0;
  border: 1px solid var(--hp-rule);
  box-shadow: 0 14px 32px -10px rgba(26,31,39,0.35);
}
.post-body {
  background: var(--hp-paper);
}
.post-body > .container {
  background: var(--hp-sheet);
  border: 1px solid var(--hp-rule);
  border-radius: 0;
  position: relative;
}
.post-body > .container::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
}
.post-body p { color: var(--hp-ink); }
.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--hp-ink);
  font-family: 'DM Serif Display', Georgia, serif;
}
.post-body a {
  color: var(--hp-link);
  text-decoration: underline;
  text-decoration-color: rgba(125,63,28,0.4);
}
.post-body a:hover { color: var(--hp-link-d); }
.post-body blockquote {
  background: rgba(199,154,79,0.06);
  border-left: 4px solid var(--hp-copper);
  color: var(--hp-ink);
}
.post-body strong { color: var(--hp-ink); }
.post-body ul li::before { color: var(--hp-copper); }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 5 — /report-a-scam/
   The page has heavy inline <style> using --navy/--charcoal/--slate/--steel.
   Approach: scope-redefine those CSS variables on .scam__page so the inline
   styles inherit workshop palette values automatically. --accent (red) stays.
   ═══════════════════════════════════════════════════════════════════════════ */
.scam__page {
  --navy: #1a1f27;        /* hp-ink */
  --charcoal: #1a1f27;    /* hp-ink */
  --slate: #5a6577;       /* hp-slate */
  --slate-mid: #5a6577;
  --steel: #e0b56a;       /* brass-l for muted highlights */
  --gray-700: #5a6577;
  --gray-500: #5a6577;
  --gray-300: #c4bca0;    /* hp-rule */
  --gray-200: #c4bca0;
  --ice: #faf7ec;         /* hp-sheet */
}
/* Eyebrow → copper mono (was red) */
.scam__page .scam__masthead-eyebrow {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
/* Italic emphasis on "documentation" → brass-l (was red) */
.scam__page .scam__masthead-title em {
  color: var(--hp-copper) !important;
}
/* Doc card — add brass top-rule for consistency with other sheet cards */
.scam__page .scam__doc {
  border-radius: 0 !important;
  border-color: var(--hp-rule) !important;
}
.scam__page .scam__doc::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
/* Classification strip — workshop ink with brass-l accent dots */
.scam__page .scam__classification {
  background: var(--hp-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
.scam__page .scam__classification .accent {
  color: var(--hp-brass-l) !important;
}
/* Pullquote/highlight — copper italic accent (was red) */
.scam__page .scam__pullquote {
  border-left-color: var(--hp-copper) !important;
}
.scam__page .scam__pullquote strong {
  color: var(--hp-copper) !important;
}
/* Specimen mockup label — keep red CONFIDENTIAL stamp (it's a literal stamp) */
/* Form inputs — workshop sheet styling */
.scam__page .scam__field input,
.scam__page .scam__field textarea,
.scam__page .scam__field select {
  background: var(--hp-sheet) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: 0 !important;
  color: var(--hp-ink) !important;
}
.scam__page .scam__field input:focus,
.scam__page .scam__field textarea:focus,
.scam__page .scam__field select:focus {
  border-color: var(--hp-copper) !important;
  box-shadow: 0 0 0 3px rgba(185,120,73,0.12) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 / PAGE 6 — /how-we-verify/
   Same scoped-variable approach as report-a-scam. --accent (red) preserved
   for the verified-mechanic badge specimen (literal red brand icon).
   ═══════════════════════════════════════════════════════════════════════════ */
.hwv__page {
  --navy: #1a1f27;
  --charcoal: #1a1f27;
  --slate: #5a6577;
  --slate-mid: #5a6577;
  --steel: #e0b56a;
  --gray-700: #5a6577;
  --gray-500: #5a6577;
  --gray-400: #c4bca0;
  --gray-300: #c4bca0;
  --gray-200: #c4bca0;
  --ice: #faf7ec;
}
/* Eyebrow → copper mono (was red) */
.hwv__page .hwv__masthead-eyebrow {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
/* Italic emphasis on "verified file" → copper */
.hwv__page .hwv__masthead-title em {
  color: var(--hp-copper) !important;
}
/* Doc card — brass top-rule + workshop border */
.hwv__page .hwv__doc {
  border-radius: 0 !important;
  border-color: var(--hp-rule) !important;
}
.hwv__page .hwv__doc::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
/* Classification strip — workshop ink with brass-l accent */
.hwv__page .hwv__classification {
  background: var(--hp-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
.hwv__page .hwv__classification .accent {
  color: var(--hp-brass-l) !important;
}
/* Badge specimen on right — keep red (literal badge color) */
/* Badge cards (ASE/Licensed/Insured/Identity) inside §II */
.hwv__page .hwv__badge-card {
  background: var(--hp-sheet) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: 0 !important;
  position: relative !important;
}
.hwv__page .hwv__badge-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.6;
}
/* Doc cards (required documents) */
.hwv__page .hwv__doc-card {
  background: var(--hp-sheet) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: 0 !important;
  position: relative !important;
}
.hwv__page .hwv__doc-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.55;
}
.hwv__page .hwv__doc-card--required::before {
  background: linear-gradient(90deg, #c0392b 0%, #8a1f15 100%);
  opacity: 1;
}
/* Bottom CTA buttons — workshop mono */
.hwv__page .hwv__cta-btn {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
  border-radius: 0 !important;
}
/* Secondary CTA — gunmetal + brass inset */
.hwv__page .hwv__cta-btn--secondary {
  background: var(--hp-steel) !important;
  color: var(--hp-sheet) !important;
  border-color: var(--hp-steel) !important;
  box-shadow: inset 0 0 0 1px var(--hp-brass) !important;
}
.hwv__page .hwv__cta-btn--secondary:hover {
  background: var(--hp-steel-2) !important;
  border-color: var(--hp-steel-2) !important;
  color: var(--hp-sheet) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 / PAGE 1 — /are-you-ready/  (mechanic signup landing)
   MINIMAL override. The page has its own strong dossier design — only retune
   color variables so workshop palette applies; leave layout/composition alone.
   ═══════════════════════════════════════════════════════════════════════════ */
.ayr-dossier-hero,
.ayr-dossier-section,
.ayr-dossier-finale {
  --navy: #1a1f27;
  --charcoal: #1a1f27;
  --slate: #5a6577;
  --slate-mid: #5a6577;
  --steel: #e0b56a;
  --gray-700: #5a6577;
  --gray-500: #5a6577;
  --gray-400: #c4bca0;
  --gray-300: #c4bca0;
  --gray-200: #c4bca0;
  --ice: #faf7ec;
}
/* One brass top-rule on the hero to tie it to the rest of the site */
.ayr-dossier-hero { position: relative; }
.ayr-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 / PAGE 2 — /partners/
   FULL workshop treatment — gunmetal hero w/ brass ribbon, paper sections,
   cream cards w/ brass top-rules, copper roman numerals.
   ═══════════════════════════════════════════════════════════════════════════ */
.partners-dossier-hero,
.partners-dossier-section,
.partners-dossier-cta {
  --navy: #1a1f27;
  --charcoal: #1a1f27;
  --slate: #5a6577;
  --slate-mid: #5a6577;
  --steel: #e0b56a;
  --gray-700: #5a6577;
  --gray-500: #5a6577;
  --gray-400: #c4bca0;
  --gray-300: #c4bca0;
  --gray-200: #c4bca0;
  --ice: #faf7ec;
}

/* Hero — workshop gunmetal + brass ribbon */
.partners-dossier-hero {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative;
}
.partners-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}
.partners-dossier-hero__classification {
  background: var(--hp-ink) !important;
  color: #cfd4dd !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
.partners-dossier-hero__est { color: var(--hp-brass-l) !important; }
.partners-dossier-hero__eyebrow {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.partners-dossier-hero__title {
  color: #f4f1e7 !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.partners-dossier-hero__title em { color: var(--hp-brass-l) !important; font-style: italic !important; }
.partners-dossier-hero__rule {
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px) !important;
}
.partners-dossier-hero__sub { color: rgba(244,241,231,0.78) !important; }
.partners-dossier-hero__seal { color: var(--hp-brass-l) !important; }
.partners-dossier-hero__cta {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
  color: var(--hp-brass-l) !important;
  border-color: var(--hp-brass-l) !important;
}

/* Sections */
.partners-dossier-section--paper {
  background: var(--hp-paper) !important;
}
.partners-dossier-section--ledger {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(199,154,79,0.08), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative !important;
}
.partners-dossier-section--ledger::before,
.partners-dossier-section--ledger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.8;
  pointer-events: none;
}
.partners-dossier-section--ledger::before { top: 0; }
.partners-dossier-section--ledger::after  { bottom: 0; }
.partners-dossier-section__roman {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
  font-style: normal !important;
}
.partners-dossier-section--ledger .partners-dossier-section__roman { color: var(--hp-brass-l) !important; }
.partners-dossier-section__title {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.partners-dossier-section--ledger .partners-dossier-section__title { color: #f4f1e7 !important; }
.partners-dossier-lede { color: var(--hp-slate) !important; }
.partners-dossier-section--ledger .partners-dossier-lede { color: rgba(244,241,231,0.82) !important; }

/* Pullquote — keep its left-bar shape; just swap red to copper */
.partners-dossier-pullquote { border-left-color: var(--hp-copper) !important; }
.partners-dossier-pullquote p { color: var(--hp-ink) !important; }
.partners-dossier-pullquote__attr { color: var(--hp-copper) !important; }

/* Stats — cards stay white (their own background) BUT need readable text
   on white, not the dark-bg-assumption colors */
.partners-dossier-stat {
  background: var(--hp-sheet) !important;
  border-color: var(--hp-rule) !important;
  border-left-color: var(--hp-copper) !important;
}
.partners-dossier-stat__num {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.partners-dossier-stat__label {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
.partners-dossier-stat__sub { color: var(--hp-slate) !important; }

/* Benefits — KEEP the list-with-dashed-dividers layout; swap colors only */
.partners-dossier-benefit { border-bottom-color: var(--hp-rule) !important; }
.partners-dossier-benefit__num {
  color: var(--hp-copper) !important;
  font-style: italic !important;
}
.partners-dossier-benefit__body h3 { color: var(--hp-ink) !important; }
.partners-dossier-benefit__body p { color: var(--hp-slate) !important; }
.partners-dossier-benefit__body a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}

/* Bar — rows are already cream cards; swap red border + check to brass */
.partners-dossier-bar__row {
  background: var(--hp-sheet) !important;
  border-color: var(--hp-rule) !important;
  border-left-color: var(--hp-copper) !important;
}
.partners-dossier-bar__row > div { color: var(--hp-ink) !important; }
.partners-dossier-bar__row strong { color: var(--hp-ink) !important; }
.partners-dossier-bar__row a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}
.partners-dossier-bar__check { color: var(--hp-copper) !important; }

/* Closing CTA — keep centered-text-over-gunmetal layout */
.partners-dossier-cta {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
}
.partners-dossier-cta::before,
.partners-dossier-cta::after {
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px) !important;
  opacity: 0.85 !important;
  height: 3px !important;
}
.partners-dossier-cta__eyebrow { color: var(--hp-brass-l) !important; }
.partners-dossier-cta__title { color: #f4f1e7 !important; }
.partners-dossier-cta__title em { color: var(--hp-brass-l) !important; font-style: italic !important; }
.partners-dossier-cta__sub { color: rgba(244,241,231,0.78) !important; }
/* Primary CTA stays red */
/* Secondary CTA outline — brass-l outline (was white) */
.partners-dossier-cta__btn--secondary {
  color: var(--hp-brass-l) !important;
  border-color: rgba(224,181,106,0.55) !important;
}
.partners-dossier-cta__btn--secondary:hover {
  background: rgba(224,181,106,0.08) !important;
  border-color: var(--hp-brass-l) !important;
  color: #f4f1e7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 / PAGES 3, 6, 7 — /code-of-conduct/, /privacy/, /terms/
   All share the .legal-dossier-* classes. One block covers all three.
   Color-only swaps; existing layout (numbered articles, intro lede, etc.) stays.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero — workshop gunmetal + brass ribbon */
.legal-dossier-hero {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative;
}
.legal-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}
.legal-dossier-hero__classification {
  background: var(--hp-ink) !important;
  color: #cfd4dd !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.22em !important;
}
.legal-dossier-hero__sep { color: rgba(255,255,255,0.22) !important; }
.legal-dossier-hero__eyebrow {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.legal-dossier-hero__title {
  color: #f4f1e7 !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.legal-dossier-hero__sub { color: rgba(244,241,231,0.78) !important; }

/* Body */
.legal-dossier { background-color: var(--hp-paper) !important; }

/* Intro */
.legal-dossier__intro { border-bottom-color: var(--hp-rule) !important; }
.legal-dossier__intro p { color: var(--hp-slate) !important; }
.legal-dossier__intro a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}

/* Advisory — red stays (literal warning callout) */

/* Article */
.legal-dossier__article { border-bottom-color: var(--hp-rule) !important; }
.legal-dossier__roman {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
  font-style: normal !important;
}
.legal-dossier__article-tag {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.legal-dossier__article-title h2 {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.legal-dossier__article-body p { color: var(--hp-slate) !important; }
.legal-dossier__article-body a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}
.legal-dossier__article-body a:hover { color: var(--hp-link-d) !important; }
.legal-dossier__article-body ul li {
  border-top-color: var(--hp-rule) !important;
  color: var(--hp-slate) !important;
}
.legal-dossier__article-body ul li::before { background: var(--hp-copper) !important; }

/* Signature */
.legal-dossier__signature { border-top-color: var(--hp-rule) !important; }
.legal-dossier__signature-divider { color: var(--hp-copper) !important; }
.legal-dossier__signature-text { color: var(--hp-slate) !important; }
.legal-dossier__signature-meta { color: var(--hp-slate) !important; }
.legal-dossier__signature-meta a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}

/* Bottom CTA (Terms page) — gunmetal w/ brass ribbon, paper card */
.legal-dossier-cta {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative !important;
}
.legal-dossier-cta::before,
.legal-dossier-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.85;
}
.legal-dossier-cta::before { top: 0; }
.legal-dossier-cta::after  { bottom: 0; }
.legal-dossier-cta__card {
  background: var(--hp-paper) !important;
  border-color: var(--hp-rule) !important;
  border-radius: 0 !important;
  position: relative !important;
}
.legal-dossier-cta__card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hp-brass) 0%, var(--hp-copper) 100%);
  opacity: 0.9;
}
.legal-dossier-cta__text h2 {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.legal-dossier-cta__text p { color: var(--hp-slate) !important; }
.legal-dossier-cta__btn {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
/* Primary stays red */
/* Secondary → gunmetal filled + brass inset (matches workshop chrome) */
.legal-dossier-cta__btn--secondary {
  background: var(--hp-steel) !important;
  color: var(--hp-sheet) !important;
  border-color: var(--hp-steel) !important;
  box-shadow: inset 0 0 0 1px var(--hp-brass) !important;
}
.legal-dossier-cta__btn--secondary:hover {
  background: var(--hp-steel-2) !important;
  border-color: var(--hp-steel-2) !important;
  color: var(--hp-sheet) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 / PAGE 4 — /our-legal-rights/
   The page uses its own scoped CSS vars (--legal-*). Redefine them.
   Red stamp/seal color stays red (legal stamps are red by convention).
   ═══════════════════════════════════════════════════════════════════════════ */
.legal {
  --legal-paper:    #f1ede0 !important;
  --legal-ink:      #1a1f27 !important;
  --legal-rule:     rgba(196, 188, 160, 0.55) !important;
  --legal-rule-soft: rgba(196, 188, 160, 0.32) !important;
  --legal-mut:      #5a6577 !important;
  --legal-slate:    #5a6577 !important;
  --legal-navy:     #26303d !important;
  /* --legal-stamp + --legal-stamp-bg keep red — legal stamp convention */
}
/* Classification stripe — ink with brass-l meta */
.legal__class {
  background: #1a1f27 !important;
  color: #cfd4dd !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.22em !important;
}
.legal__class-meta { color: var(--hp-brass-l) !important; opacity: 1 !important; }
/* Masthead crest brass-l */
.legal__crest { color: var(--hp-brass-l) !important; opacity: 1 !important; }
/* Kicker mono uppercase brass-l */
.legal__kicker {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
/* Brass+copper rule between title and sub via pseudo on the title */
.legal__title {
  position: relative;
}
.legal__title::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  margin: 22px auto 0;
}
/* Title dot — was red, keep red since it's a "seal" mark */
/* Byline */
.legal__byline {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.28em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 / PAGE 5 — /podcast/
   Same dossier-hero + paper/ledger section pattern. Color swaps only.
   ═══════════════════════════════════════════════════════════════════════════ */
.podcast-dossier-hero,
.podcast-dossier-section {
  --navy: #1a1f27;
  --charcoal: #1a1f27;
  --slate: #5a6577;
  --slate-mid: #5a6577;
  --steel: #e0b56a;
  --gray-700: #5a6577;
  --gray-500: #5a6577;
  --gray-400: #c4bca0;
  --gray-300: #c4bca0;
  --gray-200: #c4bca0;
  --ice: #faf7ec;
}

/* Hero — workshop gunmetal + brass ribbon */
.podcast-dossier-hero {
  background:
    radial-gradient(110% 140% at 8% -10%, rgba(199,154,79,0.10), transparent 50%),
    radial-gradient(80% 100% at 100% 110%, rgba(185,120,73,0.10), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative;
}
.podcast-dossier-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 18px, var(--hp-copper) 18px 22px);
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}
.podcast-dossier-hero__classification {
  background: var(--hp-ink) !important;
  color: #cfd4dd !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
.podcast-dossier-hero__est { color: var(--hp-brass-l) !important; }
.podcast-dossier-hero__eyebrow {
  color: var(--hp-brass-l) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.podcast-dossier-hero__title {
  color: #f4f1e7 !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.podcast-dossier-hero__title em { color: var(--hp-brass-l) !important; font-style: italic !important; }
.podcast-dossier-hero__rule {
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px) !important;
}
.podcast-dossier-hero__sub { color: rgba(244,241,231,0.78) !important; }
.podcast-dossier-hero__stamp {
  border-color: var(--hp-brass-l) !important;
  color: var(--hp-brass-l) !important;
}
.podcast-dossier-hero__stamp-text { color: var(--hp-brass-l) !important; }

/* Sections */
.podcast-dossier-section--paper {
  background: var(--hp-paper) !important;
}
.podcast-dossier-section--ledger {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(199,154,79,0.08), transparent 55%),
    linear-gradient(165deg, var(--hp-steel) 0%, var(--hp-steel-2) 100%) !important;
  position: relative !important;
}
.podcast-dossier-section--ledger::before,
.podcast-dossier-section--ledger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--hp-brass) 0 14px, var(--hp-copper) 14px 18px);
  opacity: 0.8;
  pointer-events: none;
}
.podcast-dossier-section--ledger::before { top: 0; }
.podcast-dossier-section--ledger::after  { bottom: 0; }

/* Ledger section text — switch to light tones since bg is now dark */
.podcast-dossier-section--ledger .podcast-dossier-section__roman { color: var(--hp-brass-l) !important; }
.podcast-dossier-section--ledger .podcast-dossier-section__title { color: #f4f1e7 !important; }
.podcast-dossier-section--ledger .podcast-dossier-section__head { border-bottom-color: rgba(199,154,79,0.22) !important; }
.podcast-dossier-section--ledger .podcast-dossier-lede { color: rgba(244,241,231,0.82) !important; }
.podcast-dossier-section--ledger .podcast-dossier-lede strong { color: #f4f1e7 !important; }
.podcast-dossier-section--ledger .podcast-dossier-lede a { color: var(--hp-brass-l) !important; }
.podcast-dossier-section--ledger .podcast-dossier-pullquote {
  background: rgba(199,154,79,0.08) !important;
  border-left-color: var(--hp-brass) !important;
}
.podcast-dossier-section--ledger .podcast-dossier-pullquote p { color: #f4f1e7 !important; }
.podcast-dossier-section--ledger .podcast-dossier-pullquote__attr { color: var(--hp-brass-l) !important; }

/* Paper section text — keep dark on cream */
.podcast-dossier-section--paper .podcast-dossier-section__roman {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.32em !important;
}
.podcast-dossier-section--paper .podcast-dossier-section__title {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.podcast-dossier-section--paper .podcast-dossier-section__head { border-bottom-color: var(--hp-rule) !important; }
.podcast-dossier-section--paper .podcast-dossier-lede { color: var(--hp-slate) !important; }
.podcast-dossier-section--paper .podcast-dossier-lede strong { color: var(--hp-ink) !important; }
.podcast-dossier-section--paper .podcast-dossier-lede a {
  color: var(--hp-link) !important;
  text-decoration-color: rgba(125,63,28,0.4) !important;
}
.podcast-dossier-section--paper .podcast-dossier-pullquote {
  background: rgba(185,120,73,0.06) !important;
  border-left-color: var(--hp-copper) !important;
}
.podcast-dossier-section--paper .podcast-dossier-pullquote p { color: var(--hp-ink) !important; }
.podcast-dossier-section--paper .podcast-dossier-pullquote__attr { color: var(--hp-copper) !important; }

/* Episode list — color-only swap, no boxing */
.podcast-dossier-episode { border-bottom-color: var(--hp-rule) !important; }
.podcast-dossier-episode__num {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.28em !important;
}
.podcast-dossier-episode__kind {
  color: var(--hp-copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.podcast-dossier-episode__body h3 {
  color: var(--hp-ink) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.podcast-dossier-section--ledger .podcast-dossier-episode__body h3 { color: #f4f1e7 !important; }
.podcast-dossier-episode__body p { color: var(--hp-slate) !important; }
.podcast-dossier-section--ledger .podcast-dossier-episode__body p { color: rgba(244,241,231,0.78) !important; }

/* CTA buttons */
.podcast-dossier-btn {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
}
/* Primary stays red */
.podcast-dossier-btn--secondary {
  background: var(--hp-steel) !important;
  color: var(--hp-sheet) !important;
  border-color: var(--hp-steel) !important;
  box-shadow: inset 0 0 0 1px var(--hp-brass) !important;
}
.podcast-dossier-btn--secondary:hover {
  background: var(--hp-steel-2) !important;
  border-color: var(--hp-steel-2) !important;
  color: var(--hp-sheet) !important;
}

/* ── Review screenshots (investigation posts) ─────────────────────────────
   Native captures are 366px wide but up to 3,200px tall when they include the
   operator's reply. Left to the global img rule they upscale to container width
   and swallow the page. Cap at native width, cap the height with an internal
   scroll, and lay multiples out as a horizontal strip. */
.rev-strip {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.9rem;
  margin: 1.5rem 0 0.6rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rev-strip::-webkit-scrollbar { height: 7px; }
.rev-strip::-webkit-scrollbar-track { background: rgba(47,58,74,0.06); border-radius: 4px; }
.rev-strip::-webkit-scrollbar-thumb { background: rgba(47,58,74,0.26); border-radius: 4px; }

.rev-shot {
  flex: 0 0 auto;
  width: 290px;
  max-width: 100%;
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(47,58,74,0.18);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(47,58,74,0.07);
}
.rev-shot--solo { margin: 1.5rem 0 0.6rem; }

.rev-shot__frame {
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rev-shot__frame::-webkit-scrollbar { width: 6px; }
.rev-shot__frame::-webkit-scrollbar-thumb { background: rgba(47,58,74,0.22); border-radius: 3px; }
.rev-shot img { width: 100%; height: auto; display: block; }

.rev-shot figcaption {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(47,58,74,0.62);
  padding: 0.5rem 0.7rem;
  border-top: 1px solid rgba(47,58,74,0.12);
  background: rgba(47,58,74,0.02);
}

.rev-strip__note {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47,58,74,0.45);
  margin: 0 0 1.9rem;
}

@media (max-width: 640px) {
  .rev-shot { width: 250px; }
  .rev-shot__frame { max-height: 320px; }
}

/* ── Open request / right-of-reply callout ──────────────────────────────── */
.open-request {
  margin: 3rem 0 2.5rem;
  border: 1px solid rgba(192,57,43,0.35);
  border-top: 4px solid var(--accent, #c0392b);
  background: linear-gradient(180deg, rgba(192,57,43,0.045), rgba(192,57,43,0.015));
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem);
  border-radius: 2px;
}
.open-request__eyebrow {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent, #c0392b);
  margin: 0 0 0.7rem;
}
.open-request__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--charcoal, #2f3a4a);
  margin: 0 0 1rem;
}
.open-request__lead {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.6;
  color: var(--slate-mid, #4a5568);
  margin: 0 0 1.4rem;
}
.open-request p { line-height: 1.7; }
.open-request ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.open-request ol li { margin-bottom: 0.65rem; line-height: 1.6; }
.open-request ol li strong { color: var(--charcoal, #2f3a4a); }
.open-request__src {
  display: block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(47,58,74,0.55);
  margin-top: 0.15rem;
}
.open-request__close {
  border-top: 1px solid rgba(192,57,43,0.22);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  font-weight: 600;
}
.open-request__contact {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(47,58,74,0.7);
  margin: 1rem 0 0;
}

/* ── Court-document exhibit strip ───────────────────────────────────────── */
.doc-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.9rem;
  margin: 1.6rem 0 0.6rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.doc-strip::-webkit-scrollbar { height: 7px; }
.doc-strip::-webkit-scrollbar-track { background: rgba(47,58,74,0.06); border-radius: 4px; }
.doc-strip::-webkit-scrollbar-thumb { background: rgba(47,58,74,0.26); border-radius: 4px; }

.doc-shot {
  flex: 0 0 auto;
  width: 372px;
  max-width: 100%;
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(47,58,74,0.20);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(47,58,74,0.10);
}
.doc-shot a { display: block; line-height: 0; }
.doc-shot img { width: 100%; height: auto; display: block; }
.doc-shot figcaption {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(47,58,74,0.62);
  padding: 0.5rem 0.7rem;
  border-top: 1px solid rgba(47,58,74,0.12);
  background: rgba(47,58,74,0.02);
  line-height: 1.45;
}
.doc-strip__note {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47,58,74,0.45);
  margin: 0 0 1.9rem;
}

@media (max-width: 640px) {
  .doc-shot { width: 268px; }
}

/* ── Community evidence callout ─────────────────────────────────────────── */
.tip-call {
  margin: 2.4rem 0;
  padding: 1.7rem 1.6rem 1.4rem;
  border: 1px solid rgba(47,58,74,0.16);
  border-top: 4px solid #b8862b;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(184,134,43,0.055), rgba(184,134,43,0.015));
}
.tip-call__eyebrow {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a6420;
  margin: 0 0 0.5rem;
}
.tip-call__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.3rem, 2.9vw, 1.7rem);
  line-height: 1.22;
  color: var(--charcoal, #2f3a4a);
  margin: 0 0 0.9rem;
}
.tip-call p { line-height: 1.7; margin: 0 0 0.95rem; }
.tip-call ul { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.tip-call ul li { margin-bottom: 0.5rem; line-height: 1.6; }
.tip-call h4 {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47,58,74,0.72);
  margin: 1.3rem 0 0.6rem;
}
.tip-call__note {
  font-size: 0.87rem;
  color: rgba(47,58,74,0.72);
  border-top: 1px solid rgba(47,58,74,0.13);
  padding-top: 0.9rem;
  margin-bottom: 0;
}

/* ── Portrait/small hero (opt-in via heroSmall frontmatter) ─────────────── */
/* For posts whose hero is a small headshot rather than a wide editorial
   photo: render it at its natural scale, framed like an ID photo clipped
   to the dossier, instead of stretching 200px of pixels across the column. */
.post-dossier__hero-img--portrait img {
  width: min(220px, 60vw);
  margin: 0 auto;
  image-rendering: auto;
}

/* ── Hero verify console + filmstrip (2026-08 hero redesign) ────────────── */
/* The verify tool is the site's product, so the hero's right column IS the
   tool — a dossier intake card that opens the existing verify modal. The
   3:1 photo moves out of the column into a full-bleed strip below, where
   its own shape finally fits. */
.hp-cinema-hero__proofline {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
}
.hp-cinema-hero__proofline span {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.hp-cinema-hero__proofline span::before { content: "— "; color: #d9a441; }

.hp-cinema-hero__console {
  display: block;
  text-decoration: none;
  color: var(--charcoal);
  background: var(--hp-paper, #fbfaf6);
  border: 1px solid #d8d2bf;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 22px 44px -14px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.25);
  transform: rotate(0.35deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hp-cinema-hero__console:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 28px 52px -14px rgba(0,0,0,0.6),
    0 8px 18px rgba(0,0,0,0.28);
}
.hp-cinema-hero__console-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--charcoal);
  color: rgba(255,255,255,0.85);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
}
.hp-cinema-hero__console-no { color: #d9a441; letter-spacing: 0.14em; }
.hp-cinema-hero__console-body { display: block; padding: 1.4rem 1.4rem 1.25rem; }
.hp-cinema-hero__console-lead {
  display: block;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.hp-cinema-hero__console-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-bottom: 1rem;
}
.hp-cinema-hero__console-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #c9c2ae;
  background: #fff;
  border-radius: 2px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.8rem;
  color: var(--gray-500);
  font-size: 0.9rem;
}
.hp-cinema-hero__console-field svg { flex: 0 0 auto; opacity: 0.55; }
.hp-cinema-hero__console-caret {
  width: 1px;
  height: 1.05em;
  background: var(--accent);
  animation: hp-caret-blink 1.1s steps(1) infinite;
}
@keyframes hp-caret-blink { 50% { opacity: 0; } }
.hp-cinema-hero__console-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  padding: 0.95rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}
.hp-cinema-hero__console:hover .hp-cinema-hero__console-go { background: var(--accent-hover); }
.hp-cinema-hero__console-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid #d8d2bf;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.hp-cinema-hero__console-sources b { color: var(--charcoal); font-weight: 600; }

/* Full-bleed cinematic strip along the band's bottom edge. The band's brass
   ::after trim (z-index 2) overlays the strip's bottom edge as a frame. */
.hp-cinema-hero__filmstrip {
  position: relative;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 calc(-1 * clamp(1.75rem, 3.5vw, 2.75rem));
}
.hp-cinema-hero__filmstrip img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.85);
}
.hp-cinema-hero__filmstrip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(47,58,74,0.55), rgba(47,58,74,0) 30%, rgba(47,58,74,0) 70%, rgba(47,58,74,0.55));
  pointer-events: none;
}
.hp-cinema-hero__filmstrip figcaption {
  position: absolute;
  right: 1.2rem;
  bottom: 0.7rem;
  z-index: 1;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

@media (max-width: 900px) {
  /* Below tablet width the strip drops its fixed height and renders at the
     photo's own 1905:648 ratio — the ENTIRE image stays visible, no crop,
     at any small size. */
  .hp-cinema-hero__filmstrip img {
    height: auto;
    aspect-ratio: 1905 / 648;
    object-position: center;
  }
  .hp-cinema-hero__console { transform: none; }
  .hp-cinema-hero__console:hover { transform: translateY(-2px); }
}