/* =========================================================================
   COMPONENTS. The house parts, in the order a page uses them.
   Everything here reads tokens. Nothing here carries a raw colour.
   ========================================================================= */

/* ---- Layout -------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--space-m), var(--container-site)); margin-inline: auto; }
.container--prose { max-width: var(--container-prose); }
.container--wide { width: min(100% - 2 * var(--space-m), 92rem); margin-inline: auto; }
.hw-section { padding-block: var(--section-y); position: relative; }
.hw-section--tight { padding-block: calc(var(--section-y) * 0.55); }
.hw-section--flush { padding-block: 0; }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

/* ---- Register, eyebrow, sheet, wash: how a section reads as a different
   KIND of content without flipping the committed ground. ------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-n2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-11);
}
.eyebrow::before { content: ''; height: 1px; width: 2rem; background: var(--color-accent-9); }

.register {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding-bottom: 0.85rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--color-line);
}
.register__i { font-family: var(--font-mono); font-size: var(--text-n1); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.sheet { position: relative; background: var(--color-bg-raised); }
.sheet::before, .sheet::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-line-strong); }
.sheet::before { top: 0; }
.sheet::after { bottom: 0; }

/* The section's own image at 7 percent as texture, cleared by a gradient in
   the current ground so it doubles as the divider below. object-fit here is
   the one documented exception to contract rule 3: this is texture, not a
   photograph. */
.wash { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wash img { width: 100%; height: 100%; opacity: 0.07; object-fit: cover; }
.wash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 90%); }

/* ---- Buttons. House minimum for anything interactive: a colour change AND
   one thing that moves, both on the ui ladder, and the label never
   disappears. `btn-swap` slides the label up while a duplicate arrives from
   below, so the element moves without the box changing height. No JS: a
   button that needs script is a bug. -------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.85rem 1.6rem;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-n1); font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--color-btn); color: var(--color-btn-text);
  border: 1px solid transparent;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.btn:hover { background: var(--color-btn-hover); }
.btn--accent { background: var(--color-accent-9); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-10); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.btn--ghost:hover { background: var(--color-surface); border-color: var(--color-text); }
.btn--block { width: 100%; }
.btn--lg { min-height: 3.5rem; padding: 1.05rem 2rem; font-size: var(--text-0); }

/* the clip is tight around the LABEL, not the button: the incoming copy sits
   one line-height down, which is still inside the pill, so clipping on the
   button would leave the duplicate visible at rest. */
.btn-t { position: relative; display: inline-block; overflow: hidden; }
.btn-t > span { display: block; transition: transform var(--dur-ui) var(--ease-out); }
/* The incoming copy is a real element carrying aria-hidden, not a ::after with
   attr() content: Chrome puts generated content in the accessibility tree, so
   the ::after version made every button announce its label twice. Always emit
   it with hw_btn_label() rather than by hand. */
.btn-t > .btn-t__dup { position: absolute; top: 100%; left: 0; width: 100%; }
.btn:hover .btn-t > span { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .btn-t > span { transition: none; }
  .btn:hover .btn-t > span { transform: none; }
}

/* The text-link recipe: a rule that wipes in from the left under the word. */
.link-wipe {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.link-wipe:hover { background-size: 100% 1px; }

/* ---- Nav: 72px sticky, visibly separated from the hero, one CTA, the phone
   as a pill on lead-gen sites. Never Sign Up / Log In / filler items. ------ */
.nav {
  position: sticky; top: var(--nav-offset); z-index: 50;
  height: var(--nav-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
.nav[data-stuck='true'] { box-shadow: var(--shadow-card); }
.nav__inner { display: flex; align-items: center; gap: var(--space-m); height: 100%; }
/* min-width: 0 is what lets the text fallback shrink instead of pushing the
   cart and the burger off the right edge at 390; a flex item will not go below
   its min-content width without it, and a long site name is min-content. */
.nav__brand { display: flex; align-items: center; min-width: 0; overflow: hidden; }
/* The logo is larger than a default WordPress custom-logo and is the light
   variant on a dark ground; both are set in Customize > House. */
.nav__brand img { width: auto; height: clamp(30px, 3.2vw, 40px); }
.nav__brand-text { display: block; font-family: var(--font-heading); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--track-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__menu { display: none; align-items: center; gap: var(--space-m); margin-left: auto; list-style: none; padding: 0; }
.nav__actions { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; flex: 0 0 auto; }
.nav__menu + .nav__actions { margin-left: var(--space-m); }

/* The nav register: the one type treatment every top-level item and mega-menu
   trigger shares, so the bar reads as chrome and not as body copy competing
   with the headline. Restyle it once and the whole bar follows. */
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  padding-block: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-n2); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--dur-ui) var(--ease-out);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent-9);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current='page'], .nav-link[aria-expanded='true'], .current-menu-item > .nav-link {
  color: var(--color-accent-11);
}
.nav-link:hover::after, .nav-link[aria-current='page']::after, .nav-link[aria-expanded='true']::after, .current-menu-item > .nav-link::after {
  transform: scaleX(1);
}
.nav-link__caret { width: 0.7em; height: 0.7em; transition: transform var(--dur-ui) var(--ease-out); }
.nav-link[aria-expanded='true'] .nav-link__caret { transform: rotate(180deg); }

.nav__pill {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--text-n1); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.nav__pill:hover { border-color: var(--color-text); background: var(--color-surface); }

.nav__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); transition: background-color var(--dur-ui) var(--ease-out); }
.nav__cart:hover { background: var(--color-surface); }
.nav__cart-count {
  position: absolute; top: 0.25rem; right: 0.15rem;
  min-width: 1.15rem; height: 1.15rem; padding-inline: 0.25rem;
  display: grid; place-items: center;
  background: var(--color-accent-9); color: var(--color-on-accent);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.65rem; font-variant-numeric: tabular-nums;
}
.nav__cart-count[data-count='0'] { display: none; }

.nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: background-color var(--dur-ui) var(--ease-out); }
.nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--dur-ui) var(--ease-out); }
.nav__burger span::before { top: -7px; }
.nav__burger span::after { top: 7px; }
.nav__burger[aria-expanded='true'] span { background: transparent; }
.nav__burger[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mega menu: full width over the page ground, columns of rows plus a
   feature block whose photo cross-fades per hovered row. Columns do not
   stagger; the panel stays open on hover. ---------------------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.mega[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: 1fr 1fr 22rem; gap: var(--space-xl); padding-block: var(--space-l) var(--space-xl); }
.mega__col { list-style: none; padding: 0; margin: 0; }
.mega__row { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--color-line); }
.mega__row-link { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); color: var(--color-text); transition: color var(--dur-ui) var(--ease-out), padding-left var(--dur-ui) var(--ease-out); }
.mega__row-link:hover { color: var(--color-accent-11); padding-left: 0.4rem; }
.mega__row-title { font-family: var(--font-heading); font-size: var(--text-1); font-weight: 600; }
.mega__row-desc { display: block; font-size: var(--text-n1); color: var(--color-text-muted); margin-top: 0.15rem; }
.mega__feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); min-height: 15rem; }
.mega__feature-img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
.mega__feature-img[data-active='true'] { opacity: 1; }
.mega__feature-img img { width: 100%; height: 100%; object-fit: cover; }
.mega__feature-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-m); color: oklch(0.99 0 0); background: linear-gradient(to top, oklch(0 0 0 / 0.75), transparent); font-family: var(--font-heading); font-weight: 600; }

/* ---- Mobile menu: opens from the TOP as a full-viewport sheet, body scroll
   locked, nested sub-menus folded shut, the logo aligned with the nav logo so
   it reads as one header. Never a three-quarter-width panel. ---------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  transform: translateY(-100%);
  transition: transform var(--dur-ui) var(--ease-in-out);
  overscroll-behavior: contain;
}
.mobile-menu[data-open='true'] { transform: none; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex: 0 0 auto; border-bottom: 1px solid var(--color-line); }
.mobile-menu__body { flex: 1 1 auto; overflow-y: auto; padding-block: var(--space-m) var(--space-2xl); }
.mobile-menu__list { list-style: none; padding: 0; margin: 0; }
.mobile-menu__item { border-bottom: 1px solid var(--color-line); }
.mobile-menu__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); width: 100%; padding: var(--space-s) 0; font-family: var(--font-heading); font-size: var(--text-2); font-weight: 600; text-align: left; }
.mobile-menu__toggle svg { width: 1rem; height: 1rem; transition: transform var(--dur-ui) var(--ease-out); }
.mobile-menu__item[data-open='true'] > .mobile-menu__link .mobile-menu__toggle svg { transform: rotate(45deg); }
.mobile-menu__sub { list-style: none; margin: 0; padding: 0 0 var(--space-s) var(--space-s); display: none; }
.mobile-menu__item[data-open='true'] > .mobile-menu__sub { display: block; }
.mobile-menu__sub a { display: block; padding: 0.55rem 0; color: var(--color-text-muted); font-size: var(--text-0); }
.mobile-menu__sub a:hover { color: var(--color-accent-11); }
.mobile-menu__foot { flex: 0 0 auto; padding-block: var(--space-m); border-top: 1px solid var(--color-line); display: grid; gap: var(--space-2xs); }
body[data-menu-open='true'] { overflow: hidden; }

/* ---- Hero: fills the fold on both breakpoints, one real photograph or one
   autoplaying loop, a bottom-up black gradient so the text reads while the
   picture still shows, headline + subline + CTA + one stat row. No address,
   no hours, no label lines, no slider. ------------------------------------- */
.hero { position: relative; min-height: calc(100svh - var(--nav-h) - var(--nav-offset)); display: grid; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0 0 0 / 0.82) 0%, oklch(0 0 0 / 0.5) 38%, oklch(0 0 0 / 0.18) 70%, oklch(0 0 0 / 0.05) 100%); }
.hero__inner { display: grid; grid-template-rows: 1fr auto; gap: var(--space-l); padding-block: var(--space-xl) var(--space-l); color: oklch(0.99 0 0); }
.hero__copy { align-self: end; max-width: 46rem; display: grid; gap: var(--space-m); }
.hero__title { font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; }
.hero__sub { font-size: var(--text-1); max-width: 34rem; color: oklch(0.99 0 0 / 0.88); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
/* the stat row is the hero grid's LAST ROW, not a section under it */
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); padding-top: var(--space-m); border-top: 1px solid oklch(1 0 0 / 0.22); }
.hero__stat-n { display: block; font-family: var(--font-mono); font-size: var(--text-3); font-variant-numeric: tabular-nums; }
.hero__stat-l { display: block; font-size: var(--text-n1); color: oklch(0.99 0 0 / 0.72); }

/* ---- Page hero: opens every inner page, its own image per page. ---------- */
.page-hero { position: relative; padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-line); }
.page-hero--media { color: oklch(0.99 0 0); border-bottom: 0; padding-block: var(--space-3xl); }
.page-hero--media .page-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-hero--media .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--media .page-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0 0 0 / 0.78), oklch(0 0 0 / 0.3)); }
.page-hero__title { font-size: var(--text-6); letter-spacing: var(--track-display); }
.page-hero__lede { margin-top: var(--space-s); max-width: 44rem; font-size: var(--text-1); opacity: 0.85; }
.breadcrumbs { font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: var(--space-s); }
.breadcrumbs a:hover { color: var(--color-accent-11); }

/* ---- Hairline index: the answer to a grid of tinted cards. One row per
   thing, a photograph per row, the plate trailing the cursor on desktop. ---- */
.hairline { border-top: 1px solid var(--color-line); position: relative; }
.hairline__row { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-m); padding-block: var(--space-m); border-bottom: 1px solid var(--color-line); transition: padding-left var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.hairline__row:hover { padding-left: 0.75rem; color: var(--color-accent-11); }
.hairline__i { font-family: var(--font-mono); font-size: var(--text-n1); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hairline__title { font-size: var(--text-3); }
.hairline__meta { font-size: var(--text-n1); color: var(--color-text-muted); margin-top: 0.2rem; max-width: 46ch; }
.hairline__arrow { transition: transform var(--dur-ui) var(--ease-out); }
.hairline__row:hover .hairline__arrow { transform: translateX(0.35rem); }
.hairline__thumb { display: none; }
@media (min-width: 64rem) {
  .hairline__plate { position: fixed; z-index: 5; width: 20rem; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card-hover); }
  .hairline__plate[data-visible='true'] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Ticker: one sliding marquee per page, house element. --------------- */
.ticker { overflow: hidden; border-block: 1px solid var(--color-line); padding-block: var(--space-s); }
.ticker__track { display: flex; width: max-content; gap: var(--space-l); animation: ticker-slide var(--ticker-dur, 38s) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: var(--space-s); font-family: var(--font-heading); font-size: var(--text-2); font-weight: 600; letter-spacing: var(--track-tight); white-space: nowrap; }
.ticker__item svg { width: 0.85em; height: 0.85em; color: var(--color-accent-9); flex: 0 0 auto; }
@keyframes ticker-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---- Photo gallery: 6-12 uncropped plates down columns. ----------------- */
.photo-gallery { columns: 1; column-gap: var(--space-m); }
@media (min-width: 40rem) { .photo-gallery { columns: 2; } }
@media (min-width: 64rem) { .photo-gallery { columns: 3; } }
.photo-gallery__item { break-inside: avoid; margin-bottom: var(--space-m); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.photo-gallery__item img { transition: transform var(--dur-reveal) var(--ease-out); }
.photo-gallery__item:hover img { transform: scale(1.02); }

/* ---- Closing CTA: a designed block that blends into the footer, never text
   plus a button. ----------------------------------------------------------- */
.cta-block { position: relative; background: var(--color-neutral-2); border-top: 1px solid var(--color-line); padding-block: var(--space-3xl); }
html[data-ground='dark'] .cta-block { background: var(--color-neutral-2); }
.cta-block__inner { display: grid; gap: var(--space-l); align-items: end; }
@media (min-width: 56rem) { .cta-block__inner { grid-template-columns: 1fr auto; } }
.cta-block__title { font-size: var(--text-5); letter-spacing: var(--track-display); max-width: 20ch; }

/* ---- Footer: the logo light variant matching the nav, socials as an icon row
   under the logo and blurb, contact in the last column, one centred bottom
   bar. No address lines, no tagline lines, no placeholder links. ----------- */
.site-footer { background: var(--color-neutral-2); border-top: 1px solid var(--color-line); padding-top: var(--space-2xl); }
.site-footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.site-footer__brand img { width: auto; height: clamp(30px, 3.2vw, 40px); }
.site-footer__blurb { margin-top: var(--space-s); max-width: 34ch; color: var(--color-text-muted); font-size: var(--text-n1); }
.site-footer__socials { display: flex; gap: var(--space-2xs); margin-top: var(--space-m); }
.site-footer__socials a { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.site-footer__socials a:hover { border-color: var(--color-accent-9); color: var(--color-accent-11); }
.site-footer__socials svg { width: 1.05rem; height: 1.05rem; }
.site-footer__h { font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-s); }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--text-n1); }
.site-footer__list a:hover { color: var(--color-accent-11); }
.site-footer__bar { margin-top: var(--space-2xl); padding-block: var(--space-m); border-top: 1px solid var(--color-line); text-align: center; font-size: var(--text-n1); color: var(--color-text-muted); }

/* ---- Reveal: sections arrive once on scroll, on the reveal ladder. The
   no-js and reduced-motion paths BOTH land at the visible state, because
   content sitting at opacity 0 is a shipped bug. -------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-reveal][data-shown='true'] { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---- Notices (Woo messages reuse these; see woocommerce.css) ------------ */
.notice-house { display: flex; gap: var(--space-s); align-items: flex-start; padding: var(--space-s) var(--space-m); border-left: 2px solid var(--color-accent-9); background: var(--color-bg-raised); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-n1); }

/* ---- Desktop breakpoint switches ---------------------------------------- */
@media (min-width: 64rem) {
  .nav__menu { display: flex; }
  .nav__burger { display: none; }
  .nav__pill { display: inline-flex; }
  .hairline__row { grid-template-columns: auto 1fr 1fr auto; }
}
@media (max-width: 63.99rem) {
  .mega { display: none; }
  /* Below the desktop breakpoint the bar is logo + cart + burger and nothing
     else. The CTA and the phone are in the sheet's footer, where they are
     full-width buttons instead of three things fighting for 390px. Without
     this the CTA overflows the right edge and is silently hidden by the
     overflow-x: clip in base.css, which is the worst kind of layout bug:
     invisible on the machine it was built on. */
  .nav__actions > .btn { display: none; }
  /* Mobile hero is its own arrangement, not a shrink: the picture reads first,
     the stats tuck into the corners, headline and CTA stay in the first fold. */
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
  /* No mobile font-size override on the H1. --text-display's 3.5rem floor is
     computed so that H1:H2 holds at >= 1.5 at 390 as well as 1440; an override
     here quietly undercuts it (10vw at 390 is 39px, clamped to 46px, under a
     34px section H2 - a ratio of 1.38 and an inverted hierarchy). Raise the
     floor in tokens.css per site instead. */
  .mega__inner { grid-template-columns: 1fr; }
}

/* The house highlight: the key words of a heading take the accent. On a site
   whose logo is a gradient, swap the colour for the gradient here and it
   applies to every heading on every page at once. */
.hl { color: var(--color-accent-11); }
.hero .hl, .page-hero--media .hl { color: var(--color-accent-9); }