/* ==========================================================================
   Vitraz Windows & Doors — design system
   Ported from the Claude Design artboards in design-export/.
   The prototype recolored inline styles with JS at runtime; here light/dark are
   real custom-property themes, driven by [data-theme] with a system fallback.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root {
  /* brand */
  --blue: #1f6fd0;
  --blue-hover: #17509b;
  --blue-soft: #eaf2fc;
  --blue-pale: #7fb0dd;
  --gold: #b7862f;
  --gold-light: #c9a24e;
  --gold-soft: #fdf5e8;

  /* surfaces */
  --bg: #ffffff;
  --bg-sunk: #f4f7fb;
  --bg-navy: #0f2033;
  --bg-navy-deep: #0a1524;
  --bg-navy-tile: #1a2d45;
  --card: #ffffff;

  /* text */
  --ink: #0f2033;
  --ink-2: #25384f;
  --ink-3: #3f4b5c;
  --body: #55647a;
  --body-2: #5f6f84;
  --muted: #6b7a8d;
  --muted-2: #8595a8;
  --muted-3: #9aa7b8;
  --on-navy: #ffffff;
  --on-navy-body: #b7c4d6;
  --on-navy-muted: #8595a8;
  --on-navy-dim: #6f86a6;

  /* lines */
  --line: #e5eaf1;
  --line-2: #e0e7f0;
  --line-input: #d5deea;
  --line-soft: #eef2f7;

  /* type */
  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --wrap: 1200px;
  --gutter: 44px;
  --section-y: 78px;
  /* The header bar sizes itself off the logo rather than the other way round,
     so the two can never drift apart. The -sm pair is what both shrink to once
     the page is scrolled.
     Anything that has to clear the sticky header — anchor offsets, the
     configurator frame cap — reads --header-h too, but from :root, so it stays
     on the TALL value: those elements sit outside the header and never see the
     compact override. That is deliberate. Sizing an offset to the compact state
     would tuck content under a bar that had not shrunk yet. */
  --logo-h: 84px;
  --header-h: 108px;
  --logo-h-sm: 42px;
  --header-h-sm: 76px;
  --radius: 14px;
  --radius-lg: 16px;
  --radius-sm: 9px;

  /* effects */
  --shadow-card: 0 18px 40px rgba(15, 32, 51, 0.13);
  --shadow-pop: 0 18px 44px rgba(15, 32, 51, 0.18);
  --shadow-btn: 0 10px 24px rgba(31, 111, 208, 0.28);
  --header-bg: rgba(255, 255, 255, 0.94);
}

/* Tell the browser which palette to paint its OWN surfaces in: form controls,
   scrollbars, spellcheck underlines, and the canvas it shows before CSS applies.
   The custom properties below only cover elements this stylesheet paints, so
   without this a dark page still gets light scrollbars and light input chrome.
   Mirrors the three states used throughout: light is the base, the system
   preference applies when no choice has been made, an explicit toggle wins. */
:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* Dark theme. Values mirror the prototype's runtime color map so the two builds
   are visually identical; the explicit toggle wins over the system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #13233a;
    --bg-sunk: #0e1b2c;
    --bg-navy: #0a1626;
    --bg-navy-deep: #07101d;
    --bg-navy-tile: #16273d;
    --card: #13233a;
    --blue-soft: #1c3350;
  --gold-soft: rgba(183, 134, 47, 0.18);

    --ink: #e9f1fa;
    --ink-2: #d7e2f0;
    --ink-3: #b7c5d6;
    --body: #a9b8ca;
    --body-2: #a3b2c4;
    --muted: #92a2b5;
    --muted-2: #8393a7;
    --muted-3: #8393a7;

    --line: rgba(255, 255, 255, 0.13);
    --line-2: rgba(255, 255, 255, 0.13);
    --line-input: rgba(255, 255, 255, 0.18);
    --line-soft: rgba(255, 255, 255, 0.1);

    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.5);
    --header-bg: rgba(11, 20, 36, 0.9);
  }
}

:root[data-theme='dark'] {
  --bg: #13233a;
  --bg-sunk: #0e1b2c;
  --bg-navy: #0a1626;
  --bg-navy-deep: #07101d;
  --bg-navy-tile: #16273d;
  --card: #13233a;
  --blue-soft: #1c3350;
  --gold-soft: rgba(183, 134, 47, 0.18);

  --ink: #e9f1fa;
  --ink-2: #d7e2f0;
  --ink-3: #b7c5d6;
  --body: #a9b8ca;
  --body-2: #a3b2c4;
  --muted: #92a2b5;
  --muted-2: #8393a7;
  --muted-3: #8393a7;

  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-input: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.1);

  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(11, 20, 36, 0.9);
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

@keyframes vzfade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* ------------------------------------------------------------- primitives -- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap-narrow {
  max-width: 1000px;
}
.wrap-prose {
  max-width: 920px;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.section--sunk {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--navy {
  background: var(--bg-navy);
  color: var(--on-navy);
}
.section--navy h2,
.section--navy h3 {
  color: var(--on-navy);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font: 700 12px var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.eyebrow--plain::before {
  display: none;
}
.eyebrow--center {
  justify-content: center;
}
.section--navy .eyebrow {
  color: var(--gold-light);
}

.h1 {
  font: 800 50px/1.04 var(--font-head);
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.h2 {
  font: 800 40px/1.08 var(--font-head);
  color: var(--ink);
  margin: 0 0 18px;
}
.h2-sm {
  font: 800 36px/1.1 var(--font-head);
  color: var(--ink);
  margin: 0 0 16px;
}
.h3 {
  font: 700 20px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.lead {
  font: 400 18px/1.62 var(--font-body);
  color: var(--body);
  margin: 0 0 30px;
  max-width: 60ch;
}
.body-text {
  font: 400 16px/1.66 var(--font-body);
  color: var(--body);
  margin: 0 0 16px;
}
.body-text:last-child {
  margin-bottom: 0;
}

.section-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.section-head--center {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: none;
}

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

.btn {
  display: inline-block;
  font: 700 15px var(--font-body);
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn--primary {
  color: #fff;
  background: var(--blue);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
  background: var(--blue-hover);
  color: #fff;
}
.btn--ghost {
  color: var(--ink);
  border-color: var(--line-input);
  padding: 15px 22px;
}
.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Hover lift, shared by every button and button-styled link on the site — one
   list, so a new button picks up the same feel by joining it rather than by
   inventing its own transform.
   The transition repeats the colour properties .btn was already animating:
   `transition` is a single property, so declaring it here replaces that earlier
   declaration instead of adding to it. The other selectors animated nothing
   before, and naming properties they never change costs them nothing. */
.btn,
.nav__cta,
.theme-toggle,
.burger,
.article-btn,
.side-btn,
.tabs__btn,
.blog-pagination .page-link,
.configurator__expand,
.configurator__close,
.lightbox__close {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.16s ease;
}
.btn:hover,
.nav__cta:hover,
.theme-toggle:hover,
.burger:hover,
.article-btn:hover,
.side-btn:hover,
.tabs__btn:hover,
.blog-pagination .page-link:hover,
.configurator__expand:hover,
.configurator__close:hover,
.lightbox__close:hover {
  transform: scale(1.03);
}
/* The global reduced-motion block below zeroes transition durations, which
   would leave the scale snapping on instantly rather than not happening. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .nav__cta:hover,
  .theme-toggle:hover,
  .burger:hover,
  .article-btn:hover,
  .side-btn:hover,
  .tabs__btn:hover,
  .blog-pagination .page-link:hover,
  .configurator__expand:hover,
  .configurator__close:hover,
  .lightbox__close:hover {
    transform: none;
  }
}

.link-arrow {
  font: 700 14px var(--font-body);
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.section--navy .link-arrow {
  color: var(--blue-pale);
}

.btn-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

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

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chips--center {
  justify-content: center;
}
/* The decks use two chip sizes: the marketing pages take the larger, the catalog
   system pages and Customization the smaller. Both carry the same hairline border. */
.chip {
  font: 600 14.5px var(--font-body);
  color: var(--ink-2);
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  padding: 12px 22px;
  border-radius: 100px;
}
/* On a grey band the chip flips to white, which is how the decks keep it legible —
   the same chip is drawn both ways depending on what it sits on. */
.section--sunk .chip {
  background: var(--card);
}
.chip--sm {
  font: 600 13.5px var(--font-body);
  background: var(--card);
  padding: 10px 18px;
}
.chip--outline {
  background: transparent;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13.5px;
}
.section--sunk .chip {
  background: var(--card);
}

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

.grid {
  display: grid;
  gap: 22px;
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--card);
}
.card__glyph {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}
.card__body {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--body-2);
  margin: 0;
}
/* Footnote under a card — the design uses it to say a figure is not yet verified,
   so it reads as a caveat rather than as spec copy. */
.card__meta {
  font: 500 13px/1.55 var(--font-body);
  color: var(--muted-2);
  font-style: italic;
  margin: 12px 0 0;
}

.product-card {
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.product-card img {
  width: 100%;
  height: 176px;
  object-fit: cover;
  display: block;
}
.product-card__inner {
  padding: 22px 24px 26px;
}
.product-card__cta {
  font: 700 13px var(--font-body);
  color: var(--blue);
}

/* ------------------------------------------------------------ split rows -- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--wide-left {
  grid-template-columns: 1.08fr 0.92fr;
}
.split--wide-right {
  grid-template-columns: 0.9fr 1.1fr;
}
/* Heading held in a narrow left column with the paragraph running beside it. */
.split--lede {
  grid-template-columns: 0.85fr 1.15fr;
  align-items: flex-start;
}
.prose--lede p {
  font-size: 17px;
  margin-top: 0;
}
@media (max-width: 900px) {
  .split--lede {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.split--even {
  grid-template-columns: 1fr 1fr;
}

/* A checklist band set against a photograph. */
.checklist__media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* Two contrast figures — an import lead time against the local one. The second
   carries the emphasis, which is the whole point of showing them together. */
.statpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 28px;
}
.statpair__card {
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--card);
}
.statpair__card--lead {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.statpair__label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.statpair__card--lead .statpair__label {
  color: var(--blue);
}
.statpair__value {
  font: 800 30px var(--font-head);
  color: var(--muted-2);
  letter-spacing: -0.02em;
}
.statpair__card--lead .statpair__value {
  color: var(--blue);
}
.statpair__note {
  font: 600 13px var(--font-body);
  letter-spacing: 0;
}
/* Compact ticks, used when the roomier tile grid would crowd the picture. */
.checkgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
}
.checkgrid__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: 600 14.5px/1.45 var(--font-body);
  color: var(--ink-2);
}
.checkgrid__tick {
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  flex: none;
}
@media (max-width: 900px) {
  .statpair,
  .checkgrid {
    grid-template-columns: 1fr;
  }
  .checklist__media img {
    height: 280px;
  }
}
.split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.split__media--framed {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 18px 24px;
}
.split__media--framed img {
  border-radius: 10px;
}
.split__caption {
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--muted);
  margin: 16px 8px 0;
}

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

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
  padding-top: 66px;
  padding-bottom: 46px;
}
.hero__text {
  animation: vzfade 0.7s ease both;
}
/* Centred variant: one column, copy in the middle, tighter vertically. For heroes
   whose job is to hand the reader straight to what sits below them. The configurator
   page is the case it was built for — a two-column hero there left an empty half and
   pushed the 3D tool off the first screen entirely. */
.hero--centered {
  grid-template-columns: 1fr;
  max-width: 820px;
  text-align: center;
  padding-top: 52px;
  padding-bottom: 30px;
}
.hero--centered .eyebrow,
.hero--centered .btn-row,
.hero--centered .trust-row {
  justify-content: center;
}
.hero__media {
  position: relative;
  animation: vzfade 0.7s 0.12s ease both;
}
/* Fixed height by default, but a hero that declares an aspect ratio keeps it — the
   Windows hero is a 4:5 portrait and was being cropped to a 5:3 letterbox. */
.hero__media img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.hero__media[style*='--hero-aspect'] img {
  height: auto;
  aspect-ratio: var(--hero-aspect);
}
.hero__badge {
  position: absolute;
  left: -24px;
  bottom: 32px;
  background: var(--card);
  padding: 16px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 290px;
  font: 700 15px/1.28 var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero__badge span {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
}
.trust-item__title {
  font: 700 13.5px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.trust-item__sub {
  font: 500 12px var(--font-body);
  color: var(--muted-2);
}
.trust-divider {
  width: 1px;
  height: 34px;
  background: var(--line-2);
}

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

.band__text {
  font: 500 30px/1.4 var(--font-head);
  color: var(--on-navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.band__eyebrow {
  font: 700 12px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-pale);
  margin-bottom: 20px;
}

/* ----------------------------------------------------------------- logos -- */

.logos {
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  text-align: center;
}
.logos__label {
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 18px;
}
.logos__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px 44px;
  flex-wrap: wrap;
}
.logos__row img {
  height: 40px;
  width: auto;
  /* Matching on height alone lets a long thin wordmark run away with the row:
     Strugal is a 9:1 lockup, so at 40px tall it wants 359px of width, against
     186px for the widest of the others. Capping the width scales those few down
     (object-fit keeps them undistorted) and leaves every other logo untouched,
     since none of them reach the cap. */
  max-width: 190px;
  object-fit: contain;
}
/* Solid dark-ink logos are unreadable on the dark ground; flip only those,
   leaving logos that carry their own background or brand color untouched. */
:root[data-theme='dark'] .logos__row img[data-invert-dark] {
  filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logos__row img[data-invert-dark] {
    filter: brightness(0) invert(1);
  }
}

/* ------------------------------------------------------------- checklist -- */

/* Measurements taken from the artboard rather than eyeballed: 2px gaps over the line
   colour so they read as hairline dividers, 24/22 padding, a 24px tick disc. */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile {
  background: var(--card);
  padding: 24px 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 600 14.5px/1.45 var(--font-body);
  color: var(--ink-2);
}
.tile__check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
/* The closing cell is a statement, centred in its own tile rather than aligned to the
   ticks beside it. */
.tile--accent {
  background: var(--blue);
  color: #fff;
  font: 700 19px/1.24 var(--font-head);
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* ----------------------------------------------------------------- specs -- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec {
  background: var(--card);
  padding: 22px 20px;
}
.spec__label {
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.spec__value {
  font: 700 16px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.footnote {
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--muted-2);
  margin: 18px 0 0;
}

/* ------------------------------------------------------------------- faq --
   Single-open accordion, matching the deck: 900px column on the sunk ground,
   centred head, hairline-separated rows. */

.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.faq-head {
  text-align: center;
  margin-bottom: 36px;
}
.faq-h2 {
  font: 800 36px/1.1 var(--font-head);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item {
  background: var(--card);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 700 17px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-chev {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2.4px solid var(--muted-2);
  border-bottom: 2.4px solid var(--muted-2);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.faq-q[aria-expanded='true'] .faq-chev {
  transform: rotate(-135deg) translateY(-3px);
}
.faq-a {
  padding: 0 30px 26px;
}
.faq-a p {
  font: 400 15px/1.62 var(--font-body);
  color: var(--body);
  margin: 0;
}
@media (max-width: 900px) {
  .faq-h2 { font-size: 27px; }
  .faq-q { padding: 20px 22px; font-size: 16px; }
  .faq-a { padding: 0 22px 22px; }
}

/* -------------------------------------------------------- featured work -- */

.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 340px;
  display: block;
  text-decoration: none;
}
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 18, 32, 0.9), rgba(9, 18, 32, 0.05));
}
.work-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 30px;
}
.work-card__tag {
  display: inline-block;
  font: 700 11px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f2033;
  background: var(--gold-light);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.work-card__title {
  font: 800 26px var(--font-head);
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.work-card__place {
  font: 600 13px var(--font-body);
  color: #9fc4e6;
  margin-bottom: 10px;
}
.work-card__blurb {
  font: 400 14.5px/1.5 var(--font-body);
  color: #dbe4ef;
  margin: 0;
  max-width: 440px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Scrolled state, toggled from Base.astro: the bar drops back to exactly the
   size it was before the logo was enlarged.
   Each state names its own height, rather than the compact class re-pointing
   --header-h/--logo-h on the header and letting the descendants inherit. The
   two spellings should be equivalent; this one is preferred because it leaves
   the transition two plain lengths to move between and keeps the variables
   constant, which is the form that measured clean in every state tested (top,
   scrolled, and a reload that restores a scrolled position). */
.site-header.is-compact .site-header__inner {
  height: var(--header-h-sm);
}
.site-header.is-compact .logo img {
  height: var(--logo-h-sm);
}
/* Transitions only once the first frame is on screen — see Base.astro. A page
   that loads already scrolled should render compact outright, not animate down
   from full size while the reader watches. */
.js-ready .site-header__inner,
.js-ready .logo img {
  transition: height 0.24s ease;
}
/* width:auto keeps the logo on its own aspect ratio — the height is what the
   design fixes. Without it the width attribute stretches the mark. */
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .site-header__inner,
  .js-ready .logo img {
    transition: none;
  }
}
:root[data-theme='dark'] .logo img,
:root[data-theme='dark'] .site-footer__brand img {
  filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo img,
  :root:not([data-theme='light']) .site-footer__brand img {
    filter: brightness(0) invert(1);
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav a {
  white-space: nowrap;
}
.nav__link {
  font: 600 14px var(--font-body);
  color: var(--ink-3);
  text-decoration: none;
}
.nav__link:hover {
  color: var(--blue);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__phone {
  font: 700 14px var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.nav__cta {
  font: 700 13.5px var(--font-body);
  color: #fff;
  background: var(--blue);
  padding: 11px 20px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-hover);
  color: #fff;
}

.theme-toggle,
.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}
.theme-toggle:hover,
.burger:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
}

/* dropdowns */
.drop {
  position: relative;
  display: flex;
  align-items: center;
}
.drop__trigger {
  font: 600 14px var(--font-body);
  color: var(--ink-3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 26px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.drop__trigger:hover {
  color: var(--blue);
}
.drop__menu {
  position: absolute;
  top: 100%;
  left: -18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.drop:hover .drop__menu,
.drop:focus-within .drop__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.drop__list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 310px;
}
.drop__list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 560px;
}
.drop__item {
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 8px;
  display: block;
}
.drop__item:hover {
  background: var(--bg-sunk);
}
.drop__item strong {
  display: block;
  font: 700 13.5px var(--font-body);
  color: var(--ink);
  margin-bottom: 2px;
}
.drop__item span {
  font: 500 12.5px var(--font-body);
  color: var(--muted-2);
}
.drop__all {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  font: 700 13.5px var(--font-body);
  color: var(--blue);
}
.drop__divider {
  width: 1px;
  background: var(--line);
  flex: none;
}
.drop__feature {
  width: 220px;
  flex: none;
  text-decoration: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-sunk);
}
.drop__feature:hover {
  background: var(--line-soft);
}
.drop__feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  object-fit: cover;
  display: block;
}
.drop__feature-badge {
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.drop__feature-title {
  font: 700 14px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.drop__feature-blurb {
  font: 500 12px/1.4 var(--font-body);
  color: var(--body-2);
}
.drop__feature-cta {
  font: 700 12.5px var(--font-body);
  color: var(--blue);
}

/* mobile nav */
.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 10px var(--gutter) 22px;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow-y: auto;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav a {
  font: 600 15px var(--font-body);
  color: var(--ink-3);
  text-decoration: none;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a.sub {
  font-size: 14.5px;
  padding-left: 16px;
}
.mobile-nav__label {
  font: 700 11px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 15px 2px 7px;
}

/* -------------------------------------------------------------- breadcrumb -- */

.breadcrumb {
  font: 500 13px var(--font-body);
  color: var(--muted-2);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 22px;
}
.breadcrumb a {
  color: var(--muted-2);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--blue);
}
.breadcrumb [aria-current] {
  color: var(--ink-3);
  font-weight: 600;
}

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

.quote {
  background: var(--bg-navy);
  color: var(--on-navy);
  scroll-margin-top: 80px;
}
.quote__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 80px var(--gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}
.quote h2 {
  font: 800 42px/1.06 var(--font-head);
  color: var(--on-navy);
  margin: 0 0 20px;
}
.quote__blurb {
  font: 400 16.5px/1.65 var(--font-body);
  color: var(--on-navy-body);
  margin: 0 0 28px;
  max-width: 420px;
}
.quote__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote__contact-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.quote__contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-navy-tile);
  color: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
}
.quote__contact-title {
  font: 700 14px var(--font-head);
  color: var(--on-navy);
}
/* The phone number is a tel: link, but it sits on the navy panel where the
   global link blue has too little contrast — so it keeps the panel's own colour
   and shows it is a link on hover instead. display:block keeps it on its own
   line above the hours, the way the plain div it replaced did. */
a.quote__contact-tel {
  display: block;
  text-decoration: none;
  color: var(--on-navy);
  /* A 14px line is a 15px-tall tap target, which is small for the one link on
     the page a phone visitor is most likely to press. The padding grows the hit
     area to ~27px and the matching negative margin keeps the number sitting
     exactly where it did above the opening hours. */
  padding-block: 6px;
  margin-block: -6px;
  width: fit-content;
}
a.quote__contact-tel:hover,
a.quote__contact-tel:focus-visible {
  color: var(--blue-pale);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote__contact-sub {
  font: 500 13px var(--font-body);
  color: var(--on-navy-muted);
}

.form-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 34px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.field {
  margin-bottom: 16px;
}
.field label,
.form-row label {
  font: 600 12.5px var(--font-body);
  color: var(--ink-3);
  display: block;
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea,
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  font: 400 14px var(--font-body);
  background: var(--bg);
  color: var(--ink);
}
.field textarea {
  resize: vertical;
}
.form-status {
  font: 600 14px var(--font-body);
  margin: 0 0 14px;
}
.form-status--error {
  color: #c0392b;
}
.form-status--ok {
  color: #1f8b4c;
}

/* The confirmation once the form it belonged to has been removed. As a line of small
   green text it read like a validation hint rather than the answer to the only thing
   the visitor came to do, so standing alone it gets the weight of a panel. */
.form-status--standalone {
  font: 600 17px/1.5 var(--font-body);
  /* Constrained here rather than on the grid: that element also carries .wrap, whose
     `margin: 0 auto` re-centres anything narrower and pushed the confirmation out of
     line with the heading above it. */
  max-width: 620px;
  margin: 0;
  /* The confirmation takes the place of a form card in a grid row whose other column is
     much taller, and a stretched panel leaves the message stranded at the top of a tall
     empty box. Hug the text instead. */
  align-self: start;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid #1f8b4c;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

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

.site-footer {
  background: var(--bg-navy-deep);
  color: var(--on-navy);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter) 30px;
  display: grid;
  /* Brand + Products, Services, Locations, Contact. */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 1080px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    row-gap: 34px;
  }
}
.site-footer__brand img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 18px;
}
.site-footer__brand p {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--on-navy-muted);
  margin: 0;
  max-width: 320px;
}
.site-footer__heading {
  font: 700 11px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
  margin-bottom: 16px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.site-footer__col a,
.site-footer__col span {
  font: 500 14px var(--font-body);
  color: var(--on-navy-body);
  text-decoration: none;
}
.site-footer__col a:hover {
  color: #fff;
}
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__legal div {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter);
  font: 500 13px var(--font-body);
  color: var(--on-navy-dim);
}

/* ------------------------------------------------------------- documents -- */

/* Hairline rows rather than cards: someone hunting for one certificate scans a list
   far faster than a grid. Matches the spec-table treatment used elsewhere. */
.docs__list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.docs__list--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.docs__list > .doc:last-child,
.docs__list--2 > .doc:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.docs__list--2 > .doc:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.doc:hover {
  background: var(--bg-sunk);
}
.doc:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.doc__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.doc__title {
  font: 600 14px/1.35 var(--font-body);
  color: var(--ink);
}
.doc__kind {
  align-self: flex-start;
  font: 700 10px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 2px 8px;
}
.doc__size {
  flex: none;
  font: 500 12.5px var(--font-body);
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.doc__cta {
  flex: none;
  font: 700 12.5px var(--font-body);
  color: var(--blue);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .docs__list--2 {
    grid-template-columns: 1fr;
  }
  .docs__list--2 > .doc:nth-child(odd) {
    border-right: 0;
  }
  .docs__list--2 > .doc:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .doc {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .doc__size {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------- gallery -- */

.gallery__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.gallery__filter {
  font: 700 13px var(--font-body);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink-3);
}
.gallery__filter[aria-pressed='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.gallery__item {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 340px;
  cursor: pointer;
  display: block;
  width: 100%;
  background: var(--bg-sunk);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 18, 32, 0.9), rgba(9, 18, 32, 0.05));
}
.gallery__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 28px;
  text-align: left;
  display: block;
}
.gallery__tag {
  display: inline-block;
  font: 700 11px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f2033;
  background: var(--gold-light);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.gallery__name {
  display: block;
  font: 800 24px var(--font-head);
  color: #fff;
  letter-spacing: -0.01em;
}
.gallery__place {
  display: block;
  font: 600 13px var(--font-body);
  color: #9fc4e6;
  margin-top: 3px;
}
.gallery__none {
  font: 600 15px var(--font-body);
  color: var(--muted-2);
  text-align: center;
  padding: 40px 0 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 32, 0.72);
  backdrop-filter: blur(3px);
}
.lightbox__panel {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  max-width: 1040px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 44px;
}
/* Eyebrow on the left, close button on the right, as the deck lays it out. */
.lightbox__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.lightbox__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: flex-start;
}
.lightbox__grid[hidden] {
  display: none;
}
.lightbox__media > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  margin-bottom: 16px;
}
.lightbox__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lightbox__thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.lightbox__meta h2 {
  font: 800 30px/1.1 var(--font-head);
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.lightbox__meta .gallery__place {
  font: 500 15px var(--font-body);
  color: var(--muted-2);
  margin: 0 0 22px;
}
.lightbox__meta h3 {
  font: 700 15px var(--font-body);
  color: var(--ink);
  margin: 0 0 8px;
}
.lightbox__meta p,
.lightbox__meta li {
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--body);
}
.lightbox__meta p {
  margin: 0 0 22px;
}
.lightbox__meta ul {
  margin: 0 0 22px;
  padding-left: 20px;
}
/* Content the client has not signed off yet — dashed, so it reads as provisional. */
.lightbox__note {
  border: 1px dashed var(--line-2, #cdd7e3);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--bg-sunk);
}
.lightbox__note-label {
  font: 700 11px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.lightbox__note p {
  font: 400 14px/1.6 var(--font-body);
  color: var(--muted-2);
  margin: 0;
  font-style: italic;
}
.lightbox__close {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-sunk);
  color: var(--body);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.lightbox__close:hover {
  background: var(--blue);
  color: #fff;
}

/* Card affordances: a link when there is detail behind the card, an italic note
   when the project is still awaiting sign-off. */
.gallery__more {
  display: block;
  font: 700 13px var(--font-body);
  color: #9fc4e6;
  margin-top: 12px;
}
.gallery__pending {
  display: block;
  font: 500 13px var(--font-body);
  color: rgba(255, 255, 255, 0.66);
  font-style: italic;
  margin-top: 12px;
}
/* Cards with nothing behind them should not look clickable. */
.gallery__item:not([data-project]) {
  cursor: default;
}

/* Photo-led variant of the card grid, used where a deck puts an image above the copy. */
.card--media {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.card--media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.card--media .card__inner {
  padding: 24px 26px 28px;
}

@media (max-width: 900px) {
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  .gallery__item {
    height: 260px;
  }
  .lightbox__panel {
    padding: 26px;
  }
  .lightbox__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ------------------------------------------------------------------ tabs -- */

.tabs__strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tabs__btn {
  font: 700 14px var(--font-body);
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink-3);
}
.tabs__btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.tabs__btn[aria-selected='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.tabs__title {
  font: 800 26px/1.16 var(--font-head);
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.tabs__body {
  font: 400 16px/1.66 var(--font-body);
  color: var(--body);
  margin: 0;
  max-width: 62ch;
}
.section--navy .tabs__btn {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--on-navy-body);
}
.section--navy .tabs__btn[aria-selected='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.section--navy .tabs__title {
  color: var(--on-navy);
}
.section--navy .tabs__body {
  color: var(--on-navy-body);
}

/* Two-column variant: copy and tab pills on the left, the photograph on the right.
   Selecting a tab outlines the matching window bay in the photo. */
.tabs-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.tabs-split .section-head {
  margin-bottom: 26px;
}
.tabs-split .tabs__strip {
  margin-bottom: 24px;
}
/* Beside a photo the panel reads as a card rather than as loose copy. */
.tabs-split .tabs__panel {
  background: var(--card);
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 14px;
  padding: 28px 30px;
  min-height: 150px;
}
.tabs-split .tabs__title {
  font: 700 22px var(--font-head);
  margin: 0 0 10px;
}
.tabs-split .tabs__body {
  font: 400 15.5px/1.65 var(--font-body);
}
/* Accordion form: the same items stacked, each row an icon tile, a title and a
   ± sign. The 2px gaps over a line-coloured ground read as hairline dividers. */
.tabs--accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--line-2, #e0e7f0);
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 14px;
  overflow: hidden;
}
.tabs__row {
  background: var(--card);
}
.tabs__head {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.tabs__head-left {
  display: flex;
  align-items: center;
  gap: 13px;
}
.tabs__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.tabs__label {
  font: 700 17px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tabs__sign {
  flex: none;
  font: 700 19px/1 var(--font-head);
  color: var(--blue);
}
.tabs__sign::before {
  content: '+';
}
.tabs__head[aria-expanded='true'] .tabs__sign::before {
  content: '−';
}
.tabs--accordion .tabs__panel {
  padding: 0 24px 20px;
  background: transparent;
  border: 0;
  min-height: 0;
}
.tabs--accordion .tabs__panel[hidden] {
  display: none;
}

.tabs__media {
  position: relative;
  display: block;
}
.tabs__media > img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--tabs-aspect, 3 / 4);
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* Full-strength brand blue over the photo in both themes, as the deck specifies. */
.tabs__bay {
  position: absolute;
  border: 3px solid #1f6fd0;
  border-radius: 4px;
  box-shadow:
    0 0 0 3px rgba(31, 111, 208, 0.28),
    0 0 26px rgba(31, 111, 208, 0.5);
  pointer-events: none;
}
.tabs__bay[hidden] {
  display: none;
}

/* -------------------------------------------------------------- hotspots -- */

/* Diagram column on the left, explanatory copy on the right — one band, as the deck
   lays it out. Without a side column the diagram takes the full width. */
.hotspots {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.hotspots:not(:has(.hotspots__aside)) {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin: 0 auto;
}
/* Commercial Doors puts the copy first and the diagram second. */
.hotspots--flip {
  grid-template-columns: 1.05fr 0.95fr;
}
.hotspots--flip .hotspots__col {
  order: 2;
}
.hotspots--flip .hotspots__aside {
  order: 1;
}
/* A tab strip standing in for the checklist beside a diagram. */
.hotspots__aside [data-aside-tabs] .tabs__strip {
  margin-bottom: 22px;
}
.hotspots__aside [data-aside-tabs] .tabs__panel {
  background: var(--card);
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 14px;
  padding: 24px 26px;
}
.hotspots__aside [data-aside-tabs] .tabs__title {
  font: 700 20px var(--font-head);
  margin: 0 0 10px;
}
.hotspots__aside [data-aside-tabs] .tabs__body {
  font: 400 15px/1.6 var(--font-body);
}

/* The prompt card sits directly under the diagram, in the same column. */
.hotspots__col {
  display: block;
}
.hotspots__figure {
  position: relative;
  display: block;
}
.hotspots__figure img,
.hotspots__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
}
/* Markers keep full-strength brand blue over the photo — the deck flags these
   with data-keepaccent so its theme engine leaves them alone in dark mode. */
.hotspots__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1f6fd0;
  color: #1f6fd0;
  font: 700 14px/1 var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(15, 32, 51, 0.28);
}
.hotspots__pin:hover,
.hotspots__pin[aria-pressed='true'] {
  background: #1f6fd0;
  color: #fff;
}
/* The card under the diagram: a prompt until a marker is picked, then that detail. */
.hotspots__panel {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 12px;
  padding: 22px 24px;
}
.hotspots__group {
  font: 700 11px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.hotspots__title {
  font: 700 19px var(--font-head);
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hotspots__body,
.hotspots__prompt {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--body);
  margin: 0;
}
.hotspots__prompt {
  color: var(--muted-2);
}
.hotspots__aside .h2-sm {
  margin-bottom: 16px;
}
.hotspots__aside .body-text {
  margin-bottom: 24px;
}

/* Stacked tick rows. The 2px gaps over a line-coloured ground read as hairline
   dividers, which is how the deck draws them. */
.ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.ticklist li {
  background: var(--card);
  padding: 15px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  font: 600 14.5px var(--font-body);
  color: var(--ink-2, var(--ink));
}
.ticklist__tick {
  color: var(--blue);
  font-weight: 700;
  flex: none;
}

/* An aside framed with a blue left border — "Who installs them?" and its kin. */
.callout {
  border: 1px solid var(--line-2, #e0e7f0);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 34px 36px;
  background: var(--card);
}
.callout__title {
  font: 700 24px var(--font-head);
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.callout .prose p:last-child {
  margin-bottom: 0;
}

.card__num {
  font: 700 12px var(--font-body);
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ flow -- */

.flow__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chip, #eef2f7);
  color: var(--muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 13px var(--font-head);
}
/* The selected step fills its disc solid, which is what marks the position. */
.flow__step[aria-expanded='true'] .flow__num {
  background: var(--blue);
  color: #fff;
}

/* A centred track of chips joined by arrows, wrapping on narrow screens. The deck
   uses no step numbers here — the arrows carry the sequence. */
.flow--rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.flow__rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.flow__chip {
  background: var(--card);
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 10px;
  padding: 14px 20px;
  font: 600 14px var(--font-body);
  color: var(--ink-2);
}
.flow__arrow {
  color: var(--blue);
  font-weight: 700;
  font-size: 16px;
}

/* Every step is a card of its own, and the selected one expands in place to carry its
   copy — the deck never puts that copy anywhere else. Measurements follow the artboard
   directly: 12px radius, 18/20 padding, a 30px numbered disc, 10px between cards. */
.flow--stepper {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flow__step {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line-2, #e0e7f0);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  text-align: left;
}
.flow__step:hover {
  border-color: var(--blue);
}
.flow__step[aria-expanded='true'] {
  background: var(--blue-soft);
  border-color: var(--blue);
}
.flow__step-body {
  flex: 1;
}
.flow__label {
  display: block;
  font: 700 16px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.flow__detail {
  display: block;
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--body);
  margin-top: 8px;
}
.flow__detail[hidden] {
  display: none;
}
.flow__media-col {
  position: relative;
}
.flow__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.flow__media[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .hotspots,
  .tabs-split,
  .flow--stepper {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* The diagram leads on narrow screens, whichever side it takes wide. */
  .hotspots__aside,
  .hotspots--flip .hotspots__aside {
    order: 2;
  }
  .hotspots--flip .hotspots__col {
    order: 1;
  }
  .tabs__title,
  .hotspots__title {
    font-size: 21px;
  }
  .callout {
    padding: 26px 24px;
  }
}

/* -------------------------------------------------------------- link row -- */

.link-row-section {
  padding-top: 46px;
  padding-bottom: 46px;
}
.link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* The button pair closes a page under a centred heading, so it centres with it
   rather than splitting to the two far edges the way the text-link row does. */
.link-row--buttons {
  justify-content: center;
  gap: 14px;
}
@media (max-width: 560px) {
  /* Full-width stacked buttons read as one clear next step on a phone, where
     two side-by-side pills would each be too narrow to land the label. */
  .link-row--buttons {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ---------------------------------------------------------- configurator -- */

/* Full-bleed, edge to edge — the 3D tool wants every pixel of width it can get. */
.configurator {
  background: var(--bg-navy);
  /* The site header is sticky, so land below it on anchor scrolls. */
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.configurator__frame {
  position: relative;
  width: 100%;
  /* Capped to the space below the sticky header: the configurator has its own
     toolbar along the top edge, and anything taller than this leaves part of it
     permanently under the header, which also swallows the clicks. */
  height: min(var(--cfg-h, 820px), calc(100vh - var(--header-h) - 8px));
  background: var(--bg-navy);
}
.configurator__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.configurator__frame.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100vh;
  height: 100dvh;
}

.configurator__expand,
.configurator__close {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 12.5px var(--font-body);
  color: #fff;
  background: rgba(10, 21, 36, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 9px 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.configurator__expand:hover,
.configurator__close:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.configurator__expand {
  top: 14px;
  right: 14px;
}
/* Bottom-left, opposite the button that opened it — see Configurator.astro. */
.configurator__close {
  bottom: 14px;
  left: 14px;
}
.configurator__expand[hidden],
.configurator__close[hidden] {
  display: none;
}

@media (max-width: 900px) {
  /* The panel stacks under the canvas on narrow screens, so the app's own reported
     height wins here — capping it would clip the controls. */
  .configurator__frame {
    height: var(--cfg-h, 820px);
    min-height: 620px;
  }
}

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

.prose {
  font: 400 17px/1.75 var(--font-body);
  color: var(--body);
}
.prose h2 {
  font: 800 30px/1.15 var(--font-head);
  margin: 44px 0 16px;
}
.prose h3 {
  font: 700 22px/1.2 var(--font-head);
  margin: 32px 0 12px;
}
.prose p {
  margin: 0 0 20px;
}
.prose ul,
.prose ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.prose li {
  margin-bottom: 8px;
}
.prose img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 28px 0;
}
.prose blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
  color: var(--ink-2);
  font-style: italic;
}

/* ------------------------------------------------------------------ blog --
   Ported 1:1 from "Vitraz Blog.dc.html". Structure, spacing and type sizes come
   straight from the artboard's inline styles; only the light/dark values are
   swapped for tokens, which resolve to the same colours the design's theme
   engine (assets/vitraz-theme.js) computes at runtime. */

.blog-head {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px var(--gutter) 44px;
  text-align: center;
}
.blog-head h1 {
  font: 800 46px/1.08 var(--font-head);
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}
.blog-head p {
  font: 400 17px/1.6 var(--font-body);
  color: var(--body);
  margin: 0 auto 30px;
  max-width: 600px;
}
/* The blog eyebrow carries a rule on BOTH sides, unlike the left-ruled one used
   elsewhere on the site. */
.eyebrow--ruled {
  justify-content: center;
}
.eyebrow--ruled::after {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.blog-search {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.blog-search input {
  width: 100%;
  font: 500 15px var(--font-body);
  color: var(--ink);
  background: var(--bg);
  padding: 14px 18px 14px 44px;
  border: 1px solid var(--line-input);
  border-radius: 10px;
  box-sizing: border-box;
  outline: none;
}
.blog-search input:focus {
  border-color: var(--blue);
}
.blog-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
}

.blog-filters {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 34px;
}
.blog-filters__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-cat {
  font: 700 13px var(--font-body);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink-3);
}
.blog-cat[aria-pressed='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.blog-dates {
  display: flex;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px;
}
.blog-date {
  font: 700 12.5px var(--font-body);
  padding: 8px 15px;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-3);
}
.blog-date[aria-pressed='true'] {
  background: var(--bg-navy);
  color: #fff;
}

.blog-featured-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 54px;
}
.blog-featured {
  text-decoration: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.blog-featured:hover {
  box-shadow: 0 20px 48px rgba(15, 32, 51, 0.14);
}
.blog-featured img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.blog-featured__panel {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-sunk);
}
.blog-featured__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.blog-badge {
  font: 700 11px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 6px 13px;
  border-radius: 100px;
}
.blog-featured__cat {
  font: 700 11px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-featured h2 {
  font: 800 27px/1.18 var(--font-head);
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.blog-featured p {
  font: 400 15px/1.6 var(--font-body);
  color: var(--body-2);
  margin: 0 0 20px;
}
.blog-meta {
  font: 500 13px var(--font-body);
  color: var(--muted-2);
}

.blog-layout-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 78px;
}
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 0.38fr;
  gap: 56px;
  align-items: flex-start;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.blog-card {
  text-decoration: none;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.blog-card:hover {
  box-shadow: 0 18px 40px rgba(15, 32, 51, 0.13);
  transform: translateY(-3px);
}
.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 22px 24px;
}
.blog-pill {
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  display: inline-block;
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.blog-card h3 {
  font: 800 18.5px/1.28 var(--font-head);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.blog-card__snippet {
  font: 400 14px/1.55 var(--font-body);
  color: var(--body-2);
  margin: 0 0 16px;
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.blog-card__more {
  font: 700 13px var(--font-body);
  color: var(--blue);
  white-space: nowrap;
}

.blog-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line-input);
  border-radius: 16px;
}
.blog-empty p {
  font: 600 15px var(--font-body);
  color: var(--muted-2);
  margin: 0;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
/* Pages are anchors so each has a real address — openable in a new tab, copyable,
   and followable by a crawler. The click handler keeps navigation instant. */
.blog-pagination .page-link {
  font: 700 13px var(--font-body);
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink-3);
  padding: 9px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blog-pagination .page-link:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.blog-pagination .page-link.page {
  width: 38px;
  height: 38px;
  padding: 0;
}
.blog-pagination .page-link[aria-current='page'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
/* The ends of the range render as spans, not links — nowhere to go. */
.blog-pagination .is-off {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.blog-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.blog-side {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.blog-side__card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
}
.blog-side__card h3 {
  font: 800 15px var(--font-head);
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.blog-recent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-recent a {
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: center;
}
.blog-recent img {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}
.blog-recent__title {
  font: 700 13.5px/1.3 var(--font-body);
  color: var(--ink);
}
.blog-recent__date {
  font: 500 11.5px var(--font-body);
  color: var(--muted-2);
  margin-top: 3px;
}
.blog-catlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blog-catlist button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
  text-align: left;
  width: 100%;
}
.blog-catlist span:first-child {
  font: 600 14px var(--font-body);
  color: var(--ink-3);
}
.blog-catlist button:hover span:first-child {
  color: var(--blue);
}
.blog-catlist .count {
  font: 700 12px var(--font-body);
  color: var(--muted-2);
  background: var(--bg-sunk);
  padding: 3px 9px;
  border-radius: 100px;
}
.blog-authors {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-author__initial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px var(--font-head);
  flex: none;
}
.blog-author__name {
  font: 700 13.5px var(--font-body);
  color: var(--ink);
}
.blog-author__role {
  font: 500 12px var(--font-body);
  color: var(--muted-2);
}
.blog-side__cta {
  background: var(--bg-navy);
  border-radius: 16px;
  padding: 28px 24px;
}
.blog-side__cta h3 {
  font: 800 18px var(--font-head);
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.blog-side__cta p {
  font: 400 14px/1.55 var(--font-body);
  color: var(--on-navy-body);
  margin: 0 0 18px;
}
.blog-side__cta a {
  display: block;
  text-align: center;
  font: 700 14px var(--font-body);
  color: var(--bg-navy);
  background: #fff;
  padding: 13px;
  border-radius: 9px;
  text-decoration: none;
}
.blog-side__contact {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
}
.blog-side__contact h3 {
  font: 800 18px var(--font-head);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.blog-side__contact p {
  font: 400 14px/1.55 var(--font-body);
  color: var(--body-2);
  margin: 0 0 18px;
}
.blog-side__contact a {
  display: block;
  text-align: center;
  font: 700 14px var(--font-body);
  color: #fff;
  background: var(--blue);
  padding: 13px;
  border-radius: 9px;
  text-decoration: none;
}
.blog-side__contact a:hover {
  background: var(--blue-hover);
}

/* The artboard collapses all three grids at 980px. */
@media (max-width: 980px) {
  .blog-layout,
  .blog-grid,
  .blog-featured {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------- blog (legacy) -- */

.post-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.post-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.post-card__inner {
  padding: 22px 24px 26px;
}
.post-card__meta {
  font: 600 12.5px var(--font-body);
  color: var(--muted-2);
  margin-bottom: 10px;
}
.post-card h3 {
  font: 700 20px/1.25 var(--font-head);
  margin: 0 0 10px;
}
.post-card p {
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--body-2);
  margin: 0;
}

.author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--card);
  margin: 40px 0;
}
.author-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

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

@media (max-width: 1080px) {
  .nav,
  .nav__actions {
    display: none;
  }
  .burger {
    display: flex;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --section-y: 56px;
    /* A 108px sticky bar swallows too much of a phone viewport, so the mark
       steps down here — still well up on the 42px it used to be — and the
       scrolled state shrinks further, where screen height is scarcest. */
    --logo-h: 62px;
    --header-h: 84px;
    --logo-h-sm: 44px;
    --header-h-sm: 66px;
  }
  .hero,
  .split,
  .split--wide-left,
  .split--wide-right,
  .quote__inner,
  .grid--2,
  .grid--3,
  .grid--4,
  .tile-grid,
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
  }
  .h1 {
    font-size: 34px;
  }
  .h2,
  .quote h2 {
    font-size: 28px;
  }
  .h2-sm {
    font-size: 24px;
  }
  .band__text {
    font-size: 21px;
  }
  .hero__media img {
    height: 320px;
  }
  .hero__badge {
    left: 12px;
    bottom: 12px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .work-card {
    height: 260px;
  }
}

@media (max-width: 560px) {
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 22px;
  }
}

/* Renders a wrapper transparently, so a single-child layout keeps its parent's box. */
.contents {
  display: contents;
}

/* ------------------------------------------------------------- turnstile -- */

/* The widget itself is an iframe Cloudflare styles from the theme we pass it; this
   only reserves its space and centres it. The min-height stops the submit button
   jumping down when the challenge finishes loading. */
.turnstile {
  margin: 4px 0 16px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}
.turnstile__noscript {
  font: 400 13px/1.5 var(--font-body);
  color: var(--muted-2);
  margin: 0;
  text-align: center;
}
/* On the navy quote block the surrounding text is light, so the fallback must be too. */
.quote .turnstile__noscript {
  color: rgba(255, 255, 255, 0.72);
}
/* Shown only when the Turnstile challenge cannot run — a phone number rather than a
   dead end, since the server deliberately will not accept an unverified submission. */
.form-fallback {
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--muted-2);
  margin: 12px 0 0;
  text-align: center;
}
.form-fallback a {
  color: var(--blue);
  font-weight: 700;
}

/* ------------------------------------------------------- blog article -- */
/* Measurements from the "Vitraz Blog Article" artboard: the piece on the left, a
   sidebar at .38fr on the right, and related reading in a band underneath. */

.article-layout {
  display: grid;
  grid-template-columns: 1fr 0.38fr;
  gap: 56px;
  align-items: flex-start;
  padding: 30px 44px 78px;
}
.article-cat {
  display: inline-block;
  font: 700 11px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft, #fdf5e8);
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.article-title {
  font: 800 42px/1.12 var(--font-head);
  color: var(--ink);
  margin: 0 0 22px;
  letter-spacing: -0.025em;
  max-width: 760px;
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--font-head);
  flex: none;
}
.article-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.article-byline__name {
  font: 700 14px var(--font-body);
  color: var(--ink);
}
.article-byline__sub {
  font: 500 12.5px var(--font-body);
  color: var(--muted-2);
}
.article-actions {
  display: flex;
  gap: 8px;
}
.article-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 13px var(--font-body);
  color: var(--ink-3, var(--body));
  background: transparent;
  border: 1px solid var(--line-input);
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
}
.article-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  margin-bottom: 40px;
}
/* The article's own reading measure — wider than the marketing prose column. */
.article-prose > :first-child {
  font: 400 18px/1.75 var(--font-body);
  color: var(--ink-3, var(--body));
}
.article-prose h2 {
  font: 800 26px/1.2 var(--font-head);
  color: var(--ink);
  margin: 34px 0 16px;
  letter-spacing: -0.015em;
}
.article-prose h3 {
  font: 700 20px var(--font-head);
  color: var(--ink);
  margin: 28px 0 12px;
}
.article-prose p,
.article-prose li {
  font: 400 17px/1.7 var(--font-body);
  color: var(--body);
}
.article-prose blockquote {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 24px;
  margin: 34px 0;
  font: 600 21px/1.5 var(--font-head);
  color: var(--ink);
}
/* Migrated posts carry comparison tables; they must stay readable and never push the
   page sideways on a phone. */
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font: 400 15px/1.55 var(--font-body);
  display: block;
  overflow-x: auto;
}
.article-prose th,
.article-prose td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  color: var(--body);
}
.article-prose th {
  background: var(--bg-sunk);
  color: var(--ink);
  font-weight: 700;
}
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ---- sidebar ---- */

.article-side {
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 96px;
}
.side-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: var(--card);
}
.side-card h3 {
  font: 800 15px var(--font-head);
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.side-card p {
  font: 400 14px/1.55 var(--font-body);
  color: var(--body-2);
  margin: 0 0 18px;
}
.side-card--navy {
  background: var(--ink);
  border-color: var(--ink);
  padding: 28px 24px;
}
.side-card--navy h3 {
  color: #fff;
  font-size: 18px;
}
.side-card--navy p {
  color: var(--on-navy-body, #b7c4d6);
}
.side-recent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.side-recent a {
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: center;
}
.side-recent img {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}
.side-recent__title {
  font: 700 13.5px/1.3 var(--font-body);
  color: var(--ink);
}
.side-recent__date {
  font: 500 11.5px var(--font-body);
  color: var(--muted-2);
  margin-top: 3px;
}
.side-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 10px 4px;
  font: 600 14px var(--font-body);
  color: var(--ink-3, var(--body));
}
.side-cats a:hover {
  color: var(--blue);
}
.side-cats__count {
  font: 700 12px var(--font-body);
  color: var(--muted-2);
  background: var(--bg-sunk);
  padding: 3px 9px;
  border-radius: 100px;
}
.side-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-links a {
  text-decoration: none;
  padding: 10px 4px;
  font: 600 14px/1.4 var(--font-body);
  color: var(--ink-3, var(--body));
}
.side-links a:hover {
  color: var(--blue);
}
.side-btn {
  display: block;
  text-align: center;
  font: 700 14px var(--font-body);
  padding: 13px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.side-btn--light {
  color: var(--ink);
  background: #fff;
}
.side-btn--blue {
  color: #fff;
  background: var(--blue);
}
.side-btn--blue:hover {
  background: var(--blue-hover);
  color: #fff;
}

/* ---- author box ---- */

.author-box__name {
  font: 800 17px var(--font-head);
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.author-box__role {
  font: 600 13px var(--font-body);
  color: var(--muted-2);
  margin-bottom: 12px;
}
.author-box__bio {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--body-2);
  margin: 0 0 14px;
}

/* ---- related reading ---- */

.related-head {
  font: 800 22px var(--font-head);
  color: var(--ink);
  margin: 0 0 26px;
  letter-spacing: -0.01em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.related-card {
  text-decoration: none;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.related-card:hover {
  box-shadow: 0 16px 36px rgba(15, 32, 51, 0.12);
}
.related-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.related-card__body {
  padding: 18px 20px;
}
.related-card__cat {
  font: 700 10px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.related-card h4 {
  font: 800 16px/1.3 var(--font-head);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 24px 20px 56px;
  }
  .article-side {
    position: static;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .article-title {
    font-size: 32px;
  }
}

/* Printing an article should give the piece, not the furniture around it. */
@media print {
  .no-print {
    display: none !important;
  }
  .article-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ---------------------------------------------------------------- locations -- */

.locations-map {
  margin-top: 40px;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.location-card {
  display: block;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.location-card:hover,
.location-card:focus-visible {
  border-color: var(--blue-pale);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.location-card h3 {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}

.location-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
  /* Intros are migrated first sentences of varying length; clamp so the grid stays even. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.location-card__sub {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.state-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

.state-head h2 {
  margin: 0;
}

.state-head h2 a {
  color: inherit;
  text-decoration: none;
}

.state-head h2 a:hover {
  color: var(--blue);
}

/* Hero photo sits beside the title rather than under it — full-bleed under an H1 it
   filled the viewport before a reader reached any content. */
.loc-hero {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 48px;
  align-items: center;
}

.loc-hero__text .lead {
  margin-bottom: 0;
}

.location-hero {
  display: block;
  width: 100%;
  /* Cropped rather than left at native aspect: these come from a mixed pool and their
     native ratios vary. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

@media (max-width: 860px) {
  .loc-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .location-hero {
    aspect-ratio: 16 / 9;
  }
}

/* Ghost button on a navy ground.
   .btn--ghost uses var(--ink), which is the navy itself — invisible on section--navy. */
.btn--ghost-light {
  color: var(--on-navy);
  border-color: rgba(255, 255, 255, 0.42);
  padding: 15px 22px;
  background: transparent;
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  border-color: var(--on-navy);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-navy);
}

/* .btn-row is a flex container, so the parent's text-align does not position its
   items — centring has to be declared on the flex axis. */
.btn-row--center {
  justify-content: center;
}

/* ------------------------------------------------------ locations: map legend -- */

.ne-map__legend {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 10px;
}

.ne-map__legend li + li {
  border-top: 1px solid var(--line-soft);
}

/* -------------------------------------------------- locations: service cards -- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

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

.svc-card:hover,
.svc-card:focus-visible {
  border-color: var(--blue-pale);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.svc-card img {
  width: 100%;
  height: 156px;
  object-fit: cover;
  display: block;
}

.svc-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.svc-card__body h3 {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.svc-card__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}

.svc-card__more {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}

/* ------------------------------------------------------- locations: hub bands -- */

.loc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.loc-split img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.loc-split__body h2 {
  margin: 0 0 14px;
}

.prod-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.prod-tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 4 / 3;
}

.prod-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.prod-tile:hover img,
.prod-tile:focus-visible img {
  transform: scale(1.05);
}

.prod-tile span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 14px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 21, 36, 0.88), rgba(10, 21, 36, 0));
}

@media (max-width: 860px) {
  .loc-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* -------------------------------------------------- services dropdown aside -- */

/* `.nav a { white-space: nowrap }` cascades into the feature card, so its title and
   blurb could not wrap and were clipped by the menu's overflow:hidden. */
.drop__feature-title,
.drop__feature-blurb,
.drop__aside-link strong,
.drop__aside-link em {
  white-space: normal;
}

.drop__aside {
  width: 258px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-sunk);
}

/* Only inside the aside, where the 258px column already sets the width. The Products
   dropdown still has .drop__feature as a direct flex child of .drop__menu, and an
   unscoped `width:auto` there let it stretch and drag the whole menu tall. */
.drop__aside .drop__feature {
  width: auto;
}

.drop__aside-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.drop__aside-link:hover,
.drop__aside-link:focus-visible {
  background: var(--line-soft);
}

.drop__aside-link svg {
  color: var(--blue);
  flex: none;
  margin-top: 2px;
}

.drop__aside-link strong {
  display: block;
  font: 700 13.5px var(--font-head);
  letter-spacing: -0.01em;
}

.drop__aside-link em {
  display: block;
  margin-top: 2px;
  font: 500 12px/1.4 var(--font-body);
  font-style: normal;
  color: var(--body);
}

/* ------------------------------------------------------- location chapters -- */

.loc-chapter__head {
  max-width: 780px;
  margin-bottom: 22px;
}

.loc-chapter__head h2 {
  margin: 0;
}

/* Wider than wrap-narrow: these pages were a thin column of text with nothing beside
   it. Still capped — full 1200px line lengths are unreadable for body copy. */
.loc-prose {
  max-width: 860px;
}

.loc-chapter.section--navy .loc-prose,
.loc-chapter.section--navy .loc-chapter__head h2 {
  color: var(--on-navy);
}

.loc-chapter.section--navy .loc-prose p,
.loc-chapter.section--navy .loc-prose li {
  color: var(--on-navy-body);
}

.loc-chapter.section--navy .eyebrow {
  color: var(--gold-light);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
}

.section--sunk .feature-card {
  background: var(--bg);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
}

.feature-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ---------------------------------------------------- location mid-body CTA -- */

/* The band sits between two full-padding sections, so its own vertical padding was
   stacking on theirs and leaving the CTA marooned in white space. Pull it up into the
   preceding section's padding instead. */
.loc-midcta {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -30px;
  margin-bottom: -18px;
}

.midcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}

.midcta h2 {
  margin: 0 0 8px;
}

.midcta p {
  margin: 0;
  color: var(--body);
  max-width: 52ch;
  font-size: 15px;
}

.midcta .btn-row {
  flex: none;
}

@media (max-width: 760px) {
  .midcta {
    padding: 26px 22px;
  }
}

/* --------------------------------------------- location closing contact panel -- */

.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 26px;
  max-width: 860px;
}

.contact-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.section--sunk .contact-action {
  background: var(--bg);
}

.contact-action:hover,
.contact-action:focus-visible {
  border-color: var(--blue-pale);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.contact-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue);
}

.contact-action--go .contact-action__icon {
  background: var(--blue);
  color: #fff;
}

.contact-action strong {
  display: block;
  font: 700 15px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.contact-action em {
  display: block;
  margin-top: 2px;
  font: 500 13.5px var(--font-body);
  font-style: normal;
  color: var(--body);
}

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

.nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.nearby-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 22px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.nearby-card:hover,
.nearby-card:focus-visible {
  border-color: var(--blue-pale);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.nearby-card__name {
  font: 700 17px var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.nearby-card__blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nearby-card__go {
  margin-top: auto;
  padding-top: 8px;
  font: 700 13.5px var(--font-body);
  color: var(--blue);
}

/* ------------------------------------------------------------ author pages -- */

.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;
}

.author-hero {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.author-hero__photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: block;
}

/* Monogram stand-in. Used until a real photograph is supplied — inventing a portrait
   of a named person is not an option, and a blank space reads as broken. */
.author-hero__photo--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-navy);
  color: var(--on-navy);
  font: 700 46px var(--font-head);
  letter-spacing: -0.02em;
}

.author-hero__role {
  font: 600 15px var(--font-body);
  color: var(--blue);
}

.author-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.author-page-of {
  font-weight: 500;
  color: var(--muted);
}

.author-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* The author list is paginated server-side, so these are real links rather than the
   blog index's script-driven buttons. */
.blog-pagination .page-link.is-current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ------------------------------------------------------- product catalogues -- */

.cat-grid {
  display: grid;
  /* 230px min so all four fit on one row inside the 1112px content width; at 268
     the fourth wrapped and sat alone. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 30px;
}

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

.cat-card:hover,
.cat-card:focus-visible {
  border-color: var(--blue-pale);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.cat-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
}

.cat-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cat-card__covers {
  font: 700 11px var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}

.cat-card__body h3 {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.28;
  margin: 0;
  color: var(--ink);
}

.cat-card__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}

.cat-card__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
}

.cat-card__dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 14px var(--font-body);
  color: var(--blue);
}

.cat-card__meta {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

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

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font: 600 13.5px var(--font-body);
  color: var(--on-navy-body);
  text-decoration: none;
  transition: color 0.16s ease;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: var(--on-navy);
}

.site-footer__social svg {
  flex: none;
}

/* Copyright left, credit right. Was a single centred-width line with one child. */
.site-footer__legal div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: var(--on-navy-dim);
  text-decoration: none;
  transition: color 0.16s ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--on-navy-body);
  text-decoration: underline;
}

/* ----------------------------------------------------- request a quote -- */

/* Visually hidden but still read aloud — the fieldset's legend names the choice for a
   screen reader while the two cards carry it visually. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Constrained INSIDE .wrap. Putting this max-width on the .wrap element itself let its
   `margin: 0 auto` re-centre the narrower box, so the heading sat indented from the form
   underneath instead of sharing its left edge. */
.rq__head {
  max-width: 760px;
  margin-bottom: 30px;
}
.rq__head h1 {
  margin: 0 0 12px;
}
.rq__lede {
  font: 400 16px/1.65 var(--font-body);
  color: var(--body);
  margin: 0;
}
/* Form and aside side by side. min-width:0 on both: a grid item's default min-width:auto
   is its content, which lets a long filename or a wide select push the column wider than
   its track and overflow the page. */
.rq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: start;
}

/* Once the form is replaced by its confirmation there is no second column to balance,
   and the photograph and trust points have done their job: the visitor has already
   sent the enquiry. Collapsing to one column stops the page ending in a tall blank
   where the form used to be. */
.rq__grid--sent {
  grid-template-columns: minmax(0, 1fr);
}
.rq__form {
  border: 1px solid var(--line);
  min-width: 0;
}
.rq__aside {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-h) + 22px);
}
.rq__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.rq__trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.rq__trust li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.rq__trust svg {
  color: var(--blue);
  flex: none;
  margin-top: 2px;
}
.rq__trust strong {
  display: block;
  font: 700 14px var(--font-body);
  color: var(--ink);
}
.rq__trust em {
  display: block;
  font: 400 13px var(--font-body);
  font-style: normal;
  color: var(--muted-3);
}
.rq__aside-note {
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--muted-3);
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1000px) {
  /* The photo stops earning its column here — the form leads, and the reassurance
     follows it rather than being squeezed alongside. */
  .rq__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .rq__aside {
    position: static;
  }
  .rq__photo {
    aspect-ratio: 16 / 7;
  }
}
/* A step heading inside the card, not a page heading — it labels a block of fields. */
.rq__step {
  font: 700 13px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin: 0 0 14px;
}
.rq__step + * {
  margin-top: 0;
}
.rq__form .rq__step:not(:first-of-type) {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.rq__opt {
  font-weight: 400;
  color: var(--muted-3);
}

/* The fork. Real radios, drawn as two cards. */
.rq__fork {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 12px;
}
.rq__card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.rq__card:hover {
  border-color: var(--blue);
}
.rq__card input {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--blue);
}
.rq__card.is-on {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}
.rq__card-body {
  display: block;
}
.rq__card-title {
  display: block;
  font: 700 15px var(--font-body);
  color: var(--ink);
  margin-bottom: 4px;
}
.rq__card-note {
  display: block;
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--muted-3);
}

.rq__panel .note,
.rq__check .note {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--muted-3);
  margin: 7px 0 0;
}
/* The checkbox reads as one line, so the label must not stack like the field labels. */
.rq__check label {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px var(--font-body);
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}
.rq__check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--blue);
}
.rq__panel input[type='file'] {
  width: 100%;
  padding: 11px 13px;
  border: 1px dashed var(--line-input);
  border-radius: var(--radius-sm);
  font: 400 13.5px var(--font-body);
  background: var(--bg-sunk);
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 640px) {
  .rq__form {
    padding: 22px;
  }
}