@charset "utf-8";
/* ==========================================================================
   Custom Heating & Air Conditioning, LLC — customhvactn.com
   Design system. Brand red #ED1C24 sampled from the company logo mark.
   Type is Figtree + Nunito Sans, self-hosted, matching the CustomOps app.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2-variations"),
       url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/nunitosans-var.woff2") format("woff2-variations"),
       url("/assets/fonts/nunitosans-var.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --brand:      #ed1c24;
  --brand-600:  #cf141b;
  --brand-700:  #a90f16;
  --brand-800:  #7d0d12;
  --brand-soft: #fdecec;
  --brand-line: #f7c9cb;

  /* Heating is red, cooling is blue — the blue is a real second accent. */
  --cool:       #0f6fbe;
  --cool-600:   #0b5c9e;
  --cool-soft:  #e8f2fb;

  --ink:        #14181f;
  --ink-2:      #2b323d;
  --body:       #4a525f;
  --muted:      #6b7480;
  --line:       #e4e7ec;
  --line-2:     #cfd5dd;
  --bg:         #ffffff;
  --bg-soft:    #eff2f6;   /* was #f7f8fa — 2.6 L* from white, invisible */
  --bg-band:    #e2e7ee;   /* was #eef1f5 */
  --bg-dark:    #14181f;
  --bg-dark-2:  #1c222c;

  --ok:        #14804a;
  --ok-soft:   #e6f4ec;
  --warn:      #b26a00;
  --warn-soft: #fdf3e2;
  --star:      #f5a623;

  --font-display: "Figtree", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap:        1200px;
  --wrap-wide:   1340px;
  --wrap-narrow: 820px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  --sec-y:       clamp(3rem, 5.5vw, 5rem);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --sh-1: 0 1px 2px rgba(20,24,31,.06), 0 2px 8px rgba(20,24,31,.05);
  --sh-2: 0 4px 12px rgba(20,24,31,.07), 0 12px 32px rgba(20,24,31,.08);
  --sh-3: 0 10px 24px rgba(20,24,31,.10), 0 24px 60px rgba(20,24,31,.13);
  --sh-red: 0 6px 18px rgba(237,28,36,.28);

  --t: .28s cubic-bezier(.2,.8,.2,1);
  --hdr-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7;
  color: var(--body); background: var(--bg); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video, picture { max-width: 100%; display: block; }
img, video { height: auto; }
/* common.py's img() wraps every image in <picture>. A <picture> is height:auto,
   so `height:100%` on the <img> resolves against nothing and object-fit:cover
   silently does not engage — the photo renders at its own aspect ratio inside
   the box and leaves a band. Any container that sets an aspect-ratio and wants
   a cover crop gets this. */
[style*="aspect-ratio"] > picture, .cover > picture { position: absolute; inset: 0; display: block; }
.cover { position: relative; overflow: hidden; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-700); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cool); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display); color: var(--ink); line-height: 1.1;
  margin: 0 0 .55em; font-weight: 800; letter-spacing: -.021em;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.55rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1rem + .85vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 700; }
/* An <h2> for the document outline, sized like an <h3>. Several templates put
   their first subheading straight after the <h1> at h3 size, which left a hole
   in the outline that heading-by-heading navigation drops into. */
h2.h-sm { font-size: clamp(1.2rem, 1rem + .85vw, 1.6rem); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong, b { color: var(--ink-2); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink);
  color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* Above-the-fold content must never depend on a deferred script to become
   visible. The hero H1 was the LCP element and it was opacity:0 until site.js
   ran. This is the backstop so no future page can reintroduce that. */
.hero .reveal, .banner .reveal,
.hero .lines .ln > span, .banner .lines .ln > span,
.hero .stagger > *, .banner .stagger > * {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec--soft { background: var(--bg-soft); }
.sec--band { background: var(--bg-band); }
.sec--dark { background: var(--bg-dark); color: #b9c0cb; }
.sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.hide-xs { display: none; }
@media (min-width: 560px) { .hide-xs { display: inline; } }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shead { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead p { font-size: 1.125rem; margin-bottom: 0; }
.shead p:first-of-type { margin-top: -.2em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display);
  font-weight: 800; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: .85rem;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--brand); border-radius: 2px; }
.sec--dark .eyebrow { color: #ff5a60; }
.shead--center .eyebrow::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  letter-spacing: -.01em; line-height: 1.15; padding: .95rem 1.6rem;
  border-radius: var(--r); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t), color var(--t);
}
.btn:hover { --btn-bg: var(--brand-600); --btn-bd: var(--brand-600); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-red); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: #eef1f5; --btn-bd: #eef1f5; color: var(--ink); box-shadow: var(--sh-2); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--ink); box-shadow: none; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--ink:hover { --btn-bg: var(--ink-2); --btn-bd: var(--ink-2); box-shadow: var(--sh-2); }
.btn--cool { --btn-bg: var(--cool); --btn-fg: #fff; --btn-bd: var(--cool); }
.btn--cool:hover { --btn-bg: var(--cool-600); --btn-bd: var(--cool-600); box-shadow: 0 6px 18px rgba(15,111,190,.28); }
.btn--sm { padding: .68rem 1.15rem; font-size: .93rem; }
.btn--sm svg { width: 17px; height: 17px; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

.lnk {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display);
  font-weight: 800; color: var(--brand-600); text-decoration: none;
}
.lnk svg { width: 18px; height: 18px; transition: transform var(--t); }
.lnk:hover svg { transform: translateX(4px); }
/* inline-flex makes these 25px high, which is a small thing to hit on a
   phone. Padding plus matching negative margin grows the target and leaves
   the surrounding layout exactly where it was. */
@media (max-width: 759px) { .lnk { padding-block: .55rem; margin-block: -.55rem; } }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink); color: #b9c0cb; font-size: .875rem; line-height: 1.4; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding-block: .4rem; }
.topbar__area { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__area svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.topbar__area strong { color: #fff; }
.topbar__right { display: flex; align-items: center; gap: 1.25rem; }
.topbar__hours { display: none; }
@media (min-width: 900px) {
  .topbar__hours { display: inline-flex; align-items: center; gap: .5rem; }
  .topbar__hours svg { width: 16px; height: 16px; color: var(--brand); }
}
.topbar__tel { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 800; text-decoration: none; font-family: var(--font-display); position: relative; }
/* The bar is deliberately thin, so the link itself is only 20px high — half a
   thumb. Growing the hit box with a pseudo-element gives a 44px target
   without making the bar taller. */
.topbar__tel::after { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: 50%; height: 44px; transform: translateY(-50%); }
.topbar__tel svg { width: 16px; height: 16px; color: var(--brand); }
.topbar__tel:hover { color: #fff; text-decoration: underline; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.header.is-stuck { box-shadow: var(--sh-2); }
.header__in { display: flex; align-items: center; gap: 1rem; min-height: var(--hdr-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { width: auto; height: 44px; }
@media (min-width: 900px) { .brand img { height: 52px; } }
.brand__txt { display: none; }
@media (min-width: 1340px) {
  .brand__txt { display: block; line-height: 1.15; border-left: 1px solid var(--line-2); padding-left: .7rem; }
  .brand__txt b { display: block; font-family: var(--font-display); font-weight: 900; color: var(--ink); font-size: .95rem; letter-spacing: -.02em; }
  .brand__txt span { font-size: .72rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
}

/* The desktop nav needs ~1200px before the logo, seven items and both header
   buttons stop fighting each other — at 1080 the "Request Service" button was
   being pushed off the right edge. Below this, the hamburger takes over. */
.nav { display: none; margin-left: auto; }
@media (min-width: 1200px) {
  /* Stretching the nav to full header height matters: the dropdowns are
     positioned with top:100%, so if the item is only as tall as its text the
     panel opens *inside* the header and clashes with its bottom border. Full
     height also means there is no dead gap for the pointer to cross, so the
     menu does not close on the way down to it. */
  .nav { display: flex; align-self: stretch; align-items: stretch; gap: .1rem; }
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-display);
  font-weight: 700; font-size: .95rem; color: var(--ink-2); text-decoration: none;
  padding: .6rem .68rem; border-radius: var(--r-sm); transition: color var(--t), background var(--t);
}
.nav__link:hover, .nav__item:hover > .nav__link, .nav__link[aria-current="page"] { color: var(--brand-600); background: var(--brand-soft); }
.nav__link svg { width: 13px; height: 13px; opacity: .6; transition: transform var(--t); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

/* Anchored to the item's left edge rather than centred on it. Centring looks
   tidier under a middle item but pushes the first item's panel off the left of
   the screen and the wide ones off the right — left-anchoring cannot do that,
   and the max-width is a final backstop. */
.mega {
  position: absolute; top: 100%; left: 0; transform: translate(0, 8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 1.1rem; z-index: 5;
  min-width: 360px; max-width: min(760px, calc(100vw - 2rem));
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(0, 0); }
.mega--wide { min-width: 660px; }
/* The last dropdown opens leftward so it cannot run past the right edge. */
.mega--right { left: auto; right: 0; }
.mega__grid { display: grid; gap: .1rem; }
.mega--wide .mega__grid { grid-template-columns: 1fr 1fr; gap: .1rem 1.25rem; }
.mega__link { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .65rem; border-radius: var(--r-sm); text-decoration: none; transition: background var(--t); }
.mega__link:hover { background: var(--bg-soft); }
.mega__link svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: .2rem; }
/* Direct-child selectors: the markup is <a><svg><span><b/><span/></span></a>,
   so a bare `.mega__link span` styled the wrapper and the blurb identically. */
.mega__link > span { display: block; min-width: 0; }
.mega__link > span > b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .93rem; line-height: 1.3; }
.mega__link > span > span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.45; font-weight: 400; }
.mega__foot {
  margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: .7rem 1rem;
}
.mega__foot p { margin: 0; font-size: .85rem; flex: 1 1 12rem; min-width: 0; }

.header__cta { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
@media (min-width: 1200px) { .header__cta { margin-left: .6rem; } }
.btn--desk { display: none; }
@media (min-width: 760px) { .btn--desk { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 2px solid var(--line-2); background: #fff; border-radius: var(--r); cursor: pointer;
  color: var(--ink); flex: none;
}
@media (min-width: 1200px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .ico-x { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-x { display: block; }

/* ---------- Mobile nav ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20,24,31,.55); z-index: 70; opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.scrim.is-open { opacity: 1; visibility: visible; }
.mnav {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 90vw); z-index: 80;
  background: #fff; transform: translateX(102%);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  /* Closed, this panel holds 42 links parked off-screen. Without
     visibility:hidden they stay in the tab order and in the accessibility
     tree, so a keyboard user tabs from the burger straight into a menu they
     cannot see. visibility is delayed until the slide-out finishes so the
     close animation still plays. */
  visibility: hidden;
  transition: transform var(--t), visibility 0s linear var(--t);
}
.mnav.is-open { transform: none; visibility: visible; transition: transform var(--t), visibility 0s; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.mnav__head img { height: 40px; width: auto; }
.mnav__close { width: 42px; height: 42px; border: 2px solid var(--line-2); background: #fff; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mnav__close svg { width: 22px; height: 22px; }
.mnav__body { padding: .25rem 0 1rem; flex: 1; }
.mnav__link { display: block; padding: .82rem 1.25rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.mnav__link[aria-current="page"] { color: var(--brand-600); background: var(--brand-soft); }
.mnav details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .82rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1.02rem; color: var(--ink); border-bottom: 1px solid var(--line);
}
.mnav details > summary::-webkit-details-marker { display: none; }
.mnav details > summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t); flex: none; }
.mnav details[open] > summary svg { transform: rotate(180deg); }
.mnav details[open] > summary { color: var(--brand-600); }
.mnav__sub { background: var(--bg-soft); padding: .3rem 0; border-bottom: 1px solid var(--line); }
.mnav__sub a { display: block; padding: .55rem 1.25rem .55rem 2rem; text-decoration: none; color: var(--body); font-size: .95rem; font-weight: 600; }
.mnav__sub a:hover { color: var(--brand-600); background: #fff; }
.mnav__foot { padding: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; background: var(--bg-soft); }
.mnav__meta { margin: .35rem 0 0; font-size: .86rem; color: var(--muted); text-align: center; }
body.is-locked { overflow: hidden; }

/* ---------- Hero ---------- */
/* Split hero. Four rounds of "the background photo doesn't look good" and the
   answer was never the photograph: a picture with a person in it cannot sit
   behind a headline and a form card and survive. Whatever we chose, the
   subject ended up under the card and the rest under a scrim, and the whole
   thing read as a dark smear. So the photograph is no longer a background. It
   gets the right half of the frame, uncovered and unfiltered, and the copy
   gets a brand-dark panel on the left. The form moves to its own red band
   under the credentials bar, where it is wider and easier to fill in anyway. */
.hero {
  position: relative; background: var(--bg-dark); color: #cdd3dc;
  overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); min-height: clamp(560px, 42vw, 760px); }
}
/* The copy panel. Its left padding lines the text up with the header logo and
   the rest of the page, whatever the viewport width. */
.hero__panel {
  position: relative; display: flex; align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--gutter);
  background:
    radial-gradient(70% 80% at 0% 100%, rgba(237,28,36,.38), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgba(237,28,36,.10), transparent 70%),
    var(--bg-dark);
}
@media (min-width: 1000px) {
  .hero__panel { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: clamp(2rem, 4vw, 4rem); }
}
/* Faint drawing-sheet grid over the panel, like the light sections have. */
.hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(90% 90% at 100% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(90% 90% at 100% 0%, #000 10%, transparent 75%);
}
.hero__panel-in { position: relative; z-index: 1; max-width: 640px; }
/* The photograph. A real box of its own now, so <picture> needs no tricks
   beyond being told to fill it. */
.hero__media { position: relative; min-height: clamp(260px, 62vw, 460px); background: var(--bg-dark); }
.hero__media > picture { position: absolute; inset: 0; display: block; }
.hero__media picture img,
.hero__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%;
}
@media (min-width: 1000px) {
  /* Slanted seam between panel and photo, and a red rule along it. */
  /* Stops short of the hero's bottom edge by the credentials bar's overlap,
     so the bar sits on a dark base rather than over the Carrier badge at
     the foot of the photograph. */
  .hero__media { min-height: 0; margin-bottom: 3.2rem; clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); }
  .hero__media::before {
    content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 7%;
    background: linear-gradient(to right, var(--brand) 0, var(--brand) 100%);
    clip-path: polygon(0 100%, 100% 0, calc(100% - 12px) 0, -12px 100%);
    pointer-events: none;
  }
  /* A whisper of the panel colour along the seam so the photo does not butt
     up against the red edge harshly. */
  .hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(20,24,31,.28), transparent 22%);
  }
}
/* Stacked (phone): photograph on top, copy below. */
@media (max-width: 999px) {
  .hero__media { order: -1; }
}
.hero__pill {
  /* Solid backing rather than a translucent tint: over a bright sky the old
     translucent version washed out to near-invisible. */
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(20,24,31,.82);
  border: 1px solid rgba(237,28,36,.55); color: #ff9297; border-radius: 100px;
  padding: .45rem 1rem; font-size: .84rem; font-weight: 800; font-family: var(--font-display);
  letter-spacing: .02em; margin-bottom: 1.2rem;
}
.hero__pill svg { width: 16px; height: 16px; }
.hero h1 { color: #fff; margin-bottom: .4em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__sub { font-size: clamp(1.05rem, .95rem + .5vw, 1.2rem); max-width: 52ch; margin-bottom: 1.8rem; color: #c3cad4; }
.hero .btn-row { margin-bottom: 2rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.hero__trust li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; color: #dfe4ea; }
.hero__trust svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.hero__trust { list-style: none; padding: 0; margin: 0; }

/* Hero booking card */
.hcard { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: clamp(1.4rem, 3vw, 2rem); color: var(--body); }
.hcard h2 { font-size: 1.5rem; margin-bottom: .25em; }
.hcard__lede { font-size: .95rem; margin-bottom: 1.25rem; color: var(--muted); }
.hcard__urgent {
  display: flex; gap: .7rem; align-items: flex-start; background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: var(--r); padding: .8rem .9rem;
  margin-top: 1.1rem; font-size: .87rem; line-height: 1.5;
}
.hcard__urgent svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: .15rem; }
.hcard__urgent b { display: block; color: var(--ink); }

/* ---------- Forms ---------- */
.field { margin-bottom: .9rem; }
.field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--ink-2); margin-bottom: .35rem; }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; border: 2px solid var(--line-2); border-radius: var(--r);
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cool); box-shadow: 0 0 0 4px var(--cool-soft);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa3ae; }
.field--err input, .field--err select, .field--err textarea { border-color: var(--brand); }
.field__err { display: none; color: var(--brand-700); font-size: .82rem; font-weight: 700; margin-top: .3rem; }
.field--err .field__err { display: block; }
.field-row { display: grid; gap: 0 .9rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
.form__note { font-size: .8rem; color: var(--muted); margin-top: .8rem; line-height: 1.5; }
.form__ok, .form__fail { display: none; border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: 1rem; font-size: .95rem; }
.form__ok { background: var(--ok-soft); border: 1px solid #b8e0c8; color: #0d5c34; }
.form__fail { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-800); }
.is-sent .form__ok { display: block; }
.is-failed .form__fail { display: block; }
.is-sent .form__body { display: none; }
.radio-grid { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin-bottom: .9rem; }
@media (min-width: 620px) { .radio-grid { grid-template-columns: repeat(4, 1fr); } }
.radio-grid input { position: absolute; opacity: 0; pointer-events: none; }
.radio-grid label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  border: 2px solid var(--line-2); border-radius: var(--r); padding: .7rem .4rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink-2);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.radio-grid label svg { width: 22px; height: 22px; color: var(--muted); transition: color var(--t); }
.radio-grid label:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.radio-grid input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-700); }
.radio-grid input:checked + label svg { color: var(--brand); }
.radio-grid input:focus-visible + label { outline: 3px solid var(--cool); outline-offset: 2px; }

/* ---------- Strip / phone band ---------- */
.strip { background: var(--brand); color: #fff; }
.strip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: clamp(1.6rem, 3.5vw, 2.6rem); }
.strip p { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); color: #fff; letter-spacing: -.02em; max-width: 24ch; line-height: 1.15; }
.strip .btn { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }
.strip .btn:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); color: #fff; box-shadow: none; }

.phone-band { background: var(--bg-dark); color: #b9c0cb; text-align: center; }
.phone-band__in { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.phone-band h2 { color: #fff; margin-bottom: .3em; }
.phone-band p { max-width: 60ch; margin-inline: auto; margin-bottom: 1.6rem; }
.tel-xl {
  display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display);
  font-weight: 900; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); color: #fff;
  text-decoration: none; letter-spacing: -.03em;
}
.tel-xl svg { width: .82em; height: .82em; color: var(--brand); }
.tel-xl:hover { color: var(--brand); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
/* Grid and flex items default to min-width:auto, which for anything holding an
   image or a long unbroken string resolves to that content's intrinsic width —
   and the track then refuses to shrink, overflowing the viewport on a phone.
   Setting it to 0 everywhere is the fix, and it is why the site has no
   horizontal scroll at 320px. */
.grid > *, .gallery > *, .stats > *, .areas > *, .ctiles > *,
.split > *, .story > *, .hero__grid > *, .footer__grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff; border: 1px solid #dfe4ea; border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: clamp(1.25rem, 2.4vw, 1.85rem); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card--link { text-decoration: none; display: flex; flex-direction: column; color: inherit; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-line); color: inherit; }
.card__ico {
  width: 52px; height: 52px; border-radius: 14px;
  /* Solid brand red, not a 4% tint — this is six points of real colour per
     grid where there was previously none. */
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; flex: none;
  box-shadow: 0 4px 12px rgba(237,28,36,.26);
}
.card__ico svg { width: 27px; height: 27px; }
.card__ico--cool { background: var(--cool); color: #fff; box-shadow: 0 4px 12px rgba(15,111,190,.26); }
.card h3 { margin-bottom: .4em; }
.card p { font-size: .97rem; margin-bottom: 0; }
.card__more { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 800; font-size: .93rem; color: var(--brand-600); }
.card__more svg { width: 17px; height: 17px; transition: transform var(--t); }
.card--link:hover .card__more svg { transform: translateX(4px); }

/* ------------------------------------------- financing lender logos ----- */
/* A fixed-height plate so three logos of different proportions sit on one
   optical line, and so the row does not reflow while they load. A wide lockup
   and a square plate need different cap heights to read as the same weight —
   at a shared max-height the square one looks half the size. */
.fin-logo {
  /* Every lender sits centred on the same plate, sized for equal optical weight: a wide wordmark,
     a square plate and ECU's round badge (which carries its own small wording, so it needs the most
     height to stay legible). Client asked for them to read as even, 16 Oct 2026. */
  height: 150px; margin-bottom: 1.3rem; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line); border-radius: var(--r);
}
.fin-logo img {
  max-width: 100%; width: auto; height: auto;
  object-fit: contain; object-position: center;
}
.fin-logo--wide img { max-height: 50px; max-width: 88%; }
.fin-logo--square img { max-height: 92px; }
.fin-logo--badge img { max-height: 118px; }
/* Where the lender's own artwork is not in assets/img/brand/ yet, their name is
   set in our display face instead. Never an invented or scraped mark. */
.fin-logo__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  line-height: 1.15; letter-spacing: -.015em; color: var(--ink);
  display: inline-flex; align-items: center; gap: .65rem; max-width: 100%;
}
.fin-logo__name::before {
  content: ""; width: 5px; height: 2.1em; border-radius: 3px;
  background: var(--brand); flex: none;
}
.fin-logo__name--cool::before { background: var(--cool); }
.card--fin { display: flex; flex-direction: column; }
/* Three lenders, three different numbers of bullets — without this the call to
   action floats at a different height in each card. */
.card--fin .btn-row--foot { margin-top: auto; padding-top: 1.2rem; }

/* Financing: why finance + ways to pay (16 Oct 2026) */
.finwhy { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .finwhy { grid-template-columns: 1.5fr 1fr; } }
.finreasons { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 620px) { .finreasons { grid-template-columns: 1fr 1fr; } }
.finreason { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.3rem 1.25rem; box-shadow: var(--sh-1); }
.finreason h3 { font-size: 1.08rem; margin: .1rem 0 .35rem; }
.finreason p { font-size: .96rem; margin: 0; }
.finreason__num { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; box-shadow: var(--sh-red); }
.finpromise { display: flex; gap: 1rem; align-items: center; background: var(--bg-dark); color: #e9edf2;
  border-radius: var(--r-lg); padding: 1.25rem 1.4rem; border-left: 5px solid var(--brand); }
.finpromise p { margin: 0; font-size: 1rem; }
.finpromise b { color: #fff; }
.finpromise__mark { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(237,28,36,.18);
  display: inline-flex; align-items: center; justify-content: center; color: #ff6b70; }
.finpromise__mark svg { width: 24px; height: 24px; }
.paycard { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--brand); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem; box-shadow: var(--sh-2); }
.paycard h3 { font-size: 1.3rem; margin: .4rem 0 1rem; }
.paycard__logos { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.paycard__logos img { width: 64px; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(20,24,31,.18); background: #fff; }
.paycard__list { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .6rem; }
.paycard__list li { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--ink-2); }
.paycard__list svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.finfine { margin-top: 2rem; }
.finfine .alert { margin: 0; font-size: .9rem; }

/* Service card with photo */
.svc {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-line); color: inherit; }
.svc__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-band); }
.svc__media > picture { position: absolute; inset: 0; display: block; }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__tag {
  position: absolute; left: .8rem; top: .8rem; background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .32rem .6rem; border-radius: var(--r-sm);
}
.svc__tag--cool { background: var(--cool); }
.svc__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: 1.25rem; margin-bottom: .35em; }
.svc__body p { font-size: .95rem; margin-bottom: 0; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: clamp(1.3rem, 3vw, 2.1rem) 1rem; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); color: var(--brand); line-height: 1; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .45rem; font-size: .88rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sec--dark .stats { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.sec--dark .stat { background: var(--bg-dark-2); }
.sec--dark .stat span { color: #99a2ae; }

/* ---------- Checklist / features ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .6rem; }
.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .checklist--2 { grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; } }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; margin: 0; font-size: .98rem; }
.checklist svg { width: 21px; height: 21px; color: var(--brand); flex: none; margin-top: .18rem; }
.sec--dark .checklist svg { color: #ff5a60; }
.checklist--cool svg { color: var(--cool); }

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  /* Text-heavy splits look unbalanced with a centred image floating beside a
     long column, so these top-align and let the photo stick as you read. */
  .split--wide-left { grid-template-columns: 1.2fr 1fr; align-items: start; }
  /* (was position:sticky — it jumped against the sticky header on short columns) */
  /* Centring is right for two columns of similar height. It is badly wrong
     when one of them is an 800px request-service card and the other is three
     FAQ questions: the short column ends up floating in the middle of half a
     screen of white, which reads as a broken page rather than as space. */
  .split--start { align-items: start; }
}
.split__media img { border-radius: var(--r-lg); box-shadow: var(--sh-2); width: 100%; }

/* A self-hosted video in a split (the seasonal holiday ad on the home page). */
.vidframe { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); background: var(--bg-dark); aspect-ratio: 16 / 9; }
.vidframe video { display: block; width: 100%; height: 100%; object-fit: cover; }
.holiday__note { color: var(--muted); font-size: .95rem; }
.holiday[hidden] { display: none; }
.split--rev .split__media { order: -1; }
@media (min-width: 940px) { .split--rev .split__media { order: 2; } }

/* A supplied partner badge: transparent PNG, circular, 300px native. The
   default .split__media img rules give it a drop shadow and stretch it to the
   column width, which draws a grey rounded box behind the circle and upscales
   a 300px mark to ~470px. */
.badge-mark { width: auto !important; max-width: min(280px, 100%); height: auto;
  border-radius: 0 !important; box-shadow: none !important; margin-inline: auto; display: block; }

/* ---------- Reviews ----------
   Real reviews from the Housecall Pro export (reviews.json). */
.stars { display: inline-flex; gap: .12rem; margin-bottom: .8rem; }
.stars svg { width: 18px; height: 18px; color: var(--star); fill: var(--star); }
.stars svg.off { color: var(--line-2); fill: var(--line-2); }

/* Avatars: five soft tints, picked per name, so a page of them is not one flat colour */
.rev__av { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex: none; background: var(--brand-soft); color: var(--brand-700); }
.rev__av--2 { background: var(--cool-soft); color: var(--cool-600); }
.rev__av--3 { background: var(--ok-soft); color: var(--ok); }
.rev__av--4 { background: var(--warn-soft); color: #8a5300; }
.rev__av--5 { background: #eeeaf8; color: #5a3fa0; }

/* Card */
.rev { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.5rem 1.3rem; display: flex; flex-direction: column; box-shadow: var(--sh-1); }
.rev__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.rev__top .stars { margin: 0; }
.rev__src { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rev__src svg { width: 14px; height: 14px; }
.rev__q { margin: 0 0 1.1rem; padding: 0; border: 0; }
.rev__q p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.rev__by { margin-top: auto; display: flex; align-items: center; gap: .7rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.rev__by b { display: block; font-family: var(--font-display); color: var(--ink); font-size: .95rem; line-height: 1.3; }
/* Only the meta line. A bare `.rev__by span` also matched the avatar span and
   pushed the initial onto its own line. */
.rev__by span span { display: block; font-size: .82rem; color: var(--muted); }
.rev__reply { margin: -.2rem 0 1.1rem; padding: .65rem .85rem; background: var(--bg-soft); border-radius: var(--r-sm); font-size: .9rem; line-height: 1.55; color: var(--body); }
.rev__reply b { display: block; font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.rev--compact { padding: 1.15rem 1.2rem; }
.rev--compact .rev__q p { font-size: .96rem; }
mark { background: #fff1b8; color: inherit; padding: 0 .08em; border-radius: 2px; }

/* The large pull quote */
.rev--feature { position: relative; height: 100%; background: var(--bg-dark); border-color: var(--bg-dark); color: #c3cad4; padding: clamp(1.6rem, 3vw, 2.4rem); overflow: hidden; isolation: isolate; box-shadow: var(--sh-2, 0 12px 32px rgba(20,24,31,.18)); }
.rev--feature::before { content: "\201C"; position: absolute; z-index: -1; right: .08em; bottom: -.52em; font-family: Georgia, "Times New Roman", serif; font-size: clamp(10rem, 16vw, 15rem); line-height: 1; color: var(--brand); opacity: .2; }
.rev--feature::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 320px at 0% 0%, rgba(237,28,36,.22), transparent 62%); }
.rev--feature .stars svg { width: 22px; height: 22px; }
.rev--feature .rev__src { color: #98a1ad; }
.rev--feature .rev__q { margin: auto 0; padding: 1.4rem 0 1.8rem; }
.rev--feature .rev__by { margin-top: 0; }
.rev--feature .rev__q p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); line-height: 1.5; color: #fff; letter-spacing: -.005em; }
.rev--feature .rev__by { border-top-color: rgba(255,255,255,.14); }
.rev--feature .rev__by b { color: #fff; font-size: 1.02rem; }
.rev--feature .rev__by span span { color: #98a1ad; }

/* Highlights: one big quote, four short ones beside it */
.revbento { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.revbento__side { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.revbento__side > .rev { min-width: 0; }
@media (min-width: 700px) { .revbento__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .revbento { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; } }
@media (max-width: 699px) {
  .revbento__side { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .85rem; margin-inline: calc(-1 * var(--gutter)); padding: .2rem var(--gutter) .9rem; scroll-padding-inline: var(--gutter); }
  .revbento__side > .rev { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Banner with the summary panel */
.revhero__in { display: grid; gap: 2rem 3rem; align-items: end; }
@media (min-width: 960px) { .revhero__in { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } }
.revhero__panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 1.4rem 1.5rem 1.3rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.revhero__panel .stars { margin-bottom: .5rem; }
.revhero__panel .stars svg { width: 22px; height: 22px; }
.revhero__num { margin: 0 0 1rem; color: #c3cad4; font-size: 1.05rem; }
.revhero__num b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: #fff; margin-bottom: .2rem; }
.revhero__score { margin: 0 0 .5rem; color: #c3cad4; }
.revhero__score b { font-family: var(--font-display); font-size: 1.6rem; color: #fff; }
.revhero__facts { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: .55rem; font-size: .92rem; }
.revhero__facts li { display: flex; align-items: center; gap: .6rem; margin: 0; }
.revhero__facts svg { width: 16px; height: 16px; color: #98a1ad; flex: none; }
.revhero__facts b { color: #fff; font-family: var(--font-display); }

/* The list: sidebar of filters + a single-column feed */
.revlayout { display: grid; gap: 1.25rem 2rem; align-items: start; }
.revside[hidden], [data-revmore][hidden], [data-revcar-bar][hidden], .revclear[hidden] { display: none !important; }
.revside { display: grid; gap: 1.2rem; align-content: start; }
.revside__group { display: grid; gap: .5rem; }
.revside__h { margin: 0; font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.revsearch { position: relative; display: block; margin: 0; }
.revsearch svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.revsearch input { width: 100%; min-height: 44px; padding: .6rem 1rem .6rem 2.6rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.revsearch input::placeholder { color: var(--muted); }
.revseg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--bg-soft); border-radius: 999px; }
.revseg button { -webkit-appearance: none; appearance: none; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font: inherit; font-family: var(--font-display); font-weight: 700; font-size: .88rem; cursor: pointer; }
.revseg button.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.revside__opts { display: grid; gap: .25rem; }
.revopt { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 40px; padding: .4rem .75rem; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; font-size: .93rem; text-align: left; cursor: pointer; }
.revopt span { font-size: .82rem; color: var(--muted); }
.revopt:hover { background: var(--bg-soft); }
.revopt.is-on { background: var(--ink); color: #fff; }
.revopt.is-on span { color: rgba(255,255,255,.7); }
.revtopics { display: flex; flex-wrap: wrap; gap: .4rem; }
.revtopic { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .35rem .75rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.revtopic span { font-size: .76rem; color: var(--muted); }
.revtopic:hover { border-color: var(--ink-2); }
.revtopic.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.revtopic.is-on span { color: rgba(255,255,255,.8); }
.revclear { justify-self: start; -webkit-appearance: none; appearance: none; border: 0; background: none; padding: .3rem 0; color: var(--brand-600); font: inherit; font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 999px) {
  .revside { gap: .9rem; }
  .revside__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
  .revopt { border-color: var(--line-2); border-radius: 999px; background: #fff; min-height: 38px; }
  .revtopics { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: .1rem var(--gutter) .4rem; scrollbar-width: none; }
  .revtopics::-webkit-scrollbar { display: none; }
  .revtopic { flex: none; }
}
.revcount { font-size: .9rem; color: var(--muted); margin: 0 0 .6rem; }
.revfeed { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 clamp(1rem, 3vw, 1.75rem); }
.rrow { display: flex; gap: .9rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.rrow:first-child { border-top: 0; }
.rrow .rev__av { width: 40px; height: 40px; font-size: .95rem; }
.rrow__body { min-width: 0; flex: 1; }
.rrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .65rem; }
.rrow__who { font-family: var(--font-display); color: var(--ink); font-size: 1rem; line-height: 1.3; }
.rrow__top .stars { margin: 0; }
.rrow__top .stars svg { width: 15px; height: 15px; }
.rrow__meta { margin: .15rem 0 .55rem; font-size: .84rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 599px) { .rrow { gap: .75rem; } .rrow .rev__av { width: 34px; height: 34px; font-size: .88rem; } }
.rrow__q { margin: 0; font-size: .99rem; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.rrow__q.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.rrow__more { -webkit-appearance: none; appearance: none; margin: .35rem 0 0; padding: .25rem 0; border: 0; background: none; color: var(--brand-600); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.rrow__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rrow .rev__reply { margin: .75rem 0 0; }
.rrow:focus { outline: none; }
.revempty { text-align: center; color: var(--muted); padding: 2.5rem 0; margin: 0; }
.revnote { margin: 2rem 0 0; font-size: .84rem; line-height: 1.6; color: var(--muted); }

/* ---------- Home page: the reviews band ---------- */
.revband { position: relative; background: var(--bg-dark); color: #c3cad4; overflow: hidden; isolation: isolate; }
.revband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 420px at 8% 0%, rgba(237,28,36,.24), transparent 60%), radial-gradient(700px 380px at 100% 100%, rgba(15,111,190,.16), transparent 60%); }
.revband::after { content: "\201C"; position: absolute; z-index: -1; left: 1.5vw; top: -.08em; font-family: Georgia, "Times New Roman", serif; font-size: clamp(14rem, 28vw, 26rem); line-height: 1; color: #fff; opacity: .04; pointer-events: none; }
.revband__head { display: grid; gap: 1.75rem 3rem; align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 960px) { .revband__head { grid-template-columns: minmax(0, 1fr) auto; } }
.revband h2 { color: #fff; margin: .35rem 0 .6rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.revband h2 em { font-style: normal; color: var(--brand); }
.revband__intro p { margin: 0; max-width: 54ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: #c3cad4; }
.revband__score { display: grid; gap: .2rem; min-width: 280px; padding: 1.3rem 1.5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); }
.revband__score .stars { margin: 0 0 .2rem; }
.revband__score .stars svg { width: 24px; height: 24px; }
.revband__num { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; }
.revband__num b { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: #fff; }
.revband__num span { font-weight: 700; color: #c3cad4; }
.revband__src { list-style: none; margin: .6rem 0 0; padding: .7rem 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: .35rem; font-size: .9rem; }
.revband__src li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.revband__src svg { width: 15px; height: 15px; color: #98a1ad; }
.revband__src b { color: #fff; font-family: var(--font-display); }
.revband__mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.revband__mentions > span { font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #98a1ad; }
.revband__mentions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.revband__mentions li { margin: 0; }
.revband__mentions a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .95rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #e6e9ee; text-decoration: none; font-size: .9rem; transition: background var(--t), border-color var(--t); }
.revband__mentions a b { color: #fff; font-family: var(--font-display); }
.revband__mentions a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.revband__cta { margin-top: 2rem; }
@media (max-width: 699px) {
  .revband__mentions ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: .1rem var(--gutter) .3rem; scrollbar-width: none; }
  .revband__mentions ul::-webkit-scrollbar { display: none; }
  .revband__mentions a { white-space: nowrap; }
  .revband__score { min-width: 0; }
}

/* Carousel */
.revcar { position: relative; }
.revcar__track { list-style: none; margin: 0; padding: .25rem .1rem 1rem; display: flex; gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .1rem; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.revcar__track:focus-visible { outline-offset: 4px; }
.revcar.is-js .revcar__track { scrollbar-width: none; }
.revcar.is-js .revcar__track::-webkit-scrollbar { display: none; }
.revcar__slide { flex: 0 0 86%; scroll-snap-align: start; display: flex; }
.revcar__slide > .rev { width: 100%; }
@media (min-width: 700px) { .revcar__slide { flex-basis: calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2); } }
@media (min-width: 1040px) { .revcar__slide { flex-basis: calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3); } }
.revband .rev { border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: transform var(--t), box-shadow var(--t); }
.revband .rev:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.34); }
.revband .rev__q p { font-size: 1.04rem; }
.revcar__bar { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .75rem; }
.revcar__btn { -webkit-appearance: none; appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.revcar__btn svg { width: 20px; height: 20px; }
.revcar__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.revband .revcar__btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.revband .revcar__btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.revcar__btn--play { margin-left: .4rem; }
.revcar__btn--play svg { width: 15px; height: 15px; }
.revcar__dots { display: flex; align-items: center; gap: .4rem; padding: 0 .5rem; }
.revcar__dots i { position: relative; width: 7px; height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; transition: width var(--t), background var(--t); }
.revband .revcar__dots i { background: rgba(255,255,255,.25); }
.revcar__dots i.is-on { width: 30px; background: var(--brand); }
/* While playing, the active dot fills up as a timer until the next slide */
.revcar.is-playing .revcar__dots i.is-on { background: rgba(255,255,255,.25); }
.revcar.is-playing .revcar__dots i.is-on::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform-origin: left; animation: revcar-fill var(--revcar-delay, 6.5s) linear forwards; }
@keyframes revcar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.revcar.is-held .revcar__dots i.is-on::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .revcar.is-playing .revcar__dots i.is-on::after { animation: none; transform: none; } }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
/* Two photographs in a grid sized for eight left half the row empty. A pair
   gets its own proportions and a wider aspect, so the crew shot is actually
   legible instead of being cropped to a 3:4 thumbnail. */
.gallery--pair { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (min-width: 700px) { .gallery--pair { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery--pair { grid-template-columns: repeat(2, 1fr); } }
.gallery--pair .gal { aspect-ratio: 4/3; }
.gal { position: relative; padding: 0; border: 0; background: var(--bg-band); border-radius: var(--r); overflow: hidden; cursor: zoom-in; aspect-ratio: 3/4; }
.gal > picture { position: absolute; inset: 0; display: block; }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.gal:hover img { transform: scale(1.06); }
.gal__zoom {
  position: absolute; right: .6rem; bottom: .6rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20,24,31,.72); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity var(--t);
}
.gal__zoom svg { width: 17px; height: 17px; }
.gal:hover .gal__zoom, .gal:focus-visible .gal__zoom { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,16,.94); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox.is-open { display: flex; }
.lightbox > div { max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .8rem; }
.lightbox img { max-height: calc(100vh - 9rem); width: auto; margin-inline: auto; border-radius: var(--r); }
.lightbox__cap { color: #cfd5dd; text-align: center; font-size: .92rem; margin: 0; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox__btn:hover { background: rgba(255,255,255,.2); }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }

/* ---------- Banner (interior page header) ---------- */
.banner { position: relative; background: var(--bg-dark); color: #c3cad4; overflow: hidden; isolation: isolate; }
.banner__media { position: absolute; inset: 0; z-index: -2; }
/* Same <picture> trap as the hero: the wrapper must be given the box first or
   the image renders as a strip and object-fit never engages. */
.banner__media > picture { position: absolute; inset: 0; display: block; }
.banner__media picture img,
.banner__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(1.1) contrast(1.04);
}
/* Scrim the text side hard, let the photograph breathe on the right. */
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg,
    rgba(12,15,20,.94) 0%, rgba(12,15,20,.82) 38%,
    rgba(12,15,20,.35) 70%, rgba(12,15,20,.15) 100%);
}
@media (max-width: 760px) {
  .banner::after { background: linear-gradient(to bottom, rgba(12,15,20,.55) 0%, rgba(12,15,20,.90) 100%); }
}
/* A photographic banner deserves real height; the flat one stays compact. */
.banner:not(.banner--flat) .banner__in { padding-block: clamp(4rem, 9vw, 7.5rem); }
.banner--flat { background: var(--bg-dark); }
.banner--flat::after { background: radial-gradient(1200px 400px at 15% 0%, rgba(237,28,36,.18), transparent 60%); }
.banner__in { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.banner h1 { color: #fff; margin-bottom: .3em; max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.banner__sub { font-size: clamp(1rem, .95rem + .35vw, 1.18rem); max-width: 46ch; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.crumbs { margin-bottom: 1.1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .55rem; padding: 0; margin: 0; font-size: .85rem; }
.crumbs li { display: flex; align-items: center; gap: .55rem; color: #98a1ad; margin: 0; }
.crumbs li:not(:last-child)::after { content: "/"; color: #5b6472; }
.crumbs a { color: #c3cad4; text-decoration: none; position: relative; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
/* Breadcrumbs are small by convention, which on a phone leaves a 23px-high
   link. The pseudo-element gives the thumb 40px to aim at without moving the
   trail or changing its spacing. */
@media (max-width: 759px) {
  .crumbs a::after { content: ""; position: absolute; left: -.25rem; right: -.25rem; top: 50%; height: 40px; transform: translateY(-50%); }
}
.crumbs [aria-current] { color: #fff; font-weight: 700; }

/* ---------- Prose ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose ul li::marker { color: var(--brand); }
.prose blockquote { margin: 1.8rem 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--brand); background: var(--bg-soft); border-radius: 0 var(--r) var(--r) 0; font-size: 1.05rem; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; color: var(--ink); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 22px; height: 22px; flex: none; margin-top: .2rem;
  background: currentColor; color: var(--brand);
  -webkit-mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--brand-700); }
.faq__a { padding-bottom: 1.3rem; max-width: 78ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- Coupon ---------- */
.coupon {
  position: relative; background: #fff; border: 2px dashed var(--brand-line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); text-align: center; display: flex; flex-direction: column;
}
.coupon__head { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: .5rem; }
.coupon__amt { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: var(--ink); line-height: 1; letter-spacing: -.04em; margin-bottom: .2rem; }
.coupon__for { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink-2); margin-bottom: .9rem; }
.coupon__fine { font-size: .8rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.2rem; }
.coupon__cta { margin-top: auto; }
.coupon__exp { display: inline-block; margin-top: .8rem; font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ---------- Product grid ---------- */
.prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.prod:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-line); color: inherit; }
.prod__media { aspect-ratio: 1; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; padding: 1.4rem; border-bottom: 1px solid var(--line); }
.prod__media img { max-height: 100%; width: auto; object-fit: contain; }
.prod__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.prod__body h3 { font-size: 1.05rem; margin-bottom: .3em; }
.prod__body p { font-size: .88rem; margin-bottom: 0; color: var(--muted); }
.prod__sku { display: inline-block; font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: .4rem; }

/* ---------- Badges / trust ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid var(--line);
  border-radius: 100px; padding: .5rem 1rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); margin: 0;
}
.badge svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.badges--light .badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #dfe4ea; }

.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.logos img { height: 44px; width: auto; opacity: .78; transition: opacity var(--t); filter: grayscale(1); }
.logos img:hover { opacity: 1; filter: none; }
.logos--plain img { filter: none; opacity: 1; }

/* ---------- Table ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
table.tbl th, table.tbl td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th { background: var(--bg-soft); font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: .88rem; letter-spacing: .02em; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td svg { width: 19px; height: 19px; color: var(--ok); }

/* ---------- Area list ---------- */
.areas { display: grid; gap: .55rem; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .areas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(4, 1fr); } }
.areas li { margin: 0; }
.areas a { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: .93rem; transition: border-color var(--t), background var(--t), color var(--t); }
/* Site map labels like "Kingsport/Netherland Inn Museum In Kingsport" have no
   break opportunity and pushed the 320px layout 4px wide. Let them wrap. */
.areas a { min-width: 0; overflow-wrap: anywhere; }
.areas a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-700); }
.areas svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { margin: 0; position: relative; padding-top: 3.4rem; }
.steps li::before {
  counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0;
  width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { font-size: 1.15rem; margin-bottom: .35em; }
.steps p { font-size: .95rem; margin: 0; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: .9rem; align-items: flex-start; border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin-bottom: 1.6rem; font-size: .96rem; }
.alert svg { width: 22px; height: 22px; flex: none; margin-top: .15rem; }
.alert p:last-child { margin-bottom: 0; }
.alert--warn { background: var(--warn-soft); border: 1px solid #f0dcb4; color: #6d4200; }
.alert--warn svg { color: var(--warn); }
.alert--info { background: var(--cool-soft); border: 1px solid #c3ddf5; color: #0a4a80; }
.alert--info svg { color: var(--cool); }
.alert--brand { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-800); }
.alert--brand svg { color: var(--brand); }
.alert b { display: block; margin-bottom: .15rem; color: inherit; }

/* ---------- Video ---------- */
.vid { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; background: rgba(20,24,31,.35); cursor: pointer; width: 100%; height: 100%;
  transition: background var(--t);
}
.vid__play:hover { background: rgba(20,24,31,.15); }
.vid__play span { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-red); }
.vid__play svg { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }

/* ---------- Map ---------- */
.map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-band); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
@media (max-width: 620px) { .map iframe { min-height: 380px; } }

/* ---------- Contact tiles ---------- */
.ctiles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ctiles { grid-template-columns: repeat(2, 1fr); } }
.ctile { display: flex; gap: .95rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; }
.ctile__ico { width: 44px; height: 44px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ctile__ico svg { width: 22px; height: 22px; }
.ctile h3 { font-size: 1rem; margin-bottom: .2em; }
.ctile p { font-size: .95rem; margin: 0; }
.ctile a { font-weight: 700; }
.ctile a[href^="tel:"], .footer__contact a[href^="tel:"],
.topbar__tel, .tel-xl { white-space: nowrap; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-dark); color: #98a1ad; padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .95rem; }
.footer h2, .footer h3 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: .01em; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer__logo { height: 52px; width: auto; margin-bottom: 1.2rem; }
.footer p { line-height: 1.7; }
.fnav { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.fnav li { margin: 0; }
.fnav a { color: #98a1ad; text-decoration: none; transition: color var(--t); }
.fnav a:hover { color: #fff; }
/* Town lists inside white cards. These used .fnav, which is the footer style:
   grey links that hover to white — invisible on a white card, and it made the
   linked towns look fainter than the plain-text ones. */
.townlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.townlist li { margin: 0; color: var(--body); font-size: .96rem; }
.townlist a {
  color: var(--brand-700); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t);
}
.townlist a:hover { color: var(--brand); border-bottom-color: currentColor; }
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.footer__contact svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: .18rem; }
.footer__contact b { display: block; color: #fff; font-size: 1.05rem; }
.footer__contact a { color: #fff; text-decoration: none; }
.footer__contact a:hover { color: var(--brand); }
.hours { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; border-bottom: 1px dashed rgba(255,255,255,.12); padding-bottom: .5rem; }
.hours li:last-child { border-bottom: 0; }
.hours b { color: #fff; font-weight: 700; }
.hours .em { color: var(--brand); font-weight: 800; }
.social { display: flex; gap: .55rem; margin-top: 1.4rem; }
.social a { width: 40px; height: 40px; border-radius: var(--r); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #cdd3dc; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t), border-color var(--t); }
.social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.social svg { width: 19px; height: 19px; }
.footer__pay { display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }
.footer__pay img { height: 24px; width: auto; }
.footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; font-size: .87rem; }
.footer__bar p { margin: 0; }
.footer__bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; }
.footer__bar li { margin: 0; }
.footer__bar a { color: #98a1ad; text-decoration: none; }
.footer__bar a:hover { color: #fff; }
.footer__by { font-size: .84rem; color: #6b7480; }
.footer__by a { color: #98a1ad; }

/* ---------- Sticky mobile action bar ---------- */
.fab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 760px) { .fab { display: none; } }
.fab a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem .5rem; font-family: var(--font-display); font-weight: 800; font-size: .98rem; text-decoration: none; }
.fab a:first-child { background: var(--brand); color: #fff; }
.fab a:last-child { background: var(--ink); color: #fff; }
.fab svg { width: 19px; height: 19px; }
/* Phones with a home indicator put a gesture strip over the bottom of the
   viewport, so the bar needs to sit above it rather than under it. */
.fab { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* The bar measures 58px, not the 54px this used to reserve, so the last four
   pixels of every page sat underneath it. --fab-h keeps the two in step. */
@media (max-width: 759px) {
  :root { --fab-h: 58px; }
  body { padding-bottom: calc(var(--fab-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Print ---------- */
@media print {
  .topbar, .header, .mnav, .scrim, .fab, .footer__bar ul, .strip, .phone-band, .vid { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .coupon { border: 2px dashed #000; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .sec { padding-block: 1rem; }
}

/* ---------- Home page: coverage (towns + drawn map) ---------- */
.cov { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.cov__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); grid-template-areas: "head" "map" "list"; }
@media (min-width: 1000px) {
  .cov__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head map" "list map"; align-items: start; }
  .cov__map { position: sticky; top: calc(var(--hdr-h) + 1.5rem); }
}
.cov__head { grid-area: head; }
.cov__map { grid-area: map; margin: 0; }
.cov__list { grid-area: list; }
.cov__head h2 { margin: .35rem 0 .6rem; }
.cov__head p { margin: 0; font-size: 1.08rem; max-width: 46ch; }
.cov__stats { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.cov__stats li { margin: 0; padding: .85rem 1rem; border-left: 1px solid var(--line); }
.cov__stats li:first-child { border-left: 0; }
.cov__stats b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.cov__stats span { font-size: .84rem; color: var(--muted); }
.cov__h { margin: 0 0 .6rem; font-family: var(--font-display); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cov__towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 420px) { .cov__towns { grid-template-columns: 1fr; } }
.cov__towns li { margin: 0; }
.cov__towns a { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: .55rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md, 10px); color: var(--ink); text-decoration: none; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.cov__towns a svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.cov__towns a b { font-family: var(--font-display); font-size: .95rem; font-weight: 700; flex: 1; min-width: 0; }
.cov__towns a span { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cov__towns a:hover, .cov__towns a.is-hot { border-color: var(--brand-line); box-shadow: var(--sh-2); transform: translateY(-1px); }
.cov__note { margin: .9rem 0 1.4rem; font-size: .88rem; color: var(--muted); }

.covmap { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid #d5dde6; box-shadow: var(--sh-2); background: #e9edf2; }
.covmap__state { font: 800 19px var(--font-display); fill: #8d98a6; letter-spacing: .45em; opacity: .7; }
.covmap__county { font: 800 12.5px var(--font-display); fill: #c4868c; letter-spacing: .24em; opacity: .9; }
.covmap__shield path { fill: #2f5fa8; stroke: #fff; stroke-width: 1.6; }
.covmap__shield text { font: 800 11px var(--font-display); fill: #fff; }
.covmap__town circle { fill: #7f8b9a; stroke: #fff; stroke-width: 1.6; }
.covmap__town.is-main circle { fill: var(--ink); stroke-width: 2.2; }
.covmap__lbl { font: 700 17px var(--font-display); fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 4px; stroke-linejoin: round; }
.covmap__lbl--minor { font-weight: 600; font-size: 13px; fill: #5d6875; }
.covmap__town.is-main { cursor: pointer; }
.covmap__town.is-main circle, .covmap__town.is-main text { transition: fill var(--t); }
.covmap__town.is-main:hover circle, .covmap__town.is-hot circle { fill: var(--brand); }
.covmap__town.is-main:hover text, .covmap__town.is-hot text { fill: var(--brand-700); }
.covmap__town.is-hot circle { r: 8; }
.covmap__pin { fill: var(--brand); stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.covmap__pulse { fill: var(--brand); opacity: .35; transform-box: fill-box; transform-origin: center; animation: covpulse 2.4s ease-out infinite; }
@keyframes covpulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .covmap__pulse { animation: none; opacity: .18; transform: scale(2); } }
.covmap__shoplbl { font: 900 19px var(--font-display); fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,.95); stroke-width: 5px; stroke-linejoin: round; }
.covmap__shopsub { font: 800 11px var(--font-display); fill: var(--brand-700); letter-spacing: .2em; paint-order: stroke; stroke: rgba(255,255,255,.95); stroke-width: 4px; }
@media (max-width: 640px) {
  .covmap__lbl--minor, .covmap__lbl--crowded, .covmap__county, .covmap__shield { display: none; }
  .covmap__lbl { font-size: 26px; stroke-width: 6px; }
  .covmap__state { font-size: 24px; }
  .covmap__shoplbl { font-size: 28px; }
  .covmap__shopsub { font-size: 16px; }
  .covmap__town.is-main circle { r: 9; }
}
.cov__map figcaption { margin-top: .8rem; }
.covlegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; font-size: .84rem; color: var(--muted); }
.covlegend li { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.covlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.covlegend__shop { background: var(--brand); box-shadow: 0 0 0 3px rgba(237,28,36,.2); }
.covlegend__main { background: var(--ink); }
.covlegend__minor { background: #8793a3; width: 9px !important; height: 9px !important; }
.covlegend__served { border-radius: 3px !important; background: #fbd2d5; box-shadow: inset 0 0 0 1px #f2b8bc; }

/* History page (16 Oct 2026): shop photo with a seal, growth timeline, signed promise, service tiles */
.story-photo { position: relative; }
.story-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.story-seal { position: absolute; left: -16px; bottom: -22px; width: 124px; height: 124px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 5px solid #fff; box-shadow: var(--sh-red);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); line-height: 1.1; transform: rotate(-8deg); }
.story-seal b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: .1rem 0; }
.story-seal small { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .92; max-width: 90px; }
@media (max-width: 620px) { .story-seal { left: 10px; bottom: -26px; width: 104px; height: 104px; } .story-seal b { font-size: 1.65rem; } }
.tline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1rem; }
.tline::before { content: ""; position: absolute; left: 26px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--brand), var(--brand-line)); }
.tline li { position: relative; display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.tline__ico { flex: none; width: 55px; height: 55px; border-radius: 50%; background: #fff; border: 3px solid var(--brand);
  color: var(--brand); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: var(--sh-1); }
.tline__ico svg { width: 23px; height: 23px; }
.tline li:last-child .tline__ico { background: var(--brand); color: #fff; box-shadow: var(--sh-red); }
.tline__card { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.2rem; box-shadow: var(--sh-1); }
.tline__when { font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); }
.tline__card h3 { font-size: 1.08rem; margin: .2rem 0 .3rem; }
.tline__card p { margin: 0; font-size: .96rem; }
.promise { position: relative; max-width: 920px; margin: 0 auto; text-align: center; background: #fff;
  border-top: 6px solid var(--brand); border-radius: var(--r-xl); padding: clamp(1.8rem, 4vw, 3.2rem); box-shadow: var(--sh-2); }
.promise__q { display: block; height: 2.4rem; font-family: Georgia, 'Times New Roman', serif; font-size: 5.5rem; line-height: .9; color: var(--brand); }
.promise blockquote { margin: 0; padding: 0; border: 0; background: none; font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.35; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.promise__sig { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; color: var(--muted); font-size: .95rem; }
.promise__sig img { width: 180px; height: auto; }
.dotiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dotile { display: flex; gap: .85rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: .85rem 1rem; font-weight: 700; color: var(--ink-2); font-size: .96rem; box-shadow: var(--sh-1); }
.dotile > span { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; }
.dotile svg { width: 21px; height: 21px; }

/* Reviews browser, full screen (16 Oct 2026, client found the sidebar + single column clunky): the
   filters become one sticky bar across the top, and the reviews a grid of cards that fills the width. */
.wrap--fluid { max-width: 1760px; }
.revfeed { background: none; border: 0; padding: 0; display: grid; gap: 1.1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.revfeed .rrow, .revfeed .rrow:first-child { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  padding: 1.25rem 1.3rem; box-shadow: var(--sh-1); transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.revfeed .rrow:hover { box-shadow: var(--sh-2); border-color: var(--line-2); transform: translateY(-2px); }
.revfeed > .revempty { grid-column: 1 / -1; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); }
.revcount { margin: .9rem 0 .8rem; font-weight: 700; color: var(--ink-2); }
@media (min-width: 1000px) {
  .revside { position: sticky; top: calc(var(--hdr-h) + .6rem); z-index: 6; display: flex; flex-wrap: wrap; align-items: center;
    gap: .75rem 1.25rem; padding: .85rem 1.1rem; background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
  .revside .revsearch { flex: 0 1 380px; }
  .revside__group--sort { display: flex; align-items: center; gap: .6rem; }
  .revside__group--sort .revseg { min-width: 250px; }
  .revside__group--topics { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: .8rem; }
  .revside__group--topics .revside__h { flex: none; }
  .revside__group--topics .revtopics { flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding: .15rem 0 .3rem;
    scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .revside__group--topics .revtopic { flex: none; }
  .revside .revsearch { order: 1; }
  .revside__group--sort { order: 2; }
  .revclear { order: 3; margin-left: auto; }
  .revside__group--topics { order: 4; }
}
.revlayout { grid-template-columns: minmax(0, 1fr); }
.revside, .revmain { min-width: 0; }