/* ==========================================================================
   Web Roofers
   Hand written CSS. No framework, no build step.
   Order: tokens, reset, typography, layout, waves, buttons, cards, stickers,
   logo, navigation, hero, sections, components, pages, motion, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens. Everything the site draws with is defined here and nowhere else.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces. The page is White; light bands alternate White and Grey. */
  --white: #FFFFFF;        /* page background and the 1st, 3rd, 5th content bands */
  --grey: #F1F1EE;         /* the alternating light bands, the tab track, customer bubbles */
  --black: #111111;        /* all text on light bands, the AI panel, the final CTA, the footer */
  --black-2: #1F1F1F;      /* cards inside the black bands */

  --muted: #5C5C5C;        /* secondary text on light bands */
  --line: #E3E3DE;         /* hairlines and card borders */

  /* Lime carries every primary action and every mark. Never body text. */
  --lime: #C2EC40;

  /* On the black bands */
  --on-black: #FFFFFF;
  --muted-on-black: rgba(255, 255, 255, 0.7);
  --line-on-black: rgba(255, 255, 255, 0.14);
  --outline-on-black: rgba(255, 255, 255, 0.5);

  /* One family for everything. */
  --font: "IBM Plex Sans", system-ui, sans-serif;

  /* Spacing, on an 8px scale */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 56px;
  --s-8: 64px;

  --section-y: 88px;
  --container: 1280px;   /* 1152px of content inside 64px of side padding */
  --gutter: 64px;
  --gap: 32px;
  --card-pad: 32px;

  /* The lane each side of the final call to action that the floating stickers live in. */
  --sticker-lane: 76px;

  /* Shape. Nothing has a shadow except the phone and the nav pill. */
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-tile: 16px;
  --radius-field: 12px;
  --radius-pill: 999px;

  /* The floating pill */
  --nav-h: 64px;
  --nav-top: 24px;
  --nav-inset: 64px;

  --btn-h: 48px;
  --btn-h-lg: 56px;

  --wave-h: 80px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { max-width: 100%; }

img {
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--lime); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--lime);
  color: var(--black);
  font-weight: 600;
  border-radius: 0 0 var(--radius-field) 0;
}

.skip-link:focus { left: 0; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Typography. Oversized and tight at the top of the scale.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  margin: 0;
}

h1 {
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.hero h1 { font-size: 84px; }

h2 {
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.04em;
}

h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* The eyebrow: plain sentence case text in Black. No line, no pill, no dot. */
.eyebrow {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  margin: 0 0 var(--s-2);
}

.section--dark .eyebrow,
.page-header--dark .eyebrow { color: var(--on-black); }

/* A sticker and its eyebrow on one line, used at the top of section heads. */
.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-2);
}

.eyebrow-row .eyebrow { margin: 0; }

.lead {
  font-size: 19px;
  line-height: 1.5;
  max-width: 62ch;
}

.small { font-size: 15px; }
.caption { font-size: 13px; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }

/* A black band. */
.section--dark {
  background: var(--black);
  color: var(--on-black);
}

/* A light band. White by default, Grey with the modifier. */
.section--light {
  background: var(--white);
  color: var(--black);
}

.section--grey { background: var(--grey); }

/* Two bands of the same colour are separated by a rule, never a tint. */
.section--dark + .section--dark { border-top: 1px solid var(--line-on-black); }
.section--light + .section--light { border-top: 1px solid var(--line); }

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-6);
}

.section__head h2 { margin-bottom: var(--s-2); }

.section__head .lead {
  color: var(--muted);
  margin: 0;
}

.section--dark .section__head .lead { color: var(--muted-on-black); }

.h2--48 { font-size: 48px; }

/* A second block inside one section, held apart by a full rule. */
.block-break {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}

.section--dark .block-break { border-top-color: var(--line-on-black); }

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__head--center .eyebrow-row { justify-content: center; }

.grid { display: grid; gap: var(--gap); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The two column splits: 5 and 7, 7 and 5, or 4 and 8. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap) var(--s-8);
  align-items: start;
}

.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

.split .section__head { margin-bottom: 0; }

/* Sections inside one page body, separated by a hairline. */
.stack > * + * {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.section--dark .stack > * + * { border-top-color: var(--line-on-black); }

/* --------------------------------------------------------------------------
   5. Wave dividers. One inline SVG between two differently coloured bands.
   -------------------------------------------------------------------------- */
.wave {
  display: block;
  font-size: 0;
  line-height: 0;
  /* A one pixel bleed so no hairline seam shows between the two fills. */
  margin-bottom: -1px;
}

.wave svg {
  display: block;
  width: 100%;
  height: var(--wave-h);
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

/* Every primary button is Lime with Black text, on every band. */
.btn--primary {
  background: var(--lime);
  color: var(--black);
}

/* The arrow inside a primary button slides 4px on hover. */
.btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.btn--primary:hover .btn__arrow { transform: translateX(4px); }

/* A 1px outline at 30 percent of the current text colour. */
.btn--outline {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(17, 17, 17, 0.3);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* On a black band the secondary button is a white outline at 50 percent. */
.section--dark .btn--outline,
.page-header--dark .btn--outline {
  border-color: var(--outline-on-black);
  color: var(--on-black);
}

.btn--lg {
  height: var(--btn-h-lg);
  padding: 0 32px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.btn-row--center { justify-content: center; }

/* Text link: 17px semibold with a right arrow that moves 4px on hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 17px;
  font-weight: 600;
  color: var(--black);
}

.section--dark .link { color: var(--lime); }

/* Hover is Black with an underline, and Lime with one on the black bands. */
.link:hover {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section--dark .link:hover,
.footer .link:hover { color: var(--lime); }

.link svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.15s ease;
}

.link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Cards. Radius 20. White with a Line border on light bands,
      Black-2 with a white hairline on black ones. No shadow.
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  color: var(--black);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.card p { color: var(--muted); }

.card--dark {
  background: var(--black-2);
  border: 1px solid var(--line-on-black);
  color: var(--on-black);
}

.card--dark p { color: var(--muted-on-black); }

.card--prose { max-width: 800px; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 32px;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   8. Stickers. A round disc carrying one Lucide icon in Black.
   -------------------------------------------------------------------------- */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  transition: transform 0.2s ease;
}

.sticker--white {
  background: var(--white);
  border: 2px solid var(--black);
}

.sticker--sm { width: 44px; height: 44px; }
.sticker--lg { width: 60px; height: 60px; }

.sticker .icon,
.section--dark .sticker .icon {
  width: 26px;
  height: 26px;
  color: var(--black);
}

.sticker--sm .icon { width: 22px; height: 22px; }

.sticker:hover { transform: translateY(-2px); }

/* One nod the first time a sticker comes into view. */
@keyframes nod {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-6deg); }
  70% { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}

.sticker.is-nodding { animation: nod 0.6s ease-in-out 1; }

/* --------------------------------------------------------------------------
   9. Icons and marks
   -------------------------------------------------------------------------- */
.icon {
  width: 28px;
  height: 28px;
  flex: none;
  stroke-width: 1.75;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--black);
}

.section--dark .icon { color: var(--lime); }
.card .icon { color: var(--black); }
.card--dark .icon { color: var(--lime); }

.icon--sm { width: 24px; height: 24px; }

/* Stars, inside the phone only. */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--black);
}

.stars svg {
  width: 13px;
  height: 13px;
  display: block;
}

.stars--lg svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   10. Outlined numerals. Black stroke on light bands, Lime on black ones.
   -------------------------------------------------------------------------- */
.numeral {
  display: block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--black);
}

.numeral--lime { -webkit-text-stroke-color: var(--lime); }

/* Where the stroke is not available the numeral renders solid, same colour. */
@supports not (-webkit-text-stroke: 1.5px currentColor) {
  .numeral { color: var(--black); }
  .numeral--lime { color: var(--lime); }
}

/* --------------------------------------------------------------------------
   11. Logo tiles. White with a Line border, radius 16, never stretched.
   -------------------------------------------------------------------------- */
.tiles { display: grid; gap: var(--s-2); }

.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  overflow: hidden;
}

.tile img {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* When a logo could not be obtained, the name renders in its place. */
.tile__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--black);
}

.tile--customer {
  height: 96px;
  border-radius: var(--radius-tile);
}

.tile--customer img {
  max-height: 56px;
  max-width: 80%;
}

.tile--customer .tile__text { font-size: 22px; }

.group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.section--dark .group-label { color: var(--muted-on-black); }

.logo-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s-5);
}

.section--dark .logo-note { color: var(--muted-on-black); }

.logo-cta { margin-top: var(--s-3); }

.tile-group + .tile-group { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   12. The integrations marquee. Two rows, opposite directions, 40px a second.
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; }

.marquee + .marquee { margin-top: var(--s-5); }

.marquee__viewport {
  overflow: hidden;
  /* The rows fade out into the band at both ends. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

.marquee__track {
  display: flex;
  gap: var(--s-2);
  width: max-content;
  animation: marquee 40s linear infinite;
}

/* Half the track is an exact copy of the first half, so the loop is seamless.
   The shift is half the width plus half a gap, or a gap would open at the wrap. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--s-1))); }
}

.marquee__track--reverse { animation-direction: reverse; }

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track .tile {
  width: 184px;
  flex: none;
  height: 88px;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.marquee__track .tile img { max-height: 30px; }

.tile__group {
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Brand lockup: the WR mark, then the "WebRoofers" wordmark, as two
       separate images side by side.

       Each image is given a height and nothing else. Width stays auto and
       object-fit stays contain, so the browser derives the width from the file
       and neither piece can ever be stretched. Both files are cropped tight
       and saved at 3x by tools/build_assets.py, so they stay sharp.
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo__mark,
.logo__word {
  display: block;
  width: auto;
  object-fit: contain;
  flex: none;
}

.logo__mark { height: 40px; }

/* The wordmark is artwork, so it carries its own two colours on any light band. */
.logo__word { height: 22px; }

/* --------------------------------------------------------------------------
   14. The floating pill navigation. Six items, always on a light pill.
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-inset);
  right: var(--nav-inset);
  z-index: 100;
  height: var(--nav-h);
  padding: 0 8px 0 9px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(17, 17, 17, 0.08);
  color: var(--black);
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* Centred on the pill itself, not on the space left between brand and button. */
.navbar__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__cta { margin-left: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--black);
  cursor: pointer;
}

.nav__link:hover {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav__link--active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.navbar__cta {
  height: 46px;
  padding: 0 22px;
  font-size: 16px;
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  /* Clears the floating pill, which stays on top and carries the lockup, and
     lines the links up with the pill's own left edge. */
  padding: calc(var(--nav-top) + var(--nav-h) + var(--s-3)) calc(var(--nav-inset) + 9px) var(--s-8);
  background: var(--white);
  color: var(--black);
  overflow-y: auto;
}

.mobile-menu__link {
  display: block;
  padding: var(--s-2) 0;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.mobile-menu__link:hover {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobile-menu__cta { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   15. Hero. The team photo is the full-bleed background; the copy sits on a
       frosted white panel over it and the stats on their own white pill.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--black);
  color: var(--black);
  /* 150px clears the floating pill; the foot leaves 64px of photo showing
     above the wave that runs the band into the White section below. */
  padding: 150px 0 calc(64px + var(--wave-h));
  overflow: hidden;
}

/* The photo itself. Centred horizontally, 70 percent down, so the WR sign and
   the team stay in frame however the viewport is shaped. */
.hero > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

/* A dark wash over the photo so the white panel and pill read as bright cards.
   It sits on the photo, under the container and the wave. */
.hero > picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0.40) 55%, rgba(17, 17, 17, 0.60) 100%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero__inner {
  position: relative;
  text-align: center;
}

/* The frosted panel. Everything the visitor reads sits on it, in Black. */
.hero__panel {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 56px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
}

.hero h1 {
  margin: 0 0 var(--s-3);
}

.hero .eyebrow { color: var(--black); }

.hero .lead {
  color: var(--black);
  margin: 0 auto var(--s-5);
  max-width: 720px;
}

/* The hand drawn underline under "Gutter Companies": a Lime highlighter mark. */
.ul-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ul-mark__line {
  position: absolute;
  left: -1%;
  bottom: -0.14em;
  width: 102%;
  height: 0.20em;
  color: var(--lime);
  opacity: 0.9;
  overflow: visible;
}

/* The doodle arrow pointing at the Book a call button. */
.hero__cta {
  position: relative;
  display: inline-flex;
}

.doodle-arrow {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  width: 104px;
  height: 64px;
  margin-top: -46px;
  color: var(--black);
  pointer-events: none;
}

.doodle-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The rotating circular badge, hanging half over the panel's top right corner. */
.hero__badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--black);
  display: grid;
  place-items: center;
}

.hero__badge__ring {
  position: absolute;
  inset: 0;
  width: 120px;
  height: 120px;
  animation: spin 24s linear infinite;
}

.hero__badge text {
  fill: var(--lime);
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.055em;
}

.hero__badge__arrow {
  position: relative;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* The stats strip: its own white pill under the panel. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 800px;
  margin: var(--s-4) auto 0;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
}

.stat {
  padding: 0 var(--s-3);
  border-left: 1px solid var(--line);
}

.stat:first-child { border-left: 0; }

.stat__figure {
  position: relative;
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 4px;
}

.stat__label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

/* The hand drawn circle around the "3 days" figure. */
.circle-mark {
  position: absolute;
  left: -17%;
  top: -42%;
  width: 134%;
  height: 190%;
  color: var(--black);
  pointer-events: none;
  overflow: visible;
}

.circle-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* The photo runs into the White band below on the same curve as every band. */
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
}

.hero__wave svg {
  display: block;
  width: 100%;
  height: var(--wave-h);
}

/* --------------------------------------------------------------------------
   15b. The five floating stickers, in the lanes each side of the final
        call to action. Decoration only, dropped below 1024px.
   -------------------------------------------------------------------------- */
.closing > .closing__stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sticker-float {
  position: absolute;
  pointer-events: auto;
}

.sticker-float--1 { left: 3%; top: 72px; }
.sticker-float--2 { right: 3%; top: 112px; }
.sticker-float--3 { left: 7%; top: 248px; }
.sticker-float--4 { right: 7%; top: 222px; }
.sticker-float--5 { left: 4%; bottom: 96px; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-8px) rotate(calc(var(--tilt, 0deg) * -1)); }
}

.sticker-float .sticker {
  animation: bob var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}

.sticker-float .sticker:hover { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   16. Numbered rows, the problem section
   -------------------------------------------------------------------------- */
.numrow {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}

.section--dark .numrow { border-top-color: var(--line-on-black); }

.numrow .numeral { font-size: 56px; }

.numrow h3 { margin-bottom: var(--s-1); }

.numrow p { margin: 0; }

.numrow p:not(.numeral) { color: var(--muted); }

.section--dark .numrow p:not(.numeral) { color: var(--muted-on-black); }

.note-line {
  margin-top: var(--s-4);
  font-size: 17px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. Service rows on the home page
   -------------------------------------------------------------------------- */
.srv {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--gap);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.section--dark .srv { border-top-color: var(--line-on-black); }

.srv__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s-2);
}

.srv__title h3 { margin: 0; }

.srv p { margin: 0; }

.srv p:not(.price-line) { color: var(--muted); }

.section--dark .srv p:not(.price-line) { color: var(--muted-on-black); }

.srv__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.price-line {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* The one included and bundle line, under the last service row. */
.care-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--gap);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.section--dark .care-row { border-top-color: var(--line-on-black); }

.care-row p {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
}

.section--dark .care-row p { color: var(--muted-on-black); }

/* --------------------------------------------------------------------------
   18. Process. Four columns, a hairline above each, no connecting line.
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.process__item {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.section--dark .process__item { border-top-color: var(--line-on-black); }

.process__item .numeral {
  font-size: 88px;
  margin-bottom: var(--s-2);
}

.process__item h3 { margin-bottom: var(--s-1); }

.process__item p { margin: 0; }

.process__item p:not(.numeral) { color: var(--muted); }

.section--dark .process__item p:not(.numeral) { color: var(--muted-on-black); }

/* --------------------------------------------------------------------------
   19. AI automations: the three follow-up flow cards on the home page
   -------------------------------------------------------------------------- */
.acards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.acard {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.acard h3 { margin: 0; }

.acard__sub {
  font-size: 15px;
  color: var(--muted);
  margin: 6px 0 0;
}

.acard__steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.acard__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}

/* A 28px Lime circle with a Black number. The last one inverts. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.step-num--last {
  background: var(--black);
  color: var(--lime);
}

.acard__foot {
  margin-top: auto;
  padding: var(--s-2);
  background: var(--grey);
  border-radius: var(--radius-field);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.acard__foot p { color: inherit; margin: 0; }

/* --------------------------------------------------------------------------
   20. The flow diagrams on the AI automations page. HTML and CSS, no images.
   -------------------------------------------------------------------------- */
.flows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

.flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.flow__head { margin-bottom: var(--s-3); }

.flow__head h3 { font-size: 24px; }

.flow__head p {
  font-size: 15px;
  color: var(--muted);
  margin: 6px 0 0;
}

.flow__box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  font-size: 14px;
  line-height: 1.45;
}

.flow__box .step-num {
  width: 24px;
  height: 24px;
  font-size: 13px;
  margin-top: 1px;
}

/* The short vertical connector between two boxes. */
.flow__link {
  width: 2px;
  height: 18px;
  margin: 0 auto;
  background: var(--black);
}

/* Hangs flush under the step it annotates, so the connector column is unbroken. */
.flow__note {
  margin: 0 0 0 34px;
  padding: 10px 12px;
  background: var(--grey);
  border-left: 2px solid var(--lime);
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* The decision diamond: a square turned 45 degrees with level text inside. */
.flow__decision {
  position: relative;
  width: 100%;
  height: 168px;
  display: grid;
  place-items: center;
}

.flow__decision::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 119px;
  height: 119px;
  margin: -59.5px 0 0 -59.5px;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: 8px;
  transform: rotate(45deg);
}

.flow__decision span {
  position: relative;
  max-width: 120px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

/* The fork under the diamond: one horizontal line with a drop at each end,
   landing exactly on the centre of each branch column. */
.flow__fork {
  height: 22px;
  margin: 0 calc(25% - 5px);
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
  border-right: 2px solid var(--black);
}

.flow__branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}

.flow__branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flow__branch .flow__end {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow__branch-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.flow__branch .flow__link { height: 14px; }

.flow__end {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.flow__end--yes {
  background: var(--lime);
  color: var(--black);
  font-weight: 600;
}

.flow__end--no {
  background: var(--grey);
  color: var(--black);
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   21. Lists: ticks and bullets
   -------------------------------------------------------------------------- */

.section--dark .checks > li > svg { stroke: var(--lime); }

.ticks {
  display: grid;
  gap: var(--s-2);
}

.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A "not included" list. Muted, with a dash rather than a tick. */
.ticks--excluded { color: var(--muted); }
.section--dark .ticks--excluded { color: var(--muted-on-black); }

.ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ticks svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--black);
}

.section--dark .ticks svg { stroke: var(--lime); }
.card .ticks svg { stroke: var(--black); }
.card--dark .ticks svg { stroke: var(--lime); }

.ticks--excluded svg { stroke: currentColor; }

.bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--muted);
}

.section--dark .bullets { color: var(--muted-on-black); }
.card .bullets { color: var(--muted); }

.bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
}

.bullets svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--black);
}

.section--dark .bullets svg { stroke: var(--lime); }
.card .bullets svg { stroke: var(--black); }

.card--dark .bullets { color: var(--muted-on-black); }

.card--dark .bullets svg { stroke: var(--lime); }

/* --------------------------------------------------------------------------
   22. Why Web Roofers. Four columns with a hairline above each, no cards.
   -------------------------------------------------------------------------- */
.why__item {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.section--dark .why__item { border-top-color: var(--line-on-black); }

.why__title { margin: var(--s-2) 0 var(--s-1); }

.why__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--s-2) 0 var(--s-1);
}

.why__head .why__title { margin: 0; font-size: 24px; }

.why__text {
  margin: 0;
  color: var(--muted);
}

.section--dark .why__text { color: var(--muted-on-black); }

.quote__company {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

.card--dark .quote__company { color: var(--muted-on-black); }

/* --------------------------------------------------------------------------
   23. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }

.section--dark .faq { border-top-color: var(--line-on-black); }

.faq__item { border-bottom: 1px solid var(--line); }

.section--dark .faq__item { border-bottom-color: var(--line-on-black); }

.faq__heading { margin: 0; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: inherit;
  cursor: pointer;
}

.faq__chev {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.section--dark .faq__chev { stroke: var(--lime); }

.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }

.faq__a {
  padding: 0 0 var(--s-3);
  max-width: 70ch;
}

.faq__a p {
  color: var(--muted);
  margin: 0;
}

.section--dark .faq__a p { color: var(--muted-on-black); }

/* --------------------------------------------------------------------------
   24. Page header on inner pages
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--white);
  color: var(--black);
  padding: 140px 0 var(--section-y);
}

.page-header h1 {
  max-width: 18ch;
  margin-bottom: var(--s-3);
}

.page-header .lead {
  color: var(--muted);
  margin-bottom: var(--s-5);
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  margin-bottom: var(--s-5);
}

.page-header__meta .delivery {
  font-size: 17px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   25. Pricing page cards
   -------------------------------------------------------------------------- */
/* The headline figure takes the card's own text colour, not the muted body colour. */
.card .price-card__price { color: inherit; }

.price-card__price {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.price-card__per {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price-card__price small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 6px;
}

/* The three plan cards are identical: White, a Line border, Black text,
   Lime check marks and an outline button. Nothing is singled out. */
.price-card .bullets svg { stroke: var(--lime); }

.included-card { margin-top: var(--gap); }

/* --------------------------------------------------------------------------
   26. Plan tables. The same three columns a machine reads: the plan, the
       monthly price and what is included. Narrow screens scroll the table
       inside its own container, never the page.
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
}

.table-wrap:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.plan-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}

.plan-table th,
.plan-table td {
  padding: 16px var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
}

.plan-table thead th {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: 0; }

.plan-table tbody th {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.plan-table__price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.plan-table__price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.plan-table td { color: var(--muted); }

/* --------------------------------------------------------------------------
   27. The "In short" box. Three facts at the end of a page, each written so it
       can be lifted and quoted on its own.
   -------------------------------------------------------------------------- */
.in-short {
  border: 2px solid var(--black);
  border-radius: var(--radius-card);
  background: var(--white);
  padding: var(--card-pad);
}

.in-short__title {
  display: inline-block;
  background: var(--lime);
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin: 0 0 var(--s-3);
}

.in-short__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.in-short__list li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.5;
}

.in-short__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
}

/* --------------------------------------------------------------------------
   28. The address block, wherever the entity data appears, and the plain
       inline link used inside running copy.
   -------------------------------------------------------------------------- */
.address-lines {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: var(--s-2);
}

.link-inline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-inline:hover { color: var(--black); }

/* --------------------------------------------------------------------------
   29. Final call to action, on Black, over the gable W texture.
   -------------------------------------------------------------------------- */
.closing { text-align: center; }

.closing__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.closing h2 {
  font-size: 64px;
  max-width: 20ch;
  margin: 0;
}

.closing .lead {
  color: var(--muted-on-black);
  margin: 0 auto var(--s-5);
}

.closing .card {
  max-width: 640px;
  margin: var(--s-8) auto 0;
  text-align: left;
}

/* A faint repeating gable W, Lime at 5 percent, on a 120px tile. */
.pattern-w {
  position: relative;
}

.pattern-w::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cpath%20d%3D%27M18%2078%20L38%2042%20L58%2078%20L78%2042%20L98%2078%27%20fill%3D%27none%27%20stroke%3D%27%23C2EC40%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.05%27%2F%3E%3C%2Fsvg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
}

.pattern-w > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   30. Footer
   -------------------------------------------------------------------------- */
/* Nothing in the footer is clipped: no overflow rule, no negative margin, and
   40px of padding under the last line. */
.footer {
  background: var(--black);
  color: var(--on-black);
  padding: var(--section-y) 0 40px;
}

/* The full dark-background logo, above the company sentence. */
.footer__logo {
  width: 240px;
  height: auto;
  margin-bottom: var(--s-3);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: var(--gap);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-on-black);
}

.footer__blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-on-black);
  max-width: 44ch;
}

.footer__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-on-black);
  margin-bottom: var(--s-2);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__phone {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-black);
  margin-bottom: 6px;
}

.footer__email {
  display: block;
  font-size: 15px;
  color: var(--muted-on-black);
  margin-bottom: var(--s-2);
}

.footer__phone:hover,
.footer__email:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-on-black);
  margin-top: var(--s-2);
}

.footer__updated {
  font-size: 14px;
  color: var(--muted-on-black);
  margin: 0;
}

.footer__bottom {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--s-8);
  margin-top: var(--s-5);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  font-size: 13px;
  color: var(--muted-on-black);
  text-align: right;
  margin: 0;
}

.footer__legal a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   31. Forms. White fields with a Line border.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   30a. The contact page: two cards of equal height side by side.
   -------------------------------------------------------------------------- */
.contact-calendar { margin-bottom: var(--gap); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--black);
}

.contact-card__title {
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
}

/* "Or reach us directly", pinned under the three steps. */
.contact-card__direct {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.contact-card__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.contact-phone {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 6px;
}

.contact-email {
  display: block;
  font-size: 17px;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-phone:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-card__who {
  margin: var(--s-2) 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* The button and its note sit on the foot of the form card, so the two
   cards keep the same height whatever the form does. */
.contact-card__foot { margin-top: auto; }

.contact-card .field:last-of-type { margin-bottom: 0; }

.field { margin-bottom: var(--s-3); }

.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--s-1);
}

.field__hint {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px var(--s-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  font-size: 17px;
  color: var(--black);
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--black);
  outline: 2px solid var(--black);
  outline-offset: 0;
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #B3261E;
}

.form-summary:not(:empty) {
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  border: 1px solid #B3261E;
  border-radius: var(--radius-field);
  color: #B3261E;
  font-size: 15px;
}

.form-summary ul { list-style: disc; padding-left: 20px; }

.form-note {
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--muted);
}

.form-note a { text-decoration: underline; }

.turnstile { margin-bottom: var(--s-3); }

/* Honeypot: off screen, never seen, never focused. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.calendar-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}

.calendar-embed iframe {
  display: block;
  width: 100%;
  min-height: 680px;
  border: 0;
}

/* --------------------------------------------------------------------------
   30b. About: the "Who you'll talk to" card, and the team photo.
   -------------------------------------------------------------------------- */
.intro-card {
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
  padding: 40px;
}

.intro-card__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  flex: none;
}

.intro-card__logo {
  width: 200px;
  height: auto;
}

.intro-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.intro-card__body h2 {
  font-size: 40px;
  margin-bottom: var(--s-2);
}

.intro-card__body p { margin-bottom: var(--s-3); }

.intro-card .contact-email { color: var(--black); }

.team-photo {
  width: 100%;
  height: auto;
  margin-top: var(--gap);
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   32. Prose, for the privacy and terms pages
   -------------------------------------------------------------------------- */
.prose { max-width: 70ch; }

.prose h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: var(--s-6) 0 var(--s-2);
}

.prose h2:first-child { margin-top: 0; }

.prose p,
.prose li { color: var(--muted); }

.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.prose a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   33. Motion. Small, slow, and all of it off under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hero--animate .hero__inner { animation: rise 0.4s ease both; }

/* The arrow doodle draws itself once, after the hero has faded up. */
.doodle-arrow path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: draw 0.9s ease 0.45s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Anything drawn or revealed by an animation must still end up visible. */
  .doodle-arrow path { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   34. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --sticker-lane: 96px; }

  .sticker-float .sticker { width: 52px; height: 52px; }
  .sticker-float .sticker .icon { width: 24px; height: 24px; }
}

/* The lockup is wider than the old typed wordmark, so the pill folds into the
   burger a little earlier than it used to. */
@media (max-width: 1260px) {
  .navbar__nav,
  .navbar__cta { display: none; }

  .burger { display: flex; }
}

@media (max-width: 1100px) {
  :root { --gutter: 32px; --nav-inset: 32px; }

  .tiles--8 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 1024 the floating stickers go; the two in the heading row stay, and
   the contact cards stack. */
@media (max-width: 1023px) {
  :root { --sticker-lane: 0px; }

  .closing__stickers { display: none; }

  .doodle-arrow { display: none; }

  .contact-grid { grid-template-columns: 1fr; }

  .hero__panel { padding: 40px; }

  .intro-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }

  .intro-card__brand { flex-direction: row; align-items: center; }
}

@media (max-width: 960px) {
  h1 { font-size: 56px; }
  .hero h1 { font-size: 64px; }
  h2 { font-size: 44px; }
  .h2--48 { font-size: 40px; }
  .closing h2 { font-size: 48px; }

  .split,
  .split--7-5,
  .split--4-8 { grid-template-columns: 1fr; }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process,
  .process--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .acards,
  .flows { grid-template-columns: 1fr; }

  .srv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .srv__buy { grid-column: 1 / -1; }

  .ticks--2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root {
    --section-y: 64px;
    --gap: 24px;
    --card-pad: 24px;
    --gutter: 20px;
    --nav-inset: 16px;
    --wave-h: 48px;
  }

  h1 { font-size: 40px; }

  /* "Gutter Companies" stays on one line under its highlighter mark, so the
     headline is sized to the panel's content width rather than set outright.
     34px at 390, scaling down on a narrower phone. */
  .hero h1 { font-size: clamp(26px, 8.7vw, 34px); max-width: none; }
  h2 { font-size: 34px; }
  .closing h2 { font-size: 34px; }
  h3 { font-size: 22px; }
  .lead { font-size: 17px; }
  .h2--48 { font-size: 34px; }
  .faq__q { font-size: 18px; }
  .price-card__price { font-size: 34px; }

  .hero {
    min-height: 0;
    padding: 120px 0 calc(40px + var(--wave-h));
  }

  .hero__panel { padding: var(--s-4) 20px; }

  /* Half over the panel's top edge, and clear of the viewport's right edge. */
  .hero__badge {
    width: 84px;
    height: 84px;
    right: 12px;
    transform: translate(0, -50%);
  }

  .hero__badge__ring { width: 84px; height: 84px; }
  .hero__badge__arrow { width: 20px; height: 20px; }

  /* The lockup takes most of the pill, so the pill's own gap comes down. */
  .navbar { gap: var(--s-2); }

  .contact-card { padding: var(--s-4) var(--s-3); }
  .contact-card__title { font-size: 26px; }

  .page-header { padding-top: 120px; }

  .closing__head { flex-wrap: wrap; gap: var(--s-2); }

  .grid--2,
  .grid--3,
  .grid--4,
  .process,
  .process--3 { grid-template-columns: 1fr; }

  .srv { grid-template-columns: 1fr; }
  .srv__buy { grid-column: 1; }

  /* Stacked, so the pill becomes a rounded box rather than a lozenge. */
  .stats {
    grid-template-columns: 1fr;
    padding: var(--s-2) var(--s-3);
    border-radius: 28px;
  }

  .stat {
    padding: var(--s-2) 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .stat:first-child { border-top: 0; }

  .tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .numrow {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }

  .footer__top { grid-template-columns: 1fr; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }

  .footer__legal {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Under 480px the pill has no room for both pieces, so the wordmark drops and
   the mark carries the brand on its own. The mark keeps its own aspect ratio. */
@media (max-width: 479px) {
  .logo__word { display: none; }

  /* The table keeps its full measure and scrolls inside its own container, so the
     third column still reads properly once it is swiped into view. */
  .plan-table th,
  .plan-table td { padding: 14px var(--s-2); }

  .in-short { padding: var(--s-3); }
}

@media (max-width: 389px) {
  :root { --nav-inset: 12px; }

  .navbar { gap: var(--s-1); }

  .logo__mark { height: 34px; }

  .burger { width: 40px; height: 40px; }

}