/* Willard's Restoration - "Daylight" (PRIMARY, willards-restoration.koresites.com)
   ---------------------------------------------------------------------------
   The same system as the dark build at -2 (huge Sora display type, the drag
   slider, the pinned
   process, the triage swap) rendered light: white and pale-blue surfaces, ink
   type, real borders and soft shadows instead of glass and glow. The topbar,
   the CTA bands and the footer stay deep navy so the page still has anchors.
   Same content, same URLs.

   Signature features:
   - .ba drag slider over two hand-drawn SVGs: the same room at hour 0 and hour
     72 untreated. An ILLUSTRATION, labelled as one, because Willard's has no
     genuine before/after photo pair and faking one would be a lie.
   - .pin-seq sticky process: the step list drives the photo beside it.
   - .swap emergency triage: pick what happened, the panel changes.
*/

/* Brand palette, as supplied by Willard's 2026-08:
     Light Blue #6699CC   Dark Blue #0E2758   Gold #D4AF37
     Gray #EDEDED         White #FFFFFF
   Those five are used verbatim wherever they carry enough contrast. The two
   derived tokens exist because the brand light blue is only 3.0:1 on white,
   which is fine for icons and rules but fails AA as text, so --cyan is that
   same blue blended 40% toward the brand navy (5.48:1 on white, 4.68:1 on the
   brand gray) and --on-dark is it lightened for the navy bands (6.99:1). */
:root {
  --bg: #ffffff;
  --bg-2: #ededed;
  --panel: #ffffff;
  --glass: #ededed;
  --glass-line: #dcdcdc;
  --navy: #0e2758;
  --navy-d: #081b3e;
  --blue: #6699cc;          /* brand light blue: icons, rules, glows */
  --cyan: #436b9e;          /* brand blue toward navy, for text on light */
  --on-dark: #94b8db;       /* brand blue lightened, for the navy bands */
  --blue-deep: #0e2758;
  --gold: #d4af37;
  --ink: #0e2758;
  --body: #55637a;
  --dim: #5b6878;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 82rem;
  --gut: 1.5rem;
  --r: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: cubic-bezier(.16, 1, .3, 1);
  --glow: 0 1px 2px rgba(14, 39, 88, .05), 0 26px 60px -28px rgba(14, 39, 88, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The nav is sticky, so an un-offset jump link parks the target underneath it
   and the heading you asked for is the one thing you cannot see. Keep this in
   step with .nav__in min-height (84px desktop / 66px under 900px). */
:target, [id] { scroll-margin-top: 6.5rem; }
@media (max-width: 900px) { :target, [id] { scroll-margin-top: 5.2rem; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1.02rem/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is required now that every <img> carries width/height
   attributes for CLS. Without it the height attribute becomes the used height
   and CSS aspect-ratio is ignored, which rendered every photo at full intrinsic
   height. Rules that set an explicit height (.pin-seq__stage img and friends)
   are more specific and still win. */
img { max-width: 100%; display: block; height: auto; }
/* picture is inline by default; let the img participate in the parent layout */
picture { display: contents; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem); }
h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.018em; }
p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 48rem; }

.skip { position: absolute; top: .5rem; left: var(--gut); z-index: 200; background: var(--cyan); color: #05080f; padding: .7rem 1.1rem; font-weight: 700; text-decoration: none; border-radius: 100px; transform: translateY(-260%); transition: transform .18s var(--ease); }
.skip:focus { transform: none; }

.progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; background: var(--cyan); z-index: 120; transition: width .1s linear; }

.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 14px; height: 14px; }
.ico--lg { width: 28px; height: 28px; }

/* ------------------------------------------------------------ motion --- */
/* Headings reveal as a soft fade-up, not a masked line-drop. The shared script
   still splits the heading into lines and staggers them ~85ms apart, so the
   phrasing still lands in order, but each line simply settles into place
   instead of wiping up from behind a hard clip edge. No overflow:hidden here,
   which also means descenders are never clipped mid-transition. */
.has-js:not(.reduce) .rv-lines .ln { display: block; }
.has-js:not(.reduce) .rv-lines .ln__i { display: block; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--slow); }
.has-js:not(.reduce) .rv-lines.in .ln__i { opacity: 1; transform: none; }
/* Clip the IMAGE, never the observed wrapper. An element whose own clip-path
   zeroes its box reports isIntersecting === false forever, so the observer that
   is supposed to release it never fires and the figure stays blank for good. */
.has-js:not(.reduce) .rv-clip img {
  clip-path: inset(0 0 100% 0); transform: scale(1.08);
  transition: clip-path 1.05s var(--slow), transform 1.5s var(--slow);
}
.has-js:not(.reduce) .rv-clip.in img { clip-path: inset(0 0 0 0); transform: none; }
.has-js:not(.reduce) .rv-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--slow), transform .8s var(--slow); }
.has-js:not(.reduce) .rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger > *:nth-child(2) { transition-delay: .08s; }
.rv-stagger > *:nth-child(3) { transition-delay: .16s; }
.rv-stagger > *:nth-child(4) { transition-delay: .24s; }
.rv-stagger > *:nth-child(5) { transition-delay: .32s; }
.rv-stagger > *:nth-child(6) { transition-delay: .4s; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--slow), transform .8s var(--slow); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
html:not(.has-js) .reveal, .reduce .reveal { opacity: 1; transform: none; }

/* ambient glow blobs */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.glow--cyan { background: rgba(102, 153, 204, .18); }
.glow--blue { background: rgba(102, 153, 204, .16); }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.1rem; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
/* Small kicker label. Declared BEFORE .mega__label so that rule still wins
   where an element carries both. */
.lab { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin-bottom: .9rem; }

/* ------------------------------------------------------------ topbar --- */
.topbar { background: var(--navy-d); color: rgba(255, 255, 255, .8); font-size: .82rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .55rem; }
.topbar__badges { margin: 0; display: flex; align-items: center; gap: .8rem; }
.topbar__badges span { color: var(--on-dark); }
.topbar__call { text-decoration: none; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar__call b { color: #fff; font-weight: 600; }
.topbar__call:hover b { color: var(--on-dark); }

/* --------------------------------------------------------------- nav --- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid var(--glass-line); }
.nav__in { display: flex; align-items: center; gap: 1rem; min-height: 84px; }
/* The nav carries the full horizontal lockup, so the wordmark is part of the
   artwork and there is no typeset text beside it. width:auto keeps the aspect
   ratio whatever height the breakpoint asks for. */
.nav__logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav__logo img { width: auto; height: 60px; }

.nav__links { display: flex; align-items: center; gap: .1rem; }
.nav__link { position: relative; display: flex; align-items: center; gap: .3rem; padding: .6rem .85rem; text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--body); white-space: nowrap; transition: color .25s var(--ease); }
.nav__link:hover, .nav__item.is-on > .nav__link, .nav__link[aria-current="page"] { color: var(--cyan); }
.nav__link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--cyan); transform: scaleX(0); transition: transform .4s var(--slow); }
.nav__link:hover::after, .nav__item.is-on > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.caret { width: 8px; height: 5px; opacity: .5; transition: transform .3s var(--ease); }
.nav__item { position: static; }
.nav__item:hover .caret, .nav__item:focus-within .caret { transform: rotate(180deg); }

.nav__cta { display: inline-flex; align-items: center; gap: .5rem; margin-left: .8rem; padding: .8rem 1.4rem; background: var(--navy); color: #fff; text-decoration: none; border-radius: 100px; font-size: .9rem; font-weight: 700; transition: background .3s var(--ease); }
.nav__cta:hover { background: var(--cyan); }

.mega { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #ffffff; border-bottom: 1px solid var(--glass-line); box-shadow: 0 26px 50px -30px rgba(14, 39, 88, .45); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .32s var(--slow), visibility .28s; }
.nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* The link is ~37px tall inside a 78px bar and the panel hangs off the bottom of
   .nav, so there is ~20px of dead space between them. Crossing it dropped
   :hover and the menu closed before the pointer ever reached a child link.
   This bridges that gap; it inherits the panel's own visibility, so it only
   exists while the menu is open and never blocks the bar when it is shut. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
.mega__in { max-width: var(--wrap); margin-inline: auto; padding: 2rem var(--gut) 2.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.mega__label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega a { display: flex; align-items: center; gap: .65rem; text-decoration: none; padding: .45rem .7rem; margin-left: -.7rem; border-radius: var(--r-sm); font-size: .94rem; color: var(--body); transition: background .25s var(--ease), color .25s var(--ease); }
.mega a .ico { color: var(--cyan); }
.mega a:hover { background: var(--glass); color: var(--cyan); }
.mega a[aria-current="page"] { color: var(--cyan); font-weight: 600; }
.mega__all { display: inline-block; margin-top: 1rem; font-size: .9rem; font-weight: 700; color: var(--cyan) !important; text-decoration: none; background: none !important; }

.nav__burger { display: none; width: 42px; height: 38px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--navy); transition: .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------- buttons --- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.8rem; border-radius: 100px; text-decoration: none; border: 1px solid transparent; font-size: .96rem; font-weight: 700; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn--fill { background: var(--navy); color: #fff; box-shadow: 0 12px 26px -16px rgba(14, 39, 88, .9); }
.btn--fill:hover { background: var(--cyan); }
.btn--glass { background: #fff; color: var(--navy); border-color: var(--glass-line); }
/* The secondary stays secondary on hover. It used to fill solid navy, which is
   the primary's RESTING look, so hovering it produced two identical-looking
   buttons side by side and the hierarchy collapsed at the exact moment the
   visitor was choosing. It now just gains definition: brand grey fill, navy
   border, navy text. Same idea on the dark bands below. */
.btn--glass:hover { border-color: var(--navy); background: var(--glass); color: var(--navy); }
.btn--wide { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* bare arrow glyphs inside a button have no .ico sizing class */
.btn svg:not(.ico) { width: 15px; height: 9px; flex: none; }

.tlink { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--cyan); font-weight: 600; font-size: .92rem; }
.tlink svg { width: 15px; height: 9px; transition: transform .4s var(--slow); }
.tlink:hover svg { transform: translateX(5px); }

/* -------------------------------------------------------------- hero --- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3rem, 5vw, 5rem); isolation: isolate; }
.hero .glow--cyan { width: 46rem; height: 46rem; top: -20rem; right: -14rem; }
.hero .glow--blue { width: 34rem; height: 34rem; bottom: -18rem; left: -10rem; }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 .hl { color: var(--cyan); }
.hero__lead { font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem); max-width: 36rem; margin-top: 1.5rem; }
.hero__stat { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--glass-line); }
.hero__stat div b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
.hero__stat div span { display: block; margin-top: .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.hero__media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--glow); }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* /contact-us/ puts the form where the photo would be, so it is in the first
   viewport instead of three sections down. .form already carries the card. */
.hero__form { position: relative; }
/* A hero that holds a form does not also need the stat strip: it pushes the
   form down on mobile, which is the whole thing this layout exists to avoid. */
.hero:has(.hero__form) { padding-block: clamp(2.4rem, 4vw, 3.6rem) clamp(2.4rem, 4vw, 3.6rem); }
.hero:has(.hero__form) .hero__stat { display: none; }
.hero:has(.hero__form) .hero__grid { align-items: start; }
.hero__chips { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.hero__chips li { display: flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 100px; background: var(--glass); border: 1px solid var(--glass-line); font-size: .83rem; color: var(--navy); }
.hero__chips .ico { color: var(--cyan); }

/* ------------------------------------- signature 1: the 72 hour slider --- */
.clockba { position: relative; }
.clockba .ba { border-radius: var(--r); aspect-ratio: 1200 / 640; box-shadow: var(--glow); }
.clockba__note { margin-top: 1rem; font-size: .82rem; color: var(--dim); display: flex; align-items: flex-start; gap: .5rem; }
.clockba__note .ico { color: var(--cyan); margin-top: .2rem; }
.clockrow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--glass-line); border: 1px solid var(--glass-line); border-radius: var(--r-sm); overflow: hidden; }
.clockrow li { background: #fff; padding: 1.2rem 1.1rem; }
.clockrow b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--cyan); letter-spacing: -.02em; margin-bottom: .4rem; }
.clockrow span { display: block; font-size: .84rem; line-height: 1.5; }

/* --------------------------------- signature 2: emergency triage swap --- */
.triage { position: relative; border: 1px solid var(--glass-line); border-radius: var(--r); background: #fff; box-shadow: var(--glow); overflow: hidden; }
.swap__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--glass-line); border-bottom: 1px solid var(--glass-line); }
.swap__tabs button { appearance: none; border: 0; background: var(--glass); color: var(--body); font: 600 .92rem/1 var(--sans); padding: 1.1rem .8rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .55rem; transition: background .3s var(--ease), color .3s var(--ease); }
.swap__tabs button .ico { color: var(--dim); transition: color .3s var(--ease); }
.swap__tabs button:hover { color: var(--navy); }
.swap__tabs button.is-on { background: #fff; color: var(--navy); box-shadow: inset 0 3px 0 var(--cyan); }
.swap__tabs button.is-on .ico { color: var(--cyan); }
.swap__panes { position: relative; }
.swap__panes > [data-pane] { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.6rem, 3.5vw, 2.6rem); align-items: center; }
.swap__panes > [data-pane][hidden] { display: none; }
.has-js:not(.reduce) .swap__panes > [data-pane].is-on { animation: swapIn .55s var(--slow) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.triage h3 { font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); font-weight: 700; margin-bottom: .7rem; }
.triage__media { border-radius: var(--r-sm); overflow: hidden; }
.triage__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.triage .btns { margin-top: 1.4rem; }

/* ------------------------------- signature 3: pinned process sequence --- */
.pin-seq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pin-seq__stage { position: sticky; top: 110px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--glass); box-shadow: var(--glow); }
.pin-seq__stage > [data-stage] { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--slow), transform 1.2s var(--slow); }
.pin-seq__stage > [data-stage].is-on { opacity: 1; transform: none; }
.pin-seq__stage img { width: 100%; height: 100%; object-fit: cover; }
.pin-seq__steps { display: grid; }
.pin-seq__steps > [data-step] { padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--glass-line); opacity: .42; transition: opacity .5s var(--ease); }
.pin-seq__steps > [data-step].is-on { opacity: 1; }
.pin-seq__steps > [data-step]:last-child { border-bottom: 0; }
.pin-seq .n { display: block; font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .18em; color: var(--cyan); margin-bottom: .6rem; }
.pin-seq h3 { font-family: var(--display); font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 700; margin-bottom: .5rem; }
.pin-seq p { font-size: .96rem; margin-bottom: 0; }
.step__note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.8rem; padding: 1rem 1.2rem; border: 1px solid var(--glass-line); border-left: 3px solid var(--cyan); border-radius: var(--r-sm); background: var(--glass); font-size: .88rem; color: var(--navy); }
.step__note .ico { color: var(--cyan); margin-top: .2rem; }

/* fallback list when a process has long copy and no photos */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--glass-line); border: 1px solid var(--glass-line); border-radius: var(--r); overflow: hidden; }
.steps li { background: #fff; padding: 1.5rem 1.7rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; }
.steps .n { font-family: var(--display); font-size: 1.4rem; font-weight: 700; color: var(--cyan); letter-spacing: -.02em; }
.steps h3 { margin-bottom: .4rem; }
.steps p { font-size: .95rem; margin-bottom: 0; }

/* ---------------------------------------------------------- sections --- */
.sec { position: relative; padding-block: clamp(3.4rem, 6vw, 5.6rem); }
.sec--tight { padding-block: clamp(2rem, 3.5vw, 3rem); }
.sec--alt { background: var(--bg-2); }
.sec--panel { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.sec-head { max-width: 48rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.sec-head .lede { margin-top: 1.1rem; font-size: 1.03rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
/* The "Drag the handle" lede wraps "drying it" onto its own orphan line at
   48rem - a touch more width keeps the sentence to two clean lines. */
.sec-head--clock { max-width: 53rem; }
.sec-head--center .eyebrow { justify-content: center; }

.rt > :first-child { margin-top: 0; }
.rt h3 { margin-top: 1.9rem; color: var(--navy); }
.rt a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(102, 153, 204, .55); text-underline-offset: 3px; }
.rt a:hover { text-decoration-color: var(--cyan); }

.ticklist { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .6rem; }
.ticklist li { display: flex; align-items: flex-start; gap: .65rem; }
.ticklist .ico { color: var(--cyan); margin-top: .38rem; }
.ticklist--lg li { color: var(--navy); }

/* ------------------------------------------------------------- cards --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cards--n2 { grid-template-columns: repeat(2, 1fr); }
.cards--n4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform .45s var(--slow), border-color .45s var(--ease), box-shadow .45s var(--slow); }
.card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 26px 54px -28px rgba(14, 39, 88, .38); }
.card__media { overflow: hidden; position: relative; }

.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1s var(--slow); }
.card:hover .card__media img { transform: scale(1.06); }
.card__mark { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--glass); color: var(--cyan); }
.card__body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.card__ico { color: var(--cyan); margin-bottom: .9rem; }
.card h3 { color: var(--navy); margin-bottom: .5rem; }
.card p { font-size: .93rem; margin-bottom: 0; }
.card .tlink { margin-top: 1rem; }

/* ------------------------------------------------------------- split --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--flip .split__copy { order: 2; }
.split__media { border-radius: var(--r); overflow: hidden; box-shadow: var(--glow); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------ quotes --- */
/* Always exactly 4 cards (see pickReviews/reviewsBlock): 2x2 fills evenly at
   every width down to mobile, unlike a 3-col grid which leaves a lopsided
   trailing row for a 4th card. */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.quote { background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; box-shadow: var(--glow); transition: transform .4s var(--slow); }
.quote:hover { transform: translateY(-4px); }
.quote__stars { display: flex; gap: .14rem; margin-bottom: .9rem; }
.quote__stars svg { width: 14px; height: 14px; fill: var(--gold); }
.quote__t { font-size: .94rem; line-height: 1.66; flex: 1; }
/* Reviews vary a lot in length; clamp long ones to a shared preview height
   instead of either cutting them off for good or leaving cards wildly
   uneven heights. JS only reveals the toggle when content actually overflows. */
.quote__t[data-clamped] { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.quote__more { align-self: flex-start; margin-top: .5rem; background: none; border: 0; padding: 0; color: var(--cyan); font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.quote__more[hidden] { display: none; }
.quote__n { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--glass-line); font-weight: 600; font-size: .88rem; color: var(--navy); }
.quotes__cta { grid-column: 1 / -1; margin-top: .3rem; }

/* --------------------------------------------------------------- faq --- */
.faq { max-width: 56rem; display: grid; gap: .6rem; }
.faq__i { background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r-sm); overflow: hidden; transition: border-color .35s var(--ease); }
.faq__i[open] { border-color: var(--cyan); }
.faq__i summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; padding: 1.1rem 1.4rem; font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--navy); letter-spacing: -.015em; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--cyan); }
.faq__i .pm { position: relative; flex: none; width: 14px; height: 14px; margin-top: .4rem; }
.faq__i .pm::before, .faq__i .pm::after { content: ""; position: absolute; background: var(--cyan); border-radius: 2px; transition: transform .4s var(--slow); }
.faq__i .pm::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq__i .pm::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__i[open] .pm::after { transform: scaleY(0); }
.faq__a { padding: 0 1.4rem 1.3rem; font-size: .95rem; }
.faq__tail { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: 56rem; margin-top: 1.6rem; padding: 1.5rem 1.7rem; border-radius: var(--r); background: var(--navy); color: rgba(255, 255, 255, .78); }
.faq__tail h3 { color: #fff; margin-bottom: .25rem; }
.faq__tail p { font-size: .92rem; margin: 0; }
.faq__tail .btns { margin-top: 0; }

/* --------------------------------------------------------------- cta --- */
.ctaband { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, .78); padding-block: clamp(3rem, 5vw, 4.6rem); text-align: center; }
.ctaband .glow--cyan { width: 40rem; height: 26rem; top: -14rem; left: 50%; margin-left: -20rem; background: rgba(102, 153, 204, .28); }
.ctaband > .wrap { position: relative; z-index: 2; }
/* The brand gold earns its keep here: 6.89:1 on the navy band, and it is the
   one place the logo's gold reads at size without fighting the blue system. */
.ctaband .eyebrow { color: var(--gold); }
/* .btn--fill is navy, which is invisible on a navy band */
.ctaband .btn--fill, .faq__tail .btn--fill { background: #fff; color: var(--navy); box-shadow: none; }
.ctaband .btn--fill:hover, .faq__tail .btn--fill:hover { background: var(--on-dark); color: var(--navy-d); }
.ctaband .btn--glass, .faq__tail .btn--glass { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.ctaband .btn--glass:hover, .faq__tail .btn--glass:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; }
.ctaband h2 { color: #fff; }
.ctaband p { margin: 1rem auto 0; max-width: 34rem; }
.ctaband .btns { margin-top: 1.8rem; justify-content: center; }

/* ---------------------------------------------------------- estimate --- */
.est { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.est__call { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; text-decoration: none; }
.est__call .ring { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; flex: none; transition: background .35s var(--ease); }
.est__call:hover .ring { background: var(--cyan); }
.est__call em { font-style: normal; display: block; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.est__call b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: -.03em; }

/* -------------------------------------------------------------- form --- */
.form { background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--glow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form label { display: block; margin-bottom: .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.form input, .form textarea { width: 100%; margin-top: .45rem; padding: .8rem .9rem; font: 400 .97rem/1.5 var(--sans); color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-sm); transition: border-color .3s, background .3s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--cyan); background: #fff; }
.form textarea { resize: vertical; }
.form .hp { position: absolute; left: -9999px; opacity: 0; }
.form .btn { margin-top: .5rem; }
.form__note { margin: .9rem 0 0; font-size: .84rem; text-align: center; }
.form__note a { color: var(--cyan); font-weight: 600; }

/* --------------------------------------------------------------- map --- */
.map { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.map__line { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; font-size: .95rem; }
.map__line .ico { color: var(--cyan); }
.map__line a { color: var(--navy); font-weight: 600; text-decoration: none; }
.map__frame { border-radius: var(--r); overflow: hidden; border: 1px solid var(--glass-line); }
.map__frame iframe { display: block; width: 100%; height: 350px; border: 0; }

/* ----------------------------------------------------------- gallery --- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.gal figure { margin: 0; border-radius: var(--r-sm); overflow: hidden; }
.gal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--slow), opacity .4s; }
.gal figure:hover img { transform: scale(1.06); }
.gal figure:first-child { grid-column: span 2; grid-row: span 2; }

/* ------------------------------------------------------------- misc ---- */
.band { border-radius: var(--r); overflow: hidden; }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* The two owner photos put Anthony and Cassie mid-frame under a tall shop
   sign; a centered cover crop takes the top of their heads off. Bias the
   window low enough to keep faces whole (matches by filename, so every
   srcset variant is covered). */
.band img[src*="willards-180"] { object-position: center 38%; }
.hero__media img[src*="willards-179"], .split__media img[src*="willards-179"],
.hero__media img[src*="willards-180"], .split__media img[src*="willards-180"],
.split__media img[src*="willards-114"] { object-position: center 20%; }
.split__media img[src*="owners-shop"] { object-position: center 8%; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.duo figure { margin: 0; border-radius: var(--r); overflow: hidden; }
.duo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--glass-line); border: 1px solid var(--glass-line); border-radius: var(--r); overflow: hidden; }
.stats li { background: #fff; padding: 1.8rem 1.5rem; }
.stats .n { display: block; font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; color: var(--navy); letter-spacing: -.04em; line-height: 1; }
.stats .l { display: block; margin-top: .7rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }

/* These marks are a mix of dark-ink-on-transparent PNGs, an SVG, and flat JPEGs
   with a baked white background. On a near-black canvas a filter cannot rescue
   both, so every mark sits on its own light chip and is left untouched. */
.creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .9rem; }
.creds li { display: flex; align-items: center; justify-content: center; padding: .9rem 1.4rem; min-width: 11rem; background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r-sm); transition: transform .4s var(--slow), box-shadow .4s var(--slow); }
.creds li:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.creds img { height: 42px; width: auto; object-fit: contain; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.logos li { display: flex; align-items: center; justify-content: center; gap: 1rem; background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r-sm); padding: 1rem 1.2rem; }
.logos li img { height: 30px; width: auto; max-width: 90px; object-fit: contain; flex-shrink: 0; }
.logos li span { min-width: 0; flex: 0 1 auto; }
.logos strong { display: block; font-size: .88rem; color: var(--navy); overflow-wrap: break-word; }
.logos em { font-style: normal; font-size: .8rem; color: var(--dim); }

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--glass-line); border: 1px solid var(--glass-line); border-radius: var(--r-sm); overflow: hidden; }
.strip__i { background: #fff; display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.2rem; font-size: .92rem; color: var(--navy); }
.strip__i .ico { color: var(--cyan); }

.article { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.toc { position: sticky; top: 104px; background: var(--glass); border-radius: var(--r); padding: 1.4rem 1.5rem; }
.toc h2 { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
/* No counter. "01 02 03" beside prose headings read as a numbered procedure the
   article does not actually have; the rule down the side does the same job of
   grouping without implying an order. */
.toc ol { list-style: none; margin: 0 0 1.2rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--glass-line); }
/* Scoped to the list on purpose. As `.toc a` this had specificity 0-1-1 and so
   beat .btn--fill (0-1-0), which repainted the sidebar's phone button in body
   grey on navy (~2.4:1) and stripped its horizontal padding. */
.toc ol a { display: block; padding: .42rem 0; text-decoration: none; font-size: .88rem; line-height: 1.45; color: var(--body); }
.toc ol a:hover { color: var(--cyan); }
.rt--article { max-width: 44rem; }
.rt--article h2 { margin-top: 2.6rem; }
.rt--article h3 { margin-top: 2rem; }

/* ------------------------------------------------------------ footer --- */
/* ------------------------------------------------------- closing CTA --- */
/* tailCta() emits .sec--cta / .cta / .btn--onnavy and NONE of them had a rule,
   so the closing call-to-action on every page that uses it rendered as body
   text with two grey text links. It is the last thing a visitor sees, so it
   gets a navy card and a filled primary button. */
.sec--cta .cta { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 2.4rem; align-items: center; background: var(--navy); border-radius: var(--r); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 2.8rem); color: rgba(255, 255, 255, .8); }
.sec--cta .cta h2 { color: #fff; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.3rem); }
.sec--cta .cta p { margin: .7rem 0 0; }
.sec--cta .lab { color: var(--gold); margin-bottom: .7rem; }
.sec--cta .btns { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.btn--onnavy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--onnavy:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; }
.sec--cta .btns .btn--onnavy:first-child { background: #fff; color: var(--navy); border-color: #fff; }
.sec--cta .btns .btn--onnavy:first-child:hover { background: var(--on-dark); color: var(--navy-d); border-color: var(--on-dark); }
@media (max-width: 820px) {
  .sec--cta .cta { grid-template-columns: 1fr; }
}

.ft { background: var(--navy-d); color: rgba(255, 255, 255, .62); font-size: .9rem; }
.ft__top { display: grid; grid-template-columns: 18rem 1fr; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.8rem, 5vw, 4rem); }
/* The full lockup, knocked out to white type so it reads on the navy panel.
   No white pill behind it: the artwork sits directly on the footer. */
.ft__mark { width: auto; height: 54px; }
.ft__blurb { margin: 1.1rem 0 1.2rem; max-width: 32ch; line-height: 1.7; }
.ft__phone { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.ft__phone .ico { color: var(--on-dark); }
.ft__phone:hover { color: var(--on-dark); }
.ft__social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.ft__social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .72); transition: color .3s var(--ease), border-color .3s var(--ease); }
.ft__social svg { width: 17px; height: 17px; }
.ft__social a:hover { color: var(--on-dark); border-color: var(--on-dark); }
/* The base .creds card (solid white, light-page styling) reads as a stray
   white rectangle on the dark footer. Match the footer's own on-dark chip
   language instead (see .ft__social): transparent fill, translucent border.
   The IICRC mark still needs an opaque light backing since the PNG itself
   has a baked-in white background, so it gets its own small mat inside the
   dark chip rather than the chip itself going white. */
.ft__creds { justify-content: flex-start; margin-top: 1.2rem; gap: .6rem; }
.ft__creds li { min-width: 0; padding: .65rem 1rem; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.ft__creds img { height: 34px; background: #fff; border-radius: 4px; padding: .25rem .45rem; }
.ft__creds-text { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--on-dark); }
.ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.4rem; }
.ft__col h3 { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 1rem; }
.ft__col ul { list-style: none; margin: 0; padding: 0; }
.ft__col li { margin-bottom: .45rem; }
.ft__col a { text-decoration: none; transition: color .25s var(--ease); }
.ft__col a:hover { color: #fff; }
.ft__hours { margin-top: 1.3rem; font-size: .84rem; line-height: 1.6; }
.ft__hours strong { color: rgba(255, 255, 255, .85); }
.ft__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.5rem; font-size: .83rem; }
.ft__bar p { margin: 0; }
.ft__by { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; line-height: 1.2; }
.ft__by-t { font-size: .8rem; opacity: .8; }
.ft__by img { height: 42px; width: auto; display: block; }

/* ========================================================== responsive */
@media (max-width: 1080px) {
  .clockrow { grid-template-columns: repeat(4, 1fr); }
  .article { grid-template-columns: 1fr; }
  .toc { position: static; }
  .ft__top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .topbar__badges { display: none; }
  .topbar__in { justify-content: center; }
  .nav__burger { display: flex; }
  .nav__in { min-height: 66px; }
  .nav__logo img { height: 46px; }
  /* Open mobile menu. It is a sheet, so it needs real interior space: the old
     values packed hairline-separated rows and a nested submenu into almost no
     padding and read as cramped. Submenu rows are also sized as touch targets
     (~44px) rather than the desktop's pointer-sized rows. */
  .nav__links { position: absolute; top: 100%; left: 0; right: 0; width: 100%; justify-self: stretch; display: none; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: 0 30px 60px -24px rgba(14, 39, 88, .4); padding: .5rem var(--gut) 1.7rem; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--glass-line); }
  .nav__links.open { display: flex; }
  .nav__item { display: block; }
  .nav__link { padding: 1.05rem 0; border-top: 1px solid var(--glass-line); justify-content: space-between; font-size: 1rem; }
  .nav__item:first-child > .nav__link { border-top: 0; }
  .nav__links .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--cyan); }
  /* the caret is the accordion's affordance on mobile, so it comes back */
  .caret { display: block; opacity: .55; }
  .nav__item.is-open > .nav__link .caret { transform: rotate(180deg); }
  .nav__item.is-open > .nav__link { color: var(--cyan); }
  .mega { position: static; display: none; opacity: 1; visibility: visible; transform: none; background: transparent; backdrop-filter: none; border: 0; box-shadow: none; }
  .nav__item.is-open > .mega { display: block; }
  /* the hover bridge is a desktop-only device; it must not reserve space here */
  .mega::before { display: none; }
  /* indented and rule-marked so the submenu reads as nested, not as a sibling list */
  .mega__in { display: block; padding: .1rem 0 1.1rem; max-width: none; margin-left: .2rem; padding-left: .9rem; border-left: 2px solid var(--glass-line); }
  .mega__col + .mega__col { margin-top: 1.3rem; }
  .mega__label { margin-bottom: .65rem; }
  /* .lab--plain is an &nbsp; label that exists only to align the desktop
     2-column split (see megaAreas). Stacked on mobile it reads as a blank
     line between Piedmont and Simpsonville - drop it. The column that holds
     it is a continuation of "Cities", not a new section, so also cancel the
     inter-column margin-top that would otherwise still show as a gap. */
  .mega__label.lab--plain { display: none; }
  .mega__col:has(.mega__label.lab--plain) { margin-top: 0; }
  .mega ul { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .mega a { font-size: .92rem; padding: .62rem .7rem; margin-left: -.7rem; }
  .mega__all { margin-top: 1.2rem; }
  .nav__cta { margin: 1.4rem 0 .2rem; justify-content: center; padding-block: .95rem; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .pin-seq { grid-template-columns: 1fr; }
  .pin-seq__stage { position: relative; top: 0; margin-bottom: 1.5rem; }
  .split, .est, .map { grid-template-columns: 1fr; }
  .split--flip .split__copy { order: 0; }
  .cards, .cards--n2, .cards--n4 { grid-template-columns: repeat(2, 1fr); }
  .clockrow { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .logos { grid-template-columns: 1fr; }
  .swap__tabs { grid-template-columns: repeat(2, 1fr); }
  .swap__panes > [data-pane] { grid-template-columns: 1fr; }
  .triage__media { order: -1; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal figure:first-child { grid-column: span 2; grid-row: span 1; }
  .map__frame iframe { height: 280px; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  /* the lockup is ~2.8:1, so it has to come down a step to leave the burger room */
  .nav__logo img { height: 40px; }
  /* Stacked, the contact hero's supporting copy pushed the form to ~863px, i.e.
     off a 844px screen, which defeats the point of moving it up here. The chips
     are the most droppable part; the lead stays because it says what to send. */
  .hero:has(.hero__form) .hero__chips { display: none; }
  .hero:has(.hero__form) .hero__lead { margin-top: .8rem; font-size: 1rem; }
  .hero:has(.hero__form) h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.6rem); }
  .hero:has(.hero__form) .btns { margin-top: 1.1rem; }
  .hero:has(.hero__form) .hero__grid { gap: 1.5rem; }
  .cards, .cards--n2, .cards--n4, .quotes, .clockrow, .stats, .strip { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .mega ul { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; gap: .4rem; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal figure:first-child { grid-column: span 2; }
  .hero__stat { gap: 1.2rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
  .pin-seq__steps > [data-step] { opacity: 1; }
  .pin-seq__stage > [data-stage] { opacity: 1; transform: none; }
  .pin-seq__stage > [data-stage] + [data-stage] { display: none; }
}

/* ------------------------------------------------------ featured post --- */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; text-decoration: none; background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--glow); transition: transform .45s var(--slow), box-shadow .45s var(--slow); }
.feature:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(14, 39, 88, .4); }
.feature__media { overflow: hidden; }
.feature__media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; transition: transform 1s var(--slow); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__body { padding: clamp(1.8rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.feature__body h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); margin-bottom: .8rem; }
.feature__body p { font-size: 1rem; }
.feature__body .tlink { margin-top: 1.4rem; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature__media img { min-height: 15rem; } }

/* ------------------------------------------------- the cost of waiting --- */
.clockrow__lab { display: block; margin: 2.2rem 0 1rem; }
.clockrow { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .clockrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .clockrow { grid-template-columns: 1fr; } }
.clockresp { margin-top: 1.4rem; padding: 1.3rem 1.6rem; border: 1px solid var(--glass-line); border-left: 3px solid var(--cyan); border-radius: var(--r-sm); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.clockresp p { margin: 0; max-width: 52rem; font-size: .95rem; }
.clockresp strong { color: var(--navy); }

/* ------------------------------------------- verified rating (visible) --- */
/* Required by Google: an AggregateRating in the markup must be shown to the
   reader on the same page. */
.rating-line { display: flex; align-items: center; gap: .55rem; margin: -.4rem 0 1.6rem; font-size: .98rem; color: var(--body); }
.rating-line b { color: var(--navy); font-weight: 700; }
.rating-line__stars { display: inline-flex; gap: .1rem; }
.rating-line__stars svg { width: 16px; height: 16px; fill: var(--gold); }

/* ------------------------------------------------------ 404 (not found) --- */
/* Scoped so the page can borrow the hero and footer without inheriting the
   home page's display type: the h1 clamp tops out at 5.2rem, which wrapped
   "That page has moved or no longer exists." onto three lines and left the
   hero's second column empty. */
.nf .hero__grid { align-items: center; }
.nf h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.nf .hero__lead { margin-top: 1.1rem; }
.nf__code { font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .18em; color: var(--cyan); }

.nf__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.nf__links a {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.15rem; text-decoration: none;
  background: #fff; border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  color: var(--navy); font-size: .95rem; font-weight: 500;
  transition: transform .35s var(--slow), border-color .35s var(--ease), box-shadow .35s var(--slow);
}
.nf__links a:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 18px 34px -22px rgba(14, 39, 88, .4); }
.nf__links .ico { color: var(--cyan); flex: none; }
.nf__links .nf__arw { margin-left: auto; color: var(--dim); transition: transform .35s var(--ease), color .35s var(--ease); }
.nf__links a:hover .nf__arw { transform: translateX(3px); color: var(--cyan); }

@media (max-width: 900px) { .nf__links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .nf__links { grid-template-columns: 1fr; } }

/* ------------------------------------------------- form confirmation --- */
/* Shown after the worker redirects back with ?sent=1. Green rather than the
   brand navy on purpose: this is a status message and it has to read as
   "worked" at a glance, which is a different job from brand colour. 7.07:1. */
.form-sent {
  padding: .95rem 1.1rem;
  margin-bottom: 1.1rem;
  border: 1px solid #175c3c;
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: #e8f4ee;
  color: #175c3c;
  font-size: .93rem;
  line-height: 1.6;
}
.form-sent strong { display: block; font-weight: 600; }
.form-sent a { color: inherit; font-weight: 600; }