/* ==========================================================================
   1. Tokens — generated from the designer's Figma variable exports
   (design-tokens/: colors Default, typography Desktop/Mobile, dimensions
   Desktop/Mobile). Values that differ between modes use clamp() from 320px
   (Mobile) to 1600px (Desktop), exact at both ends.
   ========================================================================== */
:root {
  /* Colour — COLORS/Default.tokens.json */
  --primary: #c95d3a; /* color/brand/primary */
  --secondary: #66858a; /* color/brand/secondary */
  --accent: #ff906c; /* color/brand/accent */
  --neutral-white: #ffffff; /* color/neutral/white */
  --neutral-cream-100: #fcfaf6; /* color/neutral/cream-100 */
  --neutral-cream-200: #f5f1e9; /* color/neutral/cream-200 */
  --neutral-cream-300: #e4e0d8; /* color/neutral/cream-300 */
  --neutral-cream-400: #dad6ce; /* color/neutral/cream-400 */
  --neutral-dark-900: #183039; /* color/neutral/dark-900 */
  --neutral-dark-700: #254a57; /* color/neutral/dark-700 */
  --neutral-dark-600: #3d4342; /* color/neutral/dark-600 */
  --background-primary: #ffffff; /* color/background/primary */
  --background-cream: #fcfaf6; /* color/background/cream */
  --background-warm: #f5f1e9; /* color/background/warm */
  --background-dark: #183039; /* color/background/dark */
  --background-dark-alt: #254a57; /* color/background/dark-alt */
  --text-primary: #183039; /* color/text/primary */
  --text-secondary: #3d4342; /* color/text/secondary */
  --text-muted: #66858a; /* color/text/muted */
  --text-light: #fcfaf6; /* color/text/light */
  --text-light-muted: #fcfaf699; /* color/text/light-muted */
  --text-accent: #c95d3a; /* color/text/accent */
  --border-default: #f5f1e9; /* color/border/default */
  --border-subtle: #fcfaf61f; /* color/border/subtle */
  --border-medium: #dad6ce; /* color/border/medium */
  --border-strong: #e4e0d8; /* color/border/strong */
  --border-accent: #c95d3a; /* color/border/accent */
  --border-warm-subtle: #f5f1e93d; /* color/border/warm-subtle */
  --action-primary: #c95d3a; /* color/action/primary */
  --action-primary-text: #ffffff; /* color/action/primary-text */
  --surface-overlay-light: #f5f1e90f; /* color/surface/overlay-light */
  --surface-overlay-medium: #f5f1e91a; /* color/surface/overlay-medium */
  --surface-overlay-dark-light: #1830390f; /* color/surface/overlay-dark-light */
  --surface-overlay-dark-medium: #1830391a; /* color/surface/overlay-dark-medium */
  --surface-card-cream: #fcfaf647; /* color/surface/card-cream */

  /* Font families — TYPOGRAPHY */
  --font-heading: "DM Sans", system-ui, sans-serif; /* font-family/heading */
  --font-body:
    "Plus Jakarta Sans", system-ui, sans-serif; /* font-family/body */

  /* font-size — Desktop @1600px / Mobile @320px */
  --text-button: clamp(
    0.9375rem,
    0.9219rem + 0.0781vw,
    1rem
  ); /* font-size/button = 16 / 15 */
  --text-navigation: clamp(
    0.9375rem,
    0.9219rem + 0.0781vw,
    1rem
  ); /* font-size/navigation = 16 / 15 */
  --text-eyebrow: clamp(
    0.8125rem,
    0.7969rem + 0.0781vw,
    0.875rem
  ); /* font-size/eyebrow = 14 / 13 */
  --text-testimonial: clamp(
    1rem,
    0.9688rem + 0.1563vw,
    1.125rem
  ); /* font-size/testimonial = 18 / 16 */
  --text-faq-question: clamp(
    1.0625rem,
    1.0156rem + 0.2344vw,
    1.25rem
  ); /* font-size/faq-question = 20 / 17 */
  --text-display-hero: clamp(
    2.375rem,
    1.8438rem + 2.6563vw,
    4.5rem
  ); /* font-size/display/hero = 72 / 38 */
  --text-heading-h1: clamp(
    2rem,
    1.75rem + 1.25vw,
    3rem
  ); /* font-size/heading/h1 = 48 / 32 */
  --text-heading-h2: clamp(
    1.625rem,
    1.4688rem + 0.7813vw,
    2.25rem
  ); /* font-size/heading/h2 = 36 / 26 */
  --text-heading-h3: clamp(
    1.25rem,
    1.1875rem + 0.3125vw,
    1.5rem
  ); /* font-size/heading/h3 = 24 / 20 */
  --text-heading-h4: clamp(
    1.0625rem,
    1.0156rem + 0.2344vw,
    1.25rem
  ); /* font-size/heading/h4 = 20 / 17 */
  --text-heading-h5: clamp(
    1.0625rem,
    1.0156rem + 0.2344vw,
    1.25rem
  ); /* font-size/heading/h5 = 20 / 17 */
  --text-stat-large: clamp(
    3.5rem,
    2.8125rem + 3.4375vw,
    6.25rem
  ); /* font-size/stat/large = 100 / 56 */
  --text-stat-default: clamp(
    2rem,
    1.75rem + 1.25vw,
    3rem
  ); /* font-size/stat/default = 48 / 32 */
  --text-stat-label: clamp(
    1rem,
    0.9063rem + 0.4688vw,
    1.375rem
  ); /* font-size/stat/label = 22 / 16 */
  --text-card-title: clamp(
    1rem,
    0.9688rem + 0.1563vw,
    1.125rem
  ); /* font-size/card/title = 18 / 16 */
  --text-xl: clamp(
    1.125rem,
    1.0625rem + 0.3125vw,
    1.375rem
  ); /* font-size/text/xl = 22 / 18 */
  --text-lg: clamp(
    1rem,
    0.9688rem + 0.1563vw,
    1.125rem
  ); /* font-size/text/lg = 18 / 16 */
  --text-md: clamp(
    0.9375rem,
    0.9219rem + 0.0781vw,
    1rem
  ); /* font-size/text/md = 16 / 15 */
  --text-sm: clamp(
    0.8125rem,
    0.7969rem + 0.0781vw,
    0.875rem
  ); /* font-size/text/sm = 14 / 13 */
  --text-xs: clamp(
    0.6875rem,
    0.6719rem + 0.0781vw,
    0.75rem
  ); /* font-size/text/xs = 12 / 11 */

  /* line-height — Desktop @1600px / Mobile @320px */
  --leading-button: clamp(
    1.125rem,
    1.0938rem + 0.1563vw,
    1.25rem
  ); /* line-height/button = 20 / 18 */
  --leading-navigation: clamp(
    0.9375rem,
    0.9219rem + 0.0781vw,
    1rem
  ); /* line-height/navigation = 16 / 15 */
  --leading-testimonial: clamp(
    1.5rem,
    1.4375rem + 0.3125vw,
    1.75rem
  ); /* line-height/testimonial = 28 / 24 */
  --leading-faq-question: clamp(
    1.5625rem,
    1.4844rem + 0.3906vw,
    1.875rem
  ); /* line-height/faq-question = 30 / 25 */
  --leading-display-hero: clamp(
    2.625rem,
    2.1563rem + 2.3438vw,
    4.5rem
  ); /* line-height/display/hero = 72 / 42 */
  --leading-heading-h1: clamp(
    2.4rem,
    2.1rem + 1.5vw,
    3.6rem
  ); /* line-height/heading/h1 = 57.6 / 38.4 */
  --leading-heading-h2: clamp(
    2.4375rem,
    2.2031rem + 1.1719vw,
    3.375rem
  ); /* line-height/heading/h2 = 54 / 39 */
  --leading-heading-h3: clamp(
    1.5rem,
    1.425rem + 0.375vw,
    1.8rem
  ); /* line-height/heading/h3 = 28.8 / 24 */
  --leading-heading-h4: clamp(
    1.7rem,
    1.615rem + 0.425vw,
    2.04rem
  ); /* line-height/heading/h4 = 32.64 / 27.2 */
  --leading-heading-h5: clamp(
    1.4238rem,
    1.3597rem + 0.3203vw,
    1.68rem
  ); /* line-height/heading/h5 = 26.88 / 22.78 */
  --leading-stat-large: clamp(
    3.5rem,
    2.8125rem + 3.4375vw,
    6.25rem
  ); /* line-height/stat/large = 100 / 56 */
  --leading-stat-label: clamp(
    1.375rem,
    1.2688rem + 0.5312vw,
    1.8rem
  ); /* line-height/stat/label = 28.8 / 22 */
  --leading-xl: clamp(
    1.75rem,
    1.6563rem + 0.4688vw,
    2.125rem
  ); /* line-height/text/xl = 34 / 28 */
  --leading-lg: clamp(
    1.625rem,
    1.5625rem + 0.3125vw,
    1.875rem
  ); /* line-height/text/lg = 30 / 26 */
  --leading-md: clamp(
    1.375rem,
    1.3438rem + 0.1563vw,
    1.5rem
  ); /* line-height/text/md = 24 / 22 */
  --leading-sm: clamp(
    1.25rem,
    1.2031rem + 0.2344vw,
    1.4375rem
  ); /* line-height/text/sm = 23 / 20 */
  --leading-xs: clamp(
    0.8125rem,
    0.7969rem + 0.0781vw,
    0.875rem
  ); /* line-height/text/xs = 14 / 13 */
  --leading-card-title: clamp(
    1.5rem,
    1.4375rem + 0.3125vw,
    1.75rem
  ); /* line-height/card/title = 28 / 24 */

  /* letter-spacing — Desktop @1600px / Mobile @320px */
  --tracking-display: 0; /* letter-spacing/display = 0 / 0 */
  --tracking-heading: 0; /* letter-spacing/heading = 0 / 0 */
  --tracking-body: 0; /* letter-spacing/body = 0 / 0 */
  --tracking-eyebrow: 0; /* letter-spacing/eyebrow = 0 / 0 */
  --tracking-button: 0; /* letter-spacing/button = 0 / 0 */
  --tracking-navigation: 0; /* letter-spacing/navigation = 0 / 0 */

  /* Spacing — DIMENSIONS Desktop @1600px / Mobile @320px */
  --space-section-vertical-xl: clamp(
    5rem,
    3.6875rem + 6.5625vw,
    10.25rem
  ); /* spacing/section/vertical-xl = 164 / 80 */
  --space-section-vertical-lg: clamp(
    3.75rem,
    3.125rem + 3.125vw,
    6.25rem
  ); /* spacing/section/vertical-lg = 100 / 60 */
  --space-section-vertical-md: clamp(
    3.125rem,
    2.5625rem + 2.8125vw,
    5.375rem
  ); /* spacing/section/vertical-md = 86 / 50 */
  --space-section-vertical-sm: clamp(
    2.5rem,
    2.1875rem + 1.5625vw,
    3.75rem
  ); /* spacing/section/vertical-sm = 60 / 40 */
  --space-section-vertical-xs: clamp(
    2rem,
    1.7188rem + 1.4063vw,
    3.125rem
  ); /* spacing/section/vertical-xs = 50 / 32 */
  --space-container-x-wide: clamp(
    1.25rem,
    -3.2813rem + 22.6563vw,
    19.375rem
  ); /* spacing/container/x-wide = 310 / 20 */
  --space-container-x: clamp(
    1.25rem,
    -0.3125rem + 7.8125vw,
    7.5rem
  ); /* spacing/container/x = 120 / 20 */
  --space-component-2xs: clamp(
    0.375rem,
    0.3438rem + 0.1563vw,
    0.5rem
  ); /* spacing/component/2xs = 8 / 6 */
  --space-component-xs: clamp(
    0.5rem,
    0.4688rem + 0.1563vw,
    0.625rem
  ); /* spacing/component/xs = 10 / 8 */
  --space-component-sm: clamp(
    0.75rem,
    0.7188rem + 0.1563vw,
    0.875rem
  ); /* spacing/component/sm = 14 / 12 */
  --space-component-md: clamp(
    1rem,
    0.9375rem + 0.3125vw,
    1.25rem
  ); /* spacing/component/md = 20 / 16 */
  --space-component-lg: clamp(
    1.5rem,
    1.4063rem + 0.4688vw,
    1.875rem
  ); /* spacing/component/lg = 30 / 24 */
  --space-component-xl: clamp(
    2rem,
    1.7188rem + 1.4063vw,
    3.125rem
  ); /* spacing/component/xl = 50 / 32 */
  --space-component-2xl: clamp(
    2.5rem,
    2.1875rem + 1.5625vw,
    3.75rem
  ); /* spacing/component/2xl = 60 / 40 */
  --space-component-3xl: clamp(
    3rem,
    2.5rem + 2.5vw,
    5rem
  ); /* spacing/component/3xl = 80 / 48 */
  --space-card-x: clamp(
    1.25rem,
    1.0938rem + 0.7813vw,
    1.875rem
  ); /* spacing/card/x = 30 / 20 */
  --space-card-y: clamp(
    1.25rem,
    1.0938rem + 0.7813vw,
    1.875rem
  ); /* spacing/card/y = 30 / 20 */
  --space-content-eyebrow-to-heading: clamp(
    0.75rem,
    0.7188rem + 0.1563vw,
    0.875rem
  ); /* spacing/content/eyebrow-to-heading = 14 / 12 */
  --space-content-heading-to-body: clamp(
    1rem,
    0.9375rem + 0.3125vw,
    1.25rem
  ); /* spacing/content/heading-to-body = 20 / 16 */
  --space-content-body-to-action: clamp(
    1.5rem,
    1.4063rem + 0.4688vw,
    1.875rem
  ); /* spacing/content/body-to-action = 30 / 24 */
  --space-button-x: clamp(
    1.125rem,
    1.0625rem + 0.3125vw,
    1.375rem
  ); /* spacing/button/x = 22 / 18 */
  --space-button-y: clamp(
    0.75rem,
    0.7188rem + 0.1563vw,
    0.875rem
  ); /* spacing/button/y = 14 / 12 */
  --space-input-x: clamp(
    1rem,
    0.9688rem + 0.1563vw,
    1.125rem
  ); /* spacing/input/x = 18 / 16 */
  --space-input-y: clamp(
    0.8125rem,
    0.7813rem + 0.1563vw,
    0.9375rem
  ); /* spacing/input/y = 15 / 13 */
  --space-navigation-x: clamp(
    0.875rem,
    0.8281rem + 0.2344vw,
    1.0625rem
  ); /* spacing/navigation/x = 17 / 14 */
  --space-navigation-y: clamp(
    0.625rem,
    0.6094rem + 0.0781vw,
    0.6875rem
  ); /* spacing/navigation/y = 11 / 10 */

  /* Radius / stroke — same in both modes */
  --radius-none: 0px; /* radius/none */
  --radius-xs: 6px; /* radius/xs */
  --radius-sm: 8px; /* radius/sm */
  --radius-md: 10px; /* radius/md */
  --radius-lg: 11px; /* radius/lg */
  --radius-xl: 15px; /* radius/xl */
  --radius-2xl: 20px; /* radius/2xl */
  --radius-3xl: 23px; /* radius/3xl */
  --radius-full: 999px; /* radius/full */
  --stroke-thin: 1px; /* stroke/thin */
  --stroke-default: 2px; /* stroke/default */

  /* Layout primitives */
  --content-max: 85.375rem; /* 1366px — Figma container max-width (header 1:1127) */
  --gutter: var(--space-container-x);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-VariableFont_opsz,wght.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-Italic-VariableFont_opsz,wght.woff2")
    format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-VariableFont_wght.woff2")
    format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

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

* {
  margin: 0;
}

/* Anchor jumps land below the sticky header (height set by script.js) */
html {
  scroll-padding-block-start: var(--header-height, 6rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background-color: var(--background-primary);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  font-variation-settings: "opsz" 14; /* optical size Figma renders DM Sans with */
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

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

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

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* :where() keeps specificity at 0 so component padding isn't overridden */
:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  /* The companion ring that carries this on --background-dark-alt is at the end
     of the file — see "focus ring". */
  outline: var(--stroke-default) solid var(--border-accent);
  outline-offset: 2px;
}

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

/* Keyboard-only shortcut past the header */
.skip-link {
  position: absolute;
  z-index: 200;
  inset-block-start: 0;
  inset-inline-start: var(--space-component-md);
  padding: var(--space-component-sm) var(--space-component-md);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background-color: var(--action-primary);
  color: var(--action-primary-text);
  font-size: var(--text-md);
  translate: 0 -110%;
}

.skip-link:focus-visible {
  translate: 0 0;
}

/* Honour the system "reduce motion" setting everywhere */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.lbg-section {
  position: relative;
  width: 100%;
  padding-inline: var(--gutter);
}

.lbg-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Button (Figma "Link" component, 1:290 / 1:1171) --------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-component-2xs);
  padding: var(--space-navigation-x) var(--space-component-lg); /* 17 / 30 → 57px tall, as in the hero */
  border-radius: var(--radius-xs);
  background-color: var(--action-primary);
  color: var(--action-primary-text);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: var(--leading-button);
  letter-spacing: var(--tracking-button);
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

/* Hover (Figma 37:573): lighter orange, the arrow turns to point up-right and
   label and arrow pull apart by the 9px Figma adds to the gap — done with
   translate so the button's own width never changes. */
.btn:hover {
  background-color: #ff825a; /* not in the token set */
}

.btn__label {
  transition: translate 0.25s ease;
}

.btn:hover .btn__label {
  translate: -4.5px 0;
}

.btn:hover .btn__icon {
  translate: 4.5px 0;
}

.btn .btn__icon {
  transition:
    rotate 0.25s ease,
    translate 0.25s ease;
}

.btn:hover .btn__icon {
  rotate: -45deg;
}

/* Header instance is shorter (49px in Figma) */
.btn--compact {
  padding-block: var(--space-component-sm);
}

.btn__label {
  padding-block-end: 3px; /* Figma optical offset — Plus Jakarta sits low in its line box */
}

.btn__icon {
  flex: none;
  inline-size: 0.9375rem; /* 15px icon */
  block-size: 0.9375rem;
}

/* --- Entry animations ----------------------------------------------------
   [data-reveal] elements and [data-reveal-group] children fade up once when
   they enter the viewport (script.js adds .is-revealed). Animates opacity and
   translate only, so hover transforms are never overridden. Skipped entirely
   for reduced motion or when scripting is off. */
@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 0;
  }

  .is-revealed {
    animation: reveal-up 0.8s cubic-bezier(0.22, 1, 0.36, 1)
      var(--reveal-delay, 0ms) both;
  }
}

/* --- Section tag (eyebrow with accent edge) — 1:343 dark, 1:363 light ---- */
.tag {
  padding: 0.25rem 0.75rem; /* 4 / 12 */
  border-inline-start: var(--stroke-default) solid var(--border-accent);
  background-color: var(--surface-overlay-dark-medium);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: var(--tracking-body);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* On dark sections */
.tag--on-dark {
  background-color: var(--surface-overlay-medium);
  color: var(--text-light);
}

/* --- Section title (D H1 on light sections) — 1:368, 1:472 --------------- */
.section-title {
  font-size: var(--text-heading-h1);
  font-weight: 700;
  line-height: var(--leading-heading-h1);
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-title--on-dark {
  color: var(--text-light);
}

/* --- Header (Figma 1:1126) ------------------------------------------------ */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: var(--background-dark);
  border-block-end: 4px solid var(--border-accent); /* 4px — no stroke token (stroke/default is 2) */
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  padding-block: var(--space-component-lg);
}

/* Logo renders at its intrinsic 260×61 (HTML attributes) and may shrink on small screens */
.header__logo {
  flex: 0 1 auto;
  min-inline-size: 0;
}

.header__logo-img {
  block-size: auto;
}

.header__nav {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
  min-inline-size: 0;
}

/* On desktop the popover is unwrapped so the list sits inline */
.header__menu {
  display: contents;
}

.header__menu-list {
  display: flex;
  align-items: center;
  column-gap: var(
    --space-button-x
  ); /* Figma binds spacing/button/x as the item margin */
}

.header__link {
  display: flex;
  align-items: center;
  gap: var(--space-component-2xs);
  padding: var(
    --space-input-y
  ); /* Figma binds spacing/input/y as the link padding */
  font-size: var(--text-navigation);
  font-weight: 400;
  line-height: var(--leading-navigation);
  letter-spacing: var(--tracking-navigation);
  color: var(--text-light);
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Hover states below are mine — Figma has none for the header */
.header__link::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--space-input-y) - 0.375rem);
  inset-inline: var(--space-input-y);
  block-size: var(--stroke-default);
  background-color: var(--border-accent);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.25s ease;
}

.header__link {
  position: relative;
}

.header__link:hover,
.header__item:focus-within > .header__link {
  color: var(--accent);
}

.header__link:hover::after,
.header__item:focus-within > .header__link::after {
  scale: 1 1;
}

.header__item:hover .header__chevron,
.header__item:focus-within .header__chevron {
  rotate: 180deg;
}

.header__chevron {
  transition: rotate 0.25s ease;
}

.header__item {
  position: relative;
}

/* Services dropdown — no design in Figma; built from the header's own tokens */
.header__submenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 10;
  min-inline-size: 15rem;
  padding-block: var(--space-component-2xs);
  border-block-start: var(--stroke-default) solid var(--border-accent);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background-color: var(--background-dark-alt);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.5rem;
  transition:
    opacity 0.2s ease,
    translate 0.2s ease,
    visibility 0.2s;
}

.header__item:hover .header__submenu,
.header__item:focus-within .header__submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.header__sublink {
  display: block;
  padding: var(--space-navigation-y) var(--space-navigation-x);
  font-size: var(--text-navigation);
  line-height: var(--leading-md);
  color: var(--text-light);
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-inline-start 0.2s ease;
}

.header__sublink:hover {
  padding-inline-start: calc(var(--space-navigation-x) + 0.375rem);
  background-color: var(--surface-overlay-light);
  color: var(--accent);
}

/* Font Awesome 5 "angle-down" (f107) at 14px, masked so it follows the link colour */
.header__chevron {
  flex: none;
  inline-size: 0.5625rem; /* 9px */
  block-size: 0.875rem; /* 14px */
  background-color: currentColor;
  mask: url("assets/icons/angle-down.svg") center / contain no-repeat;
}

.header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-component-md);
}

.header__menu-cta {
  display: none;
}

/* Hamburger — "squeeze" pattern from jonsuh.com/hamburgers (MIT), same as Lakefront.
   Shown below 1440px; morphs to an X while the menu popover is open. */
.hamburger {
  display: none;
  padding: var(--space-component-sm);
  color: var(--text-light);
  line-height: 0;
  transition: color 0.2s ease;
}

.hamburger:hover {
  color: var(--accent);
}

.hamburger__box {
  position: relative;
  display: block;
  inline-size: 1.5rem; /* 24px */
  block-size: 1.125rem; /* 18px */
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background-color: currentColor;
}

.hamburger__inner {
  inset-block-start: 50%;
  margin-block-start: -1px;
  transition: rotate 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger__inner::before,
.hamburger__inner::after {
  content: "";
}

.hamburger__inner::before {
  inset-block-start: -0.5rem;
  transition:
    inset-block-start 0.15s 0.24s ease,
    opacity 0.15s ease;
}

.hamburger__inner::after {
  inset-block-end: -0.5rem;
  transition:
    inset-block-end 0.15s 0.24s ease,
    rotate 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.header:has(.header__menu:popover-open) .hamburger__inner {
  rotate: 45deg;
  transition-delay: 0.24s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header:has(.header__menu:popover-open) .hamburger__inner::before {
  inset-block-start: 0;
  opacity: 0;
  transition:
    inset-block-start 0.15s ease,
    opacity 0.15s 0.24s ease;
}

.header:has(.header__menu:popover-open) .hamburger__inner::after {
  inset-block-end: 0;
  rotate: -90deg;
  transition:
    inset-block-end 0.15s ease,
    rotate 0.15s 0.24s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --- Hero (Figma 1:259) --------------------------------------------------- */
/* Figma frames the hero behind the 125px header (padding-top 164). Here it sits
   below the sticky header, so the header height is subtracted to keep the same
   39px gap, and the photo is cropped to the part visible under the header. */
.hero {
  display: flex;
  /* Tall enough to keep the photo's sky behind the copy and the house below it */
  min-block-size: clamp(34rem, 62vw, 50rem);
  padding-block: max(
      var(--space-component-lg),
      calc(var(--space-section-vertical-xl) - var(--header-height, 7.8125rem))
    )
    var(--space-section-vertical-md);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 100%; /* keep the house; crop sky first */
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-component-xl);
}

.hero__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-md);
  min-inline-size: 0;
}

/* Smaller than display/hero (72 → 60 max) so each line holds beside the warranty card */
.hero__title {
  font-size: clamp(2.375rem, 2.0313rem + 1.7188vw, 3.75rem); /* 60 / 38 */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-primary);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-component-md);
}

.hero__avatars {
  display: flex;
  padding: 0.375rem; /* 6px */
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
}

.hero__avatars > li + li {
  margin-inline-start: -0.375rem; /* 6px overlap */
}

.hero__avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-component-2xs);
}

.hero__score {
  font-family: var(--font-heading);
  font-size: var(--text-stat-default);
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  line-height: normal;
  letter-spacing: var(--tracking-display);
  color: var(--text-muted);
  white-space: nowrap;
}

.hero__rating-label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--text-secondary);
}

.hero__text {
  max-inline-size: 47.5rem; /* 760px measure */
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--text-secondary);
}

/* Warranty card — image tile + text tile, both dark */
.warranty {
  display: flex;
  flex: none;
}

.warranty__media {
  flex: none;
  padding: 0.8125rem; /* 13px */
  border-radius: var(--radius-xl);
  background-color: var(--background-dark);
}

.warranty__img {
  border-radius: var(--radius-md);
  background-color: var(--background-dark-alt);
  object-fit: cover;
}

.warranty__body {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-component-2xs);
  padding: 0.75rem; /* 12px */
  border-radius: var(--radius-xl);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.warranty__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-component-xs);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.warranty__icon {
  flex: none;
  scale: 1 -1; /* the exported glyph is flipped vertically in Figma */
}

.warranty__title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-h3);
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  line-height: var(--leading-heading-h3);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}

.warranty__text {
  max-inline-size: 13.4375rem; /* 215px — wraps to three lines as designed */
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* --- About / local expertise (Figma 1:309) -------------------------------- */
.about {
  padding-block: var(--space-section-vertical-lg);
  border-block-end: 4px solid var(--border-accent);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.about__inner {
  display: grid;
  grid-template-columns: 2fr 5fr; /* 376 : 940 at the 1366px container */
  gap: var(--space-component-xl);
}

.about__stats {
  display: flex;
  flex-direction: column;
  border-inline-end: var(--stroke-thin) solid var(--border-subtle);
}

.about__stat {
  padding-block-end: var(--space-component-xl);
  border-block-end: var(--stroke-thin) solid var(--border-subtle);
}

.about__stat-value {
  display: flex;
  align-items: flex-start;
  gap: var(--space-component-md);
  font-family: var(--font-heading);
  font-size: var(--text-display-hero);
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  line-height: var(--leading-display-hero);
  letter-spacing: var(--tracking-display);
}

.about__stat-plus {
  font-size: var(--text-stat-large);
  line-height: var(--leading-stat-large);
  color: var(--text-accent);
}

.about__stat-label {
  font-size: var(--text-stat-label);
  font-weight: 300;
  line-height: var(--leading-stat-label);
  text-transform: uppercase;
}

.about__proof {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  padding-block: var(--space-component-xl);
}

.about__avatars {
  display: flex;
  flex: none;
}

.about__avatars > li + li {
  margin-inline-start: -0.6875rem; /* 11px overlap */
}

.about__avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.about__proof-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-inline-size: 15.5rem; /* wraps after "Across" as designed */
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--neutral-cream-200);
}

.about__proof-count {
  color: var(--text-accent);
}

.about__content {
  display: grid;
  grid-template-columns: minmax(0, 36.5rem) minmax(14.875rem, 1fr); /* 584px text measure, photo takes the rest */
  gap: var(--space-component-xl);
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-2xs);
}

.about__title {
  font-size: var(--text-heading-h2);
  font-style: italic;
  font-weight: 600;
  line-height: var(--leading-heading-h2);
  text-transform: uppercase;
}

.about__text {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--neutral-cream-200);
}

/* Figma separates the paragraphs with one empty line */
.about__text + .about__text {
  margin-block-start: calc(var(--leading-lg) - var(--space-component-2xs));
}

.about__text:last-of-type {
  margin-block-end: var(
    --space-component-sm
  ); /* + 8px gap = 22px to the button */
}

.about__media {
  position: relative;
}

.about__photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

/* --- Roofing systems / materials (Figma 1:357) ---------------------------- */
.materials {
  padding-block: var(--space-section-vertical-lg)
    var(--space-section-vertical-md);
}

.materials__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 4.375rem; /* 70px — no token */
}

.materials__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-md);
}

.materials__text {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-secondary);
}

.materials__features {
  align-self: stretch;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-component-md);
  padding-block: var(--space-component-md)
    calc(var(--space-component-md) + var(--space-component-sm));
}

.feature + .feature {
  border-block-start: var(--stroke-thin) solid var(--border-default);
}

/* Dark icon tile with accent underline */
.feature__icon {
  flex: none;
  padding: 0.8125rem 0.6875rem 0.6875rem; /* 13 / 11 / 11 */
  border-block-end: var(--stroke-default) solid var(--border-accent);
  border-radius: var(--radius-sm);
  background-color: var(--background-dark);
}

.feature__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-component-2xs);
  min-inline-size: 0;
}

.feature__title {
  font-size: var(--text-heading-h4);
  font-weight: 500;
  line-height: var(--leading-heading-h4);
  text-transform: uppercase;
  color: var(--text-muted);
}

.feature__text {
  max-inline-size: 30.3125rem; /* 485px measure */
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-secondary);
}

.feature__arrow {
  flex: none;
  margin-inline-start: auto;
  scale: 1 -1; /* flipped in Figma */
}

.materials__media {
  position: relative;
  padding-inline-start: 0.75rem; /* room for the badge to overhang the photo */
}

.materials__photo {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 7 / 8; /* 595 × 680 in Figma */
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

/* Frosted stat badge overlapping the photo's bottom-left corner */
.materials__badge {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1.1875rem; /* 19px below the photo */
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
  padding: var(--space-component-sm) var(--space-component-sm)
    var(--space-component-sm) 1.75rem; /* 14 / 28 */
  border-radius: 0 var(--radius-md) 0 var(--radius-md);
  background-color: var(--surface-overlay-dark-light);
  backdrop-filter: blur(10px);
  color: var(--text-light);
}

.materials__badge-value {
  font-family: var(--font-heading);
  font-size: var(--text-stat-default);
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  line-height: normal;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.materials__badge-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-2xs);
  max-inline-size: 10rem; /* 159px — "Material / Warranties" on two lines */
}

.materials__badge-title {
  font-size: var(--text-stat-label);
  font-weight: 300;
  line-height: var(--leading-stat-label);
  text-transform: uppercase;
}

.materials__badge-note {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

/* --- Manufacturer logos (Figma 1:429) ------------------------------------- */
/* Uses the wide gutter (container/x-wide, 310px at desktop) instead of the 1366px container */
.logos {
  padding-inline: var(--space-container-x-wide);
  border-block-start: var(--stroke-thin) solid var(--border-medium);
}

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

.logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-section-vertical-sm) var(--space-component-md);
}

.logos__item + .logos__item {
  border-inline-start: var(--stroke-thin) solid var(--border-medium);
}

/* Logos render at their designed 100px height (HTML attributes) and scale down if a cell is narrower */
.logos__img {
  block-size: auto;
}

/* --- CTA banner (Figma 1:439) --------------------------------------------- */
.cta-banner {
  display: flex;
  align-items: center;
  min-block-size: 34.125rem; /* 546px banner height from Figma */
  padding-block: var(--space-section-vertical-lg);
  overflow: hidden;
  border-block-end: 4px solid var(--border-accent);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Fades the photo into the brand dark toward the bottom */
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    transparent,
    var(--background-dark)
  );
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component-lg);
}

.cta-banner__logo {
  block-size: auto;
}

/* Frosted pill */
.cta-banner__pill {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  inline-size: 100%;
  max-inline-size: 60rem; /* 960px */
  padding: 1rem 1.375rem; /* 16 / 22 — centres the 64px avatar in the 96px pill */
  border-radius: var(--radius-full);
  background-color: var(--surface-overlay-light);
  backdrop-filter: blur(5.3px);
}

.cta-banner__avatar {
  flex: none;
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  object-fit: cover;
}

.cta-banner__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-component-xs);
  min-inline-size: 0;
}

.cta-banner__title {
  font-size: var(--text-heading-h3);
  font-weight: 700;
  line-height: var(--leading-heading-h3);
  text-transform: uppercase;
}

.cta-banner__copy {
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

/* Round arrow button */
.cta-banner__action {
  flex: none;
  padding: 0.71875rem; /* 11.5px → 46px circle */
  border-radius: var(--radius-full);
  background-color: var(--action-primary);
}

.cta-banner__action img {
  scale: 1 -1; /* flipped in Figma */
}

/* --- Services (Figma 1:462) ----------------------------------------------- */
.services {
  padding-block: var(--space-section-vertical-lg);
}

.services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component-md);
  margin-block-end: var(--space-component-xl);
  text-align: center;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-component-md);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
  border: var(--stroke-thin) solid var(--border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    margin-block-start 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); /* springs up, settles back */
}

/* Hover (Figma 37:516): the card gets taller at the top, turns dark, text goes
   light, the icon tile fills accent and the photo dims behind "Learn More". */
.service-card:hover,
.service-card:focus-within {
  z-index: 1; /* the grown card sits above its neighbours */
  border-color: var(--neutral-cream-200);
  background-color: var(--background-dark);
  /* Taller, not scaled: the top edge rises, the width and the type never change */
  margin-block-start: -1.25rem; /* 20px */
}

.service-card:hover .service-card__stage,
.service-card:hover .service-card__title,
.service-card:hover .service-card__text,
.service-card:focus-within .service-card__stage,
.service-card:focus-within .service-card__title,
.service-card:focus-within .service-card__text {
  color: var(--neutral-white);
}

.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon {
  background-color: var(--action-primary);
  color: var(--neutral-white);
}

.service-card:hover .service-card__media::after,
.service-card:hover .service-card__more,
.service-card:focus-within .service-card__media::after,
.service-card:focus-within .service-card__more {
  opacity: 1;
}

/* Stage label, top-right */
.service-card__stage {
  align-self: flex-end;
  margin: var(--space-input-x) var(--space-input-x) 0;
  padding: 0.25rem 0.75rem; /* 4 / 12 — same as .tag, without the fill */
  border-inline-start: var(--stroke-default) solid var(--border-accent);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Icon tile overlapping the label row and photo */
.service-card__icon {
  position: absolute;
  z-index: 1;
  inset-block-start: 2.0625rem; /* 33px */
  inset-inline-start: 1.1875rem; /* 19px */
  padding: 0.6875rem; /* 11px */
  border-block-end: var(--stroke-default) solid var(--border-accent);
  border-radius: var(--radius-sm);
  background-color: var(--background-dark);
  color: var(--accent);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Masked so the glyph follows the tile's colour (accent → white on hover) */
.service-card__glyph {
  display: block;
  inline-size: 1.875rem; /* 30px */
  block-size: 1.875rem;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.service-card__media {
  position: relative;
  display: block;
}

.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card__more {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-navigation-y); /* 11px */
  font-size: var(--text-button);
  font-weight: 500;
  line-height: var(--leading-button);
  color: var(--text-accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card__img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 13 / 12; /* 325 × 300 in Figma */
  object-fit: cover;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding: 1.375rem 1.375rem 2.25rem; /* 22px; bottom 22 + Figma's 14px trailing space */
}

.service-card__title,
.service-card__stage,
.service-card__text {
  transition: color 0.3s ease;
}

.service-card__title {
  font-size: var(--text-heading-h3);
  font-weight: 700;
  line-height: var(--leading-heading-h3);
  text-transform: uppercase;
  color: var(--text-muted);
}

.service-card__text {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-secondary);
}

/* --- Process intro (Figma 1:480) ------------------------------------------ */
.process {
  padding-block: var(--space-section-vertical-lg);
  border-block-end: 4px solid var(--border-accent);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.process__inner {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); /* 480px heading column */
  align-items: center;
  gap: var(--space-component-3xl);
}

.process__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-md);
}

.process__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.process__text {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

/* One empty line between paragraphs, as in Figma */
.process__text + .process__text {
  margin-block-start: var(--leading-lg);
}

.process__text:last-of-type {
  margin-block-end: calc(
    var(--space-component-md) + var(--space-component-sm)
  ); /* 20 + 14 */
}

/* --- Recent projects (Figma 1:594) ---------------------------------------- */
.work {
  padding-block: var(--space-section-vertical-lg);
}

.work__header {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); /* 480px heading column */
  align-items: end;
  gap: var(--space-component-3xl);
  margin-block-end: var(--space-component-xl);
}

.work__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-md);
}

.work__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-lg);
}

.work__text {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-secondary);
}

.work__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-component-xl);
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-component-md);
  aspect-ratio: 658 / 456;
  padding: var(--space-component-md);
  border-block-end: 4px solid var(--border-accent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--text-light);
  transition: padding 0.3s ease;
}

/* Hover (Figma 37:441): padding opens up, the wash deepens from 24% to 54%
   and a round accent arrow fades in over the middle of the photo. */
.project-card:hover,
.project-card:focus-visible {
  padding: 2.5rem 1.875rem; /* 40 / 30 */
}

.project-card:hover::after,
.project-card:focus-visible::after {
  opacity: 0.54;
}

.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta {
  opacity: 1;
  scale: 1;
}

.project-card__cta {
  position: relative;
  z-index: 1;
  align-self: center; /* circle, not a full-width bar */
  display: flex;
  padding: 0.71875rem; /* 11.5px → 46px circle */
  border-radius: var(--radius-full);
  background-color: var(--action-primary);
  opacity: 0;
  scale: 0.85;
  transition:
    opacity 0.3s ease,
    scale 0.3s ease;
}

.project-card__cta img {
  scale: 1 -1; /* flipped in Figma */
}

.project-card__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Dark wash over the photo so the frosted panels stay readable */
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--background-dark);
  opacity: 0.24;
  transition: opacity 0.3s ease;
}

.project-card__meta,
.project-card__panel {
  position: relative;
  z-index: 1;
}

.project-card__meta {
  display: flex;
  gap: var(--space-component-md);
}

.project-card__chip {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 0.375rem; /* 6px */
  border-radius: var(--radius-lg);
  background-color: var(--surface-overlay-light);
  backdrop-filter: blur(4.4px);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

.project-card__place {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-card__year {
  text-align: end;
}

.project-card__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
  padding: var(--space-input-x);
  border-radius: var(--radius-lg);
  background-color: var(--surface-overlay-light);
  backdrop-filter: blur(4.4px);
}

.project-card__title {
  padding-block-end: 0.75rem; /* 12px */
  border-block-end: var(--stroke-thin) solid var(--border-warm-subtle);
  font-size: var(--text-heading-h4);
  font-weight: 500;
  line-height: var(--leading-heading-h4);
  text-transform: uppercase;
}

.project-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-component-2xs);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-component-md);
}

.project-card__tags > li {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
}

.project-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-component-2xs);
}

/* --- Homeowner reviews (Figma 1:613) -------------------------------------- */
.reviews {
  padding-block: var(--space-section-vertical-lg);
  border-block-end: 4px solid var(--border-accent);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.reviews__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component-md);
  margin-block-end: var(--space-component-xl);
  text-align: center;
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-button-x); /* 22px */
}

.review {
  display: flex;
  flex-direction: column;
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--surface-overlay-medium);
}

.review__person {
  display: flex;
  align-items: center;
  gap: var(--space-component-lg);
  padding: var(--space-navigation-x); /* 17px */
  border-block-end: var(--stroke-thin) solid var(--border-subtle);
}

.review__avatar {
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.review__name {
  font-size: var(--text-heading-h5);
  font-weight: 500;
  line-height: var(--leading-heading-h5);
  text-transform: uppercase;
}

.review__place {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-accent);
}

.review__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-component-md);
  padding: var(--space-button-x); /* 22px */
}

.review__rating {
  display: flex;
  align-items: center;
  gap: var(--space-component-2xs);
}

/* Full stars, plus a half star (over a faint one) when the score ends in .5 */
.stars {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stars__half {
  position: relative;
  display: flex;
}

.stars__half img + img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.review__score {
  font-family: var(--font-heading);
  font-size: var(--text-heading-h5);
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  line-height: var(--leading-heading-h5);
}

.review__quote {
  font-size: var(--text-testimonial);
  font-style: italic;
  font-weight: 500;
  line-height: var(--leading-testimonial);
  color: var(--neutral-cream-200);
}

/* --- FAQ (Figma 1:920) ---------------------------------------------------- */
.faq {
  padding-block: var(--space-section-vertical-lg);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); /* 480px intro column */
  align-items: start;
  gap: var(--space-component-3xl);
}

.faq__aside,
.faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-md);
}

.faq__text {
  max-inline-size: 35.5rem; /* 568px measure */
  margin-block-end: var(--space-component-sm);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-secondary);
}

/* "Still have questions?" card */
.expert-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
  max-inline-size: 22.75rem; /* 364px */
  padding: var(--space-component-md);
  border-block-end: 4px solid var(--border-accent);
  border-radius: var(--radius-md);
  background-color: var(--background-dark);
}

.expert-card__title {
  font-size: var(--text-heading-h4);
  font-weight: 500;
  line-height: var(--leading-heading-h4);
  text-transform: uppercase;
  color: var(--text-accent);
}

.expert-card__text {
  margin-block-end: var(--space-component-2xs);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--neutral-cream-200);
}

.expert-card__contact {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
}

.expert-card__avatars {
  display: flex;
  flex: none;
}

.expert-card__avatars > li + li {
  margin-inline-start: -0.75rem; /* 12px overlap */
}

.expert-card__avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.expert-card__name {
  font-size: var(--text-heading-h5);
  font-weight: 500;
  line-height: var(--leading-heading-h5);
  text-transform: uppercase;
  color: var(--text-light);
}

.expert-card__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-navigation-y); /* 11px */
  margin-block-start: 0.4375rem; /* 7px */
  padding-block-end: 0.4375rem;
  border-block-end: var(--stroke-thin) solid var(--border-accent);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: var(--leading-button);
  color: var(--text-accent);
}

/* Accordion */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-button-x); /* 22px */
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-component-xs);
  padding: var(--space-component-sm) var(--space-component-lg); /* 14 / 30 */
  border-radius: var(--radius-md);
  background-color: var(--background-warm);
  transition:
    background-color 0.3s ease,
    border-radius 0.3s ease,
    color 0.3s ease;
  font-family: var(--font-heading);
  font-size: var(--text-faq-question);
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  line-height: var(--leading-faq-question);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

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

/* Hover (Figma 37:350): the warm bar darkens slightly */
.faq-item:not([open]) .faq-item__q:hover {
  background-color: #ebe7df; /* not in the token set */
}

/* Open (Figma 37:839): bar turns accent with white text and square corners */
.faq-item[open] .faq-item__q {
  border-radius: 0;
  background-color: var(--action-primary);
  color: var(--neutral-white);
}

/* Plus swaps to a minus, both masked so they follow the bar's text colour */
.faq-item__icon {
  position: relative;
  flex: none;
  inline-size: 1.4rem; /* 22.39px */
  block-size: 1.375rem; /* 22px */
  color: var(--text-primary);
}

.faq-item[open] .faq-item__icon {
  color: var(--neutral-white);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  transition:
    opacity 0.3s ease,
    rotate 0.3s ease;
}

.faq-item__icon::before {
  mask: url("assets/icons/plus.svg") center / contain no-repeat;
}

.faq-item__icon::after {
  mask: url("assets/icons/minus.svg") center / contain no-repeat;
  opacity: 0;
}

.faq-item[open] .faq-item__icon::before {
  opacity: 0;
  rotate: 90deg;
}

.faq-item[open] .faq-item__icon::after {
  opacity: 1;
}

/* Smooth open/close, same approach as the Evergreen demo: height animation
   only where the browser can animate to auto. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.3s ease,
      content-visibility 0.3s allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }
}

.faq-item__a {
  padding: var(--space-component-xs) var(--space-component-xl)
    var(--space-component-md); /* 10 above, 50 sides, 20 below */
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-secondary);
}

/* --- Blog (Figma 1:971) --------------------------------------------------- */
.blog {
  padding-block: var(--space-section-vertical-xs)
    var(--space-section-vertical-lg); /* 50 / 100 */
}

.blog__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component-md);
  margin-block-end: calc(
    var(--space-component-md) + var(--space-component-2xs)
  ); /* 28px */
  text-align: center;
}

.blog__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-button-x); /* 22px */
}

.blog-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-block-end: 4px solid transparent; /* revealed in accent on hover */
  border-radius: var(--radius-md);
  background-color: var(--background-warm);
  overflow: hidden;
  transition:
    border-color 0.45s ease,
    translate 0.45s ease;
}

/* Hover (Figma 37:378): the card lifts 10px (Figma adds 10px of space under
   it), gains the accent bottom edge, the photo scales up inside its window
   and the body padding tightens from 50 to 40. */
.blog-card:hover,
.blog-card:focus-visible {
  border-block-end-color: var(--border-accent);
  translate: 0 -10px;
}

.blog-card:hover .blog-card__img,
.blog-card:focus-visible .blog-card__img {
  scale: 1.121; /* 463.33 / 413.33 */
}

/* Fixed 300px window; the photo scales inside it and is clipped by the wrapper */
.blog-card__media {
  display: block;
  block-size: 18.75rem; /* 300px */
  overflow: hidden;
}

.blog-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.45s ease;
}

.blog-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 18.82px 2rem var(--space-component-xl); /* 18.82 / 32 / 50 — sides eased in from Figma's 40 */
}

.blog-card__title {
  font-size: var(--text-card-title);
  font-weight: 500;
  line-height: var(--leading-card-title);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Figma clips the excerpt to the card's fixed height; clamped instead */
.blog-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-secondary);
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-navigation-y); /* 11px */
  font-size: var(--text-button);
  font-weight: 500;
  line-height: var(--leading-button);
  color: var(--text-accent);
}

/* --- Footer (Figma 1:986) ------------------------------------------------- */
.footer {
  padding-block: var(--space-section-vertical-lg)
    var(--space-section-vertical-xs); /* 100 / 50 */
  border-block-end: 4px solid var(--border-accent);
  background-color: var(--background-dark);
  color: var(--text-light);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 26.6667rem) minmax(0, 1fr); /* 426.67px brand column */
  gap: var(--space-component-md);
  padding-block-end: var(--space-component-xs);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer__logo {
  block-size: auto;
  margin-block-end: var(--space-navigation-x); /* 17px */
}

.footer__tagline,
.footer__blurb {
  max-inline-size: 18rem; /* 288px */
}

.footer__tagline {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-variation-settings: "opsz" 14;
  font-weight: 600;
  line-height: normal;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}

.footer__blurb {
  margin-block-end: var(--space-component-sm);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--neutral-cream-200);
}

.footer__social {
  display: flex;
  gap: 5px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem; /* 32px */
  padding-block: var(--space-component-2xs);
  border-radius: 3.2px;
  background-color: var(--action-primary);
}

/* No space-between here: the brand column is taller, so it would stretch the
   gap. The contact row's own 60px top padding is the only spacing. */
.footer__main {
  display: flex;
  flex-direction: column;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-component-md);
}

.footer__heading {
  margin-block-end: var(--space-component-md);
  font-size: var(--text-heading-h5);
  font-weight: 500;
  line-height: var(--leading-heading-h5);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px; /* 5.5 gap + 5.5 item padding in Figma */
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-light-muted);
}

.footer__links a,
.footer__bottom a,
.footer__contact-title a {
  transition: color 0.2s ease;
}

.footer__links a:hover,
.footer__bottom a:hover,
.footer__contact-title a:hover {
  color: var(--accent);
}

/* The LocalBizGuru credit carries the brand accent. --text-accent is the other
   candidate but only reaches 3.4:1 on the footer; --accent is 6.2:1. It already
   sits at the colour the other footer links hover to, so it brightens instead. */
.footer__credit {
  color: var(--accent);
}

.footer__bottom a.footer__credit:hover,
.footer__bottom a.footer__credit:focus-visible {
  color: var(--text-light);
}

.footer__contact {
  display: grid;
  grid-template-columns: minmax(0, 13.75rem) minmax(0, 1fr) minmax(
      0,
      14.5625rem
    ); /* 220 / auto / 233 */
  gap: var(--space-component-md);
  padding-block-start: var(--space-section-vertical-sm); /* 60px */
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-input-y); /* 15px */
}

.footer__contact-icon {
  flex: none;
  display: flex;
  padding: 9px;
  border-radius: 3.6px;
  background-color: var(--action-primary);
}

.footer__contact-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-h5);
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  line-height: var(--leading-heading-h5);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  /* The uppercased email is one unbreakable token wider than the column on a
     narrow phone. The <wbr> after its @ gives it a clean place to fold; this is
     the backstop below that, and it also lets the grid column shrink, since
     "anywhere" counts toward min-content where "break-word" does not. */
  overflow-wrap: anywhere;
}

.footer__contact-note {
  margin-block-start: 9px;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--neutral-cream-200);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-component-md);
  margin-block-start: var(--space-component-sm); /* 14px */
  padding-block-start: var(--space-component-lg); /* 30px */
  border-block-start: var(--stroke-thin) solid var(--border-subtle);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--neutral-cream-200);
}

/* ==========================================================================
   5. Responsive — keep last
   ========================================================================== */

/* The 1366px design needs a 1610px viewport (1366 + 2 × 120 gutter + the nav's
   4px overflow in Figma). Below that the nav items tighten to stay on one line. */
@media (max-width: 1609.98px) {
  .header__menu-list {
    column-gap: 0;
  }

  .header__link {
    padding-inline: var(--space-component-xs);
  }
}

/* Laptops: shrink the logo and the button so the full menu survives to 1280px */
@media (max-width: 1439.98px) {
  .header__logo-img {
    inline-size: 11.25rem; /* 180px */
  }

  .header__link {
    padding-inline: var(--space-component-2xs);
  }

  .header__cta {
    padding-inline: var(--space-component-md);
    font-size: var(--text-sm);
  }
}

@media (max-width: 1279.98px) {
  .hamburger {
    display: block;
  }

  .header__nav {
    flex: none;
  }

  .header__actions {
    margin-inline-start: auto;
  }

  /* Menu panel drops in under the sticky header (no tablet/mobile design in Figma) */
  .header__menu {
    display: none;
    position: fixed;
    inset: var(--header-height, 7.8125rem) 0 auto;
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: calc(100dvh - var(--header-height, 7.8125rem));
    margin: 0;
    padding: var(--space-component-md) var(--gutter) var(--space-component-xl);
    overflow-y: auto;
    border: 0;
    border-block-end: 4px solid var(--border-accent);
    background-color: var(--background-dark);
    color: var(--text-light);
    opacity: 0;
    translate: 0 -0.75rem;
    transition:
      opacity 0.3s ease,
      translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;
  }

  .header__menu:popover-open {
    display: block;
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .header__menu:popover-open {
      opacity: 0;
      translate: 0 -0.75rem;
    }
  }

  .header__menu-list {
    flex-direction: column;
    align-items: stretch;
  }

  .header__menu-list > li {
    border-block-end: var(--stroke-thin) solid var(--border-subtle);
  }

  .header__link {
    justify-content: space-between;
    padding-inline: 0;
  }

  /* Dropdown becomes an indented, always-open list inside the menu panel */
  .header__submenu {
    position: static;
    min-inline-size: 0;
    padding: 0 0 var(--space-component-2xs) var(--space-component-md);
    border: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }

  .header__sublink {
    padding-inline: 0;
    color: var(--text-light-muted);
  }
}

/* Tablet: warranty card drops under the hero copy; house shows below the text */
@media (max-width: 1199.98px) {
  .hero {
    padding-block-end: 30vw;
  }

  .hero__inner {
    flex-direction: column;
  }

  /* flex-basis 0 collapses the copy's height once the row becomes a column */
  .hero__content {
    flex: 0 0 auto;
    align-self: stretch;
  }

  /* Photo column needs a floor, or it becomes a sliver next to the 584px text */
  .about__content {
    grid-template-columns: minmax(0, 1fr) minmax(13.75rem, 20rem);
  }

  /* About: stats become a row above the copy */
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__stats {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-component-3xl);
    border-inline-end: 0;
    border-block-end: var(--stroke-thin) solid var(--border-subtle);
  }

  .about__stat {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .materials__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-component-3xl);
  }

  /* Figma already groups the cards in pairs */
  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process__inner,
  .work__header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-component-xl);
  }

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

  /* Figma groups the reviews in pairs */
  .reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-component-xl);
  }

  .expert-card {
    max-inline-size: none;
  }

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

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-component-xl);
  }

  .footer__contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block-start: var(--space-component-xl);
  }
}

@media (max-width: 767.98px) {
  /* One column down here, so the contact block has a phone's width to work in:
     step the titles down a size to buy the email some room. */
  .footer__contact-title {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
  }

  /* CTA moves into the menu panel */
  .header__cta {
    display: none;
  }

  .header__menu-cta {
    display: flex;
    margin-block-start: var(--space-component-lg);
  }

  .hero {
    padding-block-end: 45vw;
  }

  /* Banner: no forced height, and the pill becomes a stacked card */
  .cta-banner {
    min-block-size: 0;
    padding-block: var(--space-section-vertical-md);
  }

  .cta-banner__logo {
    inline-size: 13.75rem; /* 220px */
  }

  .cta-banner__pill {
    flex-wrap: wrap;
    gap: var(--space-component-md);
    padding: var(--space-component-md);
    border-radius: var(--radius-xl);
  }

  .cta-banner__text {
    flex-basis: 100%;
  }

  .cta-banner__action {
    margin-inline-start: auto;
  }

  /* Project cards: let the content set the height instead of the 658×456 shape */
  .project-card {
    aspect-ratio: auto;
    min-block-size: 24rem;
    gap: var(--space-component-lg);
  }

  .project-card:hover,
  .project-card:focus-visible {
    padding: var(--space-component-md);
  }

  .project-card__chip {
    padding-inline: var(--space-component-2xs);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }

  .project-card__panel {
    padding: var(--space-component-md);
  }

  .project-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-component-sm);
  }

  .project-card__tags {
    gap: var(--space-component-sm);
  }

  /* One column for every card grid */
  .services__list,
  .reviews__list,
  .blog__list,
  .footer__columns,
  .footer__contact {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* With two per row the vertical dividers only make sense between columns */
  .logos__item:nth-child(odd) + .logos__item {
    border-inline-start: var(--stroke-thin) solid var(--border-medium);
  }

  .logos__item:nth-child(odd) {
    border-inline-start: 0;
  }

  .logos__item:nth-child(n + 3) {
    border-block-start: var(--stroke-thin) solid var(--border-medium);
  }

  main .btn {
    align-self: stretch;
    white-space: normal;
  }

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

  .about__media {
    aspect-ratio: 4 / 5;
  }

  .about__photo {
    object-position: 50% 30%;
  }

  /* Warranty card spans the column; image tile shrinks so the text can breathe */
  .warranty {
    align-self: stretch;
  }

  .warranty__media {
    padding: var(--space-component-2xs);
  }

  .warranty__img {
    inline-size: 4.5rem;
    block-size: auto;
  }

  .warranty__text {
    max-inline-size: none;
  }
}

/* ==========================================================================
   Focus ring — last on purpose
   --------------------------------------------------------------------------
   --border-accent clears 3:1 on every background except --background-dark-alt
   (2.3:1), so a cream companion ring fills the outline-offset gap and carries
   the indicator there. Drawn with box-shadow and placed at the end so no later
   rule of equal weight can drop it.
   ========================================================================== */

:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px var(--background-cream);
}