/* ===========================================================================
   A To Tree Services Ltd - Auckland arborists
   ---------------------------------------------------------------------------
   Hand-written for this site (2026-09-15). The brief (Capsule note 488535097)
   was a redesign that does NOT look machine-made, after the client was sent an
   AI-generated mock-up by a cold caller. So: the client's own photographs do
   the work, the type is a characterful grotesk rather than the usual pairing,
   there are no eyebrow labels, no icon rows and no gradient washes, and the one
   decorative device is the orange leaf from their 2026 logo.

   Palette from the logo artwork (A To Tree Logo.svg, 2026):
     logo green   #55a800   logo charcoal #494641   logo orange #f08143
   Contrast measured 2026-09-15 - which colour may sit on which is noted beside
   each token. Every colour is a custom property, so re-theming is one block.
   =========================================================================== */

:root {
  --paper:     #ffffff;
  --stone:     #f4f1ea;   /* warm light band. NOT behind the logo artwork - that stays on pure white */
  --stone-2:   #ebe6db;
  --line:      #ded8cc;
  --ink:       #1d1c19;   /* body text: 16.9:1 on white, 15.3:1 on stone */
  --char:      #494641;   /* logo charcoal: secondary headings, 9.6:1 on white */
  --muted:     #5c5850;   /* secondary text: 7.1:1 on white, 6.4:1 on stone */
  --leaf:      #55a800;   /* logo green. A FILL with --ink on it (6.1:1). Never white text on it (2.9:1) */
  --leaf-dk:   #3e7c00;   /* hover fill; white on it 5.0:1 */
  --leaf-tx:   #3a7300;   /* green TEXT on white or stone (5.6:1 / 5.1:1) */
  --leaf-lt:   #a6e163;   /* green text on the dark sections (11.9:1 on --forest) */
  --forest:    #1f3310;   /* dark green band, white text 13.6:1 */
  --ember:     #f08143;   /* logo orange: leaf glyphs and rules only, or a fill with --ink on it */
  --ember-tx:  #a84a12;   /* orange text on white (5.4:1) */
  --shadow:    0 1px 2px rgba(29,28,25,.06), 0 8px 28px rgba(29,28,25,.08);

  --wrap:      1220px;
  --pad:       clamp(18px, 4vw, 40px);
  --sec-y:     clamp(60px, 7.5vw, 110px);
  --r:         8px;
  --hdr-h:     98px;   /* logo made bigger 2026-09-21 (Richard) - 74px tall in a 98px bar */

  /* Float bar (fleet component) - overridable from /dash via /api/config. Ink icons on the logo
     green (6.1:1); white-on-green would be 2.9:1, under the 3:1 a UI component needs. */
  --fb-bg:        var(--leaf);
  --fb-icon:      #1d1c19;
  --fb-hover-bg:  #1d1c19;
  --fb-hover-icon:#ffffff;

  /* The logo's leaf, used as the one decorative mark: list bullets, the hero kicker, the quote mark. */
  --leaf-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21C3 11 9 4 21 3c-1 12-8 18-18 18Zm2-2c3-5 7-9 12-12-5 2-9 6-12 12Z' fill='black'/></svg>");
}

/* --------------------------------------------------------------- fonts
   Self-hosted latin subsets: Bricolage Grotesque 700-800 (41 kB) for display,
   Source Sans 3 400-600 (29 kB) plus its italic for text. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-700-800-latin.woff2') format('woff2');
  font-weight: 700 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/sourcesans3-400-600-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/sourcesans3-italic-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 18px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px; line-height: 1.62;
  color: var(--ink); background: var(--paper);
  /* NOT overflow-x: hidden - that hides a real overflow rather than fixing it. qa.mjs measures it. */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf-tx); }
h1, h2, h3, h4, .h2 {
  font-family: 'Bricolage Grotesque', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 .5em; color: var(--ink); text-wrap: balance;
}
h3, h4 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }
:focus-visible { outline: 3px solid var(--leaf-dk); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 860px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: #fff; padding: 12px 18px; }
.skip:focus { left: 0; }

/* --------------------------------------------------------------- buttons
   🔴 Components must beat prose: `.prose a` is (0,1,1) and outranks `.btn` (0,1,0), which rendered
   every in-prose button invisible on prestigepainters. Body link rules are scoped :not(.btn). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px; max-width: 100%;
  background: var(--leaf); color: var(--ink); border: 2px solid var(--leaf); border-radius: var(--r);
  font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--leaf-dk); border-color: var(--leaf-dk); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--onphoto { border-color: rgba(255,255,255,.85); color: #fff; }
.btn--onphoto:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 16px; }
.btn--full { width: 100%; }
.tlink { color: var(--leaf-tx); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlink:hover { color: var(--ink); text-decoration-color: var(--leaf); }

/* --------------------------------------------------------------- header */
.hdr { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.hdr[data-stuck] { box-shadow: 0 6px 24px rgba(29,28,25,.07); }
.hdr__in { min-height: var(--hdr-h); display: flex; align-items: center; gap: 28px; }
.brand { flex: 0 0 auto; display: block; }
.brand__logo { height: 74px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav > a, .nav__btn {
  font: 600 16.5px/1 'Source Sans 3', sans-serif; color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 10px 0; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 2px solid transparent;
}
.nav > a:hover, .nav__btn:hover { color: var(--leaf-tx); }
.nav > a[aria-current="page"], .nav__drop[data-current] .nav__btn { border-bottom-color: var(--leaf); }
.nav__drop { position: relative; }
/* The ::before bridge closes the gap between the button and the panel, so a hover journey down
   into the menu does not cross dead space and close it (fleet hover dead-zone rule). */
.nav__drop::before { content: ''; position: absolute; left: -20px; right: -20px; top: 100%; height: 18px; }
.nav__panel {
  position: absolute; top: calc(100% + 12px); left: -18px; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--leaf);
  border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow); padding: 8px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s linear .25s;
}
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop[data-open] .nav__panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__panel a { padding: 9px 12px; border-radius: 5px; color: var(--ink); text-decoration: none; font-size: 16.5px; }
.nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--stone); color: var(--leaf-tx); }
.nav__panel .nav__all { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 5px 5px 0 0; margin-bottom: 4px; }

.hdr__cta { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.hdr__tel { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.1; }
.hdr__tel-l { font-size: 13.5px; color: var(--muted); }
.hdr__tel-n { font: 800 21px/1.15 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; }
.hdr__tel:hover .hdr__tel-n { color: var(--leaf-tx); }

.burger { display: none; width: 46px; height: 46px; background: none; border: 0; padding: 11px; cursor: pointer; }
.burger span { display: block; height: 2.5px; background: var(--ink); margin: 4.5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-m { display: none; border-top: 1px solid var(--line); padding: 8px var(--pad) 24px; background: #fff; max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; }
.nav-m a { display: block; padding: 11px 0; color: var(--ink); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--stone-2); }
.nav-m__label { margin: 18px 0 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.nav-m__cta { margin-top: 14px; text-align: center; border-radius: var(--r); border-bottom: 0 !important; font-weight: 600; background: var(--leaf); }
.nav-m__cta--alt { background: var(--ink); color: #fff !important; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr__cta { margin-left: auto; }
  .nav-m { display: block; }
  .cnc-js .nav-m { display: none; }
  .cnc-js .nav-m[data-open] { display: block; }
}
@media (max-width: 640px) {
  :root { --hdr-h: 76px; }
  .brand__logo { height: 50px; }
  .hdr__in { gap: 12px; }
  .hdr__cta { gap: 8px; }
  .hdr__tel-l { display: none; }
  .hdr__tel-n { font-size: 17px; }
  .hdr__quote { display: none; }
}
@media (max-width: 380px) { .hdr__tel { display: none; } }

/* --------------------------------------------------------------- shared bits */
.crumb { font-size: 15px; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--leaf-tx); text-decoration: underline; }
.crumb span { margin: 0 8px; color: var(--line); }
.kick { font-size: 16px; color: var(--char); margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kick::before { content: ''; width: 18px; height: 18px; background: var(--ember); -webkit-mask: var(--leaf-mask) center/contain no-repeat; mask: var(--leaf-mask) center/contain no-repeat; }
.kick span { color: var(--muted); opacity: .55; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lead { font-size: 20.5px; line-height: 1.55; color: var(--ink); }
.sub { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; color: var(--char); margin: -.2em 0 .8em; }
h1[data-len="short"] { font-size: clamp(42px, 6.6vw, 82px); }
h1[data-len="long"]  { font-size: clamp(36px, 5.2vw, 66px); }
h1[data-len="xlong"] { font-size: clamp(32px, 4.3vw, 56px); }

/* --------------------------------------------------------------- home hero */
.hero { background: var(--stone); padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.hero h1 { margin-bottom: .32em; }
.hero__lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; max-width: 34em; color: var(--char); }
/* A quiet line, not a badge: no approval percentage anywhere (Richard, 2026-09-15). */
.hero__reviews { margin: 26px 0 0; font-size: 16.5px; color: var(--muted); }
.hero__reviews a { color: var(--leaf-tx); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.hero__reviews a:hover { color: var(--ink); }
/* One photograph, squared off inside its column. There WAS a second, smaller photo sitting over
   the bottom-left corner of this one: it overlapped the main image, hung below and outside the
   container, and on a phone it collided with the float bar. Rob, 2026-09-16: "photos are a bit
   eerie, overlapping and not lined up properly". Nothing in the hero overlaps anything now. */
.hero__media { padding-left: clamp(0px, 4vw, 56px); }
.hero__main { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); max-height: 680px; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { padding-left: 0; }
  .hero__main { aspect-ratio: 5 / 4; }
}

/* --------------------------------------------------------------- page heroes */
.phero { background: var(--stone); padding: clamp(34px, 5vw, 70px) 0 clamp(44px, 6vw, 84px); }
.phero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.phero h1 { margin-bottom: .35em; }
.phero__sub { font-size: clamp(21px, 2vw, 26px); color: var(--char); font-weight: 700; letter-spacing: -.01em; margin-bottom: .7em; }
.phero__lede { font-size: clamp(19px, 1.6vw, 21.5px); line-height: 1.5; color: var(--char); max-width: 36em; }
.phero__media img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: var(--r); }
.phero--utility { text-align: left; padding: clamp(60px, 10vw, 140px) 0; }
@media (max-width: 900px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero__media img { aspect-ratio: 4 / 3; max-height: 440px; }
}

/* Area pages: the photo is the whole banner, copy over a darkened lower-left corner. */
.ahero { position: relative; background: var(--forest); color: #fff; min-height: clamp(460px, 64vh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.ahero__media { position: absolute; inset: 0; }
.ahero__media img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim only has to carry the copy, which sits in the bottom half. It used to wash the whole
   frame at 72% opacity, which made every area banner look grey and overcast. */
.ahero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,24,12,.9) 0%, rgba(20,24,12,.86) 40%,
    rgba(20,24,12,.74) 58%, rgba(20,24,12,.42) 76%, rgba(20,24,12,.12) 90%, rgba(20,24,12,0) 100%);
}
.ahero__in { position: relative; z-index: 2; padding-top: 120px; padding-bottom: clamp(40px, 6vw, 72px); }
.ahero h1, .ahero .crumb, .ahero .crumb a { color: #fff; }
.ahero .crumb span { color: rgba(255,255,255,.5); }
.ahero h1 { max-width: 15em; margin-bottom: .3em; }
.ahero__lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; max-width: 34em; color: rgba(255,255,255,.93); }
.ahero .btn:not(.btn--onphoto):hover { background: #fff; border-color: #fff; color: var(--ink); }

/* --------------------------------------------------------------- sections */
.sec { padding: var(--sec-y) 0; }
.sec--stone { background: var(--stone); }
.sec--ink { background: var(--ink); color: rgba(255,255,255,.86); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--leaf { background: var(--forest); color: rgba(255,255,255,.86); }
.sec--leaf h2 { color: #fff; }
.sec--leaf .head p { color: rgba(255,255,255,.8); }
.head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 50px); }
.head h2, .head .h2 { font-size: clamp(32px, 3.9vw, 52px); }
.head p { font-size: 19px; color: var(--muted); }
.head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; }
.head--row > div { max-width: 720px; }
.after { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* --------------------------------------------------------------- prose */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(28px, 2.8vw, 38px); margin-top: 1.5em; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(21px, 1.9vw, 25px); margin-top: 1.4em; margin-bottom: .4em; }
.prose h4 { font-size: 20px; }
.prose a:not(.btn):not(.tlink) { color: var(--leaf-tx); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:not(.btn):not(.tlink):hover { color: var(--ink); text-decoration-color: var(--leaf); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .38em; width: 17px; height: 17px; background: var(--leaf); -webkit-mask: var(--leaf-mask) center/contain no-repeat; mask: var(--leaf-mask) center/contain no-repeat; }
.prose ul.suburbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.2em; }
.prose ul.suburbs li { padding: 5px 12px; margin: 0; background: var(--stone); border-radius: 5px; font-size: 16px; }
.prose ul.suburbs li::before { content: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* Copy column + sticky quote card on service and area pages. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.quote { position: sticky; top: calc(var(--hdr-h) + 24px); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--leaf); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); font-size: 16.5px; }
.quote__h { font: 800 25px/1.1 'Bricolage Grotesque', sans-serif; margin-bottom: 10px; }
.quote p { color: var(--muted); }
.quote .btn { margin: 18px 0 16px; }
.quote__tel { display: block; text-decoration: none; color: var(--ink); font: 800 27px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; }
.quote__tel span { display: block; font: 400 14px/1.4 'Source Sans 3', sans-serif; color: var(--muted); }
.quote__tel:hover { color: var(--leaf-tx); }
.quote__hours { margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote__reviews { font-size: 15.5px; color: var(--leaf-tx); font-weight: 600; }
@media (max-width: 980px) {
  .cols { grid-template-columns: 1fr; }
  .quote { position: static; max-width: 520px; }
}
.hours { margin: 0; display: grid; gap: 4px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------- home: intro, call, crew */
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.trio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A plain grid: the top two photos share a top and a bottom edge, the third spans both columns.
   The second used to be pushed down 56px, which read as a mistake rather than as a device. */
.trio__item { margin: 0; }
.trio__item:nth-child(3) { grid-column: 1 / -1; }
.trio__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.trio__item:nth-child(3) img { aspect-ratio: 16 / 9; }
.trio__item figcaption h3 { font-size: 18px; margin: 10px 0 0; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

.call { background: var(--leaf); color: var(--ink); padding: clamp(44px, 5vw, 72px) 0; }
.call__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.call__h { font-size: clamp(30px, 3.6vw, 48px); margin: 0; }
.call__h a { color: var(--ink); text-decoration: none; white-space: nowrap; display: block; }
.call__h a:hover { text-decoration: underline; }
.call p { font-size: 18px; margin-bottom: 20px; }
@media (max-width: 860px) { .call__in { grid-template-columns: 1fr; } }

.crew { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.crew__media img { width: 100%; border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: s; display: grid; gap: 22px; }
.steps li { counter-increment: s; position: relative; padding-left: 64px; margin: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%; background: var(--stone); color: var(--leaf-tx); font: 800 22px/44px 'Bricolage Grotesque', sans-serif; text-align: center; }
.steps h3 { font-size: 21px; margin: 0 0 .25em; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 900px) { .crew { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- services */
.svcs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px 22px; }
.svc { display: block; color: var(--ink); text-decoration: none; }
.svc__img { display: block; overflow: hidden; border-radius: var(--r); background: var(--stone-2); }
.svc__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.svc:hover .svc__img img { transform: scale(1.04); }
.svc__body { display: block; padding-top: 14px; }
.svc__name { display: block; font: 700 21px/1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; margin-bottom: 6px; }
.svc:hover .svc__name { color: var(--leaf-tx); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.svc__p { display: block; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) { .svcs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .svcs { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } .svc__name { font-size: 18px; } .svc__p { font-size: 14.5px; } }

.links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
.links li { margin: 0; border-top: 1px solid var(--line); }
.links a { display: block; padding: 16px 0 18px; color: var(--ink); text-decoration: none; }
.links a span { display: block; font: 700 20px/1.2 'Bricolage Grotesque', sans-serif; margin-bottom: 4px; }
.links a small { display: block; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.links a:hover span { color: var(--leaf-tx); text-decoration: underline; text-underline-offset: 4px; }
.links--plain { grid-template-columns: 1fr; max-width: 420px; margin: 18px 0 24px; }
.links--plain a { font-size: 19px; font-weight: 600; padding: 12px 0; }
@media (max-width: 900px) { .links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .links { grid-template-columns: 1fr; } }

/* The /tree-services/ hub: one row per service. */
.rows { display: grid; gap: 0; }
.row { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.row__body h3 { font-size: clamp(24px, 2.4vw, 32px); }
.row__body p { max-width: 62ch; }
.row__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- reviews */
.revs { columns: 3 320px; column-gap: 22px; }
.rev { break-inside: avoid; margin: 0 0 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 22px; }
.sec:not(.sec--stone) .rev { background: var(--stone); border-color: transparent; }
.rev blockquote { margin: 0; position: relative; }
.rev blockquote::before { content: ''; display: block; width: 22px; height: 22px; margin-bottom: 12px; background: var(--ember); -webkit-mask: var(--leaf-mask) center/contain no-repeat; mask: var(--leaf-mask) center/contain no-repeat; }
.rev p { font-size: 17px; line-height: 1.58; margin-bottom: .7em; }
.rev--big p { font-size: 20px; line-height: 1.5; }
.rev figcaption { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rev__name { font-weight: 600; }
.rev__src { color: var(--muted); font-size: 15px; }
.rev__more { color: var(--leaf-tx); font-weight: 600; white-space: nowrap; }
.revs--all { columns: 3 300px; }
.revs--all .rev p { font-size: 16.5px; }

/* --------------------------------------------------------------- areas (dark green band) */
.areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows: auto; gap: 0 30px; }
@media (min-width: 1100px) {
  .areas { grid-template-columns: repeat(5, 1fr); }
  .areas:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .areas:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Subgrid so the suburb lists start on the same line whether the area name wraps or not
   ("Arborist Central Auckland" takes two lines, the rest take one). */
.area { margin: 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; row-gap: 0; }
@supports not (grid-template-rows: subgrid) { .area { display: block; } .area__name { min-height: 2.4em; } }
.area__name { display: block; font: 700 22px/1.2 'Bricolage Grotesque', sans-serif; color: var(--leaf-lt); text-decoration: none; }
.area__name:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.area p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------- FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 48px 20px 0;
  font: 700 clamp(19px, 1.7vw, 21.5px)/1.3 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--leaf-tx);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v18h-2zM3 11h18v2H3z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v18h-2zM3 11h18v2H3z' fill='black'/></svg>") center/contain no-repeat;
  transition: transform .2s;
}
.faq summary:hover { color: var(--leaf-tx); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 22px; color: var(--char); max-width: 70ch; }
.faq__a a { color: var(--leaf-tx); }

/* --------------------------------------------------------------- range (dark) */
.range { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 80px); }
.range h2 { font-size: clamp(28px, 3vw, 40px); }
.range__list { list-style: none; padding: 0; margin: 24px 0 0; columns: 2 240px; column-gap: 32px; }
.range__list li { break-inside: avoid; position: relative; padding: 0 0 0 26px; margin: 0 0 10px; color: rgba(255,255,255,.9); }
.range__list li::before { content: ''; position: absolute; left: 0; top: .35em; width: 15px; height: 15px; background: var(--leaf); -webkit-mask: var(--leaf-mask) center/contain no-repeat; mask: var(--leaf-mask) center/contain no-repeat; }
.range__side { font-size: 16.5px; }
.range__side p { color: rgba(255,255,255,.78); }
.range__h { font: 700 22px/1.2 'Bricolage Grotesque', sans-serif; color: #fff !important; margin-bottom: 12px; }
.range .hours { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.16); }
.range .hours dt { color: rgba(255,255,255,.72); }
.range .hours dd { color: #fff; }
@media (max-width: 860px) { .range { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- gallery + lightbox */
.gal { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 900px) {
  .gal--3 { grid-template-columns: repeat(3, 1fr); }
  .gal--4 { grid-template-columns: repeat(4, 1fr); }
  .gal--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) { .gal { grid-template-columns: 1fr 1fr; gap: 8px; } }
.gal__btn { padding: 0; border: 0; background: var(--stone-2); cursor: zoom-in; border-radius: var(--r); overflow: hidden; display: block; }
.gal__btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s; }
.gal__btn:hover img { transform: scale(1.04); }
.lb { position: fixed; inset: 0; z-index: 250; background: rgba(12,12,10,.94); display: none; align-items: center; justify-content: center; padding: 5vh 7vw; }
.lb[data-open] { display: flex; }
.lb__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.lb__cap { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; color: rgba(255,255,255,.9); font-size: 15px; padding: 0 8vw; margin: 0; }
.lb__btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1; }
.lb__btn:hover { background: var(--leaf); color: var(--ink); }
.lb__close { top: 3vh; right: 3vw; font-size: 34px; }
.lb__prev { left: 2vw; top: 50%; margin-top: -26px; }
.lb__next { right: 2vw; top: 50%; margin-top: -26px; }
body[data-lb] { overflow: hidden; }
body[data-lb] .hdr, body[data-lb] .floatbar { visibility: hidden; }

/* --------------------------------------------------------------- contact page */
.contact { display: grid; gap: 18px; margin-top: 26px; }
.contact a, .contact__hours { display: block; text-decoration: none; color: var(--ink); }
.contact span { display: block; font-size: 15px; color: var(--muted); }
.contact__big { font: 800 clamp(34px, 4vw, 48px)/1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.contact__mail { font-size: 22px; font-weight: 600; word-break: break-word; }
.contact a:hover { color: var(--leaf-tx); }
.contact__hours .hours { max-width: 340px; }

/* --------------------------------------------------------------- enquiry */
.enq { background: var(--stone); padding: var(--sec-y) 0; }
.enq__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.enq h2 { font-size: clamp(34px, 4vw, 54px); }
.enq__copy > p { color: var(--char); font-size: 19px; }
.enq__tel { display: inline-block; margin: 14px 0 24px; text-decoration: none; color: var(--ink); font: 800 clamp(32px, 3.6vw, 44px)/1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.enq__tel span { display: block; font: 400 15px/1.4 'Source Sans 3', sans-serif; color: var(--muted); letter-spacing: 0; }
.enq__tel:hover { color: var(--leaf-tx); }
.enq__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.enq__facts li { margin: 0; padding-left: 26px; position: relative; font-size: 17px; }
.enq__facts li::before { content: ''; position: absolute; left: 0; top: .35em; width: 15px; height: 15px; background: var(--leaf); -webkit-mask: var(--leaf-mask) center/contain no-repeat; mask: var(--leaf-mask) center/contain no-repeat; }
.enq__facts a { color: var(--leaf-tx); }
@media (max-width: 900px) { .enq__grid { grid-template-columns: 1fr; } }

/* 🔴 Every form element states its own colour at two or more classes, so a coloured parent row can
   never turn a label white-on-white (the fleet's inherited-colour bug). */
.form { background: #fff; border-radius: 12px; padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow); }
.form .form__row { margin-bottom: 16px; }
.form .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form .form__2 { grid-template-columns: 1fr; } }
.form .form__row label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 16px; color: #1d1c19; }
.form .form__row input, .form .form__row select, .form .form__row textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 17px;
  color: #1d1c19; -webkit-text-fill-color: #1d1c19;
  background: #ffffff; border: 1.5px solid #bfb8aa; border-radius: 6px;
}
.form .form__row select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M6 8 0 0h12z' fill='%231d1c19'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; }
.form .form__row textarea { resize: vertical; min-height: 130px; }
.form .form__row input::placeholder, .form .form__row textarea::placeholder { color: #736e64; -webkit-text-fill-color: #736e64; }
.form .form__row input:focus, .form .form__row select:focus, .form .form__row textarea:focus { outline: 3px solid var(--leaf); outline-offset: 0; border-color: var(--leaf-dk); }
.form .btn { margin-top: 6px; min-height: 56px; font-size: 18px; }
.form .err { display: block; color: #a3201a; font-size: 14.5px; margin-top: 5px; }
.form .form__msg { margin: 14px 0 0; font-size: 16px; color: #1d1c19; }
.form .form__msg.err { color: #a3201a; }
.form .form__legal { margin: 14px 0 0; font-size: 14.5px; color: #5c5850; }
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- footer */
.ftr { background: var(--ink); color: rgba(255,255,255,.8); font-size: 16px; }
.ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-top: clamp(50px, 6vw, 80px); padding-bottom: 44px; }
.ftr__logo { width: 210px; height: auto; margin-bottom: 18px; }
.ftr p { color: rgba(255,255,255,.76); }
.ftr a { color: rgba(255,255,255,.86); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__h { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff !important; margin: 0 0 12px; }
.ftr__h--gap { margin-top: 26px; }
.ftr__links { list-style: none; padding: 0; margin: 0; }
.ftr__links li { margin: 0 0 7px; }
.ftr__social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr__social a { color: var(--leaf-lt); }
.ftr__tel a { font: 800 26px/1.1 'Bricolage Grotesque', sans-serif; color: #fff; }
.ftr__tel span { display: block; font-size: 14px; color: rgba(255,255,255,.62); }
.hours--ftr { margin-top: 18px; max-width: 280px; }
.hours--ftr dt { color: rgba(255,255,255,.66); }
.hours--ftr dd { color: #fff; }
.ftr__btm { border-top: 1px solid rgba(255,255,255,.12); }
.ftr__btm-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; font-size: 14.5px; color: rgba(255,255,255,.62); }
/* The whole phrase is the link - one credit unit and a bigger tap target. Underline on hover only. */
.ftr__credit { color: rgba(255,255,255,.62) !important; text-decoration: none; }
.ftr__credit:hover { color: #fff !important; text-decoration: underline !important; }
@media (max-width: 980px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- float bar (fleet component) */
.floatbar { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.floatbar__list { display: flex; flex-direction: column; gap: 10px; }
.floatbar__btn { width: 52px; height: 52px; border-radius: 50%; background: var(--fb-bg); color: var(--fb-icon); display: grid; place-items: center; border: 0; cursor: pointer; box-shadow: 0 6px 20px rgba(29,28,25,.28); transition: transform .18s, background .18s, color .18s, opacity .18s; }
.floatbar__btn:hover { background: var(--fb-hover-bg); color: var(--fb-hover-icon); }
.cnc-js .floatbar:not([data-open]) .floatbar__list { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.cnc-js .floatbar .floatbar__list { transition: opacity .2s, transform .2s, visibility .2s; }
/* 🔴 Restate the hover transform AFTER the collapse rule, or an equal-specificity transform wins. */
.floatbar__btn:hover { transform: scale(1.08); }
.floatbar__toggle:hover { transform: scale(1.08); }
.fb-pop { position: fixed; inset: 0; z-index: 190; background: rgba(12,12,10,.6); display: none; align-items: center; justify-content: center; padding: 24px; }
.fb-pop[data-open] { display: flex; }
.fb-pop__card { background: #fff; border-radius: 12px; padding: 34px 40px; text-align: center; position: relative; max-width: 380px; }
.fb-pop__card p { color: var(--muted); font-size: 16px; }
.fb-pop__num { display: block; font: 800 32px/1.1 'Bricolage Grotesque', sans-serif; color: var(--ink); text-decoration: none; margin: 6px 0 10px; }
.fb-pop__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }

/* --------------------------------------------------------------- reveal
   🔴 threshold: 0 with rootMargin only (a ratio threshold never fires on a tall copy column), and
   scoped to .cnc-js so no-JS visitors and crawlers always see everything. */
.cnc-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.cnc-js [data-reveal].is-in { opacity: 1; transform: none; }
.cnc-js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.cnc-js [data-reveal][data-delay="2"] { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .cnc-js [data-reveal] { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Google reviews (Trustindex)
   The widget is moved into .ti-slot by site.js from the hidden stage after <main>. Until it arrives
   the slot is empty and the fallback line shows the Business Profile link; once it lands the line
   is hidden. Never a fixed min-height on an empty slot - a blocked script would leave a hole. */
.ti { margin: 0 0 clamp(30px, 4vw, 50px); }
.ti-slot:empty { display: none; }
.ti-slot[data-loaded] { min-height: 120px; margin-bottom: 18px; }
.ti__links { font-size: 16.5px; color: var(--muted); margin: 0; }
.ti__links[hidden] { display: none; }
/* Trustindex sets its own fonts; keep the widget on the site's face and tone. */
.ti-slot .ti-widget { font-family: 'Source Sans 3', sans-serif !important; }

/* --------------------------------------------------------------- review flow
   /how-did-we-do/, /positive-feedback/, /sorry/ - a port of the cnc-review-flow plugin's flow.css
   onto this site's palette (1.2.0 design: one review page for every customer, no faces). Bare
   page, centred column, big tappable review cards, a plain text link to the private form. */
body.flow { background: var(--stone); }
.flow__page { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px 20px 56px; }
.flow__col { width: 100%; max-width: 480px; text-align: center; }
.flow__brand { margin: 0 auto 30px; }
.flow__brand img { width: 240px; max-width: 72%; height: auto; }
.flow .flow__title { font-size: clamp(28px, 6vw, 38px); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.flow__sub { margin: 0 auto 28px; max-width: 34em; font-size: 17.5px; line-height: 1.5; color: var(--muted); }
.flow__choices { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.flow__card { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; border: 0; transition: transform .18s, box-shadow .18s; }
a.flow__card { width: 148px; height: 148px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.flow__card:hover, a.flow__card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(29,28,25,.14), 0 2px 6px rgba(29,28,25,.08); text-decoration: none; }
a.flow__card:focus-visible { outline: 3px solid var(--leaf-tx); outline-offset: 3px; }
a.flow__card:active { transform: none; }
.flow__alt { margin: 26px 0 0; font-size: 16.5px; }
.flow__alt a { color: var(--leaf-tx); text-decoration: underline; text-underline-offset: 3px; }
.flow__alt a:hover, .flow__alt a:focus-visible { color: var(--ink); }
.flow__choices--review a.flow__card { width: 220px; height: 150px; flex-direction: column; gap: 12px; color: var(--ink); }
.flow__g { width: 56px; height: 56px; display: block; }
.flow__nc { font: 800 27px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.flow__card-l { font: 600 15px/1.2 'Source Sans 3', sans-serif; color: var(--muted); }
.flow__card--form { display: block; width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 22px 22px; text-align: left; }
.flow__form { margin: 0; }
.flow__field { display: block; margin: 0 0 16px; }
.flow__label { display: block; margin: 0 0 6px; font-size: 14.5px; color: var(--muted); }
.flow__label em { font-style: normal; color: #8c877d; }
.flow__form textarea, .flow__form input[type="text"] { display: block; width: 100%; margin: 0; padding: 10px 2px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: #fff; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; box-shadow: none; outline: none; transition: border-color .15s; }
.flow__form textarea:focus, .flow__form input[type="text"]:focus { border-bottom-color: var(--leaf); }
.flow__form textarea::placeholder, .flow__form input::placeholder { color: #7a756c; opacity: 1; }
.flow__form textarea { min-height: 120px; resize: vertical; }
.flow__err { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #fdebe0; color: var(--ember-tx); font-size: 15px; }
.flow__err[hidden] { display: none; }
/* Honeypot: off-canvas, never display:none - bots that skip hidden inputs would skip it too. */
.flow__hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.flow__btn { display: block; width: 100%; margin: 8px 0 0; padding: 14px 18px; font: 700 16px/1.2 'Source Sans 3', sans-serif; letter-spacing: .05em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--ink); background: var(--leaf); border: 0; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.flow__btn:hover, .flow__btn:focus-visible { background: var(--leaf-dk); color: #fff; }
.flow__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.flow__btn[disabled] { opacity: .6; cursor: default; }
a.flow__btn--link { display: inline-block; width: auto; min-width: 240px; margin-top: 4px; }
.flow__thanks[hidden], [data-feedback-ask][hidden] { display: none; }
.flow__check { width: 64px; height: 64px; margin: 0 auto 16px; display: block; color: var(--leaf-tx); }
.flow .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 400px) {
  .flow__page { padding: 28px 16px 40px; }
  .flow__choices { gap: 14px; }
  a.flow__card { width: 132px; height: 132px; }
  .flow__choices--review a.flow__card { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { a.flow__card, .flow__btn { transition: none; } }