/* Evergreen Transformations LLC: preview website by Haven City Digital.
   One stylesheet, written phone-first. Identity from their logo: deep red (#b8101c),
   black and white, with warm paper and charcoal greys. Headings are Archivo at a condensed
   width in sentence case; body copy is Public Sans. The red rule from the logo is the one
   decorative motif, used sparingly. No motion beyond short hover/focus transitions. */

:root {
  --ink: #111214;
  --char-900: #17181b;
  --char-800: #1d1f23;
  --char-700: #2a2d32;
  --red: #2f6b33;          /* Evergreen green from the logo trees, darkened: 6.4:1 with white */
  --red-dark: #22522a;
  --red-bright: #9fd69a;   /* light green on near-black */
  --red-50: #eef6ec;
  --roof: #b9282d;
  --paper: #f3f1ed;
  --paper-2: #e9e6e0;
  --line: #dedad3;
  --line-2: #c8c3ba;
  --field: #858a91;        /* input borders: 3.4:1 on white */
  --muted: #565a60;
  --ink-2: #33363b;
  --white: #fff;
  --ok: #17703a;
  --focus: #1b5fd6;

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --section: 32px;
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --open: #3ccf73;         /* "Open now" dot on dark */
  color-scheme: light;
}
@media (min-width: 900px) { :root { --section: clamp(56px, 6vw, 88px); } }
@media (min-width: 1000px) { :root { --header-h: 76px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* the scrollbar's space stays reserved, so locking the page for a pop-up never shifts it sideways */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* anchors (#siding, #bid…) land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Menu or pop-up open: the page behind stops scrolling. html only, so the sticky header
   keeps working; site.js / form.js put the scroll position back on close. */
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--red); text-underline-offset: .18em; }
a:hover { color: var(--red-dark); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.email { overflow-wrap: anywhere; min-width: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-stretch: 82%;
  font-weight: 800;
  letter-spacing: 0;
  /* the condensed width also narrows the space glyph; give words their room back */
  word-spacing: .08em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.875rem); line-height: 1.05; }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 12px; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.h-sm { font-size: 1.375rem; margin-bottom: 8px; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 700 .8125rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.eyebrow .ic { width: 18px; height: 18px; }
.rule { display: block; width: 48px; height: 4px; margin-bottom: 16px; background: var(--red); }
.note { font-size: .9375rem; color: var(--muted); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: 700 1rem/1.2 var(--font-body);
  text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 1.1em; height: 1.1em; }
.btn-lg { min-height: 52px; padding: 0 22px; font-size: 1.0625rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--char-700); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; background: rgba(10, 10, 12, .25); }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn[disabled] { opacity: .7; cursor: progress; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 700; color: var(--red); text-decoration: none;
}
.link-arrow .ic { width: 18px; height: 18px; transition: transform .15s; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .ic { transform: translateX(2px); }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  border: 0; background: none; font-weight: 700; color: var(--red);
  text-decoration: underline; text-underline-offset: .2em;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Preview notice (static, scrolls away above the header) ---------- */
.notice { background: var(--ink); color: #d3d6da; }
.notice p { margin: 0 auto; padding-block: 6px; font-size: .78rem; line-height: 1.4; text-align: center; }

/* ---------- Wordmark (their logo, redrawn as SVG so it stays sharp) ---------- */
.brand { display: inline-flex; flex: none; color: var(--ink); text-decoration: none; }
.brand svg { width: auto; height: 42px; overflow: visible; }
.brand .wm-top { fill: currentColor; }
.brand .wm-bot { fill: var(--roof); }
@media (min-width: 1000px) { .brand svg { height: 50px; } }

/* ---------- Header: sticky, always visible, solid ---------- */
/* No transform or backdrop-filter here: either would change what the menu is positioned against. */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-tel, .header-cta { display: none; }
.hbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink);
  font: 700 .9375rem/1 var(--font-body); text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.hbtn:hover { border-color: var(--ink); color: var(--ink); }
.hbtn .ic { width: 20px; height: 20px; }
.header-call .ic { color: var(--red); }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }

@media (min-width: 1000px) {
  .header-in { gap: 24px; }
  .nav { display: flex; gap: 2px; }
  .nav a {
    position: relative; padding: 10px 12px; border-radius: var(--radius);
    font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none;
  }
  .nav a:hover { color: var(--red); }
  .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; background: var(--red); }
  .header-actions { gap: 20px; }
  .header-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
  .header-tel .ic { color: var(--red); }
  .header-tel:hover { color: var(--red); }
  .header-cta { display: inline-flex; min-height: 46px; }
  .header-call, .menu-btn, .menu { display: none !important; }
  .nav a, .header-tel, .header-cta { white-space: nowrap; }
}
/* 1000–1199px: the longer quote button needs the room, so the number shows as an icon + "Call". */
@media (min-width: 1000px) and (max-width: 1199px) {
  .header-in { gap: 14px; }
  .nav a { padding-inline: 9px; }
  .header-actions { gap: 12px; }
  .header-cta { padding-inline: 16px; font-size: 1rem; }
  .cta-long { display: none; }
}

/* Menu (phones and tablets): a panel under the header; the rest of the screen is a scrim. */
.menu {
  position: absolute; top: 100%; left: 0; right: 0;
  height: var(--menu-h, calc(100vh - var(--header-h)));
  background: rgba(10, 10, 12, .55);
}
.menu-panel {
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .5);
}
.menu-in { padding-block: 4px 20px; }
.menu-links { list-style: none; }
.menu-links a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--line);
  font: 800 1.3rem/1.2 var(--font-display); font-stretch: 82%; word-spacing: .08em; color: var(--ink); text-decoration: none;
}
.menu-links a:hover { color: var(--red); }
.menu-links a[aria-current="page"] { color: var(--red); }
.menu-contact { display: grid; gap: 2px; padding-top: 10px; }
.menu-contact a:not(.btn) { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; color: var(--ink); text-decoration: none; }
.menu-contact a:not(.btn) .ic { color: var(--red); }
.menu-contact a:not(.btn) > span { min-width: 0; }
.menu-contact .btn { margin-top: 10px; }
.menu-status { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }

/* Live hours: a dot and one line (assets/js/hours.js). Grey until the script has painted it. */
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #9aa0a6; }
.is-open .dot { background: var(--open); }
.is-closed .dot { background: var(--red-bright); }
.menu-status.is-open .dot { background: var(--ok); }
.menu-status.is-closed .dot { background: var(--red); }

/* ---------- Home hero: photo, label, headline, actions, open-now line, four quick facts ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img { object-fit: cover; object-position: 50% 22%; }
/* Darker toward the words, so the windows and siding stay visible at the top. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .55) 22%, rgba(10, 10, 12, .86) 48%, rgba(10, 10, 12, .94) 100%);
}
.hero-in { padding-top: 64px; padding-bottom: 24px; }
.hero-pill {
  display: inline-flex; align-items: center; margin: 0 0 14px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(10, 10, 12, .55);
  font-size: .8125rem; font-weight: 700; line-height: 1.3; color: #fff;
}
.hero h1 { max-width: 21ch; margin-bottom: 12px; color: #fff; }
.hero h1 .accent { color: var(--red-bright); }
.hero-sub { max-width: 46ch; margin-bottom: 20px; font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.hero-more { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn-red { flex: 1 1 auto; }
.hero-actions .btn-ghost { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }
.hero-status { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.hero-facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.hero-facts li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic t" "ic s"; column-gap: 10px; align-items: center;
  padding: 7px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; background: rgba(23, 24, 27, .66);
}
.hf-ic { grid-area: ic; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius); background: var(--red); color: #fff; }
.hf-ic .ic { width: 15px; height: 15px; }
.hero-facts li { column-gap: 8px; }
.hero-facts strong { grid-area: t; font-size: .78rem; line-height: 1.2; }
.hero-facts small { grid-area: s; font-size: .72rem; line-height: 1.25; color: rgba(255, 255, 255, .72); }
@media (min-width: 700px) {
  .hero-more { display: inline; }
  .hero-media img { object-position: 50% 35%; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .74) 42%, rgba(10, 10, 12, .25) 78%, rgba(10, 10, 12, .12) 100%),
      linear-gradient(0deg, rgba(10, 10, 12, .6) 0%, rgba(10, 10, 12, 0) 45%);
  }
  .hero-in { padding-top: clamp(72px, 9vw, 130px); padding-bottom: clamp(36px, 5vw, 64px); }
  .hero-pill { font-size: .875rem; margin-bottom: 18px; }
  .hero-sub { font-size: 1.25rem; margin-bottom: 28px; }
  .hero-status { margin-top: 20px; font-size: 1rem; }
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 880px; margin-top: 24px; }
  .hero-facts li { padding: 9px 11px; }
  .hero-facts strong { font-size: .84rem; }
  .hero-facts small { font-size: .78rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.bg-paper { background: var(--paper); }
.sec-head { margin-bottom: 18px; }
.sec-head h2 { margin-bottom: 6px; }
.sec-head p { margin: 0; max-width: 56ch; color: var(--muted); }
.sec-head-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.sec-head-row h2 { margin-bottom: 0; }
@media (min-width: 900px) { .sec-head { margin-bottom: 28px; } }

/* ---------- Home: "What we do" (photo cards; a card's photo, title or Details opens its service pop-up) ---------- */
.svc-cards { display: grid; gap: 12px; }
.svc-card {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 22px 40px -34px rgba(17, 18, 20, .5);
}
.svc-card-media { position: relative; display: block; min-height: 100%; background: var(--paper-2); }
.svc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.svc-card:hover .svc-card-media img { transform: scale(1.03); }
.svc-card-body { min-width: 0; padding: 14px 14px 10px; }
.svc-card h3 { margin-bottom: 8px; font-size: 1.1875rem; }
.svc-card h3 a { color: var(--ink); text-decoration: none; }
.svc-card h3 a:hover { color: var(--red); }
.svc-card .ticks { gap: 4px; margin-bottom: 10px; }
.svc-card .ticks li { font-size: .9375rem; line-height: 1.35; }
.svc-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
/* phones: the photo and the title already open the service pop-up, so the card keeps one button */
.svc-card-actions .link-arrow { display: none; }
.svc-card { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
@media (min-width: 700px) {
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .svc-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .svc-card-media { min-height: 0; aspect-ratio: 4 / 3; }
  .svc-card-body { display: flex; flex-direction: column; padding: 18px 20px 14px; }
  .svc-card-actions { margin-top: auto; }
  .svc-card-actions .link-arrow { display: inline-flex; }
  .svc-card h3 { font-size: 1.375rem; }
}
@media (min-width: 1000px) { .svc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .svc-card:hover .svc-card-media img { transform: none; } }

/* ---------- Home: photo gallery (stock photos, captioned by the kind of work) ---------- */
.gallery-sec { padding-top: 0; }
.gallery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--char-800); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px;
  font-size: .8125rem; font-weight: 700; line-height: 1.25; color: #fff;
  background: linear-gradient(0deg, rgba(10, 11, 13, .86) 0%, rgba(10, 11, 13, 0) 100%);
}
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .gallery figcaption { padding: 34px 14px 12px; font-size: .9375rem; }
}

/* ---------- Home: quote starter ("Need a quote? Start here.") ---------- */
.starter-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 980px) { .starter-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; } }
.starter-copy .eyebrow { margin-bottom: 6px; }
.starter-copy h2 { margin-bottom: 0; }
.starter-points { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; }
.starter-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.starter-points .ic { width: 22px; height: 22px; color: var(--red); }
.starter-points a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.starter-card {
  container-type: inline-size; min-width: 0; margin: 0; padding: 20px 16px 18px;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius);
  box-shadow: 0 34px 60px -44px rgba(17, 18, 20, .55);
}
@media (min-width: 560px) { .starter-card { padding: 28px 28px 20px; } }
.starter-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.starter-top { --progress: .2; }
.starter-step { flex: none; font: 700 .8125rem/1 var(--font-body); letter-spacing: .04em; color: var(--muted); }
.starter-q { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem); margin-bottom: 4px; }
.starter-card .hint-multi { margin: 0 0 12px; }
/* the quote form's photo tiles (below): tick several, then Next opens the quote pop-up with them */
.starter-actions { margin-top: 18px; }
.starter-actions .btn { width: 100%; }
@media (min-width: 560px) { .starter-card { padding-bottom: 28px; } }

/* FAQ / question indicator (also used on /contact) */
.qa-ind {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); color: var(--ink);
  transition: border-color .15s, color .15s;
}
.qa-ind .ic { width: 18px; height: 18px; transition: transform .2s; }
/* open: the + turns into an x inside a red outline (the box itself stays square) */
.qa[open] .qa-ind { border-color: var(--red); color: var(--red); }
.qa[open] .qa-ind .ic { transform: rotate(45deg); }

/* ---------- Home: two enquiry paths (photo on top) ---------- */
.paths { display: grid; gap: 14px; }
@media (min-width: 760px) { .paths { grid-template-columns: 1fr 1fr; gap: 20px; } }
.path {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 22px 40px -34px rgba(17, 18, 20, .5);
}
.path-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; background: var(--paper-2); }
.path-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; border-top: 4px solid var(--red); }
.path-gc .path-body { border-top-color: var(--ink); }
.path-gc .eyebrow { color: var(--ink-2); }
.path h3 { margin-bottom: 6px; }
.path-body p:not(.eyebrow) { color: var(--ink-2); margin-bottom: 16px; }
.path .btn { margin-top: auto; }
@media (min-width: 900px) { .path-body { padding: 26px 28px 28px; } }

/* ---------- Home: about intro ---------- */
.about-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin-top: 22px; }
.photo-band img { display: block; width: 100%; height: clamp(180px, 42vw, 380px); object-fit: cover; object-position: 50% 55%; }
.about-intro .lead { margin-bottom: 18px; }
.about-intro .about-photo { margin: 0 0 20px; }
.more { margin: 12px 0 0; }
@media (min-width: 900px) {
  .about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  .about-photo { aspect-ratio: 4 / 3; margin-top: 0; }
}

.contact-card {
  display: grid; justify-items: start; gap: 0; margin: 20px 0 0; padding: 14px 18px;
  border-left: 4px solid var(--red); background: var(--paper);
}
.bg-paper .contact-card { background: #fff; }
.cc-label { margin: 0; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cc-name { margin: 2px 0 4px; font: 800 1.375rem/1.15 var(--font-display); font-stretch: 82%; word-spacing: .08em; }
.contact-card a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-card a .ic { color: var(--red); }
.contact-card a:hover { color: var(--red); text-decoration: underline; }

/* ---------- Final quote band (home): dark photo, big line, one button ---------- */
.band {
  position: relative; isolation: isolate; overflow: hidden; padding-block: 44px; color: #fff;
  background: var(--ink) url("/img/gal-wood-600.webp") center / cover no-repeat;
}
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 12, .95) 0%, rgba(10, 10, 12, .84) 55%, rgba(10, 10, 12, .74) 100%); }
.band h2 { margin-bottom: 8px; color: #fff; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
.band h2 .accent { color: var(--red-bright); }
.band p { color: rgba(255, 255, 255, .84); max-width: 48ch; margin-bottom: 18px; }
.band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.band-actions .btn { flex: 1 1 100%; }
.band-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; font-weight: 600; color: #fff; text-decoration: none; }
.band-link .ic { color: var(--red-bright); }
.band-link:hover { color: #fff; text-decoration: underline; }
@media (min-width: 560px) { .band-actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .band { padding-block: 72px; background-image: url("/img/gal-wood-1000.webp"); }
  .band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
  .band p { margin-bottom: 0; }
}

/* ---------- Inner page heads: compact, no full-screen photos ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
/* A photo behind the page head, kept dark enough for the white text. */
.page-head-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-head.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .8) 55%, rgba(10, 10, 12, .62) 100%);
}
.page-head.has-bg .page-head-in { padding-block: 44px 40px; }
@media (min-width: 900px) { .page-head.has-bg .page-head-in { padding-block: 84px 88px; } }
.page-head-in { padding-block: 28px 32px; }
.page-head .eyebrow { color: var(--red-bright); }
.page-head h1 { color: #fff; max-width: 22ch; margin-bottom: 12px; }
.page-head .lead { color: rgba(255, 255, 255, .86); margin: 0; }
.page-head .lead a { color: #fff; }
@media (min-width: 900px) {
  .page-head-in { padding-block: 56px 64px; }
  .page-head-in:has(.useful) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
}
/* "What's useful" for bid invitations, in the contractors page head */
.useful { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.useful-t { margin: 0 0 8px; font: 700 .8125rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red-bright); }
.useful .ticks li { color: rgba(255, 255, 255, .9); }
.useful .ticks li::before { border-color: var(--red-bright); }
.useful .note { margin: 14px 0 0; color: #fff; font-weight: 600; }
@media (min-width: 900px) { .useful { margin-top: 0; padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .16); } }

/* Lists with a small red tick */
.ticks { list-style: none; display: grid; gap: 6px; margin: 0 0 18px; }
.ticks li { position: relative; padding-left: 26px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: .38em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(-45deg);
}

/* "Useful to share" in the service pop-up */
.share-t { margin: 0 0 8px; font: 700 .8125rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- About page ---------- */
.about-copy .lead { color: var(--ink); }
.svc-links { list-style: none; border-top: 1px solid var(--line); margin-bottom: 6px; max-width: 520px; }
.svc-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none;
}
.svc-links a::after { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); margin-right: 6px; }
.svc-links a:hover { color: var(--red); }
.about-copy .contact-card { margin-bottom: 20px; }
@media (min-width: 900px) {
  .about-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .about-main .about-photo { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- Form pages ---------- */
.form-section { background: var(--paper); }
.form-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; } }
.form-card {
  container-type: inline-size;
  min-width: 0; padding: 18px 16px 22px;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius);
}
@media (min-width: 560px) { .form-card { padding: 28px 28px 32px; } }
.form-aside { min-width: 0; }
/* /contact: the quote is always a pop-up; this card opens it. */
.quote-card {
  min-width: 0; padding: 24px 18px 26px;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius);
  box-shadow: 0 34px 60px -44px rgba(17, 18, 20, .55);
}
.quote-card .eyebrow { margin-bottom: 10px; }
.quote-card h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem); margin-bottom: 10px; }
.quote-line { max-width: 46ch; margin-bottom: 22px; font-size: 1.0625rem; color: var(--ink-2); }
.quote-btn { width: 100%; }
.no-js .quote-btn { display: none; }
@media (min-width: 560px) {
  .quote-card { padding: 40px 40px 44px; }
  .quote-btn { width: auto; min-height: 58px; padding: 0 30px; font-size: 1.125rem; }
}
.aside-h { font-size: 1.375rem; margin-bottom: 10px; }
.scope-line { font-weight: 600; color: var(--ink-2); }
.reach { list-style: none; border-top: 1px solid var(--line); margin-bottom: 14px; }
.reach a {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; min-height: 56px;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.reach a:hover strong { color: var(--red); text-decoration: underline; }
.reach .ic { width: 22px; height: 22px; color: var(--red); }
.reach span { display: grid; min-width: 0; }
.reach strong { font-weight: 700; }
.reach small { font-size: .9375rem; color: var(--muted); }
.noscript { margin: 0; }
.no-js [data-form] { display: none; }

/* ---------- Form parts (form.js) ---------- */
.disclosure {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; padding: 10px 12px;
  background: var(--paper); border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.45; color: var(--ink-2);
}
.disclosure .ic { width: 18px; height: 18px; margin-top: .1em; color: var(--muted); }
.step-title { font-size: 1.625rem; margin: 0 0 4px; outline: none; }
.enquiry > .step-title { margin: 0 0 12px; }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
fieldset.field { min-width: 0; }
.field > label, .field > legend { padding: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }
fieldset.field > legend { margin-bottom: 6px; }
fieldset.field > legend + .hint { margin-top: -6px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: 11px 14px;
  border: 1.5px solid var(--field); border-radius: var(--radius); background: #fff;
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
textarea { min-height: 96px; resize: vertical; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(27, 95, 214, .35); }
.field.bad input:not([type="checkbox"]):not([type="radio"]), .field.bad select, .field.bad textarea { border-color: var(--red); background: var(--red-50); }
.err { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--red-dark); }
.err .ic { width: 18px; height: 18px; margin-top: .1em; }
.pair { display: grid; column-gap: 16px; }
/* State + ZIP, side by side even on phones */
.addr-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 12px; }
.addr-row select { padding-right: 36px; background-position: right 10px center; }
.addr-row > .field, .quote .step .addr-row > .field { margin-top: 20px; } /* both, so they line up */
@container (min-width: 520px) { .pair { grid-template-columns: 1fr 1fr; } }

/* Service chips (checkboxes) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: block; min-width: 0; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff;
  font-weight: 600; font-size: .9875rem; line-height: 1.25;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip span::before {
  content: ""; flex: none; width: 16px; height: 16px; border: 2px solid var(--field); border-radius: 3px; background: #fff;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip input:checked + span::before {
  border-color: #fff;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field.bad .chip span { border-color: var(--red); }

/* Quote pop-up: progress, one question per block, choice tiles */
.progress { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.progress-t { flex: none; font: 700 .8125rem/1 var(--font-body); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.progress-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--progress, .25) * 100%); background: var(--red); transition: width .25s var(--ease); }
.quote .step-title { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.125rem); line-height: 1.08; margin: 0 0 6px; }
.quote .disclosure { margin: 0 0 18px; padding: 8px 12px; font-size: .875rem; }
.quote .step > .disclosure { margin: 0 0 18px; }
.quote .step-title + .field, .quote .step-title + .pair .field { margin-top: 14px; }
.quote .field + .field { margin-top: 20px; }
.quote .field-choice { margin-top: 24px; }
.field-picks .hint { margin-bottom: 8px; }
/* "Choose all that apply.": the tiles take several answers */
.hint-multi { font-weight: 600; color: var(--ink-2); }
.field-picks .err { margin: -2px 0 10px; }

/* Photo tiles: the quote form's "What's the work?" and the home starter (checkboxes, several
   allowed). A small square photo and the label, two per row. Each photo carries a selection ring,
   as in a phone's photo picker; ticked = red border, light red fill and a red check in the ring. */
.ptiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ptile { position: relative; display: block; min-width: 0; }
.ptile.wide { grid-column: 1 / -1; }
.pbox {
  position: relative; display: flex; align-items: center; gap: 10px; height: 100%; min-height: 62px; padding: 6px 10px 6px 6px;
  border: 1.5px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .9375rem; line-height: 1.25;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.pbox img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 5px; background: var(--paper-2); }
.pbox-t { flex: 1; min-width: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.pbox-text { min-height: 50px; padding-left: 44px; }
@media (hover: hover) { .ptile:hover input:not(:checked) + .pbox { border-color: var(--ink); } }
.ptile input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ptile input:checked + .pbox { border-color: var(--red); background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red); }
.ptile input + .pbox::after {
  content: ""; position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 2px var(--field), 0 1px 3px rgba(0, 0, 0, .35);
}
.ptile input + .pbox-text::after { top: 50%; left: 14px; margin-top: -10px; box-shadow: inset 0 0 0 2px var(--field); }
.ptile input:checked + .pbox::after {
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
}
.ptile input:checked + .pbox-text::after { box-shadow: none; }
.ptile input:focus-visible + .pbox { outline: 3px solid var(--focus); outline-offset: 2px; }
/* small phones (360px): a smaller photo and label, so "installation" still fits on one line */
@container (max-width: 340px) {
  .pbox { gap: 8px; font-size: .875rem; }
  .pbox img { width: 44px; height: 44px; }
}
@container (min-width: 480px) {
  .ptiles { gap: 12px; }
  .pbox { min-height: 70px; gap: 14px; font-size: 1rem; }
  .pbox img { width: 56px; height: 56px; }
}

/* Residential or commercial: two big buttons (radio) */
legend.q { margin: 0 0 10px; padding: 0; font: 800 1.3125rem/1.2 var(--font-display); font-stretch: 82%; word-spacing: .08em; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seg-opt { position: relative; display: block; min-width: 0; }
.seg-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span {
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 56px; padding: 8px 12px;
  border: 1.5px solid var(--line-2); border-radius: 8px; background: #fff;
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.seg-opt span::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--field); border-radius: 50%; background: #fff; }
@media (hover: hover) { .seg-opt:hover input:not(:checked) + span { border-color: var(--ink); } }
.seg-opt input:checked + span { border-color: var(--red); background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red); }
.seg-opt input:checked + span::before { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 4px #fff; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg-3 .seg-opt:last-child { grid-column: 1 / -1; }
@container (min-width: 480px) {
  .seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg-3 .seg-opt:last-child { grid-column: auto; }
}
.step-foot { margin-top: 26px; }
.step-foot .form-alert { margin: 0 0 12px; }
.step-foot .disclosure { margin: 0 0 12px; }
.quote .form-actions { flex-wrap: nowrap; margin: 0; }
.quote .form-actions [data-back] { flex: none; padding-inline: 16px; }
.quote .form-actions [data-next], .quote .form-actions [data-submit] { flex: 1 1 auto; min-width: 0; }

/* "We will call you to confirm some details." and the consent small print under the send button */
.call-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 600; line-height: 1.45; color: var(--ink); }
.call-note .ic { width: 18px; height: 18px; margin-top: .2em; color: var(--red); }
.quote .step-title + .call-note { margin: 4px 0 0; }
.step-foot .call-note, .form-end .call-note { margin: 0 0 12px; }
.fine { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.form-end { margin-top: 24px; }
.form-end .disclosure { margin: 0 0 12px; }
.form-end .form-actions { margin-top: 0; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.form-actions [data-next], .form-actions [data-submit] { flex: 1 1 220px; }
.form-alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
  border: 1.5px solid var(--red); border-radius: var(--radius); background: var(--red-50);
  color: var(--red-dark); font-weight: 600; line-height: 1.5; outline: none;
}
.form-alert .ic { width: 20px; height: 20px; margin-top: .15em; }
.form-alert a { color: inherit; }

/* Sent */
.form-done { padding-top: 14px; outline: none; }
.ok-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--ok); color: #fff; }
.ok-ic .ic { width: 28px; height: 28px; }
.form-done h2 { font-size: 1.75rem; margin-bottom: 8px; }
.ok-ref { font-weight: 600; }
.ok-call, .ok-demo { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius); font-size: .9375rem; line-height: 1.5; }
.ok-call { background: #e8f4ec; border-left: 4px solid var(--ok); }
.ok-demo { background: var(--paper); }
.ok-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Pop-ups (quote form, service details). Phones: a bottom sheet with rounded top corners, as
   tall as its content up to 88% of the visible height, so the dimmed page stays in view above
   it; it scrolls inside, under a fixed bar with the title and Close. form.js keeps it sitting
   right on top of an open keyboard (--vv-bottom) and sets its room (--sheet-max). From 760px:
   a centred panel; the quote panel keeps one height for all five screens, so nothing moves
   when you go Next or Back. No open/close animation. The photo viewer (.lightbox) stays full-screen. */
.sheet { margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(10, 10, 12, .45); }
@media (max-width: 759px) {
  .sheet {
    inset: auto 0 var(--vv-bottom, 0px); width: 100%; max-width: 100%; height: auto;
    max-height: 88vh; max-height: var(--sheet-max, 88dvh);
    border-radius: 14px 14px 0 0; box-shadow: 0 -18px 44px -24px rgba(0, 0, 0, .5);
  }
}
.sheet-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.sheet-title { margin: 0; font: 800 1.1875rem/1.2 var(--font-display); font-stretch: 82%; word-spacing: .08em; }
.sheet-close {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 700;
}
.sheet-close:hover { border-color: var(--ink); }
.sheet-close .ic { width: 20px; height: 20px; }
.sheet-body {
  container-type: inline-size;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px max(24px, env(safe-area-inset-bottom));
}
/* Service details */
.info-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); background: var(--paper-2); margin: 0 0 18px; }
.info-title { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem); margin: 0 0 10px; outline: none; }
.info-copy .lead { margin-bottom: 16px; }
.info-copy .ticks { margin-bottom: 0; }
.info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; }
.info-actions .btn { flex: 1 1 100%; text-wrap: balance; }
/* The estimate button stays pinned to the bottom of the service pop-up while the
   details scroll underneath (Benjamin, Oct 9: people had to scroll to find it). */
.info-sheet .sheet-body { padding-bottom: 0; }
.info-sheet .info-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 20px -16px 0; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -12px 20px -16px rgba(0, 0, 0, .35);
}
.info-sheet .info-actions .btn { min-height: 52px; }
@media (min-width: 760px) {
  .info-sheet .info-actions { margin: 22px -28px 0; padding: 14px 28px 18px; }
  /* fit-content: a modal dialog is pinned top and bottom, so "auto" would stretch it */
  .sheet { width: min(640px, calc(100% - 48px)); height: fit-content; max-height: min(90dvh, 920px); margin: auto; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
  .sheet-bar { padding: 10px 12px 10px 28px; }
  .sheet-body { padding: 22px 28px 28px; }
  .quote-sheet { height: min(740px, calc(100dvh - 48px)); max-height: none; }
  .quote-sheet .sheet-body { display: flex; flex-direction: column; }
  .quote-sheet .enquiry, .quote-sheet .step:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
  .quote-sheet .step-foot { margin-top: auto; padding-top: 26px; }
  .info-actions .btn { flex: 0 1 auto; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none;
  font: 800 1.1875rem/1.25 var(--font-display); font-stretch: 82%; word-spacing: .08em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover > span:first-child { color: var(--red); }
.qa-a p { margin: 0 0 16px; max-width: 62ch; color: var(--ink-2); }
@media (min-width: 900px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .qa summary { font-size: 1.375rem; min-height: 64px; }
}

/* ---------- 404 ---------- */
.nf { padding-block: 48px 64px; }
.nf h1 { margin-bottom: 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9ccd1; font-size: .9375rem; }
.ft-grid { display: grid; gap: 24px; padding-block: 32px 24px; }
@media (min-width: 640px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (min-width: 960px) { .ft-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .65fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 32px; padding-block: 52px 36px; } .ft-brand { grid-column: auto; } .site-footer .ft-col ul { display: grid; } }
.site-footer .brand { color: #fff; margin-bottom: 12px; }
.ft-brand p { margin: 0 0 4px; }
.ft-cred { color: #fff; font-weight: 600; }
.ft-h { margin: 0 0 6px; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ft-col ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 20px; }
.ft-contact ul { display: grid; }
.ft-col .ft-hours { display: grid; max-width: 280px; }
.ft-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #e4e6e9; }
.ft-status { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-weight: 600; color: #fff; }
.ft-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; color: #e4e6e9; text-decoration: none; }
.ft-col a:hover { color: #fff; text-decoration: underline; }
.ft-col .ic { width: 18px; height: 18px; color: var(--red-bright); }
.ft-bottom { padding-block: 16px 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; line-height: 1.5; color: #a4a9b0; }
.ft-bottom p { margin: 0 0 6px; max-width: 110ch; }

/* Focus rings that show on the dark areas */
.hero :focus-visible, .page-head :focus-visible, .band :focus-visible, .site-footer :focus-visible, .notice :focus-visible { outline-color: #fff; }

/* ---------- Private pages (inbox, review) ---------- */
.private { background: var(--paper); min-height: 100vh; }
.private main { padding-block: 40px 80px; max-width: 980px; }
.private h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); margin-bottom: 10px; }
.lead-card, .call-card { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--red); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.call-card { border-left-color: var(--ink); }
.lead-card .call-card { margin-top: 14px; background: var(--paper); }
.lead-card h2, .call-card h2, .call-card h3 { font-size: 1.5rem; margin-bottom: 4px; }
.lead-meta { color: var(--muted); font-size: .9375rem; margin-bottom: 12px; }
.lead-card dl, .call-card dl { display: grid; gap: 4px 18px; margin: 0; }
@media (min-width: 640px) { .lead-card dl, .call-card dl { grid-template-columns: 200px minmax(0, 1fr); } }
.lead-card dt, .call-card dt { font-weight: 700; color: var(--muted); font-size: .9375rem; }
.lead-card dd, .call-card dd { margin: 0 0 6px; overflow-wrap: anywhere; white-space: pre-line; }
.lead-card details, .call-card details { margin-top: 10px; }
.lead-card summary, .call-card summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lead-card pre, .call-card pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9375rem; background: var(--paper); padding: 12px; border-radius: var(--radius); }
.review h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); margin: 40px 0 12px; }
.review ol, .review ul { padding-left: 1.3em; display: grid; gap: 10px; }
.review li { padding-left: 4px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.tag.real { background: #dff3e6; color: #11552b; }
.tag.sim { background: #fff1d6; color: #6b4500; }
.tag.no { background: var(--red-50); color: var(--red-dark); }

/* ---------- Reduced motion: no transitions at all ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Credential line (about page) ---------- */
.cred-inline { display: flex; align-items: center; gap: 10px; margin: 20px 0 28px; font-weight: 600; color: var(--ink-2); }
.cred-inline .ic { width: 22px; height: 22px; color: var(--red); }

/* ---------- Photo strips on inner pages ---------- */
.gallery-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faq-img { display: none; }
@media (min-width: 900px) { .faq-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 24px; border-radius: 6px; } }

/* ---------- Home: gallery photos open the viewer ---------- */
.gal-btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.gal-btn img { transition: transform .3s var(--ease); }
.gal-btn:hover img { transform: scale(1.03); }
.gal-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gal-btn:hover img { transform: none; } }
.lightbox {
  width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 10, 12, .96); color: #fff;
}
.lightbox[open] { display: flex; flex-direction: column; justify-content: center; }
.lightbox::backdrop { background: rgba(10, 10, 12, .8); }
.lb-close {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--radius); background: rgba(10, 10, 12, .6); color: #fff; font-weight: 700;
}
.lb-close .ic { width: 20px; height: 20px; }
.lb-fig { margin: 0; padding: 64px 12px 0; }
.lb-fig img { display: block; width: 100%; max-width: 1100px; max-height: 72dvh; height: auto; margin: 0 auto; object-fit: contain; border-radius: 4px; }
.lb-fig figcaption { max-width: 1100px; margin: 12px auto 0; font-weight: 700; font-size: 1.0625rem; }
.lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1124px; margin: 8px auto 0; padding: 0 12px max(16px, env(safe-area-inset-bottom)); }
.lb-note { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .7); text-align: center; }
.lb-step { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--radius); background: transparent; color: #fff; }
.lb-step:hover, .lb-close:hover { background: #fff; color: var(--ink); }
.lb-step .ic { width: 22px; height: 22px; }

/* ---------- Home: "Why Evergreen" with the about text ---------- */
.why-grid { display: grid; gap: 22px; }
.why-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.why-copy h2 { margin-bottom: 14px; }
.why-list { list-style: none; display: grid; gap: 12px; margin: 0 0 22px; }
.why-list li { display: flex; align-items: flex-start; gap: 12px; }
.why-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--red); color: #fff; }
.why-ic .ic { width: 19px; height: 19px; }
.why-list strong { display: block; font-size: 1rem; line-height: 1.3; }
.why-list span span, .why-list li > span:last-child { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.why-about { padding-top: 18px; border-top: 1px solid var(--line-2); }
.why-about h3 { margin-bottom: 6px; }
.why-about p { color: var(--ink-2); }
.why-contact { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; }
.why-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; font-weight: 600; color: var(--ink); text-decoration: none; }
.why-contact a .ic { color: var(--red); }
.why-contact a:hover { color: var(--red); text-decoration: underline; }
@media (min-width: 700px) { .why-list { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }
@media (min-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .why-media img { aspect-ratio: 4 / 5; }
}

/* ---------- Evergreen additions ---------- */
.site-footer .brand { color: #fff; }
.site-footer .brand .wm-bot { fill: #ff8a8f; }
.sec-sub { margin: 8px 0 0; color: var(--muted); font-size: 1rem; }
.g-rating { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: inherit; text-decoration: none; font-weight: 600; }
.g-rating:hover { text-decoration: underline; color: inherit; }
.g-rating .stars, .rev-stars { color: #f5b301; letter-spacing: 1px; }
.hero-rating { color: #fff; }
.ft-plain { display: inline-flex; align-items: center; gap: 10px; }
@media (min-width: 1000px) { .svc-cards-6 { grid-template-columns: repeat(3, 1fr) !important; } }
.visit-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.visit-copy h2 { margin: 0 0 12px; }
.visit-copy .lead { margin: 0 0 20px; font-size: 1.125rem; }
.visit-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.visit-steps li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 16px 18px; }
.visit-steps strong { display: block; font-family: var(--font-display); font-size: 1.125rem; margin-bottom: 2px; }
.vs-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; }
.partners { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
.partners li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; height: 64px; display: grid; place-items: center; }
.partners img { max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .rev-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rev-list { grid-template-columns: repeat(4, 1fr); } }
.rev { background: var(--paper); border-radius: var(--radius); padding: 18px; border-top: 4px solid var(--red); }
.rev-stars { margin: 0 0 8px; }
.rev blockquote { margin: 0; }
.rev blockquote p { margin: 0; font-size: 1rem; line-height: 1.5; }
.rev-by { margin: 10px 0 0; font-size: .875rem; color: var(--muted); font-weight: 600; }

/* ---------- Oct 7 v2: services, projects strip, form details, follow-up, swipe bar ---------- */
.svc-overview .sec-head .sec-sub { max-width: 70ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.svc-perks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--red-50); color: var(--red-dark); font-weight: 700; font-size: .875rem; }
.svc-perks .ic { width: 15px; height: 15px; }
.svc-hook { margin: -2px 0 8px; font-weight: 700; color: var(--red); font-size: .9688rem; line-height: 1.35; }
.svc-card .svc-more { display: inline-flex; margin-top: 2px; font-size: .9375rem; }
@media (min-width: 700px) { .svc-card .svc-more { margin-top: auto; } }

/* projects: one row you swipe (phones) or scroll with the arrows (laptops) */
.strip-wrap { position: relative; }
.gallery.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
}
.gallery.strip::-webkit-scrollbar { display: none; }
.gallery.strip li { scroll-snap-align: start; }
@media (min-width: 700px) { .gallery.strip { grid-auto-columns: calc((100% - 3 * 12px) / 3.3); gap: 12px; } }
@media (min-width: 1000px) { .gallery.strip { grid-auto-columns: calc((100% - 3 * 12px) / 4); margin: 0; padding: 0; } }
.strip-nav { display: none; }
@media (min-width: 1000px) {
  .strip-nav {
    display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px;
    border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45); cursor: pointer;
  }
  .strip-prev { left: -22px; } .strip-next { right: -22px; }
  .strip-nav .ic { width: 20px; height: 20px; }
}
.reviews { padding-top: 8px; }

/* quote form screen 2: one block per service */
.step-hint { margin: -4px 0 14px; }
.details { display: grid; gap: 14px; }
.dblock { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.dhead { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 10px; font: 800 1.1875rem/1.2 var(--font-display); }
.dhead img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; }
.dhead-text { margin-bottom: 4px; }
.dnote { margin: 0; color: var(--muted); font-size: .9375rem; }
.dq { margin: 8px 0 8px; font-weight: 700; font-size: .9375rem; }
.seg-need { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg-need .seg-opt span { min-height: 46px; font-size: .9375rem; }
@media (min-width: 560px) { .seg-need { grid-template-columns: repeat(4, minmax(0, 1fr)); } .seg-need .seg-opt span::before { display: none; } .seg-need .seg-opt span { justify-content: center; text-align: center; padding-inline: 6px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font-size: .9063rem; font-weight: 600; line-height: 1.25; }
.chip input:checked + span { border-color: var(--red); background: var(--red-50); color: var(--red-dark); box-shadow: inset 0 0 0 1px var(--red); }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip-quote span { border-style: dashed; }
.dblock.bad { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }

/* screen 3: when */
.when { display: grid; gap: 10px; }
@media (min-width: 560px) { .when { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.when .seg-opt > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 14px; }
.when .seg-opt > span::before { grid-row: 1 / span 2; }
.when b { display: block; }
.when small { display: block; color: var(--muted); font-weight: 500; font-size: .875rem; margin-top: 2px; }

/* last screen: confirmation call */
.follow { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.follow-t { padding: 0; margin: 0 0 10px; font: 800 1.25rem/1.2 var(--font-display); }
.fcard { position: relative; display: block; }
.fcard input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fcard-in { display: block; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; }
.fcard input:checked + .fcard-in { border-color: var(--red); background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red); }
.fcard input:focus-visible + .fcard-in { outline: 3px solid var(--focus); outline-offset: 2px; }
.fcard-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: 12px; }
.fcard-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--paper); color: var(--ink-2); }
.fcard input:checked + .fcard-in .fcard-ic { background: var(--red); color: #fff; }
.fcard-ic .ic { width: 20px; height: 20px; }
.fcard strong { font: 800 1.0625rem/1.25 var(--font-display); }
.fcard-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--field); background: #fff; }
.fcard input:checked + .fcard-in .fcard-dot { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 4px #fff; }
.fcard-help { display: block; margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }

/* phones: pop-ups have a grey bar on top and close with a swipe down (form.js setupSwipe) */
@media (max-width: 759px) {
  .sheet-bar { position: relative; padding-top: 18px; touch-action: none; cursor: grab; }
  .sheet-bar::before { content: ""; position: absolute; left: 50%; top: 7px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #c9ced6; }
}
.dblock > .dhead { float: left; width: 100%; }
.dblock > .dhead + * { clear: both; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip span { width: 100%; border-radius: 10px; padding: 8px 10px; font-size: .875rem; }
.chip-quote { grid-column: 1 / -1; }

/* Phones (v3): the six service cards are a tidy 2-column grid, photo on top, name + hook line.
   The ticks and "See the details" live in the pop-up the card opens. */
@media (max-width: 699px) {
  .svc-cards.svc-cards-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .svc-cards-6 .svc-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 10px; }
  .svc-cards-6 .svc-card-media { min-height: 0; aspect-ratio: 1 / 1; }
  .svc-cards-6 .svc-card-body { padding: 10px 12px 12px; }
  .svc-cards-6 .svc-card h3 { font-size: 1.125rem; margin-bottom: 4px; }
  .svc-cards-6 .svc-hook { margin: 0; font-size: .875rem; line-height: 1.3; }
  .svc-cards-6 .ticks, .svc-cards-6 .svc-more { display: none; }
}

/* Reviews (Oct 7): one row you swipe on phones and tablets, like the projects; four across on laptops */
@media (max-width: 1099px) {
  .rev-list {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .rev-list::-webkit-scrollbar { display: none; }
  .rev { scroll-snap-align: start; display: flex; flex-direction: column; }
  .rev-by { margin-top: auto; padding-top: 10px; }
}
@media (min-width: 700px) and (max-width: 1099px) { .rev-list { grid-auto-columns: calc((100% - 24px) / 2.4); } }
/* Phones: the Why Evergreen photo repeats the first project photo and loaded late as an empty
   grey block under the reviews, so it's left out; the section starts with its heading. */
@media (max-width: 899px) { .why-media { display: none; } .why { padding-top: 28px; } }

/* Header on phones (Oct 7): the number itself is the call button; the menu is an icon button. */
.header-call { white-space: nowrap; padding-inline: 10px; }
.header-call .num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
@media (max-width: 999px) {
  .menu-btn { padding-inline: 10px; min-width: 44px; }
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-in { gap: 8px; }
  .header-actions { gap: 6px; }
}
@media (max-width: 389px) {
  .brand svg { height: 36px; }
  .header-call { padding-inline: 8px; gap: 5px; font-size: .875rem; }
  .header-call .ic { width: 17px; height: 17px; }
}

/* Hero buttons (Oct 7): two smaller buttons side by side on every screen */
.hero-actions { flex-wrap: nowrap; gap: 10px; }
.hero-actions .btn { flex: 1 1 0; min-height: 46px; padding-inline: 14px; font-size: 1rem; white-space: nowrap; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; min-width: 170px; } }
@media (max-width: 359px) { .hero-actions .btn { font-size: .875rem; padding-inline: 8px; } }

/* "One team. Every upgrade." (Oct 7): bigger, wide and heavy instead of the condensed headings; the
   only thing that peeks under the first section. */
.svc-big { font-family: var(--font-display); font-stretch: 118%; font-weight: 900; font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; text-transform: none; margin: 0; }
.svc-overview .sec-head { margin-bottom: 16px; }

/* Hero (Oct 8): headline, then the services line, then where they work */
.hero-pill-under { margin: 14px 0 10px; }
.hero-area { display: flex; align-items: center; gap: 8px; }
.hero-area .ic { flex: none; width: 18px; height: 18px; color: var(--red-bright); }
.hero-area strong { color: #fff; }

/* FAQ link by the rating (Oct 8) and the FAQ page */
.hero-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.hero-faq { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(255,255,255,.5); }
.hero-faq .ic { width: 16px; height: 16px; }
.hero-faq:hover { color: var(--red-bright); }
.hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.faq-page { max-width: 820px; }
.faq-cta { margin-top: 28px; padding: 20px; border-radius: 10px; background: var(--paper); }
.faq-cta p { margin: 0 0 14px; font-weight: 600; }
@media (min-width: 700px) { .hero-facts { max-width: 560px; } }

/* Why Evergreen photo (Oct 8): the before/after collage keeps its own near-square shape (the old
   4:5 crop made both houses look squeezed), with Before / After labels on each half. */
.why-media { position: relative; align-self: start; }
.why-media img, .why-media img[width] { aspect-ratio: 1290 / 1273 !important; height: auto; object-fit: cover; }
.why-media::before, .why-media::after {
  position: absolute; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px;
  background: rgba(17, 18, 20, .78); color: #fff; font: 700 .8125rem/1.4 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
}
.why-media::before { content: "Before"; left: 12px; }
.why-media::after { content: "After"; left: calc(50% + 12px); }

/* Header tucks away while scrolling down and slides back on scroll up (site.js) */
.site-header { transition: transform .28s var(--ease), box-shadow .28s var(--ease); will-change: transform; }
.site-header.is-tucked { transform: translateY(calc(-100% - 2px)); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* ---------- Privacy policy + footer credit ---------- */
.legal { max-width: 72ch; }
.legal h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.legal ul { padding-left: 1.2em; margin: 0 0 12px; }
.legal li { margin: 4px 0; }
.ft-bottom a { color: inherit; }
/* Quiet maker credit: small and low-contrast so it never competes with the business. */
.ft-made { font-size: .6875rem; opacity: .85; margin-top: 4px; }
.ft-made a { text-decoration: none; }
.ft-made a:hover { text-decoration: underline; opacity: 1; }

/* ---------- Phones: a taller first screen (Benjamin, Oct 9) ----------
   A bit more room between lines, but the tops of the next section's photos still peek in
   at the bottom of the first screen: header (~64) + hero + "One team" heading (~120) leaves
   a sliver of photo inside 100svh. */
@media (max-width: 759px) {
  .hero { display: flex; flex-direction: column; min-height: calc(100svh - 210px); }
  .hero-in { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 30px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-pill { margin-bottom: 14px; }
  .hero-sub { margin-bottom: 22px; }
  .hero-status { margin-top: 16px; }
  .hero-facts { margin-top: 16px; }
}