/* ==========================================================================
   CMC Door Service — design system

   Light, high-contrast and photo-forward, which is what a local home-services
   company needs: the customer is usually mid-problem (door stuck, storm
   coming), often on a phone, and often not young. Clarity beats atmosphere.

   The cyan from the logo and the vans is kept as the brand and action colour;
   dark navy anchors the utility bar and footer. The bright cyan is deepened
   slightly (#12b5e5) so it holds its own against white — the original #37d2ff
   fails contrast as text on a light background.
   ========================================================================== */

:root {
  /* Brand */
  --brand: #12b5e5;          /* accents, fills, the logo cyan tuned for light */
  --brand-bright: #37d2ff;   /* highlights on dark only */
  --brand-deep: #0a6a8a;     /* links and text on light — AA at normal size */
  --brand-ink: #04222e;      /* text sitting on a cyan fill */
  --brand-wash: #e8f7fd;     /* tinted panels */

  /* Navy, straight off the logo. This is the colour the brand actually is, and
     it now carries every dark surface instead of a neutral near-black. */
  --navy: #043e67;
  --navy-deep: #032c4a;      /* the darker end of a navy gradient */
  --navy-soft: #0a5288;      /* hover and hairlines on navy */
  --navy-wash: #eaf1f7;      /* the tinted page band */
  --navy-wash-2: #dce8f2;    /* a second, deeper tint for sunk surfaces */

  /* Neutrals, biased toward the navy rather than a cold grey.
     The page canvas is a faint navy tint rather than pure white, so white
     cards, galleries and forms read as objects sitting on a surface instead of
     dissolving into it. Three band tones then give the page a rhythm:
     canvas -> --bg-alt (navy tint) -> --bg-wash (cyan tint), with solid navy
     for the sections that should stop you. */
  --bg: #f6fafc;
  --bg-alt: var(--navy-wash);
  --bg-wash: var(--brand-wash);
  --bg-sky: #e3f0fa;         /* the azure band that carries the scroll rhythm */
  --surface: #ffffff;
  --surface-sunk: var(--navy-wash-2);
  --line: #d6e2ec;
  --line-strong: #b6cade;

  /* Dark, used for the utility bar, footer and photo overlays */
  --dark: var(--navy);
  --dark-2: var(--navy-deep);
  --dark-line: #10527f;

  /* Text */
  --ink: #0d1b28;            /* a navy-biased near-black, not a neutral one */
  --ink-soft: #41525f;
  --ink-muted: #586a7b;   /* AA on the tinted band as well as on white */
  --ink-on-dark: #f2f6f9;
  --ink-on-dark-muted: #9dacb9;

  /* The action colour. Navy and cyan are the identity; this is the colour that
     means "press this". A mid azure sits between the two, so the palette stays
     one family, and it separates from the light page at 5.25:1 with a 5.51:1
     white label. It cannot separate from a navy band, which is why dark
     sections give their buttons a white fill instead. */
  --action: #0b6bb8;
  --action-deep: #095a9d;
  --action-ink: #ffffff;

  /* Support */
  --urgent: #b53010;         /* emergency only, never decorative. Deep enough
                                to clear AA as text on every light band. */
  --urgent-wash: #fdeeea;
  --star: #f5a623;
  --ok: #0f7a4a;

  /* Type */
  /* Two faces. Archivo is the voice, Figtree is the reading. */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Figtree", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.84rem, 0.81rem + 0.13vw, 0.92rem);
  --step-0: clamp(1.02rem, 0.98rem + 0.19vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.36vw, 1.44rem);
  --step-2: clamp(1.45rem, 1.31rem + 0.66vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.15vw, 2.6rem);
  --step-4: clamp(2.15rem, 1.7rem + 2.1vw, 3.5rem);

  /* Space */
  --gap-xs: 0.5rem;
  --gap-sm: 0.85rem;
  --gap: 1.25rem;
  --gap-lg: 2rem;
  --gap-xl: 3.25rem;
  --section-y: clamp(3.25rem, 2.2rem + 5vw, 5.75rem);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(14 22 32 / 0.06), 0 2px 8px -2px rgb(14 22 32 / 0.08);
  --shadow: 0 2px 4px rgb(14 22 32 / 0.06), 0 12px 28px -10px rgb(14 22 32 / 0.18);
  --shadow-lg: 0 4px 8px rgb(14 22 32 / 0.07), 0 24px 48px -16px rgb(14 22 32 / 0.25);

  --container: 1200px;
  --container-narrow: 760px;
}

/* --------------------------------------------------------------- base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-deep);
  text-decoration-color: color-mix(in srgb, var(--brand-deep) 40%, transparent);
  text-underline-offset: 3px;
}

a:hover { color: var(--ink); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Archivo's width axis. Headings run slightly expanded, which is what gives
     them the painted-on-the-truck weight that a default UI face never has. */
  font-stretch: 108%;
  margin: 0 0 var(--gap-sm);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.026em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.014em; font-weight: 800; }
h4 { font-size: var(--step-0); font-weight: 800; }

p { margin: 0 0 var(--gap); text-wrap: pretty; }

ul, ol { margin: 0 0 var(--gap); padding-left: 1.3rem; }
li { margin-bottom: 0.45rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; }

strong { font-weight: 700; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

/* ---------------------------------------------------------- structure --- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

.section--wash {
  background: var(--bg-wash);
  border-block: 1px solid #c9e8f5;
}

.section--dark {
  background: var(--dark);
  color: var(--ink-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: var(--ink-on-dark-muted); }

.section__head {
  max-width: 64ch;
  margin-bottom: var(--gap-lg);
}
.section__head > :last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: var(--gap-xs);
}
.section--dark .eyebrow { color: var(--brand-bright); }

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.6;
}

.muted { color: var(--ink-muted); }

.center { text-align: center; }
/* 27 templates write class="section__head center", so .center is ON the head
   rather than an ancestor of it. Written as a descendant selector these rules
   never matched: the text centred (that much is inherited) while the box, the
   rule under the heading and the eyebrow bar all stayed left, which read as a
   misalignment rather than a centred block. :is() matches both spellings. */
:is(.center .section__head, .section__head.center),
:is(.center .lede, .lede.center) { margin-inline: auto; }
.center .btn-row { justify-content: center; }

.stack > * + * { margin-top: var(--gap); }

/* ------------------------------------------------------------ buttons --- */

.btn {
  /* Azure fill, navy edge.

     Measured: the azure separates from the light canvas at 5.25:1 and carries
     a white label at 5.51:1, so on a pale section the fill alone already does
     the work, and the navy border sharpens the edge at 10.6:1. It cannot
     separate from a navy band — 2.02:1 — which is why the few dark bands left
     on the site swap their buttons to a white fill instead. What moves
     conversion is the button separating from whatever surrounds it. */
  --btn-bg: var(--action);
  --btn-fg: var(--action-ink);
  --btn-border: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.65rem;
  min-height: 50px;
  border: 2px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.005em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* The cyan button, for the second-choice action beside an azure primary. */
.btn--brand {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  --btn-border: var(--navy);
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--btn-bg) 80%, transparent);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
}
.btn--ghost:hover {
  --btn-border: var(--brand-deep);
  --btn-fg: var(--brand-deep);
  box-shadow: none;
}

.btn--dark {
  --btn-bg: var(--dark);
  --btn-fg: #fff;
  --btn-border: var(--dark);
}

.btn--urgent {
  --btn-bg: var(--urgent);
  --btn-fg: #fff;
  --btn-border: var(--urgent);
}

.section--dark .btn--ghost {
  --btn-fg: #fff;
  --btn-border: var(--dark-line);
}
.section--dark .btn--ghost:hover {
  --btn-fg: var(--brand-bright);
  --btn-border: var(--brand-bright);
}

.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-1); min-height: 58px; }
.btn--block { width: 100%; }

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

/* -------------------------------------------------------- utility bar --- */

.utility-bar {
  background: var(--dark);
  color: var(--ink-on-dark-muted);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--dark-line);
}

.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap);
  min-height: 40px;
  padding-block: 0.4rem;
}

.utility-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.utility-bar li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.utility-bar svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-bright);
}

.utility-bar a { color: var(--ink-on-dark); text-decoration: none; font-weight: 700; }
.utility-bar a:hover { color: var(--brand-bright); }

@media (max-width: 780px) {
  .utility-bar__inner { justify-content: center; }
  .utility-bar .u-hide-sm { display: none; }
}

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.brand img { width: 50px; height: 50px; border-radius: 10px; }

.brand span { font-size: 1.06rem; line-height: 1.12; }

.brand small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.site-nav { margin-left: auto; min-width: 0; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: inline-block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--ink);
  background: var(--surface-sunk);
}

.site-nav__link[aria-current="page"] {
  color: var(--brand-deep);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.has-sub { position: relative; }

.has-sub > .site-nav__link::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.submenu a:hover { background: var(--surface-sunk); color: var(--ink); }

.header-cta { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.header-phone {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.35rem;
  border-radius: var(--radius-sm);
  line-height: 1.14;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.06rem;
  white-space: nowrap;
}

.header-phone small {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.header-phone:hover { color: var(--brand-deep); background: var(--surface-sunk); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1180px) {
  .site-header__bar { gap: var(--gap-sm); min-height: 68px; }
  .nav-toggle { display: inline-flex; order: 3; flex-shrink: 0; }
  .header-cta { order: 2; margin-left: auto; min-width: 0; }
  .header-cta .btn { display: none; }
  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 0.98rem; }

  /* Anchored to the header, not the viewport: .site-header sets
     backdrop-filter, which makes it the containing block for fixed
     descendants, so position:fixed here would collapse to the header height. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    max-height: calc(100dvh - 68px);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--gap) 0 var(--gap-xl);
    display: none;
  }

  .site-nav[data-open="true"] { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
  }

  .site-nav__link {
    display: block;
    padding: 0.9rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .has-sub > .site-nav__link::after { display: none; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.25rem 0 0.6rem 0.9rem;
    background: var(--bg-alt);
  }
}

@media (max-width: 560px) {
  .brand small, .header-phone small { display: none; }
  .brand span { font-size: 0.92rem; }
}

@media (max-width: 420px) {
  .brand span { display: none; }
}

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

.hero {
  padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  background:
    radial-gradient(115% 95% at 88% -10%, var(--brand-wash) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-wash) 0%, var(--bg) 70%);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

.hero h1 { margin-bottom: var(--gap); }
.hero .lede { margin-bottom: var(--gap-lg); }

/* A mosaic of three real jobs: one large, two stacked beside it. */
.hero__media {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.6rem;
}

.hero__media figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunk);
  box-shadow: var(--shadow-lg);
}

.hero__media-main { grid-row: span 2; }
.hero__media-side { box-shadow: var(--shadow); }

.hero__media-main img { height: 100%; }
.hero__media-side img { aspect-ratio: 4 / 3; height: 100%; }

@media (max-width: 40rem) {
  /* On a phone the two side tiles become a strip under the main photo, which
     keeps all three visible without shrinking any of them to a thumbnail. */
  .hero__media { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .hero__media-main { grid-column: span 2; grid-row: auto; }
}

.hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hero__media-main img { aspect-ratio: 16 / 11; }

/* A small proof pill on the main hero photo. It used to stretch the full width
   of the frame and wrap onto three lines, which put a white slab across the
   middle of the house. It now hugs its own text along the bottom edge. */
.hero__badge {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 0.8rem;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.hero__badge .stars { color: var(--star); }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-lg);
  list-style: none;
  margin: var(--gap-lg) 0 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 700;
}

.hero__points li { display: flex; align-items: center; gap: 0.45rem; margin: 0; }

.hero__points li::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center / 76% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center / 76% no-repeat;
}

/* interior page hero */
.page-hero {
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  background:
    radial-gradient(110% 80% at 90% 0%, var(--brand-wash) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-wash) 0%, var(--bg) 78%);
  border-bottom: 1px solid var(--line);
}

.page-hero .lede { max-width: 62ch; margin-bottom: var(--gap-lg); }
.page-hero .btn-row { margin-bottom: 0; }

/* ------------------------------------------------------- emergency bar --- */

.emergency {
  background: var(--urgent-wash);
  border-bottom: 1px solid color-mix(in srgb, var(--urgent) 25%, transparent);
}

.emergency__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm) var(--gap);
  padding-block: 0.85rem;
  font-weight: 700;
  color: #8a2a12;
  text-align: center;
}

.emergency svg { width: 20px; height: 20px; color: var(--urgent); flex-shrink: 0; }

.emergency a { color: #8a2a12; text-underline-offset: 4px; }

/* ------------------------------------------------------------- crumbs --- */

.breadcrumbs {
  padding-top: var(--gap);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0;
}

.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-deep); }

/* -------------------------------------------------------- trust strip --- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap);
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.trust-item { display: flex; align-items: flex-start; gap: 0.7rem; }

.trust-item svg {
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--brand-deep);
  margin-top: 2px;
}

.trust-item strong { display: block; font-size: 0.98rem; line-height: 1.25; }
.trust-item span { font-size: var(--step--1); color: var(--ink-muted); }

/* -------------------------------------------------------------- cards --- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card > :last-child { margin-bottom: 0; }

.card--link:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.section--alt .card { box-shadow: var(--shadow-sm); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-bottom: var(--gap-sm);
  background: var(--brand-wash);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 12px;
  color: var(--brand-deep);
}

.card__icon .icon { width: 26px; height: 26px; }

.card h3 { margin-bottom: 0.45rem; }

/* A card heading that has to be an h2 for document order still looks like a
   card heading. Level is structure; size is presentation. */
.card__title {
  font-size: 1.12rem;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card ul { color: var(--ink-soft); font-size: 0.96rem; }
.card ul li::marker { color: var(--brand); }

.card__more {
  margin-top: auto;
  padding-top: var(--gap-sm);
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  color: var(--brand-deep);
}
.card__more::after { content: " →"; }

/* service card with a photo on top */
.card--photo { padding: 0; overflow: hidden; }
.card--photo > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.card--photo .card__body {
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card--photo .card__body > :last-child { margin-bottom: 0; }

/* tag on a card */
.tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.6rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag--urgent { background: var(--urgent-wash); color: #8a2a12; }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat { padding: var(--gap-lg) var(--gap); background: var(--surface); text-align: center; }

.stat__value {
  display: block;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-deep);
  line-height: 1.1;
}

.stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.stats--inline { grid-template-columns: repeat(3, 1fr); }
.stats--inline .stat { padding: var(--gap) 0.6rem; }
.stats--inline .stat__value { font-size: var(--step-1); }
.stats--inline .stat__label { font-size: 0.7rem; letter-spacing: 0.04em; }

/* ------------------------------------------------------------ process --- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap-lg);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding-top: 3.6rem;
  margin: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

.steps h3 { margin-bottom: 0.35rem; }
.steps p { color: var(--ink-soft); margin-bottom: 0; }

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

/* Wide enough that a "$150 to $350" range and its label sit on one line each.
   Written-out ranges are noticeably wider than the dashes they replaced, and at
   17rem the labels were wrapping to three lines. */
.price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--gap-sm);
  list-style: none;
  margin: 0 0 var(--gap-lg);
  padding: 0;
}

.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0.95rem var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.price-list .price-name { font-weight: 700; }
.price-list .price-range { font-weight: 800; color: var(--brand-deep); white-space: nowrap; }

/* --------------------------------------------------------------- prose --- */

.prose { max-width: 72ch; }

.prose h2 {
  margin-top: var(--gap-xl);
  padding-top: var(--gap);
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--gap-lg); }
.prose ul li::marker { color: var(--brand); }
.prose img { border-radius: var(--radius); margin-block: var(--gap-lg); }

.prose blockquote {
  margin: var(--gap-lg) 0;
  padding: var(--gap) var(--gap-lg);
  border-left: 4px solid var(--brand);
  background: var(--bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- media --- */

.media {
  display: grid;
  gap: var(--gap-xl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.media__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  box-shadow: var(--shadow);
}

.media__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The full-width photo that sits under a page hero, pulled up so it overlaps
   the band above it. Landscape rather than 4:3, because at container width a
   4:3 crop is most of a screen height before any content. */
.page-banner {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--section-y) * -0.35);
}
.page-banner .media__img img { aspect-ratio: 21 / 9; }
@media (max-width: 45rem) {
  .page-banner .media__img img { aspect-ratio: 3 / 2; }
}

.media--reverse .media__img { order: 2; }
@media (max-width: 60rem) { .media--reverse .media__img { order: 0; } }

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
}

.gallery figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery figure:hover img { transform: scale(1.04); }

/* manufacturer catalogue shots: show whole, and caption so it is clear they
   are product photography rather than our own completed jobs */
.gallery--product figure { display: flex; flex-direction: column; }
.gallery--product img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }

/* --------------------------------------------------- symptom / diagnosis --- */

.cause-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--gap);
}

.cause {
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cause__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-sm);
}

.cause__head h3 { margin: 0; }

.pill {
  flex-shrink: 0;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill--diy { background: #e7f6ee; color: #0b5f3a; }
.pill--pro { background: var(--brand-wash); color: var(--brand-deep); }

.cause dl { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.cause dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.15rem;
}
.cause dd { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.checks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: start;
}

@media (max-width: 60rem) {
  .checks-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

.check-list {
  counter-reset: chk;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.check-list li {
  counter-increment: chk;
  position: relative;
  margin: 0;
  padding-left: 2.6rem;
  color: var(--ink-soft);
}

.check-list li::before {
  content: counter(chk);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 0.9rem;
}

.danger-note {
  padding: var(--gap-lg);
  background: var(--urgent-wash);
  border: 1px solid color-mix(in srgb, var(--urgent) 30%, transparent);
  border-left: 4px solid var(--urgent);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
}

.danger-note__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--urgent);
  margin-bottom: 0.55rem;
}

.danger-note__label svg { width: 18px; height: 18px; }
.danger-note p { margin: 0; color: #6d2411; font-weight: 500; }

/* ------------------------------------------------------------ showroom --- */

.style-jump {
  position: sticky;
  top: 68px;
  z-index: 50;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.style-jump ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.style-jump li { margin: 0; flex-shrink: 0; }

.style-jump a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.style-jump a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-wash); }

@media (min-width: 1181px) { .style-jump { top: 78px; } }

.style-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: start;
  margin-bottom: var(--gap-lg);
}

@media (max-width: 60rem) {
  .style-head { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

.style-head > div > :last-child { margin-bottom: 0; }

.spec { margin: 0; display: flex; flex-direction: column; gap: 0; }

.spec > div {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.spec > div:last-child { border-bottom: 1px solid var(--line); }

.spec dt {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}

.spec dd { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.spec--flag dt { color: var(--brand-deep); }
.spec--flag dd { color: var(--ink); }

.style-sub {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: var(--gap-lg) 0 var(--gap);
}

/* Door cards show the whole door — catalogue shots are cropped badly by
   object-fit: cover, and the point of this page is seeing the door. */
.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap);
}

.door {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.door:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }

.door img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--line);
}


/* brand logo strip */
/* Five brands. At an 11rem minimum they needed 960px inside a 928px strip, so
   the fifth always dropped to a row of its own and the row read as a mistake.
   9.5rem fits all five with room to spare and still wraps on a phone. */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--gap);
  max-width: 58rem;
  margin-inline: auto;
}

.logo-strip a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap) var(--gap-sm);
  min-height: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.logo-strip a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand);
}

/* Capped on both axes. Height alone was not enough: the LiftMaster mark is
   5.7:1, so at 46px tall it wanted 264px of width inside a tile that offers
   about 105px, and it spilled past the edges. Marks now fit whichever way
   they are long, which is also why the tiles carry less horizontal padding
   than they used to. */
.logo-strip img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------- faq --- */

.faq { max-width: 62rem; display: grid; gap: var(--gap-xs); }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq details[open] { border-color: var(--brand); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--gap) var(--gap-lg);
  font-weight: 700;
  font-size: var(--step-0);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6em; height: 0.6em;
  border-right: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(45deg) translateY(-25%);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq summary:hover { color: var(--brand-deep); }

.faq__answer { padding: 0 var(--gap-lg) var(--gap); color: var(--ink-soft); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- cta band --- */

.cta-band {
  padding-block: var(--section-y);
  background:
    radial-gradient(90% 140% at 15% 0%, var(--navy-soft) 0%, transparent 62%),
    var(--navy);
  color: var(--ink-on-dark);
  border-block: 1px solid var(--dark-line);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
}

.cta-band h2 { margin-bottom: 0.4rem; max-width: 22ch; color: #fff; }
.cta-band p { margin-bottom: 0; color: var(--ink-on-dark-muted); max-width: 48ch; }

.cta-band .btn--ghost { --btn-fg: #fff; --btn-border: var(--dark-line); }
.cta-band .btn--ghost:hover { --btn-fg: var(--brand-bright); --btn-border: var(--brand-bright); }

/* --------------------------------------------------------------- form --- */

.form { display: grid; gap: var(--gap); max-width: 40rem; }

.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; }
.field .hint { font-size: var(--step--1); color: var(--ink-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 50px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

.field--row {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.form input[name="botcheck"] { display: none !important; }

.form__status {
  padding: var(--gap);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-weight: 700;
}
.form__status[data-state="ok"] { border-color: var(--ok); color: var(--ok); background: #eefaf4; }
.form__status[data-state="error"] { border-color: var(--urgent); color: #8a2a12; background: var(--urgent-wash); }

/* ------------------------------------------------------------- tables --- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  background: var(--surface);
}

table { width: 100%; border-collapse: collapse; min-width: 32rem; }

th, td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }

thead th {
  background: var(--bg-alt);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

tbody th { font-weight: 700; }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* ------------------------------------------------------- review cards --- */

/* Reviews vary from one line to a full paragraph. On a grid every card
   stretches to the tallest in its row, which left a short review sitting above
   a large empty panel. Columns let each card be its own height. */
.reviews {
  columns: 3 19rem;
  column-gap: var(--gap);
}

.reviews > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

.review {
  display: flex;
  flex-direction: column;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.review .stars { margin-bottom: var(--gap-xs); }
.review p { color: var(--ink-soft); font-size: 0.98rem; }
.review__by { margin-top: auto; font-weight: 800; font-size: 0.94rem; color: var(--ink); margin-bottom: 0; }
.review__src { color: var(--ink-muted); font-weight: 600; }

/* --------------------------------------------------------- area chips --- */

.chips { display: flex; flex-wrap: wrap; gap: var(--gap-xs); list-style: none; margin: 0; padding: 0; }

.chips a {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

.chips a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-wash); }

/* ------------------------------------------------------------ post list -- */

.post-list {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }

.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.post-card__body { padding: var(--gap-lg); display: flex; flex-direction: column; flex: 1; }
.post-card__body h3 { font-size: var(--step-1); }
.post-card__body h3 a { color: var(--ink); text-decoration: none; }
.post-card__body h3 a:hover { color: var(--brand-deep); }

.post-card time {
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

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

.site-footer {
  background: var(--dark);
  color: var(--ink-on-dark-muted);
  padding-block: var(--section-y) var(--gap-lg);
  font-size: 0.96rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-bottom: var(--gap-xl);
}

.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--brand-bright); }

/* The licence number reads as a credential, not as body copy */
.footer__license {
  margin-top: var(--gap-sm);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
}

.site-footer h3 {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--gap-sm);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--ink-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-bright); }
.site-footer address { font-style: normal; }
.site-footer strong { color: #fff; }

.site-footer .chips a {
  background: var(--dark-2);
  border-color: var(--dark-line);
  color: var(--ink-on-dark-muted);
}
.site-footer .chips a:hover { border-color: var(--brand-bright); color: var(--brand-bright); background: var(--dark-2); }

.social-row { display: flex; gap: var(--gap-xs); margin-top: var(--gap); }

.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--dark-line);
  border-radius: 50%;
  color: var(--ink-on-dark-muted);
}

.social-row a:hover { border-color: var(--brand-bright); color: var(--brand-bright); }
.social-row svg { width: 19px; height: 19px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-between;
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--dark-line);
  font-size: var(--step--1);
}

.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--gap); }

/* -------------------------------------------------- sticky mobile bar --- */

.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgb(14 22 32 / 0.12);
}

.call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 58px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.call-bar a.is-primary { background: var(--brand); color: var(--brand-ink); }
.call-bar svg { width: 18px; height: 18px; }

@media (max-width: 780px) {
  .call-bar { display: flex; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------- print --- */

@media print {
  .site-header, .utility-bar, .call-bar, .cta-band, .site-footer, .emergency { display: none; }
  body { background: #fff; color: #000; }
  .card, .faq details { box-shadow: none; }
}

/* FAQ hub: each answer links back to the page it belongs to */
.faq__source { margin-top: 0.6rem; font-size: 0.9rem; }
.faq__source a { font-weight: 700; text-decoration: none; }

/* homepage style browser — a way into the showroom */
.style-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap);
}

.style-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.style-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand);
  color: inherit;
}

/* These are photographs of houses, not product renders on transparency, so the
   frame gets filled. "contain" was letterboxing each one differently depending
   on how the photo happened to be shot, which made a tidy row of five cards
   look like five accidents. */
.style-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.style-card__body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.style-card__body strong { font-size: 1rem; line-height: 1.25; }
.style-card__body span { font-size: 0.86rem; color: var(--ink-muted); line-height: 1.35; }

/* ----------------------------------------------------------- estimator --- */

.estimator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 60rem) { .estimator { grid-template-columns: 1fr; } }

.estimator__controls { display: flex; flex-direction: column; gap: var(--gap); }

.estimator__out {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--gap-lg);
  background: var(--brand-wash);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--radius);
}

.estimator__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.estimator__range {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.estimator__note { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: var(--gap-xs); }

/* ------------------------------------------------------------ glossary --- */

.glossary {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--gap);
}

.glossary__item {
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.glossary dt {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  margin-bottom: 0.35rem;
  scroll-margin-top: 6rem;
}

.glossary dd { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.glossary dd a { font-weight: 700; white-space: nowrap; text-decoration: none; }

/* wordmark tile for a brand we carry but have no logo asset for */
.logo-strip__word {
  flex-direction: column;
  gap: 0.1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.logo-strip__word small {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.logo-strip__word:hover { color: var(--brand-deep); }

/* ------------------------------------------------------------- icons --- */

/* Drawn line icons rather than emoji, so the trade reads the same on every
   device and the strokes match the rest of the type. See src/_data/icons.js. */

.icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.15em;
}

/* Star ratings. Drawn and filled, because the ★ character rendered as a
   colour emoji on some phones and a thin glyph on others. */

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
}

.stars .icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 1.2;
}

/* --------------------------------------------------- reference photos --- */

/* Freely licensed photos used to show what a part looks like. Styled to read
   as a reference figure rather than portfolio work, and the credit is part of
   the component so it cannot be dropped by accident. */

.ref-photo {
  margin: 0 0 var(--gap-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  padding: var(--gap);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 720px) {
  .ref-photo { grid-template-columns: 1fr; }
}

.ref-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.ref-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ref-photo__caption {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------- job clips ---
   Filmed upright on a phone at the job, so shown upright and at about the size
   of the phone they were filmed on. Cropping them to a landscape box would cut
   off the top of the door, which is the part that moves. */

.clip {
  margin: 0;
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-wash);
}

.clip__video {
  display: block;
  width: 100%;
  height: auto;          /* aspect-ratio is set inline, per clip */
  background: var(--navy-wash);
}

.clip figcaption {
  padding: var(--gap-sm) var(--gap);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* a row of clips centres itself and wraps rather than shrinking below phone size */
.clip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-lg);
}

/* ------------------------------------------------- form fallback (no key) ---
   Only ever seen while the form endpoint is unconfigured. It should read as a
   deliberate "call us" panel, not as something broken. */

.form-fallback {
  padding: var(--gap-lg);
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form-fallback h3 { margin-bottom: var(--gap-sm); }
.form-fallback p { color: var(--ink-soft); margin-bottom: var(--gap); }
.form-fallback .hint { margin-top: var(--gap); margin-bottom: 0; }

/* --------------------------------------------------------- drawn diagrams ---
   A labelled drawing sits full width rather than beside its caption. The point
   of it is the labels, and halving the width makes them the first thing to go. */

.diagram {
  margin: 0 0 var(--gap-lg);
  padding: var(--gap-lg) var(--gap);
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.diagram__art {
  /* a safety net only; both diagrams are drawn to fit a 390px phone */
  overflow-x: auto;
}

.diagram svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-inline: auto;
}

.diagram figcaption {
  margin-top: var(--gap);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

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

/* A single composite image with the two states side by side. Framed rather than
   full bleed so it reads as one photograph of one job, not two gallery tiles. */

.before-after {
  margin: 0;
  max-width: 900px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.before-after img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------ colour rhythm --- */

/* The page alternated white and a near-white tint, which read as one long
   white sheet. It then went the other way: a navy band every few sections,
   which gave the scroll rhythm but made the whole site read heavy.

   The rhythm is now carried by a light azure band instead. It is clearly a
   band rather than a faint change of white, it is a different hue from both
   the grey-navy --bg-alt and the cyan --bg-wash so three tints can alternate
   without repeating, and every ink in the system clears AA on it: body at
   15.0:1, muted at 4.8:1, links at 5.3:1. Navy is still on the page, but as
   the closing call-to-action rather than as the page itself. */

.section--sky {
  background:
    radial-gradient(110% 130% at 90% -10%, #f2f9ff 0%, transparent 62%),
    var(--bg-sky);
  border-block: 1px solid #c6dcf0;
  border-top-width: 2px;
  border-top-color: var(--action);
}

.section--sky .card {
  background: var(--surface);
  border-color: var(--line);
}

/* A hairline of brand colour along the top of tinted bands, so the edge between
   sections is a deliberate line rather than a faint grey change. */
.section--alt { border-top: 2px solid var(--navy); }

/* ------------------------------------------------------- wind load --- */

.wind-counties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap);
}

/* These cards were built for the navy band the wind-code section used to sit
   on, so every colour in them was a light-on-dark one. The band is azure now
   and they read as white-on-white until re-grounded. */
.wind-county {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.wind-county__name {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.wind-county__speed {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.wind-county__speed small { font-size: 0.9rem; font-weight: 700; letter-spacing: 0; }
.wind-county__speed--na { font-size: 1.7rem; }
.wind-county__note { font-size: 0.86rem; color: var(--ink-soft); }

.wind-table__caption {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--gap-lg) 0 var(--gap-sm);
}
.wind-table__caption:first-of-type { margin-top: 0; }

.wind-table { font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.wind-table th[scope="col"] { text-align: center; white-space: nowrap; }
.wind-table th[scope="row"] { white-space: nowrap; }
.wind-table td { text-align: center; padding-inline: 0.5rem; }

/* The two columns a local reader is actually looking for. */
.wind-table .is-local {
  background: var(--brand-wash);
  box-shadow: inset 1px 0 0 var(--brand), inset -1px 0 0 var(--brand);
}
.wind-table thead .is-local { color: var(--navy); font-weight: 800; }

.psf-pos { display: block; color: var(--ink); font-weight: 700; }
.psf-neg { display: block; color: var(--urgent); font-weight: 700; }

.wind-table__foot {
  margin-top: var(--gap);
  font-size: 0.86rem;
  color: var(--ink-muted);
  max-width: 78ch;
}

.wind-exposures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--line);
}
.wind-exposures h4 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--navy); }
.wind-exposures p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* -------------------------------------------------------- designer --- */

.designer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: start;
}

@media (max-width: 62rem) {
  .designer__grid { grid-template-columns: 1fr; }
}

.designer__options { display: flex; flex-direction: column; gap: var(--gap-lg); }

.designer__set { border: 0; margin: 0; padding: 0; }

.designer__set legend {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--gap-sm);
  padding: 0;
}

.designer__note { font-size: 0.84rem; color: var(--ink-muted); margin: var(--gap-sm) 0 0; }

/* The radio itself is hidden but still focusable, so the visible card carries
   the focus ring and the keyboard path is unchanged. */
.designer input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.designer__styles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap-sm);
}

.style-opt {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.style-opt img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.style-opt__name { font-weight: 800; font-size: 0.98rem; }
.style-opt__blurb { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }

.style-opt:hover { border-color: var(--line-strong); }
.style-opt:has(input:checked) { border-color: var(--navy); box-shadow: var(--shadow); }
.style-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }

.swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}
.swatch__chip {
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid rgb(0 0 0 / 0.18);
}
.swatch:has(input:checked) { border-color: var(--navy); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap-sm);
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pick__name { font-weight: 700; font-size: 0.95rem; }
.pick__note { font-size: 0.83rem; color: var(--ink-muted); line-height: 1.4; }
.pick:has(input:checked) { border-color: var(--navy); background: var(--brand-wash); }
.pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.designer__panel {
  position: sticky;
  top: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 62rem) { .designer__panel { position: static; } }

.designer__preview { margin: 0; }
.designer__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}

.designer__preview figcaption {
  margin-top: var(--gap-xs);
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.45;
}

.designer__summary h3 { font-size: 1rem; margin-bottom: var(--gap-xs); }
.designer__summary dl { display: grid; gap: 0.3rem; margin: 0; }
.designer__summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-sm);
  font-size: 0.9rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.designer__summary dt { color: var(--ink-muted); }
.designer__summary dd { margin: 0; font-weight: 700; text-align: right; }

.designer__collections {
  margin: var(--gap-sm) 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.designer__collections span { font-weight: 700; color: var(--ink); }

.designer__contact { display: flex; flex-direction: column; gap: var(--gap-sm); }
.designer__contact label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.86rem;
  font-weight: 700;
}
.designer__contact input,
.designer__contact textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.designer__contact input:focus-visible,
.designer__contact textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* The embedded Clopay visualiser. It needs real height to be usable and it
   manages its own scrolling, so the frame is sized rather than aspect-ratio'd. */
.designer-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunk);
  box-shadow: var(--shadow);
}

.designer-frame iframe {
  display: block;
  width: 100%;
  height: min(80vh, 780px);
  min-height: 560px;
  border: 0;
}

/* ==========================================================================
   Bold trade brand layer

   The restrained, editorial version of this design read as generic. A local
   trade brand earns trust the opposite way: solid colour doing the work
   instead of white space, heavy type, thick rules, and an action colour you
   cannot miss on a phone in a driveway. Everything below is additive, so the
   underlying structure and the contrast work is unchanged.
   ========================================================================== */

/* A caution stripe. Used as a thin rule under dark bands and above the
   footer, the way it appears on a bollard or a dock edge. */
.stripe {
  height: 6px;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--action) 45%, var(--brand) 100%);
}
.stripe--thin { height: 3px; }

/* Section heads get a short heavy rule, so a heading reads as a heading even
   when it sits on a photograph or a colour block. */
.section__head h2::after,
.style-head h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  margin-top: 0.85rem;
  background: var(--action);
  border-radius: 2px;
}
:is(.center, .section__head.center) .section__head h2::after,
.section__head.center h2::after { margin-inline: auto; }
.section--dark .section__head h2::after { background: var(--action); }

/* Eyebrows sit behind a short rule rather than floating. */
.eyebrow {
  position: relative;
  padding-left: 1.1rem;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1em;
  background: var(--action);
  border-radius: 1px;
}
:is(.center, .section__head.center) .eyebrow,
.section__head.center .eyebrow { padding-left: 0; }
:is(.center, .section__head.center) .eyebrow::before,
.section__head.center .eyebrow::before { display: none; }

/* A solid cyan band, the third colour block after navy and the two washes. */
.section--brand {
  background: var(--brand);
  color: var(--brand-ink);
}
.section--brand h1,
.section--brand h2,
.section--brand h3 { color: var(--brand-ink); }
.section--brand p,
.section--brand li { color: #04333f; }
.section--brand .eyebrow { color: #04333f; }
.section--brand .eyebrow::before { background: var(--navy); }
.section--brand .section__head h2::after { background: var(--navy); }
.section--brand .card {
  background: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
}

/* Cards carry a coloured cap, which is what stops a grid of them reading as a
   grid of empty boxes. */
.card {
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-sm);
}
.card--link { border-top-color: var(--action); }
.section--dark .card { border-top-color: var(--action); }

/* The trust strip was a solid navy slab sitting a screen below a navy hero.
   With the hero light it became the one dark rectangle near the top of the
   page, which is exactly the weight the licence and warranty proof should not
   carry. It is a white card now, lifted off the band by an azure top rule and
   azure ticks, so it still reads as a distinct block of proof rather than a
   line of grey text. */
.trust-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--action);
  border-radius: var(--radius-sm);
  padding: var(--gap) var(--gap-lg);
  box-shadow: var(--shadow-sm);
}
.trust-strip .trust-item { color: var(--ink); }
.trust-strip .trust-item strong { color: var(--navy); }
.trust-strip .trust-item span { color: var(--ink-muted); }
.trust-strip .trust-item svg { color: var(--action); }

/* Numbered steps get the action colour rather than a tint. */
.steps > li::before {
  background: var(--action);
  color: var(--action-ink);
  font-weight: 900;
}

/* Price rows, stats and table highlights all pick up the action colour so the
   number is the thing your eye lands on. */
.stat__value { color: var(--navy); }
.section--dark .stat__value { color: var(--action); }

/* Links inside dark and cyan bands. */
.section--brand a { color: var(--navy); }
.section--brand a:hover { color: var(--navy-deep); }

/* A heavy divider for the top of the footer. */
.site-footer { border-top: 0; }

/* ------------------------------------------------- the hero, in colour --- */
/* The hero was a white page with a photo on it, which is where most of the
   "this could be anyone" came from. It is now a solid navy block: the brand
   colour carries the top of the page, the photographs sit on it as objects,
   and the amber call button is the brightest thing on the screen. */
.hero {
  background:
    radial-gradient(120% 130% at 88% -15%, #dcefff 0%, transparent 60%),
    linear-gradient(178deg, var(--brand-wash) 0%, var(--bg) 72%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem);
}
.hero h1 { color: var(--navy); }
.hero .lede { color: var(--ink-soft); }

/* Interior page heads get the same treatment at half the volume, so the site
   reads as one thing rather than a loud homepage and a quiet everything else. */
.page-hero {
  background:
    radial-gradient(120% 110% at 92% -10%, #dcefff 0%, transparent 64%),
    linear-gradient(175deg, var(--brand-wash) 0%, var(--bg) 78%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { color: var(--navy); }

/* Breadcrumbs sit above the dark head, so they keep the light treatment but
   lose the border that used to double up with it. */
.breadcrumbs { border-bottom: 0; }

/* The mosaic fills the hero row rather than leaving a band of empty navy
   beneath it, without going so tall that the main photo crops to a portrait. */
.hero__media-main img { aspect-ratio: 15 / 13; }
@media (min-width: 60rem) {
  .hero__grid { align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}
/* Archivo is wider than the face it replaced, so the two hero buttons need a
   little more room before they wrap onto separate lines. */
.hero .btn-row,
.lp-hero .btn-row { gap: var(--gap-sm); }
.hero .btn--lg,
.lp-hero .btn--lg { padding-inline: 1.4rem; }

/* ==========================================================================
   Landing pages

   No site nav, no footer link farm, one path. Two thirds of this traffic is a
   phone held one-handed, so the call button is fixed to the bottom of the
   viewport and the form is four fields.
   ========================================================================== */

.lp-bar {
  background: var(--navy-deep);
  color: #fff;
  padding-block: 0.7rem;
}
.lp-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.lp-bar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  text-decoration: none;
}
.lp-bar__brand img { width: 46px; height: 46px; }
.lp-bar__brand strong { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: -0.02em; }
.lp-bar__brand small {
  display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--action);
}
.lp-bar__actions { display: flex; align-items: center; gap: var(--gap); }
.lp-bar__hours {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #b9cddd; font-size: var(--step--1); font-weight: 600;
}
.lp-bar__hours svg { width: 17px; height: 17px; color: var(--action); }
.lp-bar__tel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: #fff; text-decoration: none;
  font-size: var(--step-1); font-weight: 900; letter-spacing: -0.02em;
}
.lp-bar__tel svg { width: 20px; height: 20px; color: var(--action); }
.lp-bar__tel:hover { color: var(--action); }
@media (max-width: 46rem) {
  .lp-bar__hours { display: none; }
}

.lp-hero {
  background:
    radial-gradient(120% 130% at 85% -15%, #dcefff 0%, transparent 60%),
    linear-gradient(178deg, var(--brand-wash) 0%, var(--bg) 74%);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}
.lp-hero__grid {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: start;
}
@media (max-width: 62rem) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
}
.lp-hero h1 { color: var(--navy); font-size: var(--step-4); }
.lp-hero .lede { color: var(--ink-soft); margin-bottom: var(--gap-lg); }


.lp-hero__note {
  margin: var(--gap) 0 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
  max-width: 46ch;
}

.lp-checks {
  list-style: none;
  margin: 0 0 var(--gap-lg);
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.lp-checks li {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0;
  color: var(--ink-soft); font-weight: 700;
}
.lp-final .lp-checks li,
.section--dark .lp-checks li { color: #dbe9f4; }
.lp-checks svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--action); margin-top: 1px; }

/* The form card is the brightest object on a dark hero, which is the point. */
.lp-form-card {
  /* The card sits inside the dark hero, so it has to reset the inherited
     light text colour or every field label disappears. */
  color: var(--ink);
  background: #fff;
  border-radius: var(--radius);
  border-top: 6px solid var(--action);
  box-shadow: var(--shadow-lg);
  padding: var(--gap-lg);
  scroll-margin-top: 1rem;
}
.lp-form-card__head h2 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.lp-form-card__head h2::after { display: none; }
.lp-form-card__head p { color: var(--ink-muted); font-size: var(--step--1); margin-bottom: var(--gap); }
.lp-form-card__foot { margin: var(--gap-sm) 0 0; text-align: center; }
.form--compact .field { margin-bottom: 0.75rem; }
.form--compact label { font-size: var(--step--1); }

.lp-proof { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.lp-proof__list {
  list-style: none; margin: 0; padding: var(--gap) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  text-align: center;
}
@media (max-width: 46rem) { .lp-proof__list { grid-template-columns: repeat(2, 1fr); } }
.lp-proof__list li { margin: 0; }
.lp-proof__value {
  display: block; font-size: var(--step-2); font-weight: 900;
  color: var(--navy); letter-spacing: -0.03em; line-height: 1.1;
}
.lp-proof__label {
  display: block; font-size: var(--step--1); color: var(--ink-muted); font-weight: 600;
}

.price-tag {
  margin-top: auto; margin-bottom: 0; padding-top: var(--gap-sm);
  border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--ink-soft);
}
.price-tag strong { color: var(--navy); font-weight: 900; }

.chips--plain { justify-content: center; }
.chips--plain li {
  background: rgb(255 255 255 / 0.6);
  border: 1px solid rgb(4 62 103 / 0.18);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  font-size: var(--step--1);
}

.lp-final {
  background:
    radial-gradient(120% 140% at 50% -30%, var(--navy-soft) 0%, transparent 60%),
    linear-gradient(178deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--ink-on-dark);
  padding-block: var(--section-y);
}
.lp-final h1, .lp-final h2 { color: #fff; }
.lp-final .lede { color: #cfe0ee; max-width: 56ch; }
.lp-final .eyebrow { color: var(--action); }
.lp-final .btn--ghost { --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.42); }
.lp-final .btn--ghost:hover { --btn-fg: var(--navy); --btn-border: #fff; --btn-bg: #fff; }

.lp-footer {
  background: var(--navy-deep);
  color: #9fb8cb;
  padding-block: var(--gap-lg);
  font-size: var(--step--1);
  /* clear of the fixed call bar on a phone */
  padding-bottom: calc(var(--gap-lg) + 4.5rem);
}
@media (min-width: 46rem) { .lp-footer { padding-bottom: var(--gap-lg); } }
.lp-footer p { margin: 0 0 0.4rem; }
.lp-footer a { color: #cfe0ee; }
.lp-footer a:hover { color: var(--action); }
.lp-footer__legal { color: #7e99ae; }

/* Fixed tap-to-call. Phones only: on a desktop the number is already in the
   bar at the top and a fixed bar just eats the viewport. */
.lp-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1.05rem 1rem;
  background: var(--action);
  color: var(--action-ink);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 -6px 22px -8px rgb(0 0 0 / 0.4);
}
.lp-callbar svg { width: 22px; height: 22px; }
.lp-callbar:hover { color: var(--action-ink); background: var(--action-deep); }
@media (min-width: 46rem) { .lp-callbar { display: none; } }

/* ------------------------------------------------------- the type system --- */
/* Archivo carries anything that is an instruction, a label or a number.
   Figtree carries anything that is a sentence you actually read. */
.btn,
.eyebrow,
.site-nav__link,
.header-phone,
.lp-bar__brand strong,
.lp-bar__brand small,
.lp-bar__tel,
.lp-callbar,
.stat__value,
.lp-proof__value,
.wind-county__speed,
.price-list dt,
.chips a,
.chips--plain li,
.trust-item strong,
.card__more,
summary,
th {
  font-family: var(--font-display);
}

.btn { font-stretch: 104%; font-weight: 800; }
.eyebrow { font-stretch: 100%; font-weight: 800; }
.stat__value,
.lp-proof__value,
.wind-county__speed { font-stretch: 112%; font-weight: 900; }

/* The h1 runs a touch wider still. It is the one line the whole page hangs on. */
h1 { font-stretch: 112%; }
.hero h1,
.lp-hero h1 { font-stretch: 114%; letter-spacing: -0.032em; }

/* Figtree sits slightly larger for the same optical size, so the running text
   steps back down a hair. */
body { font-size: clamp(1rem, 0.96rem + 0.19vw, 1.09rem); }

/* On a dark band the navy edge disappears into the background, so the button
   goes back to a matched edge and lets the fill do all the separating. */
.hero .btn:not(.btn--ghost),
.lp-hero .btn:not(.btn--ghost),
.lp-final .btn:not(.btn--ghost),
.section--dark .btn:not(.btn--ghost),
.cta-band .btn:not(.btn--ghost) { --btn-border: var(--action); }
.section--brand .btn:not(.btn--ghost) { --btn-border: var(--navy); }

/* ==========================================================================
   Gate operator brand pages

   These pages are a catalogue, not an essay. The model card carries a picture,
   a name and up to three facts as chips. If something needs a paragraph it
   goes in the FAQ instead.
   ========================================================================== */

.brand-hero {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 60rem) { .brand-hero { grid-template-columns: 1fr; gap: var(--gap-lg); } }
.brand-hero__img { margin: 0; }
.brand-hero__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.type-key {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0 0 var(--gap-lg); padding: 0;
}
.type-key li {
  margin: 0; padding: 0.3rem 0.85rem;
  background: var(--navy); color: #fff;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}

.model-group {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--step-1);
  margin: var(--gap-xl) 0 var(--gap);
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--action);
}
.model-group:first-of-type { margin-top: 0; }

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap);
}

.model {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.model:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* The operator renders are transparent PNGs, so they sit on a tinted panel
   rather than carrying a white box around with them. */
/* Flat white, deliberately.

   Manufacturer product renders are cut out against white, so their edge pixels
   carry a white matte. Put one on a grey plate and that matte reads as a pale
   outline traced around the whole product, which looks like a badly cut image
   rather than the clean render it is. On white the fringe is the background and
   disappears. */
.model__shot {
  display: grid;
  place-items: center;
  padding: var(--gap);
  min-height: 168px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* No drop-shadow. A drop-shadow filter traces the alpha channel, so on a render
   with an antialiased edge it draws a halo along every semi-transparent pixel
   and the product looks fringed. */
.model__shot img {
  max-height: 148px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.model figcaption { padding: var(--gap-sm) var(--gap) var(--gap); }
.model figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.model figcaption ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.model__detail {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.model figcaption li {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-left: 0.85rem;
  position: relative;
}
.model figcaption li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--action);
}

/* Door collections are photographs of doors on houses, not cut-outs, so they
   crop to a card rather than floating on a tint. */
.model-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.model--photo .model__shot--photo {
  position: relative;
  padding: 0;
  min-height: 0;
  background: var(--surface-sunk);
}
.model--photo .model__shot--photo img {
  width: 100%;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: none;
}
.model__badge {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  background: var(--action);
  color: var(--action-ink);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.model__badge--both { background: var(--brand); color: var(--brand-ink); }
.card.is-current { border-top-color: var(--action); background: var(--navy-wash); }
.card__more--here {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

/* ---------------------------------- residential / commercial toggle --- */
.range__switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: var(--section-y);
  background: var(--navy-wash-2);
  border-radius: 10px;
}
.range__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.range__btn svg { width: 19px; height: 19px; }
.range__btn:hover { background: rgb(255 255 255 / 0.6); }
.range__btn.is-on {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.range__btn.is-on svg { color: var(--action); }
.range__panel.is-hidden { display: none; }
/* Without the script both panels show, so the first one loses its top gap to
   avoid a double-height run of white between the switch and the first grid. */
.range__panel { padding-top: var(--gap-lg); }
@media (max-width: 34rem) {
  .range__switch { display: flex; width: 100%; }
  .range__btn { flex: 1; justify-content: center; padding-inline: 0.6rem; }
}

/* The language switch sits in the utility bar, styled as a button rather than
   a link so it reads as a control and not as another piece of small print. */
.lang-switch { gap: 0.4rem; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}
.lang-switch a:hover { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.lang-switch svg { width: 15px; height: 15px; }

/* Export page */
.export-card { padding-top: 0; overflow: hidden; }
.export-card__shot {
  margin: 0 calc(var(--gap-lg) * -1) var(--gap);
  /* white for the same reason as .model__shot: these are cut-out product
     renders and a tinted plate turns their white edge matte into an outline */
  background: #fff;
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: var(--gap);
  border-bottom: 1px solid var(--line);
}
.export-card__shot img { max-height: 150px; width: auto; object-fit: contain; }
.export-quote {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
}
@media (max-width: 62rem) { .export-quote { grid-template-columns: 1fr; gap: var(--gap-lg); } }

/* ------------------------------------------ dark bands, now the exception --- */
/* Navy still exists, but as punctuation rather than as the page. Azure cannot
   separate from it (2.02:1), so a button on a dark band takes a white fill and
   navy text, which is the highest-contrast pairing available at 11.1:1. */
.section--dark .btn:not(.btn--ghost),
.lp-final .btn:not(.btn--ghost),
.cta-band .btn:not(.btn--ghost) {
  --btn-bg: #fff;
  --btn-fg: var(--navy);
  --btn-border: #fff;
}
.lp-final .eyebrow,
.cta-band .eyebrow { color: #8fd3f4; }
.lp-final .eyebrow::before,
.cta-band .eyebrow::before { background: #8fd3f4; }
.section--dark .section__head h2::after { background: #8fd3f4; }
.section--dark .stat__value { color: #8fd3f4; }

/* The hero photo mosaic sits on light now, so it needs its own edge. */
.hero__media figure { border: 1px solid var(--line); }
.hero__badge { background: rgb(255 255 255 / 0.96); }

/* ------------------------------------------- text on the dark surfaces --- */
/* Three colours were inherited from the light page into surfaces that are
   still navy, where they failed AA badly: the footer strapline at 1.99:1, the
   landing-page strapline at 2.60:1, and the footer hours line. They get the
   same pale blue the rest of the dark text uses, measured at 6.8:1 on --navy
   and 8.8:1 on --navy-deep. */
.site-footer .muted,
.site-footer address .muted { color: #b9cddd; }
/* The two brand lockups that sit on navy: the landing-page bar (its strapline
   was --action azure at 2.60:1) and the site footer (--brand-deep at 1.82:1).
   Both were readable back when the surrounding chrome was light. */
.lp-bar__brand small,
.site-footer .brand small { color: #8fd3f4; }

/* The closing band's paragraph was 4.36:1, just under the line. */
.cta-band p { color: #cfe0ee; }

/* ------------------------------------------------- rolling door pricing --- */
/* A published starting price is the strongest thing on a commercial door
   page, so it gets its own line rather than being buried in the blurb. The
   note above the grid carries the reference size, because a number without
   the opening it applies to is worse than no number. */
.model-price {
  margin: 0 0 var(--gap-sm);
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.2;
}
.model-price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12em;
  color: var(--action-deep);
  letter-spacing: -0.01em;
}
.price-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  max-width: 62ch;
  margin-top: var(--gap);
  padding: var(--gap-sm) var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--action);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.price-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--action); margin-top: 2px; }

/* A media block with only a photo in it, no text beside it, let the grid give
   that photo the full 1198px of the container. Our best originals are 1400px,
   which is sharp to 700 CSS pixels on a retina screen and soft beyond it, so a
   solo photo was the single biggest source of softness on the site. Capped at
   760px it is within a rounding error of sharp, and it reads better in a
   reading column than a full-bleed slab did. */
.media__img:only-child {
  max-width: 760px;
  margin-inline: auto;
}

/* ------------------------------------------------ brand mark on a brand page --- */
/* A LiftMaster or Benincà page should show the LiftMaster or Benincà mark. Where
   the manufacturer publishes no usable logo the name sets in the display face
   instead, which is the same fallback the door brand strip uses. */
.brand-mark { margin: 0 0 var(--gap); min-height: 42px; }
.brand-mark img { height: 42px; width: auto; max-width: 220px; object-fit: contain; }
.brand-mark__word {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}


/* ---------------------------------------------------------------- review ---
   The /review/ page. One screen, one button, no navigation: it is the target
   of a QR code on an invoice, read on a phone in a driveway by somebody who
   has already paid us. Everything here is about getting the thumb to the
   button without a scroll. */
.review-page {
  padding: var(--gap-lg) 0 var(--gap-xl);
  text-align: center;
}
.review-page__brand {
  display: inline-block;
  margin-bottom: var(--gap-lg);
}
.review-page h1 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  margin-bottom: var(--gap-sm);
}
.review-page .btn--block {
  margin: var(--gap-lg) 0;
}
.review-page__prompts,
.review-page__private {
  text-align: left;
  margin-top: var(--gap-lg);
}
.review-page__prompts ul {
  margin: var(--gap-sm) 0;
  padding-left: 1.2em;
}
.review-page__prompts li {
  margin-bottom: 0.4em;
}
.review-page__private .btn {
  margin: 0.3rem 0.3rem 0 0;
}
.review-page__foot {
  margin-top: var(--gap-lg);
  text-align: center;
}