/* ==========================================================================
   Dalton's Junk Removal  -  one page site
   Tokens first, then layout, then components. Mobile first.
   ========================================================================== */

:root {
  /* Palette, sampled straight off the logo:
       navy  #133356   cream #e7e4dc   steel #808b90
     Every value below is either one of those three or derived from them.

     One rule worth knowing before you edit: --blue is a FILL colour, not a text
     colour. It only clears 3.9:1 on cream, so as text it fails WCAG AA. Use
     --blue-tx for accent text on cream and --blue-lt for accent text on dark;
     both were picked as the nearest passing shade of the same blue. */
  --ink:        #0a1c30;   /* deep navy-black: header, dark sections, footer */
  --ink-2:      #102943;   /* raised surface on dark */
  --ink-3:      #1b3a5c;
  --navy:       #133356;   /* the logo navy */
  --blue:       #2f74bd;   /* action fill, white text on top (4.82:1) */
  --blue-dk:    #25619f;   /* fill hover */
  --blue-lt:    #4a92e0;   /* accent text on dark  (5.30:1 on ink, 4.56:1 on ink-2) */
  --blue-tx:    #2a68aa;   /* accent text on cream (4.60:1 on paper) */
  --blue-tint:  rgba(47, 116, 189, 0.12);
  --paper:      #e9e6de;   /* the logo cream */
  --paper-hi:   #f5f3ee;   /* cards and the page base */
  --white:      #ffffff;   /* button text on --blue, nothing else */
  --cream:      #e7e4dc;   /* the logo cream, as text on dark (13.8:1 on ink) */
  --steel:      #808b90;   /* the logo steel */
  --text:       #10243c;   /* body text on cream */
  --muted:      #4e5f6e;   /* muted text on cream (5.29:1) */
  --muted-dk:   #98a3a9;   /* muted text on dark  (6.67:1) */
  --line:       #d7d3ca;
  --line-dk:    rgba(231, 228, 220, 0.16);

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --wrap:   1140px;
  --gut:    20px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;

  --shadow-sm: 0 1px 2px rgba(10, 28, 48, 0.07), 0 2px 8px rgba(10, 28, 48, 0.06);
  --shadow-md: 0 2px 4px rgba(10, 28, 48, 0.08), 0 10px 28px rgba(10, 28, 48, 0.10);
  --shadow-blue: 0 4px 14px rgba(19, 51, 86, 0.32);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper-hi);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }

/* The hidden attribute comes from the UA stylesheet at zero specificity, so
   ANY author `display` rule silently beats it. site.js hides the gallery list,
   the video block and individual photos with .hidden = true, so without this
   guard an emptied-out grid keeps its gaps and the page shows a hole. One
   global rule instead of remembering a [hidden] patch per component. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- a11y ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: var(--white);
  padding: 12px 18px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blue-lt);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sec { padding: 62px 0; }
.sec-paper { background: var(--paper); }
.sec-ink    { background: var(--ink); color: var(--cream); }

@media (min-width: 760px) { .sec { padding: 92px 0; } }

/* ---------- icons ---------- */
.ico { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(10, 28, 48, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-dk);
}
.hdr-in { display: flex; align-items: center; gap: 16px; min-height: 62px; }

.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--cream); }
/* The badge rides at header scale, where its own stacked wordmark is too small
   to read, so the text lockup sits beside it and carries the name. The img is
   alt="" because the adjacent text already says it -- otherwise a screen reader
   announces the business twice. */
.brand { gap: 11px; }
.brand-logo { height: 44px; width: auto; flex: 0 0 auto; }
.brand-text {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.02;
  text-wrap: balance;
}
.brand-text em { font-style: normal; display: block; color: var(--cream); }
@media (min-width: 620px) { .brand-logo { height: 48px; } .brand-text { font-size: 22px; } }

.ftr-logo { height: 76px; width: auto; }

.nav { display: none; gap: 26px; }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--muted-dk);
  padding: 6px 0; transition: color 0.15s var(--ease);
}
.nav a:hover { color: var(--cream); }
@media (min-width: 940px) { .nav { display: flex; } }

/* .btn sets display:inline-flex and is declared later in this file, so these
   need the extra .hdr-in to win. Without it the header phone button never
   hides on mobile and squeezes the logo onto three lines. */
.hdr-in .hdr-call { display: none; }
@media (min-width: 620px) { .hdr-in .hdr-call { display: inline-flex; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 600; letter-spacing: 0.005em;
  border: 2px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-align: center;
  transition: transform 0.12s var(--ease), background 0.15s var(--ease),
              border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 8px 14px;  font-size: 15px; }
.btn-lg { padding: 15px 26px; font-size: 17.5px; }

.btn-blue { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); }
.btn-blue:hover { background: var(--blue-dk); border-color: var(--blue-dk); }

.btn-ghost { background: transparent; border-color: rgba(231,228,220,0.30); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(231,228,220,0.08); }

.btn-ghost-light { background: transparent; border-color: rgba(231,228,220,0.32); color: var(--cream); }
.btn-ghost-light:hover { border-color: var(--cream); background: rgba(231,228,220,0.09); }

.btn-cream { background: var(--cream); border-color: var(--cream); color: var(--ink); box-shadow: var(--shadow-md); }
.btn-cream:hover { background: var(--white); border-color: var(--white); }

.btn-cream-ghost { background: transparent; border-color: rgba(231,228,220,0.45); color: var(--cream); }
.btn-cream-ghost:hover { border-color: var(--cream); background: rgba(231,228,220,0.10); }

.inline-link {
  display: inline-block; margin-top: 4px;
  font-weight: 600; color: var(--blue-tx);
  border-bottom: 2px solid var(--blue-tint);
  transition: border-color 0.15s var(--ease);
}
.inline-link:hover { border-bottom-color: var(--blue-tx); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background:
    radial-gradient(1000px 520px at 78% -8%, rgba(47,116,189,0.22), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--cream);
  padding: 54px 0 62px;
  border-bottom: 1px solid var(--line-dk);
}
@media (min-width: 760px) { .hero { padding: 86px 0 94px; } }

.hero-in { max-width: 820px; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blue-lt);
  padding: 6px 12px; margin-bottom: 20px;
  background: var(--blue-tint); border: 1px solid rgba(74,146,224,0.30);
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(2.9rem, 10.5vw, 5.4rem);
  text-transform: uppercase;
  letter-spacing: -0.012em;
  /* if the condensed webfont has not landed yet, balance the break
     instead of orphaning a single word on its own line */
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--blue-lt); }

.lede {
  margin-top: 20px; max-width: 60ch;
  font-size: clamp(1.03rem, 2.3vw, 1.2rem);
  color: #d7dae1;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row .btn { flex: 1 1 auto; min-width: 210px; }
.cta-row-center { justify-content: center; }
@media (min-width: 620px) { .cta-row .btn { flex: 0 0 auto; } }

.cta-hint { margin-top: 12px; font-size: 14.5px; color: var(--muted-dk); }

.trust {
  display: grid; gap: 14px;
  margin-top: 38px; padding-top: 30px;
  border-top: 1px solid var(--line-dk);
}
.trust li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: #cfd3db; }
.trust .ico { color: var(--blue-lt); margin-top: 3px; }
@media (min-width: 880px) { .trust { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec-head { max-width: 680px; margin-bottom: 40px; }
.kicker {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blue-tx); margin-bottom: 12px;
}
.kicker-light { color: var(--blue-lt); }
.sec-head h2 { font-size: clamp(2.1rem, 6vw, 3.1rem); text-transform: uppercase; text-wrap: balance; }
.sec-sub { margin-top: 15px; font-size: 1.05rem; color: var(--muted); max-width: 58ch; }
.sec-ink .sec-sub { color: #b3bec7; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.svc {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d2d2ca; }

.svc-ico {
  width: 30px; height: 30px; margin-bottom: 16px;
  fill: none; stroke: var(--blue-tx); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.svc h3 { font-size: 1.32rem; text-transform: uppercase; letter-spacing: 0.002em; }
.svc p { margin-top: 9px; font-size: 15.2px; color: var(--muted); line-height: 1.58; }

.svc-ask {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  display: flex; flex-direction: column;
}
.svc-ask h3 { color: var(--blue-tx); }
.svc-ask p { color: #c4cad4; }
.svc-ask .inline-link { margin-top: auto; padding-top: 14px; color: var(--blue-tx); border-bottom: none; }
.svc-ask .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   BEFORE YOU CALL
   ========================================================================== */
.prep-grid { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: prep; }
@media (min-width: 860px) { .prep-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.prep {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line-dk);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
}
.prep-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 16px;
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1;
  color: var(--white); background: var(--blue);
  border-radius: 9px;
}
.prep h3 { font-size: 1.36rem; text-transform: uppercase; color: var(--cream); }
.prep p { margin-top: 11px; font-size: 15.4px; color: #b3bec7; line-height: 1.62; }
.prep-tag {
  margin-top: auto !important; padding-top: 18px;
  font-size: 12.5px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-lt) !important;
}

.prep-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.prep-cta .btn { flex: 1 1 auto; min-width: 210px; }
@media (min-width: 620px) { .prep-cta .btn { flex: 0 0 auto; } }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.video-block {
  /* The clip is a 480x848 phone video. Full width would make it absurdly tall
     on desktop, and a 16:9 box with object-fit:cover would crop a thin band out
     of the middle of it, so it gets a phone-shaped frame at its true ratio. */
  margin: 0 auto 22px;
  max-width: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.video { width: 100%; height: auto; aspect-ratio: 480 / 848; background: var(--ink); }

.shots { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .shots { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.shot {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #e8e8e2;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;   /* the job photos are portrait */
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.shot:hover img { transform: scale(1.03); }

.shots-empty {
  padding: 46px 24px; text-align: center;
  color: var(--muted); font-size: 15.5px;
  background: var(--paper-hi); border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.closing { background: var(--navy); color: var(--cream); }
.closing-in { max-width: 720px; margin-inline: auto; text-align: center; }
.closing h2 { font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; text-wrap: balance; }
.closing p { margin-top: 15px; font-size: 1.08rem; color: rgba(231,228,220,0.84); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--ink); color: var(--cream); padding: 50px 0 34px; }
.ftr-brand { display: inline-flex; align-items: center; }

.ftr-facts { display: grid; gap: 18px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line-dk); }
@media (min-width: 680px) { .ftr-facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: 44px; } }
.ftr-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-dk); }
.ftr-facts dd { margin-top: 5px; font-size: 16.5px; font-weight: 500; }
.ftr-facts a:hover { color: var(--blue-lt); }

.ftr-fine { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-dk); font-size: 13.5px; color: var(--muted-dk); max-width: 62ch; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted-dk); }
.ftr-legal a { color: var(--muted-dk); text-decoration: underline; text-underline-offset: 3px; }
.ftr-legal a:hover { color: var(--cream); }
.ftr-legal a[aria-current="page"] { color: var(--cream); text-decoration: none; }

/* ==========================================================================
   MOBILE STICKY CALL BAR
   ========================================================================== */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink);
  border-top: 1px solid var(--line-dk);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.callbar-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px;
  font-weight: 600; font-size: 16px;
}
.callbar-call { background: var(--blue); color: var(--white); }
.callbar-text { background: var(--ink-3); color: var(--cream); }
.callbar-btn:active { filter: brightness(0.94); }

/* keep the bar off the footer text on mobile */
body { padding-bottom: 58px; }
@media (min-width: 620px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   ANCHOR OFFSET  (so the sticky header never covers a section heading)

   #main is the skip link's target. Without it here, "Skip to content" drops a
   keyboard user at the very top of <main> with the sticky header sitting over
   the first 62px of it, which on the legal pages is the whole page heading.
   ========================================================================== */
#services, #prep, #gallery, #quote, #top, #main { scroll-margin-top: 74px; }

/* ==========================================================================
   QUOTE FORM  (#quote)

   Sits as a cream card on the navy closing band: the band keeps the page's
   colour rhythm, the card keeps the form on the light surface where the
   body-text pairs were already contrast-checked.

   --err and --ok are the only new colours. Both were measured against
   --paper-hi, not eyeballed: 5.90:1 and 5.87:1, so they clear AA as text.
   ========================================================================== */
:root {
  --err: #b3261e;
  --ok:  #1d6b3f;
}

.qform,
.qf-done {
  max-width: 760px;
  margin: 34px auto 0;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.qform { text-align: left; }
@media (min-width: 620px) { .qform, .qf-done { padding: 32px 30px; } }

/* The honeypot. Moved offscreen rather than display:none, because some bots
   skip fields they can tell are not rendered. */
.qf-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qf-grid { display: grid; gap: 18px; }
@media (min-width: 620px) {
  .qf-grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .qf-wide { grid-column: 1 / -1; }
}

.qf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.qf-field label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}
.qf-opt {
  font-family: var(--body);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.qf-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.qf-input::placeholder { color: var(--muted); opacity: .78; }
.qf-input:hover { border-color: var(--steel); }
.qf-input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}
.qf-area { resize: vertical; min-height: 104px; line-height: 1.5; }

.qf-input[aria-invalid="true"] { border-color: var(--err); }
.qf-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

.qf-hint { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.qf-err  { font-size: .86rem; color: var(--err); font-weight: 600; }

/* File input: the native control cannot be styled much, so style the button
   part and leave the rest alone rather than faking the whole thing. */
.qf-file { font: inherit; font-size: .95rem; color: var(--muted); }
.qf-file::file-selector-button {
  font: inherit;
  font-weight: 600;
  color: var(--blue-tx);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.qf-file::file-selector-button:hover { border-color: var(--blue); background: var(--blue-tint); }
.qf-file:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.qf-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
}
.qf-thumbs li {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.qf-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.qf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
#qf-submit[aria-busy="true"] { opacity: .72; cursor: progress; }

.qf-status { font-size: .95rem; line-height: 1.45; margin: 0; min-width: 0; flex: 1 1 220px; }
.qf-status[data-state="error"] { color: var(--err); font-weight: 600; }
.qf-status[data-state="ok"]    { color: var(--ok);  font-weight: 600; }
.qf-status[data-state="busy"]  { color: var(--muted); }

/* Success replaces the whole card, so nobody submits twice wondering if it
   went through.

   It keeps the card chrome (shared with .qform above) rather than sitting
   bare on the navy band. Two reasons: --text and --ok were measured against
   --paper-hi, so on navy they drop to 1.2:1 and 2.0:1 and the message reads
   as dark-on-dark; and losing the card would make the CTA band look like it
   emptied out at the exact moment it should feel finished. */
.qf-done { text-align: center; }
.qf-done h3 {
  font-family: var(--display);
  font-size: 1.7rem;
  text-transform: uppercase;
  color: var(--ok);
  margin: 0 0 10px;
}
.qf-done p { color: var(--text); margin: 0 auto; max-width: 46ch; line-height: 1.55; }

.qf-alt { margin: 22px auto 0; text-align: center; color: rgba(231, 228, 220, .84); }
.qf-alt a { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.qf-alt a:hover { color: var(--white); }

/* The fixed call bar floats over the page, so anything the browser scrolls to
   on its own (a focused field after a validation error) has to clear it.

   Applies to every descendant, not just the obvious ones: scroll-margin only
   counts on the exact element passed to scrollIntoView or handed focus, so
   putting it on a wrapper does nothing for the child that actually moves. */
@media (max-width: 619px) {
  .qform, .qform *, .qf-done { scroll-margin-bottom: 76px; }
}

/* ==========================================================================
   LEGAL PAGES  (/privacy, /terms)

   Long-form reading, so this is the one place on the site with a measure
   narrower than the grid: ~68ch, which is where lines stop being a chore to
   track back from. Everything sits on the page's own --paper-hi, so --text,
   --muted and --blue-tx keep the ratios they were checked at.
   ========================================================================== */
.legal { padding-top: 48px; }
.legal-in { max-width: 68ch; }

.legal h1 { font-size: clamp(2.1rem, 6vw, 3.1rem); text-transform: uppercase; text-wrap: balance; }
.legal h2 {
  margin-top: 42px;
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal p  { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-top: 7px; }
.legal a  { color: var(--blue-tx); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--blue-dk); }

.legal-date { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.legal-lede { margin-top: 22px; font-size: 1.12rem; line-height: 1.55; }

.legal-contact { line-height: 1.75; }

.legal-back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}