/* ==========================================================================
   Springfield Carpet One Floor & Home
   Tokens transcribed from reference/25C1_BrandStyleGuide.pdf (©2025 CCA Global,
   rev 072825). Colour roles assigned by measured WCAG contrast — see
   DESIGN-BRIEF.md §4. Do not substitute values without re-running contrast.py.

   Palette and typeface are locked by the co-op, so the visual identity is
   carried by structure and texture instead: the SEAM rule (a hairline with
   joint ticks at plank intervals) and the SWATCH (the rotating hero word set
   in a teal sample chip that resizes as the word changes).
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --surface:      #FFFFFF;
  --surface-sunk: #F7F7F8;  /* CG11 tint. [CONFIRM] tints permitted by co-op */
  --ink:          #000000;  /* foundation colour, named in guide      21.0:1 */
  --ink-soft:     #717073;  /* PMS CG 11                               4.92:1 */
  --brand:        #008C99;  /* PMS 321 — display + large only          4.03:1 */
  --brand-deep:   #00707A;  /* darkened teal for hover states only            */
  --action:       #004876;  /* PMS 7693 — all buttons, links, small UI 9.60:1 */
  --action-deep:  #003759;
  --accent:       #EEB111;  /* PMS 7642 — fill only, ALWAYS with black text  */
  --accent-deep:  #D69C08;  /* darkened accent for hover                      */
  --ink-invert:      #FFFFFF;  /* on black                          21.0:1 */
  --ink-invert-soft: #C9C9CB;  /* on black                          12.7:1 */
  --alert:        #BF311A;  /* PMS 1805 — form errors only             5.72:1 */
  --rule:         #DCDCDE;

  /* --- type -------------------------------------------------------------- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-utility: 0.8125rem;  /* 13 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-lead:    1.25rem;    /* 20 */
  --fs-h3:      1.5rem;     /* 24 */
  --fs-h2:      2.0625rem;  /* 33 */

  /* --- spacing (4px base) ------------------------------------------------ */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* --- other ------------------------------------------------------------- */
  --wrap: 68rem;
  --radius: 2px;
  --logo-h: 2.75rem;
  --logo-clear: 1.4375rem;      /* 0.52 × logo height — mandated clear space */
  --plank: 132px;               /* joint interval on the seam rule          */
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--s4); line-height: 1.15; }
p { margin: 0 0 var(--s4); }
ul { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

.wrap { width: min(100% - var(--gutter, 2.5rem), var(--wrap)); margin-inline: auto; }
.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;
}
.muted { color: var(--ink-soft); }
.sunk { background: var(--surface-sunk); }

/* The plank motif now lives in the hero floor (.floor) and the photo
   placeholders (.ph::before). The standalone .seam divider it replaced has
   been removed rather than left as dead CSS. */

/* --- focus ---------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.skip {
  position: absolute; left: var(--s4); top: -5rem;
  background: var(--action); color: #fff; padding: var(--s3) var(--s4);
  z-index: 100; text-decoration: none; transition: top .15s;
}
.skip:focus { top: var(--s4); }

/* --- type roles ----------------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-soft); margin: 0 0 var(--s3);
}
.subhead, h2 {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--fs-h2));
  color: var(--ink); margin-bottom: var(--s3);
}
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 {
  font-size: var(--fs-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft);
}
.section-lead { font-size: var(--fs-lead); max-width: 46ch; color: var(--ink-soft); margin-bottom: var(--s7); }
.note { font-size: var(--fs-utility); color: var(--ink-soft); max-width: 62ch; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

a { color: var(--action); }
a:hover { text-decoration-thickness: 2px; }

.confirm, .confirm-inline {
  color: var(--alert); background: #FDF0ED; box-shadow: inset 0 -1px 0 var(--alert);
}
.confirm { display: inline-block; padding: 0 var(--s1); }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: var(--s3) var(--s6);
  font-family: inherit; font-size: var(--fs-body); font-weight: 500;
  letter-spacing: .01em; text-decoration: none; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-lg { min-height: 54px; padding-inline: var(--s7); }
.btn-action { background: var(--action); color: #fff; }
.btn-action:hover { background: var(--action-deep); }
.btn-action:active { background: #002B47; }
.btn-ghost { background: transparent; color: var(--action); border-color: var(--action); }
.btn-ghost:hover { background: var(--action); color: #fff; }
/* Accent CTA. The yellow is the one brand colour that cannot carry white text
   (1.92:1) but is excellent behind black (10.93:1) — so it is always ink-on-
   accent, never the reverse. */
.btn-accent { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-accent:hover { background: var(--accent-deep); color: var(--ink); }
/* Ghost button for the hero, which sits on the scrimmed transformation.
   contrast.py resolves `transparent` against the page default (white) and
   reports 1.00:1; in context it only ever sits on the scrim, where white
   measures 6:1 or better against the lightest state underneath. */
.btn-ghost-invert { background: transparent; color: var(--ink-invert); border-color: rgb(255 255 255 / .7); }
.btn-ghost-invert:hover { background: var(--ink-invert); color: var(--ink); border-color: var(--ink-invert); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; cursor: not-allowed;
}
.linkish {
  background: none; border: 0; padding: var(--s2); font: inherit;
  color: var(--action); text-decoration: underline; cursor: pointer; min-height: 44px;
}

/* --- status ---------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-utility); font-weight: 500; margin: 0;
  text-transform: uppercase; letter-spacing: .08em;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); flex: none; }
/* header runs a shorter label so logo + status hold one row on a phone */
.status-short { display: none; }
.status[data-state="open"] .dot { background: var(--brand); }
.status[data-state="closed"] .dot { background: var(--alert); }

/* --- header --------------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  padding-block: var(--logo-clear);
}
.logo-link { display: block; padding: var(--logo-clear); margin: calc(var(--logo-clear) * -1); }
.logo { height: var(--logo-h); width: auto; }
.header-meta { margin-left: auto; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.header-call { font-size: var(--fs-utility); min-height: 42px; padding-inline: var(--s5); }

/* ==========================================================================
   HERO — centred type over the transformation panel
   The centred headline + paired buttons is on the anti-defaults list. It is
   used deliberately: the transformation panel is the subject, and centring
   feeds it rather than competing. The rotating swatch keeps the headline from
   reading as the generic centred hero the list is warning about.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  min-height: min(84svh, 44rem);
  padding-block: var(--s9);
  text-align: center;
}
/* The copy layer does not swallow pointer events — the whole backdrop stays
   draggable as the wipe handle, and only the real controls take clicks. */
.hero-body { position: relative; z-index: 2; pointer-events: none; }
.hero-body a, .hero-body button { pointer-events: auto; }

/* The type ramp is governed by the LONGEST rotating word, not the shortest.
   "Grandparents" is a single unbreakable token inside a fixed-height chip, so
   it sets the ceiling: at 320px the chip needs the headline at ~31px or the
   page scrolls sideways. If a longer word is ever added to the rotator, re-run
   the overflow check at 320 before shipping. */
.display {
  font-weight: 300; text-transform: uppercase; letter-spacing: -0.005em;
  font-size: clamp(1.75rem, 0.35rem + 8vw, 5.25rem);
  line-height: 1.02;
  max-width: 16ch;
  margin: 0 auto var(--s6);
}
.display-rest { display: block; }

/* the swatch — a sample chip that swaps */
.swatch {
  display: inline-flex; align-items: center; justify-content: flex-start;
  background: var(--brand); color: #fff;
  /* contrast.py flags white-on-teal at 4.03:1 against the 4.5:1 body threshold.
     That flag is wrong here: the swatch inherits .display, whose computed size
     is 28px at a 280px viewport and 84px at desktop — always above the 24px
     large-text threshold, where the requirement is 3:1. If .display's clamp
     floor is ever lowered below 24px, this stops being true. */
  box-sizing: content-box;
  padding: 0.06em 0.24em 0.12em;
  overflow: hidden; vertical-align: baseline;
  max-width: 100%;
  width: var(--sw, auto);
  transition: width .3s cubic-bezier(.22,.75,.24,1);
}
.swatch-track { display: block; position: relative; white-space: nowrap; }
.word {
  display: block; opacity: 0;
  transform: translateY(0.42em);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22,.75,.24,1);
}
.word:not(.is-on) { position: absolute; inset: 0; pointer-events: none; }
.word.is-on { opacity: 1; transform: none; position: relative; }
.word.is-out { opacity: 0; transform: translateY(-0.42em); }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: center; margin-bottom: var(--s5);
}
.hero-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; font-size: var(--fs-utility); margin: 0;
}
.hero-meta-sep { color: rgb(255 255 255 / .45); }
.status-invert { color: var(--ink-invert); }
.display-invert .display-rest { color: var(--ink-invert); }
.display-invert { text-shadow: 0 2px 24px rgb(0 0 0 / .45); }

/* --- the hero photograph ---------------------------------------------------
   Full-bleed, filling the hero behind the copy. The before/after wipe that
   used to live here is gone: the two source files are landscape and portrait,
   so no crop window could present a matching field of view either side of the
   handle, and it read as two rooms rather than one changing. */
.transform { position: absolute; inset: 0; z-index: 1; }
.tf-frame { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.tf-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}

/* THE SCRIM IS LOAD-BEARING, not decoration. Weighted to the middle band where
   the copy sits and lighter at the foot, where the flooring is — the thing the
   visitor came to look at. Sized against the LIGHTEST part of the photograph,
   verified by sampling rendered pixels. */
.tf-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg,
    rgb(0 0 0 / .46) 0%,
    rgb(0 0 0 / .70) 26%,
    rgb(0 0 0 / .70) 74%,
    rgb(0 0 0 / .40) 100%);
}



/* --- decide tool (signature) ---------------------------------------------- */
.decide { padding-block: var(--s9); }
/* min-height holds the frame steady between steps — question 1 has six options
   and the rest have three, so without it the page jumps on every answer */
.decide-form { max-width: 44rem; min-height: 17rem; }

/* progress */
.stepper { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); }
.step-meta {
  margin: 0; font-size: var(--fs-utility); font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .12em; flex: none;
}
.step-bar { flex: 1; height: 3px; background: var(--rule); }
.step-bar span {
  display: block; height: 100%; background: var(--brand);
  transition: width .32s cubic-bezier(.22,.75,.24,1);
}

/* one question at a time */
.step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.step legend {
  font-size: var(--fs-lead); font-weight: 300; color: var(--ink);
  padding: 0; margin-bottom: var(--s5);
}
.opts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.opt {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: var(--s2) var(--s5); border: 1px solid var(--rule); background: var(--surface);
  border-radius: var(--radius); cursor: pointer; font-family: inherit;
  font-size: var(--fs-utility); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 500; color: var(--ink); text-align: left;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.opt:hover { border-color: var(--action); }
.opt:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
/* aria-pressed carries the state, so stepping back shows the earlier answer */
.opt[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.step-back { margin: var(--s6) 0 0; }

/* --- contact step ---------------------------------------------------------- */
.step-note { color: var(--ink-soft); margin-bottom: var(--s5); max-width: 46ch; }
.fields { display: grid; gap: var(--s5); max-width: 26rem; margin-bottom: var(--s5); }
.field { margin: 0; display: grid; gap: var(--s2); }
.field label {
  font-size: var(--fs-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em;
}
.opt-tag { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.field input {
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  padding: var(--s3) var(--s4); min-height: 48px;
  border: 1px solid var(--ink-soft); border-radius: var(--radius); background: var(--surface);
}
.field input:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.field input.is-bad { border-color: var(--alert); border-width: 2px; }
.field-err { font-size: var(--fs-utility); color: var(--alert); font-weight: 500; }
.field-err:empty { display: none; }
.step-fineprint { font-size: var(--fs-utility); color: var(--ink-soft); max-width: 44ch; }

/* result card */
.result { margin-top: var(--s8); max-width: 44rem; }
.card { border: 1px solid var(--rule); border-top: 6px solid var(--brand); padding: var(--s7) var(--s6) var(--s6); background: var(--surface); }
.card-kicker {
  font-size: var(--fs-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-soft); margin-bottom: var(--s2);
}
.card-title { color: var(--brand); font-size: var(--fs-h3); margin-bottom: var(--s2); }
.card-because { font-size: var(--fs-utility); color: var(--ink-soft); margin-bottom: var(--s5); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.chips li {
  border: 1px solid var(--brand); color: var(--ink); padding: var(--s2) var(--s5);
  font-weight: 500; font-size: var(--fs-utility); text-transform: uppercase;
  letter-spacing: .06em; border-radius: var(--radius);
}
.card-days { border-top: 1px solid var(--rule); padding-top: var(--s5); margin-bottom: var(--s5); }
.card-days h4 { margin-bottom: var(--s3); }
.card-days ul { list-style: none; }
.days-val { font-weight: 700; white-space: nowrap; }
.card-days li {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-utility);
}
.card-store { border-top: 1px solid var(--rule); padding-top: var(--s5); font-size: var(--fs-utility); }
.card-store p { margin-bottom: var(--s2); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.result-reset { margin-top: var(--s4); }

/* the orchestrated moment — chips assembling into the card */
@media (prefers-reduced-motion: no-preference) {
  .result[data-animate] .chips li { animation: chip-in .4s cubic-bezier(.2,.7,.3,1) backwards; }
  .result[data-animate] .chips li:nth-child(1) { animation-delay: .06s; }
  .result[data-animate] .chips li:nth-child(2) { animation-delay: .14s; }
  .result[data-animate] .chips li:nth-child(3) { animation-delay: .22s; }
  .result[data-animate] .card-days,
  .result[data-animate] .card-store { animation: settle .42s ease .3s backwards; }
}
@keyframes chip-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes settle  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }

/* --- photo placeholders --------------------------------------------------- */
.ph {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2);
  padding: var(--s4); background: var(--surface);
  border: 1px solid var(--rule); box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--rule);
  aspect-ratio: 4 / 5; color: var(--ink-soft);
  width: 100%; max-height: 20rem;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--plank) - 1px), var(--rule) calc(var(--plank) - 1px) var(--plank));
  opacity: .55; pointer-events: none;
}
.shot, .getting-map { position: relative; }
.ph { position: relative; }
.ph > * { position: relative; z-index: 1; }
.ph[data-ratio="16:9"] { aspect-ratio: 16 / 9; max-height: 22rem; }
.ph[data-ratio="4:3"]  { aspect-ratio: 4 / 3; max-height: 20rem; }
.ph-tag { font-size: var(--fs-utility); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ph-desc { font-size: var(--fs-utility); line-height: 1.45; color: var(--ink); }

.decide, .proof, .getting { padding-block: var(--s9); }
.shots { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.shot { margin: 0; }

/* --- proof ------------------------------------------------------------------
   One lead quote at reading size, then the rest in columns. These are real
   reviews at real length — 120 words in a narrow column is a wall, so the
   lead gets room and the supporting two run at body size. */
.quote-lead {
  margin: 0 0 var(--s8); max-width: 46rem;
  border-top: 6px solid var(--brand); padding-top: var(--s5);
}
/* Doubled class beats `.quote p` on specificity rather than relying on source
   order — source-order collisions have bitten this file three times already. */
.quote.quote-lead p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.quote.quote-lead p:last-of-type { color: var(--ink-soft); font-size: var(--fs-body); }
.quote-lead strong { font-weight: 700; }

.quotes { display: grid; gap: var(--s7); }
.quote { margin: 0; border-top: 2px solid var(--rule); padding-top: var(--s4); }
.quote p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.src { font-weight: 500; color: var(--ink-soft); letter-spacing: .06em; }
.reviews-all { margin: var(--s7) 0 0; font-size: var(--fs-utility); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.quote footer, .quote-lead footer {
  font-size: var(--fs-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink);
}

.mapbox {
  display: grid; place-content: center; justify-items: center; gap: var(--s4);
  aspect-ratio: 4 / 3; padding: var(--s5); text-align: center;
  background: var(--surface); border: 1px solid var(--rule);
}
.mapbox-addr { margin: 0; font-weight: 500; }
.mapbox-note { margin: 0; font-size: var(--fs-utility); color: var(--ink-soft); max-width: 26ch; }
.mapbox.is-loaded { display: block; padding: 0; border: 0; }
.mapbox iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- getting there -------------------------------------------------------- */
.getting-grid { display: grid; gap: var(--s7); }
.glance { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); font-size: var(--fs-utility); }
.glance dt { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.glance dd { margin: 0; }
.getting-copy .glance { margin-block: var(--s5) var(--s6); }

/* --- footer --------------------------------------------------------------- */
/* Light ground deliberately: the supplied lockup is the teal NON-BOX variant,
   which the brand guide restricts to white/light backgrounds. A dark footer
   requires the white/reversed lockup, which we do not yet have. */
.site-footer { background: var(--surface-sunk); padding-block: var(--s8); }
.footer-inner { display: grid; gap: var(--s4); justify-items: start; }
.logo-footer { height: 2.25rem; margin: 1.17rem; }
.tagline { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); font-size: var(--fs-utility); margin: 0; }
.footer-meta, .footer-legal { font-size: var(--fs-utility); margin: 0; max-width: 56ch; }

/* --- sticky call bar (mobile only) --------------------------------------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: var(--s3); padding: var(--s3);
  background: var(--surface); border-top: 1px solid var(--rule);
}
.callbar .btn { flex: 1; }
body { padding-bottom: 5rem; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 63.99em) {
  /* Mobile header discipline — the lockup is 5.08:1 and clear space is
     mandated at 0.52 × its height. The Call button is dropped because the
     sticky bar already carries that action. */
  :root { --logo-h: 2.25rem; --logo-clear: 1.17rem; --plank: 96px; --gutter: 1.5rem; }
  .header-call { display: none; }
  .header-meta { margin-left: auto; }
  .status-header .status-full { display: none; }
  .status-header .status-short { display: inline; }
  .status-header { letter-spacing: .06em; }

  .hero-meta { gap: var(--s2); }
  .hero-meta-sep { display: none; }
  .hero-meta { flex-direction: column; }

  /* status drops below the logo when the label is long ("Opens tomorrow 9am"),
     so left-align it there rather than stranding it against the right edge */
  .header-meta { margin-left: 0; gap: var(--s4); }

  .hero { padding-block: var(--s8); min-height: min(78svh, 34rem); }
  .hero-actions .btn { flex: 1 1 100%; }   /* full width, no two-line labels */
}

@media (min-width: 40em) {
  .shots { grid-template-columns: repeat(3, 1fr); }
  .shot-wide { grid-column: 1 / -1; }
    .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .getting-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .word { transform: none !important; }
}