/* ==========================================================================
   TRUE CLEAN
   One stylesheet, no framework, no CDN. The only thing the page waits on is
   one 42 kB font that lives on this server, which is the single biggest
   thing you can do for a site people open on a phone on mobile data.

   Colour rules come from DESIGN.md and are not a matter of taste:
   --teal is a FILL. It measures 2.33:1 on white, so it never becomes a
   letterform. Teal type uses --teal-txt on white, --teal-deep on the cream
   and stone bands where --teal-txt drops to 3.9:1.
   ========================================================================== */

/* Latin only. Roboto ships as one variable file, so 400 through 800 all come
   out of these 42 kB and no other weight file is needed. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink:       #15211F;   /* body copy, headings, the form panel */
  --ink-2:     #3E4A48;   /* secondary text */
  --paper:     #FFFFFF;
  --cream:     #EFEDE7;   /* the hero ground and the alternating bands */
  --stone:     #DEDBD4;   /* the darkest neutral, under the proof */
  --teal:      #00BDBD;   /* the logo. FILLS ONLY, never type */
  --teal-txt:  #008484;   /* 4.53:1 on white */
  --teal-deep: #006E6E;   /* 5.2:1 on cream and stone */
  --line:      #D3D0C8;
  --wa:        #25D366;
  --alert:     #C4342B;   /* water damage only */

  --wrap: 1180px;
  --sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 26px; }
.wrap--narrow { max-width: 760px; }

h1, h2, h3 { font-family: var(--sans); }
h1 { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 18px; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.018em; margin: 0 0 14px; }
h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.35; letter-spacing: -.012em; margin: 28px 0 8px; }
p  { margin: 0 0 16px; }
a  { color: var(--teal-txt); }
a:hover { color: #005F5F; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--teal-txt); outline-offset: 2px; }

/* ---------- brand marks: three teal squares, always three, never rotated -- */

.mk { display: flex; gap: 6px; margin: 0 0 16px; }
.mk i { width: 12px; height: 12px; display: block; background: var(--teal); }

/* ---------- header: stays light, because the logo has no knockout version -- */

.hdr { border-bottom: 1px solid var(--line); background: var(--paper); position: relative; z-index: 5; }
.hdr__in { display: flex; align-items: center; gap: 26px; padding-top: 15px; padding-bottom: 15px; }
.hdr__logo { margin-right: auto; display: block; line-height: 0; }
.hdr__logo img { display: block; width: 186px; height: auto; }
.hdr__nav { display: flex; gap: 21px; font-size: 15px; }
.hdr__nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.hdr__nav a:hover { color: var(--teal-txt); }
.hdr__tel { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hdr__tel:hover { color: var(--teal-txt); }

/* The menu button. Never shown above the breakpoint, because the nav is
   already laid out across the header there. 44px square is the tap target;
   the bars inside it are smaller than that on purpose. */
.hdr__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.hdr__burger__box { display: block; position: relative; width: 22px; height: 16px; }
.hdr__burger__box i {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: top .18s ease, transform .18s ease, opacity .18s ease;
}
.hdr__burger__box i:nth-child(1) { top: 0; }
.hdr__burger__box i:nth-child(2) { top: 7px; }
.hdr__burger__box i:nth-child(3) { top: 14px; }
.hdr__burger[aria-expanded="true"] .hdr__burger__box i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__burger__box i:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] .hdr__burger__box i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hdr__burger__box i { transition: none; }
}

/* ---------- hero ---------- */

.hero { position: relative; background: var(--cream); overflow: hidden; }

/* the photograph, and the cream that lets the headline sit on top of it */
.hero__pic { position: absolute; inset: 0; }
.hero__pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
}
/* Nearly solid cream under the whole text column, because the bakkie carries
   its own signwriting there and two lots of type in the same place reads as
   neither. It clears from 62% on, which is the canopy and the grass. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    var(--cream) 0%,
    var(--cream) 30%,
    rgba(239,237,231,.93) 44%,
    rgba(239,237,231,.62) 56%,
    rgba(239,237,231,.18) 70%,
    rgba(239,237,231,0) 82%);
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px;
  align-items: center; min-height: 820px; padding-top: 56px; padding-bottom: 62px;
}
.hero--contact .hero__grid { min-height: 0; align-items: start; }
.hero__lede { max-width: 38ch; color: var(--ink-2); }
.hero__lede a { color: var(--teal-deep); }
.hero__tag { font-weight: 700; color: var(--teal-deep); margin: 22px 0 0; }
.hero__second {
  display: flex; gap: 26px; align-items: center; margin-top: 24px;
  font-size: 15px; flex-wrap: wrap;
}
.hero__second a {
  font-weight: 600; text-decoration: none; color: var(--teal-deep);
  border-bottom: 1.5px solid var(--line); padding-bottom: 2px;
}
.hero__second a:hover { border-bottom-color: var(--teal-deep); }

/* ---------- the booking panel ----------
   Ink, not teal. White type on the bright teal measures 2.3:1 and the panel
   is the one dark element the cream hero needs. The teal is the rule on top
   of it, where it is a fill and does its job. */

.form {
  background: var(--ink); color: var(--paper);
  border-top: 4px solid var(--teal); border-radius: 3px;
  padding: 26px 24px 24px;
}
.form h2 { font-size: 1.42rem; margin: 0 0 5px; color: #fff; }
.form__sub { margin: 0 0 19px; font-size: 14.5px; color: rgba(255,255,255,.82); }

.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 11.5px; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid transparent; border-radius: 3px; padding: 11px 12px; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2315211F' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 11px; padding-right: 34px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 1px; }
.field.is-missing input, .field.is-missing select, .field.is-missing textarea {
  border-color: #FFC9C2; box-shadow: 0 0 0 2px rgba(255,201,194,.5);
}

/* WhatsApp or email, inside the booking panel. Real radios, moved off screen
   rather than removed, so the group still works from the keyboard and reads
   correctly to a screen reader. The chip is the sibling span. */
.how { border: 0; padding: 0; margin: 0 0 13px; }
.how legend {
  padding: 0; font-size: 11.5px; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 6px;
}
.how__opt { display: inline-block; margin-right: 8px; cursor: pointer; }
.how__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.how__opt span {
  display: inline-block; padding: 11px 16px; border-radius: 3px;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.85);
  font-size: 14.5px; font-weight: 600; transition: background .15s ease;
}
.how__opt:hover span { background: rgba(255,255,255,.16); }
.how__opt input:checked + span { background: var(--teal); color: #04302F; }
.how__opt input:focus-visible + span {
  outline: 3px solid rgba(255,255,255,.9); outline-offset: 1px;
}

.preview {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17);
  border-radius: 3px; padding: 11px 13px; margin: 3px 0 15px;
}
.preview__cap {
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 6px;
}
.preview__msg { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.96); }
/* the greyed placeholders still have to clear 4.5:1 against the preview box */
.preview__msg em { font-style: normal; color: rgba(255,255,255,.6); }

.btn-wa {
  width: 100%; font: inherit; font-size: 16px; font-weight: 700;
  color: #04302F; background: var(--wa); border: 0; border-radius: 3px;
  padding: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: filter .15s ease;
}
.btn-wa--link { width: auto; text-decoration: none; padding: 14px 22px; }
/* Same button, teal instead of WhatsApp green, for the email route. Teal is a
   fill here and the label on it is ink, which is how --teal is allowed to be
   used. */
.btn-wa--mail { background: var(--teal); }
.btn-wa:hover { filter: brightness(.94); }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; }

.field textarea {
  font: inherit; font-size: 15.5px; line-height: 1.45; resize: vertical; min-height: 96px;
}

/* The honeypot. Off screen rather than display:none, because a bot that
   checks for display:none will skip it and fill it in anyway. Nobody using a
   keyboard or a screen reader reaches it: tabindex is -1 and the wrapper is
   aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The price-change note under each table. Quieter than body copy, because it
   is a condition rather than something to read first. */
.pricenote { font-size: 14.5px; color: var(--ink-2); margin-top: 20px; }

.form__note { font-size: 12.5px; color: rgba(255,255,255,.7); margin: 12px 0 0; }
.form__or {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.17);
  font-size: 14px; color: rgba(255,255,255,.85);
}
.form__or a, .fallback a { color: #fff; font-weight: 700; }

.urgent { display: none; background: var(--alert); border-radius: 3px; padding: 14px 15px; margin-top: 3px; }
.form.is-urgent .urgent { display: block; }
.form.is-urgent .preview,
.form.is-urgent .btn-wa,
.form.is-urgent .form__note,
.form.is-urgent .fallback,
.form.is-urgent .form__or { display: none; }
.urgent p { margin: 0 0 10px; font-size: 14.5px; color: #fff; }
.urgent a {
  display: inline-block; background: #fff; color: var(--alert); font-weight: 700;
  text-decoration: none; padding: 10px 16px; border-radius: 3px;
}

.fallback { display: none; margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.85); }
.form.is-sent .fallback { display: block; }

/* ---------- before and after ---------- */

.ba {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 3px; background: #CFCBC3; user-select: none; touch-action: pan-y;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ba__tag {
  position: absolute; top: 14px; font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; background: rgba(21,33,31,.82);
  color: #fff; padding: 7px 10px; border-radius: 2px; pointer-events: none;
}
.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #fff; transform: translateX(-1px); cursor: ew-resize; touch-action: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--teal);
  display: flex; gap: 4px; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.ba__knob i { width: 5px; height: 16px; background: #04302F; display: block; }
.ba__handle:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.ba__cap { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- services, one hairline list ---------- */

.svclist { border-top: 1px solid var(--line); margin-top: 22px; }
.svclist a {
  display: grid; grid-template-columns: .9fr 2fr; gap: 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.svclist a:hover { background: rgba(0,189,189,.06); color: var(--ink); }
.svclist strong { font-weight: 800; font-size: 1.12rem; }
.svclist p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------- full bleed photograph, never behind type ---------- */

.band { display: block; width: 100%; height: 480px; object-fit: cover; }
.band--short { height: 320px; }

/* ---------- sections ---------- */

.lede { padding: 46px 0 8px; }
.lede h2 { margin-top: 26px; }
.lede__first { font-size: 1.12rem; color: var(--ink-2); }
.lede p { max-width: 62ch; }

.sec { padding: 52px 0; }
/* Two plain sections in a row would otherwise stack 52px on 52px, so the
   second one drops its top padding. Only between two PLAIN sections: after a
   tinted, stone or ink band the background changes and the padding is what
   stops the next heading sitting on the seam. */
.sec:not(.sec--tint):not(.sec--stone):not(.sec--close)
  + .sec:not(.sec--tint):not(.sec--stone):not(.sec--close) { padding-top: 0; }
.sec--tint { background: var(--cream); }
.sec--stone { background: var(--stone); }
.sec--tint a, .sec--stone a { color: var(--teal-deep); }
.sec--close { background: var(--ink); color: rgba(255,255,255,.85); }
.sec--close h2 { color: #fff; }
.sec--close a { color: #fff; }
/* the buttons keep their own label colour: white on the bright teal or on the
   WhatsApp green is 2.3:1 and 1.9:1, and neither is readable */
.sec--close .btn-wa--link,
.sec--close .btn-teal { color: #04302F; }
.sec--close-alert .close__or { color: rgba(255,255,255,.8); }
.close__or { margin-top: 16px; font-size: 15px; }
.sec__lead { max-width: 58ch; color: var(--ink-2); }
.sec__tail { margin-top: 22px; max-width: 70ch; color: var(--ink-2); font-size: 15px; }

.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; margin-top: 26px; }
.step__num { display: flex; gap: 5px; margin: 0 0 10px; font-size: 0; }
.step__num i { width: 9px; height: 9px; display: block; background: var(--teal); }
.step__num i.off { background: var(--line); }
.step h3 { margin: 0 0 7px; font-weight: 700; font-size: 1.08rem; }
.step p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* list markers are the squares, not bullets */
.marks { list-style: none; margin: 0 0 16px; padding: 0; max-width: 62ch; }
.marks li { position: relative; padding: 0 0 10px 22px; }
.marks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--teal);
}

/* ---------- prices ---------- */

.tablewrap { overflow-x: auto; margin: 22px 0 18px; }
table.prices { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
table.prices caption {
  text-align: left; font-weight: 700; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px;
}
table.prices th, table.prices td {
  text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line);
  font-weight: 400;
}
table.prices thead th {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--ink); font-weight: 700; border-bottom: 0;
}
table.prices tbody th { font-weight: 500; }
table.prices td { text-align: right; white-space: nowrap; }
table.prices thead th + th { text-align: right; }
table.prices tbody tr:last-child th, table.prices tbody tr:last-child td { border-bottom: 0; }
table.prices tbody tr:nth-child(even) { background: rgba(0,189,189,.05); }
.sec--tint table.prices tbody tr:nth-child(even) { background: rgba(255,255,255,.55); }
.tbd { color: var(--ink-2); font-style: italic; }

.jump { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 34px; }
.jump .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; padding-bottom: 14px; }
.jump a { font-size: 14px; font-weight: 600; text-decoration: none; }
.jump a:hover { text-decoration: underline; }

.arrow {
  display: inline-block; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--line); padding-bottom: 2px;
}
.arrow:hover { border-bottom-color: currentColor; }

.btn-teal {
  display: inline-block; text-decoration: none; background: var(--teal); color: #04302F;
  font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 3px;
}
.btn-teal:hover { filter: brightness(.93); color: #04302F; }

/* ---------- water damage, the only page allowed the red ---------- */

.lede--alert { border-top: 4px solid var(--alert); }
.alertbar { margin-top: 22px; }
.alertbar a {
  display: inline-block; background: var(--alert); color: #fff; font-weight: 700;
  text-decoration: none; padding: 13px 22px; border-radius: 3px;
}
.btn-alert {
  display: inline-block; background: var(--alert); color: #fff; font-weight: 700;
  text-decoration: none; padding: 14px 24px; border-radius: 3px; font-size: 16px;
}
.sec--close .btn-alert { color: #fff; }

/* ---------- areas ---------- */

h3.sub {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin: 26px 0 10px;
}
.arealist { columns: 4; column-gap: 28px; font-size: 14.5px; margin: 0; padding: 0; list-style: none; }
.arealist li { break-inside: avoid; padding: 2px 0; color: var(--ink-2); }
.arealist--wide { columns: 3; }

/* ---------- footer ---------- */

.ftr { background: var(--ink); color: rgba(255,255,255,.78); padding: 46px 0 34px; font-size: 15px; }
.ftr a { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.ftr h3 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { padding: 3px 0; }
.ftr .rule { height: 4px; width: 54px; background: var(--teal); margin-bottom: 15px; }
.ftr__name { color: #fff; font-weight: 700; letter-spacing: .04em; font-size: 16px; display: block; margin-bottom: 6px; }
.ftr__base {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: 13.5px; color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
}

/* ---------- floating whatsapp ---------- */

.tc-wa { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.tc-wa__btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform .18s ease; flex: 0 0 auto;
}
.tc-wa__btn:hover, .tc-wa__btn:focus-visible { transform: scale(1.06); }
.tc-wa__btn svg { width: 32px; height: 32px; fill: #fff; display: block; }
.tc-wa__label {
  position: relative; background: #fff; color: var(--ink); font-size: 14px; line-height: 1;
  padding: 11px 32px 11px 14px; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.2);
  white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.tc-wa__label::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
  background: #fff; transform: translateY(-50%) rotate(45deg);
}
.tc-wa.is-open .tc-wa__label { opacity: 1; transform: translateX(0); pointer-events: auto; }
.tc-wa__close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; background: none; color: #6d6d6d;
  font-size: 17px; line-height: 1; cursor: pointer; border-radius: 4px; z-index: 1;
}
.tc-wa__close:hover { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* The nav stops being a row and becomes a panel the button drops down. */
  .hdr__nav { display: none; }
  .hdr__burger:not([hidden]) { display: inline-flex; }
  .hdr.is-open .hdr__nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0 0 6px; box-shadow: 0 12px 24px rgba(21, 33, 31, .09);
  }
  .hdr.is-open .hdr__nav a {
    padding: 14px 26px; border-top: 1px solid var(--line); font-size: 16px;
  }
  .hdr.is-open .hdr__nav a:first-child { border-top: 0; }
  .hdr__in { gap: 14px; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; padding-bottom: 38px; gap: 30px; }
  .hero__pic { position: relative; inset: auto; height: 250px; }
  .hero__pic img { object-position: 58% 50%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(239,237,231,0) 55%, var(--cream) 100%); }
  .svclist a { grid-template-columns: 1fr; gap: 4px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .arealist { columns: 3; }
  .arealist--wide { columns: 2; }
  .band { height: 300px; }
  .band--short { height: 220px; }
}

@media (max-width: 860px) {
  /* the form comes up under the headline, before the rest of the reading */
  .hero__grid { gap: 0; }
  .hero__left { display: contents; }
  .hero .mk           { order: 1; }
  .hero h1            { order: 2; margin-bottom: 16px; }
  .hero__lede--first  { order: 3; margin-bottom: 24px; }
  .form               { order: 4; }
  .hero__lede--rest   { order: 5; margin-top: 26px; }
  .hero__tag          { order: 6; margin-top: 4px; }
  .hero__second       { order: 7; }
  .hero--contact .hero__lede { order: 3; }
  .ba { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 18px; }
  /* the logo gives up the width the menu button needs */
  .hdr__logo img { width: 158px; }
  .hdr.is-open .hdr__nav a { padding-inline: 18px; }
  .sec { padding: 40px 0; }
  .ftr__grid { grid-template-columns: 1fr; }
  /* On a phone the footer is a real navigation, not a legal strip, so its
     links need to be thumb-sized. They render 16px tall by default, which is
     below the 24px WCAG 2.2 asks for and well below what anyone can hit. */
  .ftr li { padding: 0; }
  .ftr a { display: inline-block; padding: 11px 0; line-height: 1.2; }
  .arealist, .arealist--wide { columns: 2; }
  .tc-wa { right: 14px; bottom: 14px; }
  .tc-wa__btn { width: 52px; height: 52px; }
  /* keeps the floating button off the footer links */
  .ftr { padding-bottom: 92px; }
  table.prices th, table.prices td { padding: 10px 8px; }
}