/* arborprotree.com — one stylesheet, mobile first.
   Every distance is a custom property; nothing is positioned by hand. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* colour: the logo green anchors it; gold is the cottonwood in the hero and the one action colour */
  --green: #009859;
  --green-deep: #0a5f3c;
  --gold: #d9a521;
  --gold-deep: #b8870f;
  --bark: #2b241e;
  --bark-soft: #5a5048;
  --paper: #f7f7f3;
  --white: #ffffff;
  --sawdust: #e3ded3;
  --sky: #2a6b9b;

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 1.0625rem;              /* 17 px on phones */
  --lh-body: 1.6;
  --fs-h1: clamp(2.1rem, 7.5vw, 4.5rem);
  --fs-h2: clamp(1.6rem, 4.2vw, 2.4rem);
  --fs-h3: 1.3rem;
  --fs-small: 0.9rem;
  --measure: 66ch;

  /* space: a 1.5× scale from 0.25rem */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.25rem;
  --s-7: 3.5rem;
  --s-8: 5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 72rem;
  --radius: 6px;
  --tap: 48px;                       /* minimum tap target */

  /* the logo: one width drives both pieces so the sweep lands under ARBOR exactly as in the artwork.
     Artwork box is 265.17 × 58.01; the mark+sweep piece is 90 × 41 at x=0, the wordmark 229 × 38 at x=35 y=6 */
  --logo-w: min(100vw - 2 * var(--gutter), 24rem);
  --logo-unit: calc(var(--logo-w) / 265.17);
  --logo-h: 44;                       /* ink height of the no-address logo in logo units: mark y 0–41, wordmark y 6–44
                                         (the artwork's 58.01 box kept room for the address line, which this logo no longer has) */
  --header-pad: var(--s-3);
  --retract: 0;                       /* 0 = sweep extended (top of page), 1 = retracted into the mark; set by loader.js */
  --mark-compact: 1;                  /* scale of the mark once compact; phones keep it full size */
}

@media (min-width: 900px) {
  :root { --fs-base: 1.125rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--bark);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
img, picture, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 var(--s-4); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0 0 var(--s-4); }
a { color: var(--sky); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: var(--s-4); top: -4rem; background: var(--bark); color: var(--white); padding: var(--s-2) var(--s-4); border-radius: var(--radius); z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap); }
.skip:focus { top: var(--s-4); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: var(--s-7); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: var(--s-2); }
.lede { font-size: 1.2em; color: var(--bark-soft); }
.crumb { font-size: var(--fs-small); margin-bottom: var(--s-2); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
/* links inside running text get a little vertical padding so the tap box clears 24 px without changing the layout */
.prose a, .book__fallback a, .contact__block p a { padding-block: 0.18em; }
.byline { color: var(--bark-soft); font-size: var(--fs-small); }
.page__figure { margin-block: var(--s-5); border-radius: var(--radius); overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0.7em 1.4em;
  font-weight: 650; font-size: 1.02em; line-height: 1.2;
  border-radius: var(--radius); border: 2px solid transparent; text-decoration: none;
}
.btn { gap: 0.55em; }
.btn__icon { fill: currentColor; flex: none; }
.btn--gold { background: var(--gold); color: var(--bark); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--bark); }
.btn--green { background: var(--green); color: var(--white); border-color: var(--green); }
.btn--green:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.85); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn--ghost-dark { color: var(--bark); border-color: var(--bark); }
.btn--ghost-dark:hover { background: var(--white); color: var(--bark); }

/* ---------- header: the logo is the header; the mark stays and becomes the menu (W-014) ---------- */
.top { position: relative; height: calc(var(--logo-h) * var(--logo-unit) + 2 * var(--header-pad)); background: var(--paper); }
.wordmark { position: absolute; top: calc(var(--header-pad) + 6 * var(--logo-unit)); left: calc(var(--gutter) + 35 * var(--logo-unit)); width: calc(229 * var(--logo-unit)); color: var(--green); display: block; }
.wordmark svg { width: 100%; height: auto; fill: currentColor; display: block; }
.menu { position: fixed; top: var(--header-pad); left: var(--gutter); z-index: 70; color: var(--green); }
.menu__button { list-style: none; cursor: pointer; display: block; width: calc(90 * var(--logo-unit)); min-width: var(--tap); min-height: var(--tap);
  transform-origin: top left; transform: scale(calc(1 - (1 - var(--mark-compact)) * var(--retract))); }
.menu__button::-webkit-details-marker { display: none; }
/* once compact the mark sits over whatever scrolled under it, so it gets a paper backing that fades in with the retract */
.menu__button { position: relative; z-index: 2; }
/* the compact mark is the canopy (x 0–32) + trunk with its left root at x≈0 and the clipped right stub at x≈33: visual centre x = 16.5 units.
   The backing is centred on that point, not on the 90-unit piece, so the tree sits in the middle of the button. */
.menu__button { --backing-w: calc(36 * var(--logo-unit) + 2 * var(--s-2)); }
.menu__button::before { content: ""; position: absolute; top: calc(-1 * var(--s-2)); bottom: calc(-1 * var(--s-2)); left: calc(16.5 * var(--logo-unit) - var(--backing-w) / 2); width: var(--backing-w); border-radius: var(--radius); background: var(--paper); border: 1px solid var(--sawdust); opacity: var(--retract); z-index: -1; }
.menu__button svg { width: 100%; height: auto; fill: currentColor; display: block; overflow: visible; }
.menu__button .sweep { clip-path: inset(0 calc(var(--retract) * 78.6%) 0 0); }   /* 78.6% = everything right of x≈33 in the 90-wide piece */
.menu__button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.menu__panel { position: fixed; inset: 0; background: var(--white);   /* no border: a 1px border-top moved the items 1px and opened a gap at the root */
  padding: var(--s-5) var(--gutter) var(--s-7); display: grid; align-content: start; gap: var(--s-2); overflow-y: auto; }
.menu__act { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; padding: 0 var(--s-4); border-radius: var(--radius); text-decoration: none; font-weight: 650; font-size: 1.1rem; }
.menu__act svg { fill: currentColor; flex: none; }
.menu__act--call { background: var(--green); color: var(--white); }
.menu__act--book { background: var(--gold); color: var(--bark); }
.menu__link { display: flex; align-items: center; min-height: var(--tap); color: var(--bark); text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.menu__link[aria-current="page"] { color: var(--green-deep); }
.menu__link:hover { color: var(--green-deep); }
/* ----- open state (W-015, clarified 12:18): back to the full logo; the trunk's left foot and the canopy's
   top-left corner retract; a spine grows down the left margin from the canopy and curved branches grow
   right into each page link as its bullet. Call/Book sit to the right of the spine. ----- */
.menu[open] .menu__button { transform: none; }                        /* full size so the wordmark lines up */
.menu[open] .menu__button::before { opacity: 0; }
.menu[open] .menu__button .sweep { clip-path: inset(0 0 0 0); }       /* right root back under ARBOR */
.menu__button .root-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 91%); }
.menu[open] .menu__button .root-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%, 34% 91%, 0 91%); }
.menu__panel { top: 0; padding-top: calc(var(--header-pad) + var(--logo-h) * var(--logo-unit) + var(--s-5)); }
.menu__wordmark { position: absolute; top: calc(var(--header-pad) + 6 * var(--logo-unit)); left: calc(var(--gutter) + 35 * var(--logo-unit)); width: calc(229 * var(--logo-unit)); color: var(--green); display: block; }
.menu__wordmark svg { width: 100%; height: auto; fill: currentColor; display: block; }

.menu__items { --row: 3.75rem; --stroke: calc(1.82 * var(--logo-unit)); --spine-x: calc(1.62 * var(--logo-unit)); --branch-w: 2.4rem; --corner-r: calc(4.2 * var(--logo-unit));
  position: relative; display: grid; gap: 0; align-content: start; margin-top: 0; }
.menu__act { margin-left: calc(var(--spine-x) + var(--branch-w)); margin-bottom: var(--s-2); }
.menu__act:first-child { margin-top: var(--s-2); }
.menu__act + .menu__link { margin-top: var(--s-3); }
.menu__link { position: relative; height: var(--row); padding: 0 var(--s-3) 0 calc(var(--spine-x) + var(--branch-w) + var(--s-3)); border-bottom: 0; }
.menu__link::after { content: ""; position: absolute; left: calc(var(--spine-x) + var(--branch-w)); right: 0; bottom: 0; border-bottom: 1px solid var(--sawdust); }
/* the spine: out of the bottom of the left-running leg (its foot ends at x 1.68, y 40.71 in logo units) down to the last link's centre */
.menu__items::before { content: ""; position: absolute; left: var(--spine-x); width: var(--stroke); border-radius: 999px; background: var(--green);
  top: calc(-1 * (var(--s-5) + (var(--logo-h) - 47.0) * var(--logo-unit))); bottom: calc(var(--row) / 2); transform-origin: top; transform: scaleY(0); }
/* the corner is a path inside the mark's own SVG (class .corner) so it shares the artwork's pixel grid exactly;
   it is invisible until the menu opens. The spine starts where its vertical arm ends (y 47.5 units). */
.menu__button .corner { opacity: 0; }
.menu[open] .menu__button .corner { opacity: 1; }
.menu[open] .menu__items::before { transform: scaleY(1); }
/* a branch: leaves the spine above the row, curves, and runs right to the text at the row's centre.
   Drawn with two borders and one rounded corner; the vertical part overlaps the spine. */
.menu__link::before { content: ""; position: absolute; left: var(--spine-x); top: calc(-0.5 * var(--row)); bottom: 50%; width: var(--branch-w);
  border-left: var(--stroke) solid var(--green); border-bottom: var(--stroke) solid var(--green); border-bottom-left-radius: calc(0.5 * var(--row));
  clip-path: inset(0 100% 0 0); }
.menu[open] .menu__link::before { clip-path: inset(0 0 0 0); }
.menu__link:nth-of-type(1)::before { transition-delay: 260ms; } .menu__link:nth-of-type(2)::before { transition-delay: 340ms; }
.menu__link:nth-of-type(3)::before { transition-delay: 420ms; } .menu__link:nth-of-type(4)::before { transition-delay: 500ms; }
.menu__link:nth-of-type(5)::before { transition-delay: 580ms; } .menu__link:nth-of-type(6)::before { transition-delay: 660ms; }
@media (prefers-reduced-motion: no-preference) {
  .menu__button, .menu__button .sweep, .menu__button .root-left, .menu__button .limbs-tl, .menu__button::before { transition: transform 160ms ease-out, clip-path 200ms ease-out, opacity 160ms ease-out; }
  .menu__items::before { transition: transform 260ms ease-out 120ms; }
  .menu__button .corner { transition: opacity 120ms ease-out; }
  .menu__link::before { transition: clip-path 220ms ease-out; }
}
/* ---------- inner pages ---------- */
.svc-list, .post-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); margin-bottom: var(--s-6); }
.tile--post .byline { margin: 0 0 var(--s-2); }
.contact__grid { display: grid; gap: var(--s-5); margin-block: var(--s-5) var(--s-6); }
.contact__block h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.contact__block address { font-style: normal; }
.contact__big { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; text-decoration: none; color: var(--green-deep); display: inline-flex; align-items: center; min-height: var(--tap); }
.contact__block p > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap); }
.book { margin-top: var(--s-5); padding: var(--s-5); background: var(--white); border: 1px solid var(--sawdust); border-radius: var(--radius); }
.book__fallback { max-width: var(--measure); }
.draft { display: inline-block; background: var(--gold); color: var(--bark); font-weight: 650; font-size: 1rem; padding: var(--s-1) var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-4); }
.page .hero__actions { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .svc-list, .post-list { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- firewood: prices and the ZIP check (W-016) ---------- */
.fw-prices { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5) var(--s-3); }
.fw-price { flex: 1 1 9rem; background: var(--white); border: 1px solid var(--sawdust); border-radius: var(--radius); padding: var(--s-4); color: var(--bark-soft); }
.fw-price strong { display: block; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; color: var(--green-deep); }
.fw-terms { color: var(--bark-soft); margin-top: 0; }
.zipcheck { margin-block: var(--s-6); padding: var(--s-5); background: var(--white); border: 1px solid var(--sawdust); border-radius: var(--radius); }
.zipcheck h2 { margin-top: 0; }
.zipcheck__form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.zipcheck__field { flex: 1 1 9rem; display: flex; flex-direction: column; gap: var(--s-1); }
.zipcheck__field label { font-weight: 650; }
.zipcheck__form input { width: 100%; font: inherit; font-size: 1.25rem; letter-spacing: 0.06em; min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 2px solid var(--bark-soft); border-radius: var(--radius); background: var(--paper); color: var(--bark); }
.zipcheck__form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--green-deep); }
.zipcheck__form .btn { flex: 0 0 auto; }
.zipcheck__result { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--radius); background: var(--paper); border-left: 4px solid var(--green); }
.zipcheck__result[hidden] { display: none; }
.zipcheck__result--no { border-left-color: var(--gold); }
.zipcheck__result strong { display: block; font-size: 1.15em; margin-bottom: var(--s-1); }
.zipcheck__noscript { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--radius); background: var(--paper); border-left: 4px solid var(--gold); }

/* ---------- service area (W-017): heading, then the map, then the list; side by side on wide screens ---------- */
.area { display: grid; gap: var(--s-5); align-items: start; grid-template-areas: "intro" "map" "list"; }
.area__intro { grid-area: intro; }
.area__map { grid-area: map; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sawdust); background: var(--paper); }
.area__map img { display: block; width: 100%; height: auto; }
.area__list { grid-area: list; }
.area__cities { columns: 2; column-gap: var(--s-5); padding-left: 1.1em; margin: 0 0 var(--s-4); }
.area__cities li { break-inside: avoid; margin-bottom: var(--s-1); }
.area__more { color: var(--bark-soft); }
.area__list p a { padding-block: 0.18em; }
@media (min-width: 900px) {
  .area { grid-template-columns: 2fr 3fr; grid-template-areas: "intro map" "list map"; gap: var(--s-4) var(--s-6); }
  .area__cities { columns: 2; }
}

/* the small mark beside front-page links (W-015) */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark-sm { width: 0.95em; height: calc(0.95em * 41 / 33); fill: var(--green); vertical-align: -0.2em; margin-right: 0.45em; flex: none; }
.tile h3 .mark-sm { width: 0.85em; height: calc(0.85em * 41 / 33); }
.marklink { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- hero: the photo is the page, the climber in the bucket is the point (W-019) ----------
   Phones: the picture (or the portrait loop) sits ABOVE the words — nothing covers the climber.
   Wide screens: the words sit in the bottom-left over the picture, held to the left 44 % of the width,
   which keeps them clear of the bucket (it is at ~47 % from the left, ~65 % down in this frame). */
.hero { display: grid; grid-template-rows: auto auto; isolation: isolate; background: var(--bark); color: var(--white); }
.hero__picture, .hero__video { grid-area: 1 / 1; width: 100%; height: 58vh; min-height: 18rem; max-height: 34rem; }
.hero__picture img, .hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* the loop sits over the still and fades in once it is really playing (W-018); reduced motion never sees it */
.hero__video { opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__text { grid-area: 2 / 1; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: var(--s-5) var(--s-7); }
.hero__text h1 { max-width: 14ch; margin-bottom: var(--s-4); text-wrap: balance; }
.hero__text p { max-width: 48ch; font-size: 1.1em; margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__actions .btn { flex: 1 1 14rem; }

/* ---------- sections ---------- */
.services-intro { padding-bottom: 0; }
.tiles { display: grid; gap: var(--s-5); padding-top: var(--s-4); }
.tile { display: block; color: inherit; text-decoration: none; }
.tile picture { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s-2); }
.tile img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.tile h3 { margin-bottom: var(--s-2); color: var(--green-deep); }
.tile p { margin: 0; color: var(--bark-soft); }
.tile:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; }
.tiles__more { grid-column: 1 / -1; margin: calc(-1 * var(--s-3)) 0 0; font-weight: 600; }
/* standalone links (a paragraph that is only a link) get a full tap height; links inside running text do not */
.tiles__more a, .split p a, .foot__legal a { display: inline-flex; align-items: center; min-height: var(--tap); }

.split { display: grid; gap: var(--s-3); align-items: center; }
.split picture { border-radius: var(--radius); overflow: hidden; }
.split h2 { margin-top: var(--s-2); }

.contact-strip { background: var(--green); color: var(--white); padding-block: var(--s-7); }
.contact-strip__inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.contact-strip h2, .contact-strip p { max-width: 48ch; }
.contact-strip .btn--ghost-dark { color: var(--white); border-color: rgba(255, 255, 255, 0.85); }
.contact-strip .btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.contact-strip .btn--green { background: var(--white); color: var(--green-deep); border-color: var(--white); }

/* ---------- footer ---------- */
.foot { background: var(--white); border-top: 1px solid var(--sawdust); padding-block: var(--s-7) var(--s-6); }
.foot__grid { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; gap: var(--s-6); }
.foot__brand img { width: min(100%, 18rem); margin-bottom: var(--s-4); }
.foot__brand p { color: var(--bark-soft); max-width: 36ch; margin: 0; }
.foot__contact { font-style: normal; display: grid; gap: var(--s-3); align-content: start; }
.foot__contact a { color: var(--bark); min-height: var(--tap); display: inline-flex; align-items: center; }
.foot__hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); align-content: start; }
.foot__hours dt { font-weight: 600; white-space: nowrap; }
.foot__hours dd { margin: 0; white-space: nowrap; }
.foot__legal { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: var(--s-6) auto 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--fs-small); color: var(--bark-soft); }
.foot__legal a { color: inherit; }

/* ---------- ≥ 900 px ---------- */
@media (min-width: 900px) {
  :root { --logo-w: 34rem; --mark-compact: 0.62; }
  .hero { position: relative; min-height: min(82vh, 46rem); grid-template-rows: 1fr; }
  .hero__picture, .hero__video { position: absolute; inset: 0; height: 100%; min-height: 0; max-height: none; z-index: -2; }
  .hero__picture img { position: absolute; inset: 0; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(26, 22, 18, 0.88) 0%, rgba(26, 22, 18, 0.55) 38%, rgba(26, 22, 18, 0) 70%); }
  /* the words start at the page gutter, not the centred column, and stop well short of the bucket
     (~47 % from the left); the headline also scales with the viewport so "neighborhood" never spills past that */
  .hero__text { grid-area: 1 / 1; align-self: end; width: 100%; margin-inline: 0; padding: var(--s-8) var(--gutter); }
  .hero__text h1 { max-width: min(40vw, 34rem); font-size: min(var(--fs-h1), 5.4vw); }
  .hero__text p { max-width: min(36vw, 30rem); }
  .hero__actions { max-width: min(42vw, 34rem); }
  .hero__actions .btn { flex: 0 1 auto; min-width: 14rem; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .split--reverse picture { order: 2; }
  .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

html.menu-open { overflow: hidden; }