/* ==========================================================================
   MSR Decorating — site stylesheet
   Tokens taken verbatim from the MSR Brand & Build Kit v1.
   Order: tokens → reset → type → utility → components → sections → responsive
   ========================================================================== */

:root {
  /* colour */
  --navy-900:#141E2A; --navy-800:#1E2A3A; --navy-600:#33465C;
  --navy-300:#8394A5; --navy-100:#E4E9EE;
  --gold-700:#96692C; --gold-600:#B8863C; --gold-400:#D2A566; --gold-100:#F3E6CD;
  --sage-600:#6B7F63; --sage-300:#AEBBA8;
  --cream-050:#F6F1E7; --cream-100:#EFE6D3;
  --ink-900:#201D1A; --ink-600:#5B554C;
  --danger:#A3402F; --success:#4C7A4E;

  /* roles */
  --surface-page:var(--cream-050);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--cream-100);
  --surface-inverse:var(--navy-800);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-inverse:#FFFFFF;
  --accent:var(--gold-600);
  --accent-hover:var(--gold-700);
  --border:var(--navy-100);
  --border-strong:var(--navy-300);
  --focus-ring:var(--gold-600);

  /* type */
  --font-display:"Nunito", system-ui, sans-serif;
  --font-ui:"Work Sans", system-ui, sans-serif;
  --fs-display-1:56px; --fs-display-2:40px;
  --fs-h1:32px; --fs-h2:24px; --fs-h3:20px;
  --fs-body-lg:18px; --fs-body:16px; --fs-small:14px; --fs-caption:12px;

  /* space, radius, shadow */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,30,42,.08);
  --shadow-md:0 4px 12px rgba(20,30,42,.10);
  --shadow-lg:0 12px 32px rgba(20,30,42,.14);

  /* layout */
  --measure:1200px;
  --gutter:var(--space-5);
  --header-h:76px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg, video { display:block; max-width:100%; }
/* Anything linked to by a #fragment must clear the sticky header, or the
   heading lands underneath it. */
[id] { scroll-margin-top:calc(var(--header-h) + var(--space-4)); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; }
:focus:not(:focus-visible) { outline:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --- type ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-family:var(--font-display); font-weight:700; line-height:1.2; }
.display-1 { font-size:clamp(34px, 6vw, var(--fs-display-1)); font-weight:800; line-height:1.05; letter-spacing:-.01em; }
.display-2 { font-size:clamp(28px, 4.4vw, var(--fs-display-2)); font-weight:800; line-height:1.1; }
h1 { font-size:clamp(26px, 3.6vw, var(--fs-h1)); }
h2 { font-size:clamp(22px, 2.6vw, var(--fs-h2)); line-height:1.25; }
h3 { font-size:var(--fs-h3); line-height:1.3; }
p { text-wrap:pretty; }
.lead { font-size:clamp(16px, 2vw, var(--fs-body-lg)); line-height:1.5; color:var(--text-secondary); }
.small { font-size:var(--fs-small); }
.caption {
  font-size:var(--fs-caption); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-secondary);
}
a { color:var(--navy-600); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:var(--navy-800); }
.muted { color:var(--text-secondary); }

/* --- utility ------------------------------------------------------------- */
.wrap { width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.narrow { max-width:760px; }
.section { padding-block:clamp(var(--space-8), 9vw, var(--space-9)); }
.section--sunken { background:var(--surface-sunken); }
.section--tight { padding-block:clamp(var(--space-7), 6vw, var(--space-8)); }
.section-head { max-width:640px; margin-bottom:var(--space-7); }
.section-head p { margin-top:var(--space-3); }
.section-head.center { margin-inline:auto; text-align:center; }
.stack > * + * { margin-top:var(--space-4); }
.stack-lg > * + * { margin-top:var(--space-5); }
.center { text-align:center; }
.skip-link {
  position:absolute; left:var(--space-4); top:-100px; z-index:100;
  background:var(--surface-card); color:var(--text-primary);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); font-weight:600; text-decoration:none;
}
.skip-link:focus { top:var(--space-4); }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-ui); font-size:var(--fs-body); font-weight:600;
  padding:var(--space-3) var(--space-5); min-height:48px;
  border:1px solid transparent; border-radius:var(--radius-md);
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background:var(--accent); color:#fff; }
.btn--primary:hover { background:var(--accent-hover); color:#fff; }
.btn--outline { background:transparent; border-color:var(--border-strong); color:var(--text-primary); }
.btn--outline:hover { background:var(--cream-100); border-color:var(--navy-600); color:var(--text-primary); }
.btn--onnavy { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn--onnavy:hover { background:rgba(255,255,255,.10); border-color:#fff; color:#fff; }
.btn--block { width:100%; }
.btn--sm { min-height:44px; padding:var(--space-2) var(--space-4); font-size:var(--fs-small); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* --- badges & tags ------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  background:var(--gold-100); color:var(--gold-700);
}
.badge--sage { background:var(--sage-300); color:#2C3529; }
.tag {
  display:inline-block; font-size:var(--fs-small); font-weight:500;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  background:var(--cream-100); color:var(--text-secondary);
}
.tag-row { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }

/* --- cards --------------------------------------------------------------- */
.card {
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.card--pad { padding:var(--space-6); }
.panel {
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:clamp(var(--space-5), 4vw, var(--space-7));
  box-shadow:var(--shadow-md);
}
.grid { display:grid; gap:var(--space-5); }
/* Below 900px these auto-fit; at 900px+ the column count is pinned so cards
   never over-divide on a wide screen (see the min-width:900px block). */
.grid--2 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit, minmax(216px, 1fr)); }

/* --- image placeholders (brand kit: flat cream, never stock) -------------
   Swap .ph for <img> at the same aspect ratio and nothing else moves.       */
.ph {
  display:flex; align-items:center; justify-content:center;
  background:var(--cream-100); border:1px solid var(--border);
  border-radius:var(--radius-lg); color:var(--ink-600);
  font-size:var(--fs-small); text-align:center; padding:var(--space-4);
  aspect-ratio:16/9; width:100%;
}
.ph--hero { aspect-ratio:16/10; }
.ph--tall { aspect-ratio:4/5; }
.ph--square { aspect-ratio:1/1; }
.ph--sage { background:var(--sage-300); color:#2C3529; }
.ph--gold { background:var(--gold-100); color:var(--gold-700); }

/* --- header -------------------------------------------------------------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--surface-inverse); color:#fff; }
.site-header .wrap { display:flex; align-items:center; gap:var(--space-5); min-height:var(--header-h); position:relative; }
.brand { display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.brand svg { height:44px; width:auto; }
.nav { display:flex; align-items:center; gap:var(--space-5); margin-left:auto; }
.nav a { color:rgba(255,255,255,.86); text-decoration:none; font-weight:500; padding-block:var(--space-2); border-bottom:2px solid transparent; white-space:nowrap; }
.nav a:hover { color:#fff; }
.nav a[aria-current="page"] { color:var(--gold-400); border-bottom-color:var(--gold-400); }
.header-actions { display:flex; align-items:center; gap:var(--space-4); }
.header-phone { color:#fff; text-decoration:none; font-weight:600; white-space:nowrap; }
.header-phone:hover { color:var(--gold-400); }
.nav-toggle {
  display:none; margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); color:#fff; cursor:pointer;
  align-items:center; gap:var(--space-3); font-weight:600; font-size:var(--fs-small); min-height:44px;
}
.nav-toggle:hover { background:rgba(255,255,255,.10); }
.nav-toggle .bars { display:block; width:18px; height:2px; background:#fff; position:relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.nav-toggle .bars::before { top:-6px; }
.nav-toggle .bars::after { top:6px; }
.trust-bar {
  background:var(--navy-900); color:rgba(255,255,255,.80);
  font-size:var(--fs-small); padding:var(--space-2) var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-1) var(--space-4); text-align:center;
}
.trust-bar strong { color:#fff; font-weight:600; }
/* Soft-launch notice. Sage is the brand's quiet highlight — gold is reserved
   for the thing we want clicked, and this is information, not an action. */
.trust-bar-note { color:var(--sage-300); }
.trust-bar-note::before {
  content:"·"; margin-right:var(--space-4); color:rgba(255,255,255,.35);
}
/* Once the two messages stack, the leading separator would dangle. */
@media (max-width:659px) {
  .trust-bar-note::before { display:none; }
}

/* --- hero ---------------------------------------------------------------- */
.hero { padding-block:clamp(var(--space-7), 7vw, var(--space-9)); }
.hero-grid { display:grid; gap:clamp(var(--space-6), 5vw, var(--space-8)); align-items:center; }
.hero h1 { margin-bottom:var(--space-5); }
.hero .lead { margin-bottom:var(--space-6); }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4); margin-top:var(--space-8); }
.stat-n { font-family:var(--font-display); font-weight:800; font-size:clamp(24px, 3.4vw, var(--fs-h1)); color:var(--accent); line-height:1.1; }
.stat-l { font-size:var(--fs-small); color:var(--text-secondary); margin-top:var(--space-1); }
.hero-side { display:grid; gap:var(--space-4); }
.hero-side-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }

/* --- audience strip ------------------------------------------------------ */
.audience { border-block:1px solid var(--border); background:var(--surface-card); }
.audience .wrap { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); justify-content:center; padding-block:var(--space-5); }
.audience span { font-size:var(--fs-small); font-weight:600; color:var(--text-secondary); }

/* --- steps --------------------------------------------------------------- */
.steps { display:grid; gap:var(--space-5); }
.step { display:flex; gap:var(--space-4); }
.step-n {
  flex-shrink:0; width:40px; height:40px; border-radius:var(--radius-pill);
  background:var(--surface-inverse); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700;
}
.step h3 { margin-bottom:var(--space-2); }
.step p { color:var(--text-secondary); }

/* --- service cards ------------------------------------------------------- */
.svc-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); }
.svc-price { font-weight:600; color:var(--accent); white-space:nowrap; font-size:var(--fs-small); }
.svc p { margin-top:var(--space-3); color:var(--text-secondary); }

/* --- tabs ---------------------------------------------------------------- */
.tabs { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.tab {
  background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-5); min-height:44px; cursor:pointer; font-weight:600;
  color:var(--text-secondary); transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tab:hover { background:var(--cream-100); color:var(--text-primary); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background:var(--surface-inverse); border-color:var(--surface-inverse); color:#fff; }

/* --- accordion ----------------------------------------------------------- */
.acc { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-card); overflow:hidden; }
.acc + .acc { margin-top:var(--space-3); }
.acc-btn {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  background:transparent; border:0; padding:var(--space-5); cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
}
.acc-btn:hover { background:var(--cream-100); }
.acc-sign { flex-shrink:0; color:var(--accent); font-size:24px; line-height:1; font-family:var(--font-ui); }
.acc-body { padding:0 var(--space-5) var(--space-5); color:var(--text-secondary); }
.acc-body[hidden] { display:none; }

/* --- gallery ------------------------------------------------------------- */
.job {
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; text-align:left; cursor:pointer; padding:0; width:100%; font:inherit; color:inherit;
  transition:box-shadow .16s ease, transform .16s ease; box-shadow:var(--shadow-sm);
}
.job:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.job .ph { border:0; border-radius:0; }
/* The inner elements are <span>s so the markup stays valid inside <button>
   (a button may only contain phrasing content), so each needs display set. */
.job-body { display:block; padding:var(--space-4) var(--space-5) var(--space-5); }
.job-meta { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-3); }
.job-title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.3; }
.job-place { font-size:var(--fs-small); color:var(--text-secondary); white-space:nowrap; }
.job-cue { display:block; margin-top:var(--space-3); font-size:var(--fs-small); font-weight:600; color:var(--accent); }
.gallery-empty { padding:var(--space-7); text-align:center; color:var(--text-secondary); }

/* --- lightbox ------------------------------------------------------------ */
.lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(20,30,42,.70); padding:var(--gutter); }
.lightbox[hidden] { display:none; }
.lightbox-panel {
  background:var(--surface-card); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  max-width:800px; width:100%; max-height:90vh; overflow-y:auto;
  padding:clamp(var(--space-5), 4vw, var(--space-7));
}
.lightbox-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); }
.lightbox-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-5); }
.lightbox-close { background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius-md); width:44px; height:44px; flex-shrink:0; cursor:pointer; font-size:20px; line-height:1; }
.lightbox-close:hover { background:var(--cream-100); }

/* --- forms --------------------------------------------------------------- */
.field { display:block; margin-bottom:var(--space-5); }
.field > label, .fieldset-legend { display:block; font-weight:600; font-size:var(--fs-small); margin-bottom:var(--space-2); }
.hint { font-size:var(--fs-small); color:var(--text-secondary); font-weight:400; }
.input, .select, .textarea {
  width:100%; background:var(--surface-card); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4); min-height:48px;
}
.input:hover, .select:hover, .textarea:hover { border-color:var(--navy-600); }
.textarea { min-height:130px; resize:vertical; }
.select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2333465C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-4) center; padding-right:var(--space-8);
}
.field-error { display:block; color:var(--danger); font-size:var(--fs-small); font-weight:500; margin-top:var(--space-2); }
.field-error[hidden] { display:none; }
[aria-invalid="true"] { border-color:var(--danger); }
fieldset { border:0; padding:0; margin:0 0 var(--space-5); }
.choice-row { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.choice {
  display:inline-flex; align-items:center; gap:var(--space-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-5); min-height:48px; cursor:pointer; font-weight:500;
}
.choice:hover { background:var(--cream-100); }
.choice input { accent-color:var(--accent); width:18px; height:18px; }
.choice:has(input:checked) { border-color:var(--accent); background:var(--gold-100); font-weight:600; }
.check { display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-3); cursor:pointer; }
.check input { accent-color:var(--accent); width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.form-note { font-size:var(--fs-small); color:var(--text-secondary); margin-top:var(--space-4); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status { border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5); font-weight:500; }
.form-status--error { background:#F7E9E6; color:var(--danger); border:1px solid var(--danger); }
.form-status[hidden] { display:none; }

/* --- quote layout -------------------------------------------------------- */
.quote-grid { display:grid; gap:clamp(var(--space-6), 5vw, var(--space-8)); align-items:start; }
.aside-card { background:var(--surface-sunken); border-radius:var(--radius-xl); padding:var(--space-6); }
.next-list { counter-reset:n; list-style:none; padding:0; }
.next-list li { display:flex; gap:var(--space-3); margin-bottom:var(--space-4); }
.next-list li::before {
  counter-increment:n; content:counter(n);
  flex-shrink:0; width:28px; height:28px; border-radius:var(--radius-pill);
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:var(--fs-small); font-family:var(--font-display);
}
.tip { border-left:3px solid var(--accent); padding-left:var(--space-4); color:var(--text-secondary); font-size:var(--fs-small); }
.sent-panel { text-align:center; }
.sent-panel[hidden] { display:none; }
.sent-tick {
  width:56px; height:56px; border-radius:var(--radius-pill); background:var(--gold-100);
  color:var(--gold-700); display:grid; place-items:center; margin:0 auto var(--space-5);
  font-size:26px; font-weight:700;
}

/* --- testimonials -------------------------------------------------------- */
.quote-card { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); }
.quote-card blockquote { font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; line-height:1.4; }
.quote-card figcaption { margin-top:var(--space-4); font-size:var(--fs-small); color:var(--text-secondary); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background:var(--surface-inverse); color:#fff; border-radius:var(--radius-xl); padding:clamp(var(--space-6), 5vw, var(--space-8)); text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,.82); margin:var(--space-4) auto var(--space-6); max-width:520px; }
.cta-band .btn-row { justify-content:center; }

/* --- coverage ------------------------------------------------------------ */
.coverage-grid { display:grid; gap:var(--space-6); align-items:center; }
.postcode-row { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
.postcode-row .input { max-width:200px; text-transform:uppercase; }
.postcode-result { margin-top:var(--space-4); font-weight:500; }
.postcode-result[hidden] { display:none; }
.postcode-result.in { color:var(--success); }
.postcode-result.out { color:var(--text-secondary); }

/* --- principles ---------------------------------------------------------- */
.principle { display:flex; gap:var(--space-4); align-items:flex-start; }
.principle-dot { flex-shrink:0; width:12px; height:12px; border-radius:var(--radius-pill); background:var(--accent); margin-top:7px; }

/* --- footer -------------------------------------------------------------- */
.site-footer { background:var(--surface-inverse); color:rgba(255,255,255,.80); padding-block:var(--space-8) var(--space-6); margin-top:var(--space-9); }
.site-footer .brand svg { height:48px; }
.footer-grid { display:grid; gap:var(--space-7); grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer h2 { font-size:var(--fs-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-400); font-family:var(--font-ui); margin-bottom:var(--space-4); }
.site-footer ul { list-style:none; padding:0; }
.site-footer li { margin-bottom:var(--space-3); }
.site-footer a { color:rgba(255,255,255,.80); text-decoration:none; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.site-footer address { font-style:normal; }
.footer-blurb { max-width:320px; margin-top:var(--space-4); font-size:var(--fs-small); color:rgba(255,255,255,.70); }
.footer-base { border-top:1px solid rgba(255,255,255,.14); margin-top:var(--space-7); padding-top:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; font-size:var(--fs-small); }

/* --- sticky mobile action bar -------------------------------------------- */
.mobile-bar { display:none; }

/* --- responsive ---------------------------------------------------------- */
@media (min-width:900px) {
  /* The phone and CTA live inside .nav for the mobile drawer; on desktop the
     copies in .header-actions are the ones that show. */
  .nav .header-phone, .nav .btn { display:none; }
  /* Pin column counts so cards keep their intended proportions on wide screens. */
  .grid--2 { grid-template-columns:repeat(2, 1fr); }
  .grid--3 { grid-template-columns:repeat(3, 1fr); }
  .grid--4 { grid-template-columns:repeat(4, 1fr); }
  .hero-grid { grid-template-columns:1.05fr .95fr; }
  .steps { grid-template-columns:repeat(2, 1fr); gap:var(--space-7) var(--space-6); }
  .quote-grid { grid-template-columns:1.35fr .65fr; }
  .coverage-grid { grid-template-columns:1fr 1fr; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
}
@media (max-width:899px) {
  :root { --header-h:64px; }
  .nav-toggle { display:inline-flex; }
  .header-actions { display:none; }
  .nav {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-900); padding:var(--space-2) var(--gutter) var(--space-5);
    box-shadow:var(--shadow-lg); margin-left:0;
  }
  .nav.open { display:flex; }
  .nav a { padding:var(--space-4) 0; border-bottom:1px solid rgba(255,255,255,.10); }
  .nav a[aria-current="page"] { border-bottom-color:var(--gold-400); }
  .nav .btn { margin-top:var(--space-4); }
  .brand svg { height:38px; }
  .lightbox-pair { grid-template-columns:1fr; }
  .stats { gap:var(--space-3); }
  body { padding-bottom:76px; }
  .mobile-bar {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
    position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--surface-card); border-top:1px solid var(--border);
    padding:var(--space-3) var(--gutter);
    box-shadow:0 -4px 12px rgba(20,30,42,.08);
  }
}
@media (max-width:520px) {
  :root { --gutter:var(--space-4); }
  .stats { grid-template-columns:1fr; }
  .stat { display:flex; align-items:baseline; gap:var(--space-3); }
  .stat-l { margin-top:0; }
  .hero-side-row { grid-template-columns:1fr; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  .site-header, .mobile-bar, .trust-bar, .nav-toggle, .lightbox { display:none !important; }
  body { background:#fff; padding-bottom:0; }
  .card, .panel { box-shadow:none; border:1px solid #ccc; }
  .site-footer { background:none; color:#000; margin-top:var(--space-6); }
  .site-footer a, .site-footer h2 { color:#000; }
}