/* MAE Roofing & Guttering Specialists. The look is taken from his badge and
   nothing else: its charcoal, the green of its ring (#5bba20), the blue of
   its roof, and white. So the page is charcoal throughout, green is the
   colour of anything you can press, blue is only ever a roofline, and rings
   stand in for the badge's own ring (the step numbers, the ticks).
   There are no photographs: none of his jobs are held with permission, so
   every decoration here is drawn.
   Mobile first: it will mostly be read on a phone held in one hand. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.258a93fe.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-latin.04327e57.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --deep: #15171a;      /* behind the hero and the footer */
  --bg: #1b1e22;        /* the page */
  --panel: #24282d;     /* a band or a card lifted off the page */
  --panel-2: #2b2e33;   /* the badge's own charcoal */
  --line: #393e45;
  --text: #f2f4f5;
  --muted: #b4bbc3;
  --green: #5bba20;     /* the badge's ring */
  --green-hi: #6ed02c;
  --on-green: #0f1a07;  /* white on this green is too faint to read; near-black is not */
  --blue: #1790ff;      /* the badge's roof, lifted a shade so a thin line shows on charcoal */
  --link: #8fe052;
  --paper: #f3f5f6;     /* the quote form's card */
  --ink: #1d2024;
  --ink-muted: #555c65;
  --radius: 12px;
  --wrap: 1100px;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--deep); }
body {
  margin: 0;
  /* The footer's colour, so the strip left under it for the action bar
     matches; the page itself is coloured on main. */
  background: var(--deep);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  /* Room for the action bar, which is fixed to the bottom of a phone. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
main { background: var(--bg); }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: #fff; }
/* A link inside a sentence gets room above and below for a thumb (44px in
   all) without moving the lines apart: padding on inline text does not. */
main p a:not(.btn) { padding-block: 13px; }
/* Phone numbers in the heading face: bolder, and its zero has no slash. */
main p a[href^="tel:"] { font-family: var(--display); font-weight: 650; }
:focus-visible { outline: 3px solid var(--green-hi); outline-offset: 3px; border-radius: 4px; }

/* Headings are set narrow and in capitals, as the lettering on the badge is. */
h1, h2, h3 { font-family: var(--display); margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-stretch: 78%; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .005em; }
h1 { font-size: clamp(3rem, 15vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 7.4vw, 2.9rem); }
h3 { font-size: 1.16rem; font-weight: 700; font-stretch: 96%; line-height: 1.2; margin-bottom: .3em; }
p { margin: 0 0 1em; max-width: 62ch; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 720px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 6px;
}
.skip:focus { left: 8px; }

/* Shown on every page while "preview" is true in site.config.json. */
.preview-strip {
  margin: 0; max-width: none; padding: 5px 16px; text-align: center;
  background: #fff; color: var(--ink);
  font: 700 .8rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase;
}

/* Header: the badge and name on the left, the number always one tap away. */
.site-head { background: var(--deep); border-bottom: 1px solid var(--line); }
.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 52px; min-width: 0; }
.brand:hover { color: #fff; }
.brand picture { flex: none; }
.brand__name {
  font: 800 1.12rem/1.05 var(--display); font-stretch: 80%;
  text-transform: uppercase; letter-spacing: .02em;
}
.brand__name span {
  display: block; margin-top: 3px;
  font-size: .68rem; font-weight: 600; font-stretch: 90%; letter-spacing: .09em; color: var(--muted);
}
.head-call {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px;
  color: var(--on-green); background: var(--green); text-decoration: none;
  font: 750 1rem/1 var(--display); font-stretch: 92%; white-space: nowrap;
  padding: 0 14px; border-radius: 999px;
}
.head-call:hover { color: var(--on-green); background: var(--green-hi); }
/* On the narrowest phones the long name and the number cannot both fit, so
   the second line of the name gives way: the badge beside it says it anyway. */
@media (max-width: 389px) {
  .brand__name span { display: none; }
}
/* The smallest phones still in use (320px): everything in the header a
   touch smaller, so the name and the number do not touch. */
@media (max-width: 349px) {
  .brand { gap: 8px; }
  .brand img { width: 46px; height: 46px; }
  .head-call { font-size: .94rem; padding: 0 11px; gap: 6px; }
  .head-call svg { width: 16px; height: 16px; }
}

/* The small label with a green rule either side, as "SPECIALISTS" has in the badge. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 .8rem/1 var(--display); font-stretch: 100%;
  text-transform: uppercase; letter-spacing: .22em; color: var(--text);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 2px; background: var(--green); }

/* Hero. Roof tiles, drawn, faded almost to nothing behind the words. */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--deep);
  background-image:
    radial-gradient(90% 70% at 100% 0%, rgba(91, 186, 32, .13), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M0 0a22 22 0 0 0 44 0M-22 20a22 22 0 0 0 44 0M22 20a22 22 0 0 0 44 0' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  padding: 34px 0 0;
}
.hero__grid { display: grid; gap: 24px; }
.hero h1 { margin-bottom: .3em; }
/* His name as the badge draws it. Archivo is one file that can be set wide
   or narrow, so MAE is pushed to its widest and heaviest to stand in for
   the badge's lettering without loading a second font. The lines under it
   are sized in ems of MAE, by hand, so all three finish at the same right
   edge as they do in the badge, at any screen width. */
.lockup { display: inline-block; font-size: clamp(4.4rem, 28vw, 7.4rem); text-wrap: nowrap; }
.lockup > span { display: block; }
.lockup .lockup__mae { font-stretch: 125%; font-weight: 900; line-height: .86; letter-spacing: .01em; }
.lockup .lockup__trade {
  margin-top: .15em; font-size: .238em; font-weight: 800; font-stretch: 100%;
  line-height: 1.1; letter-spacing: .012em;
}
.lockup .lockup__spec {
  display: flex; align-items: center; gap: .7em; margin-top: .55em;
  font-size: .155em; font-weight: 700; font-stretch: 100%; line-height: 1; letter-spacing: .34em;
  color: var(--green);
}
.lockup__spec::before, .lockup__spec::after { content: ""; flex: 1; height: 2px; background: var(--green); }
.lockup .lockup__where {
  margin-top: 1.3em; font-size: .18em; font-weight: 600; font-stretch: 92%;
  line-height: 1.15; letter-spacing: .03em; color: var(--text);
}
.hero__lead { font-size: 1.14rem; margin-bottom: 1.3em; }
.hero__actions { display: grid; gap: 10px; margin-bottom: 20px; }
.hero__badge { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 999px;
  font: 750 1.1rem/1.1 var(--display); font-stretch: 94%;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .06s;
}
.btn:active { transform: scale(.98); }
.btn--go { background: var(--green); color: var(--on-green); }
.btn--go:hover { background: var(--green-hi); color: var(--on-green); }
.btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--line:hover { color: #fff; border-color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { background: #c9cfd4; color: #5d646c; cursor: not-allowed; transform: none; }

/* "Fully insured", "Free quotes": his own two phrases, each with a ticked ring. */
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ticks li {
  display: flex; align-items: center; gap: 9px;
  font: 650 1rem/1.2 var(--display); font-stretch: 96%;
}
.ticks li::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--green);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-8' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* The street of roofs along the foot of the hero. On a phone it is a slice
   of the middle at a fixed height; from 1008px (where that height is the
   drawing's natural one) it is shown whole and grows with the screen. */
.roofline { width: 100%; height: 84px; margin-top: 30px; }
.roofline__houses { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.roofline__roof { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.roofline__under { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
@media (min-width: 1008px) { .roofline { height: auto; aspect-ratio: 12 / 1; } }

@media (min-width: 620px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .hero { padding-top: 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; }
  .hero__badge {
    display: block; width: 264px; margin-right: 34px; border-radius: 50%;
    /* Two faint rings outside the badge's own, like ripples from it. */
    box-shadow: 0 0 0 16px rgba(91, 186, 32, .1), 0 0 0 34px rgba(91, 186, 32, .05);
  }
  .roofline { margin-top: 44px; }
}

/* Sections. Each heading sits under a small blue roof pitch. */
.band { padding: 52px 0; }
.band--panel { background: var(--panel); border-block: 1px solid var(--line); }
.band h2::before {
  content: ""; display: block; width: 46px; height: 17px; margin-bottom: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 17'%3E%3Cpath d='M2.5 14.5 23 3l20.5 11.5' stroke='%231790ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat;
}
.band__intro { color: var(--muted); font-size: 1.12rem; margin-bottom: 1.5em; }
@media (min-width: 900px) { .band { padding: 84px 0; } }

/* Services: a drawing on the left, the words on the right, one under another
   on a phone so each can be read with a thumb's scroll. */
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.service {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 4px 16px;
}
.service p { color: var(--muted); font-size: 1rem; }
.icon { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon .a { stroke: var(--blue); stroke-width: 3; }
.icon .f { fill: rgba(23, 144, 255, .22); }
@media (min-width: 700px) { .services { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1040px) { .services { grid-template-columns: repeat(3, 1fr); } }

.towns { list-style: none; padding: 0; margin: 0 0 1.3em; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li {
  border: 1px solid #4b515a; border-radius: 999px; padding: 8px 15px;
  font: 600 1rem/1.2 var(--display); font-stretch: 96%;
}
/* The first town is the one he is based in. */
.towns li:first-child { border-color: var(--green); color: #fff; box-shadow: inset 0 0 0 1px var(--green); }
.after-list { color: var(--muted); margin: 0; }
/* On a wide screen the words sit on the left and the towns, a size larger,
   on the right. Stacked as on a phone, the right half of the band was empty
   where a photo would normally go, and there are no photos. */
@media (min-width: 900px) {
  .band--panel .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: start; }
  .band--panel h2 { grid-area: 1 / 1; }
  .band--panel .band__intro { grid-area: 2 / 1; margin-bottom: 0; }
  .band--panel .towns { grid-area: 1 / 2 / 3 / 3; align-self: end; gap: 10px; margin-bottom: 0; }
  .band--panel .towns li { font-size: 1.12rem; padding: 10px 18px; }
  .band--panel .after-list { grid-area: 3 / 2; margin-top: 1.1em; }
}

/* How it works: numbered rings joined by a line, like a downpipe run. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 22px 64px; min-height: 68px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--green);
  display: grid; place-items: center; background: var(--bg);
  font: 800 1.3rem/1 var(--display); color: #fff;
}
.steps li::after {
  content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps p { color: var(--muted); margin-bottom: 0; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps li { padding: 64px 0 0; }
  .steps li::after { left: 46px; right: -28px; top: 22px; bottom: auto; width: auto; height: 2px; }
}

/* The one line about reviews, and the link to where they are. */
.reviews { background: var(--panel); border-block: 1px solid var(--line); padding: 26px 0; }
.reviews__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.reviews__row p { margin: 0; max-width: none; }
.reviews__star { width: 44px; height: 44px; }
.reviews__star circle { fill: none; stroke: var(--green); stroke-width: 3; }
.reviews__star path { fill: #fff; }
/* The link wraps like any other. Kept on one line it was wider than a 320px
   phone, and the whole page slid sideways. */

/* The quote form, on a light card: the one bright thing on the page, and
   fields a browser can fill in for you without turning them an odd colour.
   Big fields: this is filled in on a phone, often with one thumb. */
/* minmax(0, 1fr), not the default auto: a grid column otherwise grows to the
   file picker's natural width, which on a 375px phone pushed every field
   off the right-hand edge. */
.quote-form {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 20px;
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 20px 16px 18px;
  border-top: 6px solid var(--green);
}
.quote-form a { color: #245c06; }
.field { min-width: 0; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--ink-muted); }
.field input[type="text"], .field input[type="tel"], .field textarea {
  width: 100%; min-height: 54px; padding: 12px 14px;
  font: inherit; color: var(--ink); background: #fff;
  /* Dark enough to find the edge of a white box on a near-white card in
     sunlight (over 3:1 against both). A paler grey was not. */
  border: 1px solid #6f7780; border-radius: 10px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field textarea::placeholder { color: #6b727b; }
.field input.short { max-width: 220px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--green); outline-offset: 1px; border-color: #3d8a10; }
/* On the light card the green ring all but vanishes (under 2.3:1), so inside
   the form the ring that shows where you are is the card's own dark ink. */
.quote-form :focus-visible, .quote-form .field input:focus, .quote-form .field textarea:focus { outline-color: var(--ink); }
.field input[type="file"] { font: inherit; width: 100%; min-height: 48px; }
.field input[type="file"]::file-selector-button {
  min-height: 48px; padding: 0 18px; margin-right: 12px; cursor: pointer;
  font: 700 1rem/1 var(--display); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
}
/* The photos somebody has chosen, listed under the picker by js/site.js:
   a small picture, the file's name and a Remove button each. On a phone the
   name sits over its button, beside the picture: side by side at 320px the
   name was left about seven letters to a line. From 480px all three share
   one line. */
/* "hidden" is how the script puts these away, and a rule that sets display
   (the grid just below) would otherwise quietly bring them back. */
.quote-form [hidden] { display: none; }
.photo-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.photo {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  background: #fff; border: 1px solid #6f7780; border-radius: 10px; padding: 8px;
}
/* The frame is there before the picture is, and stays if the browser cannot
   draw that kind of photo (an iPhone's HEIC on a PC): a grey square with a
   drawn picture in it, not a hole in the row. */
.photo__thumb {
  grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
  background: #dfe3e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 5.5h17v13h-17zM3.5 15.5l5-5 4.5 4.5 2.5-2.5 5 5' stroke='%23555c65' stroke-width='1.6' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.5' fill='%23555c65'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.photo__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* A phone's own names are long ("IMG_20261003_143522.jpg") and have nowhere
   to break, so they may break anywhere, and stop at two lines. */
.photo__name {
  overflow-wrap: anywhere; font-size: .95rem; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Dressed as the picker's own "Choose files" button, so the two read as a
   pair. 44px is the smallest a thumb can be trusted to hit. */
.photo__remove, .photo-clear {
  min-height: 44px; padding: 0 18px; cursor: pointer;
  font: 700 1rem/1 var(--display); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
}
.photo__remove { justify-self: start; }
.photo-clear { margin-top: 10px; }
@media (hover: hover) {
  .photo__remove:hover, .photo-clear:hover { background: var(--ink); color: #fff; }
}
/* Switched off while the form is on its way (js/site.js, "lock"), in the
   Send button's own grey so all of them read as busy together. Before this
   they looked live and silently did nothing. After the hover rule on
   purpose: a mouse resting on one must not turn it dark again. */
.photo__remove[disabled], .photo-clear[disabled] { background: #c9cfd4; color: #5d646c; border-color: #c9cfd4; cursor: not-allowed; }
/* The picker cannot be switched off the same way: a switched-off field is
   left out of what the form sends, and the photos with it. The script
   refuses its press instead, and its button is greyed from the mark the
   script puts on the form while it sends. */
.quote-form[data-sending] .field input[type="file"]::file-selector-button { background: #c9cfd4; color: #5d646c; border-color: #c9cfd4; cursor: not-allowed; }
/* The bar fixed to the bottom of the screen on a phone or a narrow window
   (.action-bar, about 71px tall) covers whatever sits at the bottom edge,
   and the bottom edge is exactly where a browser puts a button reached with
   the Tab key. A Remove could be pressed with Enter while wholly hidden
   behind the bar. This tells the browser to stop that far short of the edge.
   136px and not the 84px that clears the bar by itself: Chrome stops exactly
   where it is told, but Firefox only moves the page once a control is nearly
   out of sight, and at 84px it left a third of a Remove and half of Send
   under the bar (measured in Firefox 157 at every height around the bar,
   3 October 2026). At 136px everything but the tall description box rests
   clear in both, ring included. Nothing to clear where the bar is not shown. */
.quote-form input, .quote-form textarea, .quote-form button, .quote-form a { scroll-margin-bottom: calc(136px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .quote-form input, .quote-form textarea, .quote-form button, .quote-form a { scroll-margin-bottom: 0; }
}
@media (min-width: 480px) {
  .photo { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .photo__thumb { grid-row: auto; }
}
/* Why a photo was not added. Bold ink behind a rule, not red: the page has
   no red, and this is advice, not an alarm. */
.photo-problem {
  margin: 10px 0 0; max-width: none; padding-left: 10px; border-left: 4px solid var(--ink);
  font-weight: 700; color: var(--ink); overflow-wrap: anywhere;
}
/* For words a screen reader should read and nobody should see (which photo
   a Remove button removes, and the news that the list has changed). Not
   display: none, which hides them from the screen reader as well. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.hint { color: var(--ink-muted); font-size: .95rem; margin: 6px 0 0; }
.form-note { margin: -6px 0 0; text-align: center; font-weight: 700; color: var(--ink); max-width: none; }
/* The box nobody is meant to fill (the receiver throws away any send that
   has it filled, as a bot's). Taken out of the page altogether, not moved off
   the side of it as it was until 2 October 2026: a browser filling in a saved
   address counts an off-screen box as one a person can see, and put the
   customer's company name in it, so their enquiry was thanked and binned. */
.field--trap { display: none; }
.or-call { font-size: 1.08rem; margin: 0; }
@media (min-width: 620px) { .quote-form { padding: 28px 28px 24px; } }

/* Long reading pages: the privacy notice. */
.prose h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
.prose h2 { font-size: 1.5rem; margin-top: 1.7em; }
.prose h2::before { display: none; }
.prose ul { padding-left: 1.2em; max-width: 62ch; }
.prose li { margin-bottom: .5em; }
.plain h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
/* Only while the quote form is switched off, on the thank-you page: it would
   otherwise tell whoever opens it that something was sent. */
.preview-note { border-left: 4px solid #fff; padding: 2px 0 2px 14px; margin-bottom: 1.6em; font-weight: 700; }

/* Footer. */
.site-foot { background: var(--deep); border-top: 1px solid var(--line); color: var(--muted); padding: 36px 0 30px; font-size: .98rem; }
.site-foot a { color: var(--text); display: inline-block; padding: 11px 0; min-height: 44px; }
.site-foot a:hover { color: #fff; }
.site-foot p { margin: 0 0 .3em; }
.site-foot__grid { display: grid; gap: 18px; }
.site-foot__name { font: 800 1.2rem/1.15 var(--display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.site-foot__phone { font: 750 1.25rem/1.1 var(--display); text-decoration: none; }
.site-foot__small { font-size: .9rem; }
@media (min-width: 800px) {
  .site-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .site-foot__end { text-align: right; }
}

/* The action bar: call or quote, always under a thumb on a phone. Gone on a
   desktop, where the header number and the hero buttons do it. */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--deep); border-top: 1px solid var(--line);
}
.action-bar__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px;
  border-radius: 999px; text-decoration: none; color: #fff;
  font: 750 1.05rem/1 var(--display); font-stretch: 94%;
  border: 2px solid rgba(255, 255, 255, .5);
}
.action-bar__btn:hover { color: #fff; }
.action-bar__btn--quote { background: var(--green); border-color: var(--green); color: var(--on-green); }
.action-bar__btn--quote:hover { color: var(--on-green); }
@media (min-width: 900px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}