/* Nash Ducks — vintage Americana heritage design system
   Badge-and-banner, screen-printed poster feel. Cream paper, midnight navy,
   mustard gold, brick red, steel blue. Slab display + condensed labels. */

:root {
  /* --- core palette --- */
  --navy: #0f1e33;
  --navy-deep: #0a1524;
  --navy-soft: #1c3149;
  --cream: #f7f1e3;
  --paper: #fcf8ee;
  --paper-dim: #efe7d4;
  --gold: #c8952f;
  --gold-bright: #dcaa3c;
  --gold-dim: #a87a22;
  --brick: #b4342b;
  --brick-deep: #8e2620;
  --steel: #2c6e9b;
  --steel-deep: #1f5476;
  --olive: #4e5d3a;
  --ink: #1c1c1a;
  --ink-soft: #5a5750;
  --ink-faint: #8b867b;
  --rule: #d9cfb8;

  /* legacy aliases kept so older class names still resolve */
  --yellow: var(--gold);
  --yellow-deep: var(--gold-dim);
  --aqua: var(--steel);
  --aqua-deep: var(--steel-deep);
  --pink: var(--brick);
  --tangerine: var(--brick);
  --lime: var(--olive);
  --white: var(--paper);

  --border: 2px solid var(--ink);
  --border-thin: 1px solid var(--rule);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 10px 26px rgba(15, 30, 51, 0.13);
  --shadow-sm: 0 4px 12px rgba(15, 30, 51, 0.1);
  --shadow-lg: 0 20px 48px rgba(15, 30, 51, 0.22);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.12rem, 1.5vw, 1.3rem);
  --text-xl: clamp(1.45rem, 2.4vw, 2rem);
  --text-2xl: clamp(1.9rem, 4vw, 2.9rem);
  --text-hero: clamp(2.3rem, 5.8vw, 4.4rem);

  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-cond: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-script: "Yellowtail", "Brush Script MT", cursive;

  --maxw: 1180px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* global paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 500;
}

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

a {
  color: var(--steel-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--brick);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.004em;
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
h4 {
  font-family: var(--font-cond);
  font-weight: 600;
}
p {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}
strong,
b {
  font-weight: 600;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: clamp(var(--space-12), 6.5vw, var(--space-24));
}
.section--tight {
  padding-block: clamp(var(--space-12), 5vw, var(--space-16));
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: var(--space-3) var(--space-4);
  z-index: 600;
}
.skip:focus {
  left: 0;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--gold);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 78px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
  line-height: 1;
}
.brand img,
.brand svg {
  width: 50px;
  height: 50px;
  flex: none;
}
.brand span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
}
.brand span em {
  font-style: normal;
  color: var(--brick);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--font-cond);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--brick);
  border-bottom-color: var(--brick);
}
.nav a.btn {
  padding: 11px 20px;
  border-bottom: var(--border);
  color: var(--cream);
}
.nav a.btn:hover,
.nav a.btn[aria-current="page"] {
  color: var(--cream);
  border-bottom-color: var(--ink);
}
.nav-toggle {
  display: none;
  background: var(--paper);
  border: var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  font: 500 0.9rem / 1 var(--font-cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 11px 14px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 30, 51, 0.2);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn--pink {
  background: var(--brick);
  color: var(--cream);
}
.btn--pink:hover {
  background: var(--brick-deep);
  color: var(--cream);
}
.btn--aqua {
  background: var(--steel);
  color: var(--cream);
}
.btn--aqua:hover {
  background: var(--steel-deep);
  color: var(--cream);
}
.btn--yellow {
  background: var(--gold);
  color: var(--ink);
}
.btn--yellow:hover {
  background: var(--gold-bright);
  color: var(--ink);
}
.btn--ink {
  background: var(--navy);
  color: var(--cream);
}
.btn--lg {
  font-size: var(--text-base);
  padding: 17px 32px;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--cream);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(180, 52, 43, 0.34) 0 22%,
      transparent 23%
    ),
    repeating-conic-gradient(
      from 200deg at 82% 44%,
      rgba(44, 110, 155, 0.26) 0deg 4deg,
      transparent 4deg 15deg
    );
  opacity: 0.7;
  pointer-events: none;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
  padding-block: clamp(var(--space-12), 5.5vw, var(--space-24));
}
.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: var(--space-4);
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.hero h1 em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 0.78em;
  color: #e9705f;
  display: block;
  margin-top: 0.12em;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}
.hero__lede {
  font-size: var(--text-lg);
  font-weight: 400;
  max-width: 46ch;
  color: #dfd8c6;
}
.hero a:not(.btn) {
  color: var(--gold-bright);
}
.hero .btn--yellow,
.cta .btn--yellow,
.panel--ink .btn--yellow,
.panel--aqua .btn--yellow,
.phero .btn--yellow {
  color: var(--ink);
}
.hero .btn--aqua,
.hero .btn--pink,
.cta .btn--aqua,
.cta .btn--pink,
.panel--aqua .btn--pink,
.panel--aqua .btn--aqua {
  color: var(--cream);
}
.hero .btn,
.cta .btn,
.phero .btn {
  text-decoration: none;
}
.hero__img {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--navy-deep);
  padding: 9px;
}
.hero__img::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 3px solid var(--gold);
  pointer-events: none;
}
.hero__img {
  position: relative;
  margin: 0;
}
.hero__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* script accent line, e.g. "Made your way." */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--brick);
  letter-spacing: 0;
  display: block;
  margin-bottom: var(--space-3);
}
.hero .script {
  color: #e9705f;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--gold-bright);
  padding: 7px 15px;
  border-radius: 3px;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}
.eyebrow--light {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.eyebrow::before,
.eyebrow::after {
  content: "★";
  font-size: 0.72em;
  opacity: 0.85;
  letter-spacing: 0;
}

.tagline {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  color: var(--gold-bright);
  background: none;
  display: inline-block;
  padding: 0;
  border: 0;
  box-shadow: none;
  transform: none;
  line-height: 1.3;
}

/* star / bolt dividers */
.rule-stars {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-4);
}
.rule-stars::before,
.rule-stars::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--gold);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  padding-block: 11px;
}
.marquee__track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: slide 34s linear infinite;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Panels ---------- */
.panel {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.panel--cream {
  background: var(--cream);
}
.panel--white {
  background: var(--paper);
}
.panel--yellow {
  background: var(--gold);
}
.panel--yellow > .wrap > .section-head p,
.panel--yellow > .wrap > p {
  color: #3b2d0c;
}
.panel--yellow .eyebrow {
  background: var(--ink);
  color: var(--gold-bright);
}
.panel--aqua {
  background: var(--steel-deep);
  color: var(--cream);
}
.panel--aqua h2,
.panel--aqua h3,
.panel--aqua h4 {
  color: var(--cream);
}
.panel--aqua > .wrap > .section-head p,
.panel--aqua > .wrap > p,
.panel--aqua .section-head p {
  color: #d5e3ee;
}
.panel--aqua a {
  color: var(--gold-bright);
}
.panel--aqua .eyebrow {
  background: var(--paper);
  color: var(--ink);
}
.panel--ink {
  background: var(--navy);
  color: #d8d2c3;
}
.panel--ink h2,
.panel--ink h3,
.panel--ink h4 {
  color: var(--cream);
}
.panel--ink a {
  color: var(--gold-bright);
}
.panel--ink .card {
  color: var(--ink);
}
.panel--ink .card h3,
.panel--ink .card h4 {
  color: var(--ink);
}
.panel--ink .card p {
  color: var(--ink-soft);
}
.panel--ink .card a,
.panel--ink .card__link {
  color: var(--ink);
}
.panel--ink .btn--yellow,
.panel--ink .btn--white {
  color: var(--ink);
}
.panel--ink .btn--aqua,
.panel--ink .btn--pink,
.panel--ink .btn--ink {
  color: var(--cream);
}
.panel--ink .eyebrow {
  background: var(--gold);
  color: var(--navy-deep);
}
.panel--ink .script {
  color: #e9705f;
}

.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(28, 28, 26, 0.22);
  border-radius: 4px;
  pointer-events: none;
}
.card > :last-child {
  margin-bottom: 0;
}
.card h3,
.card h4 {
  margin-bottom: var(--space-2);
}
.card p {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: none;
}
.card ul {
  padding-left: 1.15em;
  margin: 0 0 var(--space-4);
}
.card--yellow {
  background: var(--gold);
}
.card--yellow p,
.card--yellow li {
  color: #3b2d0c;
}
.card--aqua {
  background: var(--steel-deep);
  color: var(--cream);
}
.card--aqua h3,
.card--aqua h4 {
  color: var(--cream);
}
.card--aqua p,
.card--aqua li {
  color: #d5e3ee;
}
.card--aqua a,
.card--aqua .card__link {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.card--pink {
  background: var(--brick);
  color: var(--cream);
}
.card--pink h3,
.card--pink h4 {
  color: var(--cream);
}
.card--pink p,
.card--pink li {
  color: #f2ddd8;
}
.card--pink a,
.card--pink .card__link {
  color: var(--cream);
  border-color: var(--cream);
}
.card--lime {
  background: var(--olive);
  color: var(--cream);
}
.card--lime h3,
.card--lime h4 {
  color: var(--cream);
}
.card--lime p,
.card--lime li {
  color: #e0e5d6;
}
.card--lime a,
.card--lime .card__link {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.card--aqua::before,
.card--pink::before,
.card--lime::before {
  border-color: rgba(247, 241, 227, 0.3);
}
.card__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-bright);
  border: 2px solid var(--ink);
  margin-bottom: var(--space-4);
}
.card--yellow .card__num {
  background: var(--navy);
  color: var(--gold-bright);
}
.card--aqua .card__num,
.card--pink .card__num,
.card--lime .card__num {
  background: var(--cream);
  color: var(--ink);
}
.card__link {
  margin-top: var(--space-4);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  align-self: flex-start;
  padding-bottom: 2px;
}
.card__link:hover {
  color: var(--brick);
  border-color: var(--brick);
}
.card--media {
  padding: 0;
  overflow: hidden;
}
.card--media::before {
  display: none;
}
.card--media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1.5px solid var(--ink);
}
.card--media .card__body {
  padding: var(--space-6);
}

.stat {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.05;
  color: var(--brick);
  margin-bottom: 4px;
}
.stat span {
  font-family: var(--font-cond);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.split__media {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--navy-deep);
}
.split__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.split--flip .split__media {
  order: -1;
}

/* ---------- Section heads ---------- */
.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}
.section-head p {
  font-size: var(--text-lg);
  color: var(--ink-soft);
}
.panel--ink .section-head p {
  color: #c2bcae;
}

/* ---------- Lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: var(--text-base);
}
.ticks li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--gold);
}
.panel--ink .ticks li::before,
.panel--aqua .ticks li::before,
.card--aqua .ticks li::before,
.card--pink .ticks li::before,
.card--lime .ticks li::before {
  color: var(--gold-bright);
}

/* ---------- Table ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 620px;
}
caption {
  text-align: left;
  padding: var(--space-4) var(--space-6) 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
/* Secondary descriptor line inside a table cell. */
.muted {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
th,
td {
  padding: 14px var(--space-6);
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
thead th {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:nth-child(even) {
  background: var(--paper-dim);
}
td b {
  font-family: var(--font-cond);
  font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: var(--space-3);
}
details.qa {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-6);
}
details.qa summary {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}
details.qa summary::-webkit-details-marker {
  display: none;
}
details.qa summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--brick);
  flex: none;
}
details.qa[open] summary::after {
  content: "–";
}
details.qa p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ---------- Quote form ---------- */
.form {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
}
.field {
  margin-bottom: var(--space-4);
}
.field label {
  display: block;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: 400 var(--text-base) / 1.5 var(--font-body);
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 12px 14px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-note {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.form-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--brick);
  border-left-width: 6px;
  border-radius: 4px;
  background: #fdeceb;
  color: #7d211b;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.form-error a {
  color: #7d211b;
  font-weight: 700;
}
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"],
.form select[aria-invalid="true"] {
  border-color: var(--brick);
  box-shadow: 0 0 0 3px rgba(180, 52, 43, 0.16);
}
.form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--navy);
  color: #d8d2c3;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(200, 149, 47, 0.09) 0 2px,
    transparent 2px 12px
  );
  pointer-events: none;
}
.cta > .wrap {
  position: relative;
  z-index: 1;
}
.cta h2 {
  font-size: var(--text-2xl);
  margin-inline: auto;
  max-width: 26ch;
  color: var(--cream);
}
.cta p {
  margin-inline: auto;
  font-size: var(--text-lg);
  max-width: 54ch;
  color: #cec8b9;
}
.cta .script {
  color: #e9705f;
}
.cta .btn-row {
  justify-content: center;
}
.cta a:not(.btn) {
  color: var(--gold-bright);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-deep);
  color: #b6b0a2;
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--text-sm);
  border-top: 3px solid var(--gold);
}
.footer a {
  color: var(--cream);
  text-decoration: none;
}
.footer a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.footer h4 {
  font-family: var(--font-cond);
  font-weight: 500;
  color: var(--gold-bright);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer .brand {
  color: var(--cream);
  margin-bottom: var(--space-3);
}
.footer .brand span em {
  color: var(--gold-bright);
}
.footer .tagline {
  color: var(--gold-bright);
}
.footer__legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid #22344c;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
}

/* ---------- Breadcrumb ---------- */
.crumbs {
  font-family: var(--font-cond);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  padding-top: var(--space-6);
  color: var(--ink-soft);
}
.crumbs a {
  color: var(--ink-soft);
}

/* ---------- Page hero (interior) ---------- */
.phero {
  border-bottom: 2px solid var(--ink);
  padding-block: var(--space-12);
}
.phero h1 {
  max-width: 26ch;
}
.phero p {
  font-size: var(--text-lg);
  max-width: 56ch;
}
.phero--yellow {
  background: var(--gold);
}
.phero--yellow p {
  color: #3b2d0c;
}
.phero--yellow a {
  color: var(--navy-deep);
}
.phero--aqua {
  background: var(--steel-deep);
  color: var(--cream);
}
.phero--aqua h1 {
  color: var(--cream);
}
.phero--aqua p {
  color: #d5e3ee;
}
.phero--aqua a {
  color: var(--gold-bright);
}
.phero--aqua .eyebrow {
  background: var(--paper);
  color: var(--ink);
}
.phero--pink {
  background: var(--brick);
  color: var(--cream);
}
.phero--pink h1 {
  color: var(--cream);
}
.phero--pink p {
  color: #f2ddd8;
}
.phero--pink a {
  color: var(--cream);
}
.phero--pink .eyebrow {
  background: var(--paper);
  color: var(--ink);
}
.phero--lime {
  background: var(--olive);
  color: var(--cream);
}
.phero--lime h1 {
  color: var(--cream);
}
.phero--lime p {
  color: #e0e5d6;
}
.phero--lime a {
  color: var(--gold-bright);
}
.phero--lime .eyebrow {
  background: var(--paper);
  color: var(--ink);
}
.phero--ink {
  background: var(--navy);
  color: #d8d2c3;
}
.phero--ink h1 {
  color: var(--cream);
}
.phero--ink a {
  color: var(--gold-bright);
}

/* ---------- Badge stamp (secondary mark) ---------- */
.stamp {
  width: clamp(120px, 15vw, 168px);
  height: auto;
  flex: none;
}

/* ---------- Sources ---------- */
.sources {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.sources a {
  color: var(--ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 2px 0 var(--gold);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }
  .nav.is-open {
    display: flex;
  }
  .nav .btn {
    margin-top: var(--space-2);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header {
    position: relative;
  }
  .hero__grid,
  .split,
  .grid--2,
  .grid--3,
  .field-row {
    grid-template-columns: 1fr;
  }
  .split--flip .split__media {
    order: 0;
  }
  .brand img,
  .brand svg {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 560px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .brand {
    font-size: 1.05rem;
  }
}

/* ---------- Full-bleed product band ------------------------------------- */
.band {
  padding: 0;
  background: var(--navy);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.band__img {
  display: block;
  margin: 0;
}
.band__img img {
  display: block;
  width: 100%;
  height: auto;
}
.band__cap {
  margin: 0;
  padding: 0.85rem 0 0.95rem;
  color: var(--cream);
  font-family: var(--font-cond);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.band__cap b {
  color: var(--gold);
  font-weight: 600;
}
@media (max-width: 640px) {
  .band__cap {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-xs);
  }
}

/* ---------- Animated footer badge -------------------------------------------
   The source clip is a square with white corners, so the round mask on both
   the video and the still is what makes it read as a badge on navy. --------- */
.brand__mark {
  position: relative;
  display: block;
  flex: none;
  width: 50px;
  height: 50px;
}
.brand__mark video,
.brand__mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
}
/* Two-class selector so it beats `.brand__mark img` above on specificity, not
   just on order. A single .brand__still class loses that tie and both the
   video and the still render side by side. */
.brand__mark .brand__still {
  display: none;
}
.brand--footer {
  gap: 14px;
  font-size: 1.45rem;
}
.brand--footer .brand__mark {
  width: 88px;
  height: 88px;
}
@media (prefers-reduced-motion: reduce) {
  .brand__mark video {
    display: none;
  }
  .brand__mark .brand__still {
    display: block;
  }
}
@media (max-width: 640px) {
  .brand--footer {
    font-size: 1.25rem;
  }
  .brand--footer .brand__mark {
    width: 68px;
    height: 68px;
  }
}

/* ---------- Footer horizontal overflow --------------------------------------
   A bare `1fr` track floors at min-content, so the long unbreakable email
   string pushed the grid past the viewport and clipped the right column on
   phones. minmax(0, 1fr) lets the tracks actually shrink. -------------------- */
.footer__grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.footer li a {
  overflow-wrap: break-word;
}
@media (max-width: 1000px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* On phones the two-column track is narrower than the badge plus wordmark, so
   the brand block gets its own full-width row instead of bleeding sideways. */
@media (max-width: 640px) {
  .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }
  .brand--footer {
    flex-wrap: wrap;
  }
}

/* ---------- True-scale size reference strip ---------------------------------
   One shared pixels-per-inch value drives every object height, so the row is
   dimensionally correct at any viewport. Objects sit on a shared baseline. -- */
.scale {
  --ppi: clamp(30px, 5.4vw, 64px);
  --max-in: 3.5; /* tallest object in the row, the playing cards */
  margin: var(--space-10) 0 0;
}
.scale__track {
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
/* width:max-content + auto margins centres the row when it fits and pins it to
   the scroll origin when it does not. Two things NOT to substitute here:
   `justify-content:center` overflows both edges equally, which makes the first
   item unreachable by scrolling; and `width:min-content` under-measures a nowrap
   flex row in Chromium, leaving the last item painted outside the row box. */
.scale__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(10px, 2.4vw, 34px);
  width: max-content;
  margin-inline: auto;
  padding: 0 2px;
}
/* The baseline is drawn at the exact bottom of the object zone rather than as a
   border under the row, because label height varies with wrapping. */
.scale__row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--max-in) * var(--ppi));
  border-top: 2px solid var(--ink);
}
.scale__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
/* Every object box is the height of the TALLEST object and the art is bottom
   aligned inside it. That keeps all five feet on one line no matter how many
   lines each label wraps to. Sizing the box per-object instead would let a
   two-line label lift its object off the baseline. */
.scale__obj {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--max-in) * var(--ppi));
}
.scale__obj img,
.scale__art {
  display: block;
  width: auto;
  height: calc(var(--in) * var(--ppi));
}
/* The duck is a photo cutout, so it gets a soft contact shadow to keep it from
   floating above the baseline the drawn plates sit on. */
.scale__item--duck .scale__obj img {
  filter: drop-shadow(0 3px 4px rgba(15, 30, 51, 0.28));
}
.scale__sep {
  flex: none;
  width: 0;
  height: calc(var(--max-in) * var(--ppi));
  margin-inline: clamp(2px, 1vw, 12px);
  border-left: 2px dashed var(--gold);
  opacity: 0.75;
}
.scale__label {
  margin: calc(var(--space-3) + 2px) 0 0;
  text-align: center;
  max-width: clamp(8ch, 9vw, 13ch);
  line-height: 1.2;
}
.scale__label b {
  display: block;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.scale__label span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brick);
}
.scale__cap {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 62ch;
}
.panel--navy .scale__label b,
.panel--navy .scale__cap {
  color: #cfc6b2;
}
.panel--navy .scale__row::before {
  border-top-color: var(--gold);
}
/* Phones: shrink the scale and the label boxes enough that all five objects fit
   in one un-scrolled row. Relative scale is preserved because every object is
   still driven by the single --ppi value. */
@media (max-width: 640px) {
  .scale {
    --ppi: 26px;
  }
  .scale__row {
    gap: 7px;
  }
  .scale__sep {
    margin-inline: 3px;
  }
  /* font-size is set on the label itself so the ch unit below resolves against
     the smaller size, which is what actually narrows the columns. */
  .scale__label {
    font-size: var(--text-xs);
    max-width: 7ch;
  }
  .scale__label b {
    letter-spacing: 0.02em;
  }
  .scale__label span {
    font-size: var(--text-xs);
  }
}

/* ---------- Late overrides: keep plain cards readable inside tinted panels
   These must sit after the card-modifier rules so they win the tie. -------- */
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) h3,
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) h4,
.phero--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) h3,
.phero--pink .card:not(.card--aqua):not(.card--pink):not(.card--lime) h3,
.phero--lime .card:not(.card--aqua):not(.card--pink):not(.card--lime) h3 {
  color: var(--ink);
}
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) p,
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) li {
  color: var(--ink-soft);
}
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) a,
.panel--aqua .card:not(.card--aqua):not(.card--pink):not(.card--lime) .card__link {
  color: var(--ink);
  border-color: var(--gold);
}
.panel--aqua .stat b {
  color: var(--brick);
}
.panel--aqua .table-wrap,
.panel--ink .table-wrap {
  color: var(--ink);
}
.panel--aqua details.qa,
.panel--ink details.qa {
  color: var(--ink);
}
.panel--aqua details.qa summary,
.panel--ink details.qa summary {
  color: var(--ink);
}
.panel--aqua .form,
.panel--ink .form {
  color: var(--ink);
}
.panel--aqua .form label,
.panel--ink .form label {
  color: var(--ink);
}