/* ============================================================
   Versus Hair Studio — styles.css
   Design language: porcelain / aubergine / berry / blush
   Playfair Display (headings) + Karla (body)
   Two themes via [data-theme="dark"] on <html>.
   Known kiro-bug mitigations are commented inline (KB#n).
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
  --ground: #FAF5F2;      /* page background */
  --surface: #FFFFFF;     /* cards */
  --ink: #2B1A2A;         /* body text */
  --muted: #5C4659;       /* secondary text */
  --brand: #9B2757;       /* CTA fill */
  --brand-text: #9B2757;  /* small accent text / ticks / links on normal surfaces */
  --accent-dark: #F6C6DA; /* accent text on always-dark bands — fixed both themes */
  --blush: #F7C9D8;       /* highlight fill — dark text on it, never white */
  --ink-fixed: #2B1A2A;   /* dark text on blush — fixed */
  --on-brand: #FFFFFF;    /* text on brand fills — fixed */
  --cream: #F6EDF1;       /* text on always-dark bands — fixed */
  --band: #2B1A2A;        /* always-dark header/hero/footer/CTA/ticket panel */

  --border: rgba(43, 26, 42, 0.14);   /* KB#16 light cards rely on a visible border */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(43,26,42,.06), 0 8px 24px rgba(43,26,42,.06);
  --maxw: 1080px;
  --gap: clamp(1rem, 3vw, 1.75rem);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;
}

/* ---------- Tokens: dark override ---------- */
[data-theme="dark"] {
  --ground: #1A1219;
  --surface: #281C27;     /* ≥1.2:1 vs ground */
  --ink: #F6EDF1;
  --muted: #D1BECB;       /* ≥4.5:1 on ground */
  --brand: #9B2757;       /* KB#7 identical; white ≥4.5:1 — see note below */
  --brand-text: #F0A6C3;  /* links/ticks on normal (dark) surfaces */
  --accent-dark: #F6C6DA; /* fixed */
  --blush: #F7C9D8;       /* fixed */
  --ink-fixed: #2B1A2A;   /* fixed */
  --on-brand: #FFFFFF;    /* fixed */
  --cream: #F6EDF1;       /* fixed */
  --band: #0E080D;        /* even darker band in dark mode */

  --border: rgba(246, 237, 241, 0.16);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
}
/* KB#7 note: #9B2757 vs #FFFFFF ≈ 5.9:1 — white passes AA on brand fill in both themes. */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--ground);
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;        /* KB#3 no long-word overflow */
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-text); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
/* KB#4: never `padding: X 0` on an element that is ALSO `.container`.
   Section padding lives on the <section>, horizontal padding on .container. */
.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 5vw, 3rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--brand-text);
  margin: 0 0 .5rem;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  padding: .8rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { background: #811f49; border-color: #811f49; color: var(--on-brand); }
.btn--ghost { background: transparent; color: var(--brand-text); border-color: currentColor; }
.btn--ghost:hover { background: rgba(155,39,87,.08); color: var(--brand-text); }
.btn--blush { background: var(--blush); color: var(--ink-fixed); border-color: var(--blush); } /* KB#8 */
.btn--blush:hover { background: #f2b4c9; color: var(--ink-fixed); border-color: #f2b4c9; }
.btn--lg { padding: .95rem 1.6rem; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink-fixed);   /* KB#8 / KB#17 dark text on blush tint */
  border: 1px solid rgba(43,26,42,.18);
}
.note-chip {
  /* KB#17 small note chips ≥4.5:1 in light mode: dark ink on light tint */
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-fixed);
  background: var(--blush);
  border: 1px solid rgba(43,26,42,.2);
  border-radius: 999px;
  padding: .28rem .7rem;
}
[data-theme="dark"] .note-chip { color: var(--ink-fixed); } /* tint is fixed, keep dark text */

.needs-content {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: .3rem .6rem;
}

/* ============================================================
   ALWAYS-DARK BANDS — header / hero / .band / footer / ticket
   KB#1: every text role gets an explicit light-on-dark colour.
   KB#6: link rules must not override button text (:hover too).
   ============================================================ */
.site-header,
.hero,
.band,
.site-footer,
.ticket-panel {
  background: var(--band);
  color: var(--cream);
}
.site-header h1, .site-header h2, .site-header h3, .site-header h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.band h1, .band h2, .band h3, .band h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.ticket-panel h1, .ticket-panel h2, .ticket-panel h3, .ticket-panel h4 {
  color: var(--cream);
}
.site-header p, .hero p, .band p, .site-footer p, .ticket-panel p,
.site-header li, .hero li, .band li, .site-footer li, .ticket-panel li,
.ticket-panel dt, .ticket-panel dd {
  color: var(--cream);
}
/* .muted on dark bands stays legible */
.hero .muted, .band .muted, .site-footer .muted, .ticket-panel .muted {
  color: #CBB7C4;
}
/* KB#1 the header's .muted / sub-label use --accent-dark specifically */
.site-header .muted { color: var(--accent-dark); }

/* eyebrow / accent text on dark bands → fixed --accent-dark, never --brand-text (KB#1) */
.hero .eyebrow, .band .eyebrow, .site-footer .eyebrow, .ticket-panel .eyebrow {
  color: var(--accent-dark);
}

/* dl.nap on dark bands (KB#1 dt + dd) */
.site-footer dl.nap dt, .band dl.nap dt { color: var(--accent-dark); }
.site-footer dl.nap dd, .band dl.nap dd { color: var(--cream); }

/* generic links inside dark bands — but NOT buttons (KB#6) */
.site-header a:not(.btn),
.hero a:not(.btn),
.band a:not(.btn),
.site-footer a:not(.btn),
.ticket-panel a:not(.btn) {
  color: var(--accent-dark);
}
.site-header a:not(.btn):hover,
.hero a:not(.btn):hover,
.band a:not(.btn):hover,
.site-footer a:not(.btn):hover,
.ticket-panel a:not(.btn):hover {
  color: #ffffff;
}
/* KB#6 explicit button exceptions on every dark band (anchors AND buttons, incl :hover) */
.site-header a.btn--primary, .hero a.btn--primary, .band a.btn--primary,
.site-footer a.btn--primary, .ticket-panel a.btn--primary {
  color: var(--on-brand);
}
.site-header a.btn--primary:hover, .hero a.btn--primary:hover, .band a.btn--primary:hover,
.site-footer a.btn--primary:hover, .ticket-panel a.btn--primary:hover {
  color: var(--on-brand);
}
.site-header a.btn--blush, .hero a.btn--blush, .band a.btn--blush,
.site-footer a.btn--blush, .ticket-panel a.btn--blush {
  color: var(--ink-fixed);
}
.site-header a.btn--blush:hover, .hero a.btn--blush:hover, .band a.btn--blush:hover,
.site-footer a.btn--blush:hover, .ticket-panel a.btn--blush:hover {
  color: var(--ink-fixed);
}
/* Ghost buttons on dark bands: light border/text, both a.btn--ghost and button.btn--ghost, incl hover */
.site-header a.btn--ghost, .site-header button.btn--ghost,
.hero a.btn--ghost, .hero button.btn--ghost,
.band a.btn--ghost, .band button.btn--ghost,
.site-footer a.btn--ghost, .site-footer button.btn--ghost,
.ticket-panel a.btn--ghost, .ticket-panel button.btn--ghost {
  color: var(--cream);
  border-color: var(--cream);
  background: transparent;
}
.site-header a.btn--ghost:hover, .site-header button.btn--ghost:hover,
.hero a.btn--ghost:hover, .hero button.btn--ghost:hover,
.band a.btn--ghost:hover, .band button.btn--ghost:hover,
.site-footer a.btn--ghost:hover, .site-footer button.btn--ghost:hover,
.ticket-panel a.btn--ghost:hover, .ticket-panel button.btn--ghost:hover {
  color: var(--ink-fixed);
  background: var(--cream);
  border-color: var(--cream);
}
/* chips on dark bands keep their fixed blush tint + dark text (KB#8) */
.hero .chip, .band .chip, .site-footer .chip, .ticket-panel .chip { color: var(--ink-fixed); }

/* KB#2: no light cards inside dark bands — any .card within a band uses a darker fill */
.band .card, .hero .card { background: rgba(255,255,255,.06); border-color: rgba(246,237,241,.18); }
.band .card h3, .hero .card h3, .band .card p, .hero .card p { color: var(--cream); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(246,237,241,.08); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;                 /* KB#3 nav can move to own row */
  padding-block: .7rem;
}
.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
  min-width: 0;                    /* KB#3 */
  margin-right: auto;
}
.brand .brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cream);
  overflow-wrap: anywhere;         /* KB#3 brand name wraps */
}
.brand .brand-sub {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);       /* header sub-label uses --accent-dark */
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  align-items: center;
}
.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  color: var(--cream);
}
.main-nav a:hover { color: #fff; background: rgba(246,237,241,.1); }
.main-nav a[aria-current="page"] { color: var(--accent-dark); }
.header-cta { margin-left: .25rem; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-toggle:hover { background: rgba(246,237,241,.12); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .section { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}
.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-width: 0;                    /* KB#3 */
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.img-note {
  font-size: .72rem;
  color: var(--accent-dark);       /* KB#1 .img-note on dark band */
  margin-top: .4rem;
  letter-spacing: .02em;
}
/* .img-note when it sits on normal ground */
.on-ground .img-note { color: var(--muted); }

/* ---------- Comb-tooth divider motif ---------- */
.comb {
  height: 12px;
  background-image: repeating-linear-gradient(
    to right,
    var(--brand) 0, var(--brand) 2px,
    transparent 2px, transparent 8px
  );
  opacity: .5;
  border: 0;
  margin: 0;
}

/* ---------- Proof strip ---------- */
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: center;
  align-items: center;
}
.proof .proof-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.proof .proof-stat { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--brand-text); }
.proof .proof-label { font-size: .85rem; color: var(--muted); }

/* ---------- Cards grid ---------- */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);  /* KB#16 */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;                      /* KB#3 */
}
.card .card-media { aspect-ratio: 4/3; overflow: hidden; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .card-body { padding: 1.1rem 1.2rem 1.3rem; }
.card h3 { margin-top: 0; }

/* ---------- Find-us / NAP ---------- */
.findus {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gap);
  align-items: start;
}
.findus > * { min-width: 0; }        /* KB#3 */
dl.nap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
dl.nap dt { font-weight: 700; color: var(--brand-text); }
dl.nap dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }  /* KB#3 */

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap);
}
.footer-grid > * { min-width: 0; }   /* KB#3 */
.footer-grid h4 { color: var(--accent-dark); font-family: var(--font-body); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .4rem; }
.footer-bottom {
  border-top: 1px solid rgba(246,237,241,.14);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  font-size: .85rem;
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}
.demo-note {
  background: rgba(246,237,241,.07);
  border: 1px solid rgba(246,237,241,.16);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-size: .85rem;
  color: var(--cream);              /* KB#1 solid dark bg, light text */
  margin-top: 1rem;
}
.demo-note strong { color: var(--accent-dark); }         /* KB#1 .demo-note strong readable */
.footer-bottom .demo-note strong { color: var(--accent-dark); }

/* ============================================================
   SALON TICKET — signature feature
   ============================================================ */
.planner-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
}
.planner-grid > * { min-width: 0; }
.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.2rem 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
}
.fieldset > legend {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0 .4rem;
  color: var(--ink);
}
.field-hint { color: var(--muted); font-size: .9rem; margin: .1rem 0 1rem; }

/* service tiles (KB#13 selected visible without colour alone: outline + tick) */
.tile-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  cursor: pointer;
  background: var(--ground);
  font-weight: 700;
  min-width: 0;
}
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile .tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border);
  display: inline-grid;
  place-items: center;
  color: transparent;
  font-size: .9rem;
  line-height: 1;
}
.tile .tile-label { min-width: 0; }
.tile:hover { border-color: var(--brand-text); }
.tile:focus-within { outline: 3px solid var(--blush); outline-offset: 2px; }
/* selected: strong outline + visible tick (tick uses --brand-text per instruction) */
.tile.is-selected { border-color: var(--brand-text); background: rgba(155,39,87,.06); }
.tile.is-selected .tick { border-color: var(--brand-text); color: var(--brand-text); }
[data-theme="dark"] .tile.is-selected { background: rgba(240,166,195,.1); }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: .75rem; }
.stepper button {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: transparent;
  color: var(--brand-text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.stepper button:hover { background: rgba(155,39,87,.08); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper .count-out { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; min-width: 2ch; text-align: center; }
.stepper .count-sub { color: var(--muted); font-size: .9rem; }

/* radio rows */
.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: .5rem .9rem;
  cursor: pointer;
  font-weight: 700;
  background: var(--ground);
}
.radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-pill .dot { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--border); flex: 0 0 auto; }
.radio-pill:hover { border-color: var(--brand-text); }
.radio-pill:focus-within { outline: 3px solid var(--blush); outline-offset: 2px; }
.radio-pill.is-selected { border-color: var(--brand-text); background: rgba(155,39,87,.06); }
.radio-pill.is-selected .dot { background: var(--brand-text); border-color: var(--brand-text); }
[data-theme="dark"] .radio-pill.is-selected { background: rgba(240,166,195,.1); }

.dependent { margin-top: 1rem; }
.dependent[hidden] { display: none; }
input[type="date"], textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ground);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  width: 100%;
  max-width: 320px;
}
textarea { max-width: 100%; resize: vertical; min-height: 84px; }
.char-count { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* receipt-style ticket preview (on normal surface) */
.ticket-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.25rem;
}
.ticket-preview .ticket-head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  padding-bottom: .6rem;
  border-bottom: 2px dashed var(--border);
  margin-bottom: .8rem;
}
.ticket-lines { list-style: none; margin: 0 0 .8rem; padding: 0; font-size: .98rem; }
.ticket-lines li { padding: .3rem 0; border-bottom: 1px dotted var(--border); }
.ticket-lines li:last-child { border-bottom: 0; }
.ticket-meta { font-size: .95rem; color: var(--muted); }
.ticket-meta div { padding: .15rem 0; }
.ticket-empty { color: var(--muted); font-style: italic; }

/* always-dark message panel */
.ticket-panel {
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
  box-shadow: var(--shadow);
}
.ticket-panel .msg-out {
  background: rgba(246,237,241,.06);
  border: 1px solid rgba(246,237,241,.16);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  min-height: 4rem;
  color: var(--cream);
  white-space: pre-wrap;
}
.ticket-panel .msg-empty { color: #CBB7C4; font-style: italic; }
.copied-note { font-size: .85rem; color: var(--accent-dark); margin-top: .6rem; min-height: 1.2em; }

/* ---------- Utility ---------- */
.stack > * + * { margin-top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: .5rem;
  background: var(--brand); color: var(--on-brand);
  padding: .6rem 1rem; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: .5rem; }
:focus-visible { outline: 3px solid var(--blush); outline-offset: 2px; }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ============================================================
   RESPONSIVE — KB#3
   ============================================================ */
@media (max-width: 860px) {
  .hero-grid, .findus, .planner-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* nav on its own row */
  .header-inner { flex-wrap: wrap; }
  .main-nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .header-cta { display: none; }   /* KB#3 hide header CTA ≤480px */
}
@media (max-width: 360px) {
  body { font-size: 1rem; }
  .btn { padding: .75rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}