/* ==========================================================================
   CW Window & Door — site stylesheet
   Ported from the Claude Design prototype "CW Window and Door.dc.html".
   No framework, no build step. Every rule here replaces an inline style
   or a style-hover/style-focus attribute from the prototype.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — self-hosted
   Archivo and Karla, both under the SIL Open Font License, served from this
   domain rather than fetched from Google. That removes a third party from
   the critical render path, keeps visitors' IP addresses out of Google's
   logs, and lets the CSP forbid external stylesheets and fonts outright.

   These are variable fonts: one 34 KB file covers Archivo 400-800 and one
   24 KB file covers Karla 400-800, which is less than a single static
   weight of each would have cost. Latin subset only, which still includes
   the accented characters Spanish names need.

   font-display: swap keeps text readable while the font loads.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/archivo-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/karla-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --ink:        #09071A;   /* deepest navy — header, dark sections, footer */
  --ink-2:      #0F1330;   /* raised dark panel */
  --ink-3:      #0F1226;   /* alternate dark section */
  --cream:      #F6F4EF;   /* page background */
  --white:      #FFFFFF;
  --media-bg:   #E9E5DA;   /* image placeholder wash */

  /* Lines */
  --line:       #E2DED4;
  --line-soft:  #EEEAE0;
  --line-strong:#D8D3C6;
  --line-dark:  rgba(255, 255, 255, .09);
  --line-dark-2:rgba(255, 255, 255, .12);

  /* Text */
  --text:       #14182E;   /* body text on light */
  --muted:      #5C6479;
  --muted-2:    #8A90A3;
  --on-dark:    #C3C9DE;   /* body text on dark */
  --on-dark-2:  #A8B0CC;
  --on-dark-3:  #98A0BE;
  --dim:        #8E96B4;
  --dim-2:      #6E7699;

  /* Brand */
  --mint:       #34E0A1;
  --mint-deep:  #0B7D57;
  --mint-mid:   #0E9E6E;
  --lime:       #C6E15A;
  --amber:      #FBC63C;
  --amber-2:    #F2B23E;
  --orange:     #FBA937;
  --red:        #F0432A;
  --red-deep:   #D0331B;
  --error-dark: #FF7A5C;

  /* Notice */
  --notice-bg:  #FFF9EC;
  --notice-line:#F3E3BC;
  --notice-ink: #8A6A14;

  /* Gradients */
  --grad-cta:   linear-gradient(90deg, #FBC63C, #F0432A);
  --grad-rule:  linear-gradient(90deg, #34E0A1, #FBC63C);
  --grad-slider:linear-gradient(180deg, #34E0A1, #FBC63C, #F0432A);

  /* Type */
  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics */
  --wrap: 1320px;
  --gutter: 24px;
  --header-h: 82px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;

  /* Shadows */
  --shadow-card: 0 2px 3px rgba(20, 24, 46, .04);
  --shadow-lift: 0 24px 52px rgba(20, 24, 46, .14);
  --shadow-cta:  0 12px 32px rgba(240, 67, 42, .3);
  --shadow-menu: 0 26px 60px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--orange); }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* Fieldsets default to min-width:min-content, which stops them shrinking
   inside a grid and forces the page to scroll sideways on small phones. */
fieldset { min-width: 0; margin: 0; }

::selection { background: var(--mint); color: var(--ink); }

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

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--ink); }

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

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

.section { padding-block: 88px; }
.section--tight { padding-block: 60px; }
.section--loose { padding-block: 104px 116px; }
.section--flush  { padding-block: 0; }

.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--ink   { background: var(--ink);   color: var(--on-dark); }
.section--ink-2 { background: var(--ink-2); color: var(--on-dark); }
.section--ink-3 { background: var(--ink-3); color: var(--on-dark); }

.section--rule-top    { border-top: 1px solid var(--line); }
.section--rule-bottom { border-bottom: 1px solid var(--line); }

@media (max-width: 700px) {
  .section { padding-block: 60px; }
  .section--loose { padding-block: 64px 72px; }
  .section--tight { padding-block: 44px; }
}

/* Autofit grid. Set --min per instance.
   min(--min, 100%) stops the grid overflowing narrow viewports. */
.grid {
  display: grid;
  gap: var(--gap, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 268px), 100%), 1fr));
}
.grid--fill {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 320px), 100%), 1fr));
}
.grid--start { align-items: start; }
.grid--center { align-items: center; }
.grid--stretch { align-items: stretch; }

.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 14px);
  align-items: center;
}
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--red);
}
.eyebrow--mint   { color: var(--mint); }
.eyebrow--lime   { color: var(--lime); }
.eyebrow--amber  { color: var(--amber); }
.eyebrow--orange { color: var(--orange); }
.eyebrow--green  { color: var(--mint-deep); }
.eyebrow--muted  { color: var(--muted); }

.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.eyebrow-rule::before {
  content: "";
  height: 2px;
  width: 40px;
  background: var(--grad-rule);
  flex: none;
}
.eyebrow-rule > span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--mint);
}

.h-hero, .h-page, .h-sec, .h-sub {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.h-hero { font-size: clamp(42px, 6.4vw, 84px); line-height: .98; }
.h-page { font-size: clamp(36px, 5.2vw, 68px); line-height: 1; }
.h-sec  { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.025em; }
.h-sec--lg { font-size: clamp(32px, 4vw, 52px); line-height: 1.04; }
.h-sec--sm { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.025em; }
.h-sub  { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }

.on-dark .h-hero, .on-dark .h-page, .on-dark .h-sec, .on-dark .h-sub,
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink-2 h1, .section--ink-2 h2, .section--ink-2 h3,
.section--ink-3 h1, .section--ink-3 h2, .section--ink-3 h3 { color: var(--white); }

.gradient-text {
  background: linear-gradient(100deg, #34E0A1, #C6E15A 34%, #FBC63C 62%, #F0432A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keeps the last glyph's overhang from clipping */
  padding-right: .08em;
  margin-right: -.08em;
}
.gradient-text--cool { background-image: linear-gradient(100deg, #34E0A1, #C6E15A 40%, #FBC63C); -webkit-background-clip: text; background-clip: text; }
.gradient-text--warm { background-image: linear-gradient(100deg, #FBC63C, #F0432A); -webkit-background-clip: text; background-clip: text; }
.gradient-text--mint { background-image: linear-gradient(100deg, #34E0A1, #C6E15A); -webkit-background-clip: text; background-clip: text; }
.gradient-text--full { background-image: linear-gradient(100deg, #34E0A1, #FBC63C 55%, #F0432A); -webkit-background-clip: text; background-clip: text; }
.gradient-text--plan { background-image: linear-gradient(100deg, #22B87F, #C6A227 60%, #F0432A); -webkit-background-clip: text; background-clip: text; }

.lede {
  font-family: var(--body);
  font-size: clamp(16.5px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 28px;
}
.lede--dark { color: var(--on-dark); }
.lede--dim  { color: var(--on-dark-2); }
.lede--hero { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--on-dark); }

.prose { font-size: 16px; line-height: 1.65; color: var(--muted); }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose--dark { color: var(--on-dark-2); }

.body-sm { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.body-xs { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); margin: 0; }
.note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  margin: 24px 0 0;
  max-width: 78ch;
}

.measure     { max-width: 46ch; }
.measure--sm { max-width: 40ch; }
.measure--xs { max-width: 24ch; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, filter .18s ease;
}
.btn--lg { padding: 19px 34px; font-size: 16px; }
.btn--sm { padding: 13px 22px; font-size: 13.5px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--grad-cta);
  color: var(--ink);
  font-weight: 800;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-2px); color: var(--ink); }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--text); color: var(--white); }

.btn--outline {
  background: none;
  border: 1.5px solid var(--text);
  color: var(--text);
}
.btn--outline:hover { background: var(--text); color: var(--white); }

.btn--ghost {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: var(--white);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .15);
  border-color: var(--mint);
  color: var(--white);
}

.btn--white { background: var(--white); color: var(--text); font-weight: 800; }
.btn--white:hover { background: var(--mint); color: var(--ink); }

.btn--quiet {
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--quiet:hover { border-color: var(--text); color: var(--text); }

.btn__arrow { color: var(--mint); }
.btn--primary .btn__arrow, .btn--white .btn__arrow, .btn--dark .btn__arrow { color: inherit; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--red);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.link-arrow:hover { color: var(--orange); }

/* Phone button with a small label stacked under the number */
.btn--phone-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: 18px;
  padding: 14px 26px;
  font-size: 17px;
}
.btn--phone-stack small {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  opacity: .72;
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(9, 7, 26, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  /* Cap the whole header at the viewport and let the open drawer take
     whatever the bar does not. Sizing the drawer as 100dvh minus a
     hard-coded --header-h was wrong wherever the bar is taller than that
     token — which is every narrow screen, because the brand text wraps to two
     lines. The drawer then overflowed the viewport by the difference and its
     last row sat just off the bottom of the screen. */
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100dvh;
}
.site-header__bar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img {
  height: 56px;
  width: 56px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__meta {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--dim);
  margin-top: 5px;
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link, .nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 15px;
  background: none;
  border: 0;
  color: var(--white);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover, .nav__toggle:hover { color: var(--mint); }
.nav__link[aria-current="page"] { color: var(--mint); }
/* The parent item is a link, so clicking "Windows" lands on the windows page
   rather than only opening a menu. No caret: the menu opens on hover and on
   :focus-within, and site.js gives hover-less devices a first-tap-opens
   behaviour so a phone can still reach the submenu. */
.nav__toggle { text-decoration: none; }

.nav__group { position: relative; }
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 268px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius-sm);
  padding: 9px;
  box-shadow: var(--shadow-menu);
  list-style: none;
  margin: 0;
  display: none;
  animation: fadeUp .18s ease both;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__menu.is-open { display: block; }

.nav__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 9px;
  color: #E6E9F5;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: rgba(52, 224, 161, .12); color: var(--mint); }
.nav__menu--warm a:hover, .nav__menu--warm a:focus-visible { background: rgba(251, 169, 55, .14); color: var(--orange); }
.nav__menu--lime a:hover, .nav__menu--lime a:focus-visible { background: rgba(198, 225, 90, .14); color: var(--lime); }
.nav__menu li.is-all a { color: var(--dim); font-size: 12.5px; }
.nav__sep { height: 1px; background: rgba(255, 255, 255, .1); margin: 7px 9px; }
.nav__badge {
  font-family: var(--body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--amber);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.signin {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--dim);
}
.signin:hover { color: var(--mint); }

.header-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 22px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--grad-cta);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(240, 67, 42, .32);
  white-space: nowrap;
}
.header-phone:hover { filter: brightness(1.08); color: var(--ink); }

.drawer-toggle {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: var(--white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0;
}
.drawer-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.drawer-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.drawer-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.drawer-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  border-top: 1px solid var(--line-dark);
  background: var(--ink);
  /* No bottom padding: the pinned footer below supplies it, including the
     clearance for the iOS home indicator. */
  padding: 16px var(--gutter) 0;
  /* Takes the height the header bar leaves, measured rather than assumed.
     min-height:0 is what actually lets a flex child shrink below its content
     and scroll — without it the drawer just grows and pushes itself off the
     bottom of the screen. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Without this, a swipe that reaches either end of the drawer carries on
     into the page behind it. That is why scrolling kept catching the
     background and why getting back to the top was a fight. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: fadeUp .2s ease both;
}
.drawer[hidden] { display: none; }
.drawer__list { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 15px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}
.drawer__link--child {
  padding-left: 34px;
  background: rgba(255, 255, 255, .02);
  font-size: 14.5px;
  color: #A6AEC9;
}
.drawer__link[aria-current="page"] { background: rgba(52, 224, 161, .12); color: var(--mint); }
.drawer__hint { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--dim-2); }
/* The drawer holds about 1,000px of links in roughly 770px of phone, so the
   last row is always below the fold. Pinning it to the bottom of the
   scrollport means Home Passport is reachable without scrolling to find it,
   and the list runs underneath rather than past it. The negative margins pull
   the ink backing out to the drawer edges so rows do not show through the gap
   around the pill. */
.drawer__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  /* Full-bleed to the drawer edges so rows scroll under the backing rather
     than through the gap either side of the pill. */
  margin: 14px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
}
.drawer__foot .drawer__cta { margin-top: 0; }

.drawer__cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  padding: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
}
.drawer__cta:hover { border-color: var(--mint); color: var(--mint); }

@media (min-width: 1160px) {
  .nav { display: block; margin-left: auto; }
  .signin { display: inline-flex; }
  .drawer-toggle, .drawer { display: none !important; }
  .site-header__actions { margin-left: 0; }
}

/* The header has three fixed-width things competing for a narrow bar: the
   brand, the phone CTA and the burger. Shed the least important parts first
   so the phone number — the whole point of the header — always survives. */
@media (max-width: 760px) {
  .brand__meta { display: none; }
  .brand img { height: 48px; width: 48px; }
  .brand__name { font-size: 17px; }
  .site-header__bar { gap: 12px; }
  .header-phone { padding: 13px 18px; font-size: 13.5px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .brand img { height: 42px; width: 42px; }
  .brand__name { font-size: 15px; }
  .header-phone { padding: 12px 15px; font-size: 13px; gap: 6px; }
  .site-header__actions { gap: 8px; }
  .drawer-toggle { width: 42px; height: 42px; border-radius: 11px; }
}

/* Below this the wordmark cannot fit alongside the CTA, so the logo carries
   the branding on its own and keeps its accessible name. */
@media (max-width: 430px) {
  .brand__text { display: none; }
  .brand img { height: 40px; width: 40px; }
}

@media (max-width: 400px) {
  .panel { padding: 24px 20px 26px; }
  .summary-dark { padding: 26px 22px 28px; }
  .estimate-panel__copy { padding: 34px 22px 38px; }
  .portal__card { padding: 34px 24px 36px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Both hero variants sit on the dark ink background, so flip the text colours
   the same way the .section--ink sections do. */
.hero, .page-hero { color: var(--on-dark); }
.hero h1, .hero h2, .hero h3,
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--white); }

.hero {
  position: relative;
  min-height: min(90vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Eased off through the middle so the "Dramatization" caption in the footage
     stays legible. It is a disclaimer on simulated storm damage — burying it
     under the scrim would be quietly unhelpful. */
  background:
    linear-gradient(100deg, rgba(9,7,26,.95) 0%, rgba(9,7,26,.78) 34%, rgba(9,7,26,.20) 56%, rgba(9,7,26,.16) 72%, rgba(9,7,26,.5) 100%);
}
.hero__scrim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to top, var(--ink), transparent);
}
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 150px var(--gutter) 96px;
  width: 100%;
}
/* Held back from the middle of the frame so the headline stops short of the
   "Dramatization" caption rather than running across it. */
.hero__copy { max-width: 660px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* The footage carries a burned-in "Dramatization" caption, which the headline
   sits across at most sizes — clearing it would mean a text column too narrow
   to hold the headline. So the disclaimer is published as real text instead:
   legible at every width, readable by a screen reader, and not dependent on
   the video having loaded at all. */
.hero__disclaimer {
  margin: 26px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 700px) {
  /* Taller frame and a lower copy block, so the caption sitting just under
     mid-height has clear air above the headline rather than being written
     over. The copy is bottom-anchored, so height buys space at the top. */
  .hero { min-height: 88vh; }
  .hero__inner { padding: 84px var(--gutter) 40px; }
  .hero__copy { max-width: 100%; }
}

/* Interior page hero: dark band with a photo bleeding off the right */
.page-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.page-hero__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46%;
  z-index: 0;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__media--wide { width: min(64%, 900px); }
.page-hero__media--detail { width: min(54%, 820px); }
.page-hero__media--product { width: min(58%, 880px); }
.page-hero__media--contain img { object-fit: contain; object-position: right center; }
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(95deg, #09071A 0%, #09071A 46%, rgba(9,7,26,.55) 68%, rgba(9,7,26,.35) 100%);
}
.page-hero__scrim--deep {
  background: linear-gradient(96deg, #09071A 0%, #09071A 33%, rgba(9,7,26,.92) 43%, rgba(9,7,26,.5) 57%, rgba(9,7,26,.12) 70%, rgba(9,7,26,0) 80%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 76px var(--gutter) 88px;
  width: 100%;
}
.page-hero--tall { min-height: min(66vh, 600px); display: flex; align-items: center; }

@media (max-width: 900px) {
  /* On a phone the hero stacks instead of layering.
     Behind the text the photo had to be dimmed to keep the words readable,
     and dimmed enough to read meant dimmed enough to disappear: 34% opacity
     under an 86–100% scrim leaves about a twentieth of the picture. A photo
     nobody can see is just bytes.
     So: words first on solid ink, then the photograph full width and at full
     strength underneath. Column-reverse rather than column keeps the
     breadcrumb and headline at the top, where navigation belongs. */
  .page-hero,
  .page-hero--tall {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    min-height: 0;
  }
  .page-hero__media,
  .page-hero__media--wide,
  .page-hero__media--detail,
  .page-hero__media--product {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 10;
    opacity: 1;
  }
  .page-hero__media img { object-position: center; }
  /* Product shots and the garage page header are already sized to their frame —
     letting them cover would crop the thing they exist to show. */
  .page-hero__media--contain { aspect-ratio: 4 / 3; background: var(--ink); }
  .page-hero__media--contain img { object-fit: contain; object-position: center; }
  .page-hero__scrim,
  .page-hero__scrim--deep { display: none; }
  .page-hero__inner { padding-block: 40px 48px; }
}

/* The home hero keeps its photo behind the words — the copy sits low and the
   fade to ink at the bottom carries it — but the upper gradient was tuned for
   a wide screen where the text only occupied the left. On a phone that same
   gradient covers everything, so lighten the top and let the picture show. */
@media (max-width: 760px) {
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(9,7,26,.30) 0%,
      rgba(9,7,26,.42) 42%,
      rgba(9,7,26,.86) 78%,
      rgba(9,7,26,.96) 100%);
  }
}

/* Breadcrumb */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--mint); }
.crumbs [aria-current] { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  background: var(--ink);
}
.trust__item {
  flex: 1 1 216px;
  padding: 30px 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-left: 1px solid var(--line-dark);
}
.trust__item:first-child { border-left: 0; }
.trust__icon { font-size: 24px; line-height: 1; flex: none; }
.trust__title { display: block; font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--white); }
.trust__meta  { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: left;
  padding: 0;
  color: inherit;
}
.card__media {
  position: relative;
  height: 206px;
  background: var(--media-bg);
  flex: none;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media--sm { height: 132px; }
.card__media--md { height: 190px; }
.card__media--lg { height: 240px; }
.card__media--xl { height: 250px; }
.card__body {
  padding: 26px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.card__body--tight { padding: 18px 20px 20px; gap: 7px; }
.card h3 { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; margin: 0; color: var(--text); }
.card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; flex: 1; }

/* Whole-card link */
.card--link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card--link:hover  { border-color: var(--mint); }
.card--link.card--warm:hover { border-color: var(--amber); }
.card--link.card--lime:hover { border-color: var(--lime); }
.card--link.card--red:hover  { border-color: var(--red); }
.card--link.card--orange:hover { border-color: var(--orange); }
.card--link:focus-within { border-color: var(--mint); }

/* Makes the whole card clickable from a single control, without nesting
   interactive elements or putting a heading inside a button. */
.card__link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card { position: relative; }

.card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(9, 7, 26, .82);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--amber);
}

/* Plain (non-link) panel card */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px 34px;
}
.panel--sm { padding: 26px 24px 28px; }
.panel--flat { box-shadow: none; }
.panel h3 { font-family: var(--display); font-weight: 800; font-size: 19px; margin: 0 0 10px; color: var(--text); }

/* Dark translucent panel used across ink sections */
.panel-dark {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark-2);
  border-radius: 16px;
  padding: 24px 26px;
}
.panel-dark__title { font-family: var(--display); font-weight: 700; font-size: 16.5px; margin: 0 0 8px; color: var(--white); }
.panel-dark p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); margin: 0; }

.icon-block__icon { font-size: 26px; line-height: 1; margin-bottom: 14px; display: block; }
.icon-block h3 { font-family: var(--display); font-weight: 700; font-size: 16.5px; margin: 0 0 9px; }
.icon-block p { font-size: 14.5px; line-height: 1.55; margin: 0; }
.section--ink .icon-block p, .section--ink-2 .icon-block p, .section--ink-3 .icon-block p { color: var(--on-dark-3); }

/* Numbered process cells */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(226px, 100%), 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border-radius: 18px;
  overflow: hidden;
}
.steps__cell { background: var(--ink); padding: 32px 26px 34px; }
.steps__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.04em;
  margin-bottom: 14px;
}
.steps__cell h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--white); margin: 0 0 8px; }
.steps__cell p { font-size: 14px; line-height: 1.55; color: var(--on-dark-3); margin: 0; }

/* --------------------------------------------------------------------------
   10. Tags, chips, pills
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.tag--mint { background: rgba(52, 224, 161, .14); border-color: transparent; color: var(--mint-deep); font-weight: 700; }

.pill-dark {
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--on-dark);
}

.chip {
  padding: 14px 22px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
  transition: background-color .18s ease, color .18s ease;
}
.chip:hover { background: rgba(255, 255, 255, .14); }
.chip[aria-pressed="true"] { background: var(--white); color: var(--ink); }

.badge-live {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(52, 224, 161, .14);
  color: var(--mint-mid);
}
.badge-progress {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(52, 224, 161, .16);
  color: var(--mint);
}
.badge-popular {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-cta);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
}

/* Notice / disclaimer block */
.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  border-radius: 16px;
  padding: 22px 26px;
}
.notice__title { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--notice-ink); margin: 0 0 7px; }
.notice p { font-size: 13.5px; line-height: 1.55; color: var(--notice-ink); margin: 0; max-width: 88ch; }

/* --------------------------------------------------------------------------
   11. Spec cards (brand / product line tables)
   -------------------------------------------------------------------------- */
.spec {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.spec__brand {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--amber-2);
}
.spec__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--white);
}
.spec > p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .66); margin: 0; flex: 1; }
.spec__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 13px;
  margin: 0;
}
.spec__row { display: flex; justify-content: space-between; gap: 14px; }
.spec__row dt { font-size: 13px; color: rgba(255, 255, 255, .5); }
.spec__row dd { font-weight: 700; font-size: 13px; color: var(--white); text-align: right; margin: 0; }

/* Light brand card (home page) */
.brand-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-card__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.025em;
  color: var(--text);
}
.brand-card__where { font-size: 13px; color: var(--muted-2); margin-top: 5px; }
.brand-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; flex: 1; }

/* --------------------------------------------------------------------------
   12. Before / after comparison slider
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  --pos: 50%;
  touch-action: pan-y;
  user-select: none;
}
.compare--split { min-height: 520px; }
.compare--framed {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 700px;
  border-radius: 22px;
  border: 1px solid var(--line-dark-2);
}
/* A pair shot square-on to an opening comes out closer to 4:3 than to the
   3:2 hero crop. Forcing 3:2 would cover-crop the head and sill off the very
   thing the photo is meant to show. */
.compare--43 { aspect-ratio: 4 / 3; max-height: 760px; }
.compare__layer { position: absolute; inset: 0; }
.compare__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare__layer--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__tag {
  position: absolute;
  top: 22px;
  z-index: 4;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  pointer-events: none;
}
.compare__tag--after { right: 22px; background: var(--grad-cta); color: var(--ink); }
.compare__tag--before {
  left: 22px;
  background: rgba(9, 7, 26, .86);
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--white);
  z-index: 3;
}
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 5;
  pointer-events: none;
}
.compare__handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1.5px;
  width: 3px;
  background: var(--grad-slider);
}
.compare__grip {
  position: absolute;
  top: 50%;
  left: -24px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.06em;
}
/* The range input is the real control — invisible but fully keyboard operable */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 6;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.compare__range:focus-visible { outline: none; }
.compare__range:focus-visible ~ .compare__handle .compare__grip {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  /* On a phone this column goes full width, and a fixed height against a 4:3
     photo cover-crops the sides — which on a door shot means losing the
     sidelights, the part that shows the opening was widened. Let the frame
     take the photo's own shape instead; a slightly shorter slider is a fair
     trade for showing the whole opening. */
  /* This sits in a stretched grid, and a stretched grid item is the one place
     aspect-ratio is unreliable — Safari can ignore it and collapse the box to
     nothing, which is a slider that has simply vanished. align-self:start
     takes it out of the stretch so the ratio governs, and the min-height is a
     floor: if the ratio is ignored anyway, the slider is still there. */
  .compare--split {
    /* Height from the viewport, NOT from aspect-ratio.
       This is the only slider on the site that is a grid item, and it is the
       only one that went missing on a phone — aspect-ratio on a grid item is
       precisely where browsers disagree, so it computed fine in Chrome and
       collapsed to nothing in Safari. 75vw is the same 4:3 shape at full
       width, derived from the viewport, which cannot collapse. The other
       sliders use compare--framed and are unaffected. */
    width: 100%;
    align-self: start;
    height: 75vw;
    min-height: 260px;
    max-height: 460px;
  }
}

/* --------------------------------------------------------------------------
   Service card — a photo above the copy. Used for the garage services grid,
   where each card names something that can actually be photographed, so a
   picture does more work than the icon glyph it replaced.
   -------------------------------------------------------------------------- */
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  /* The heading holds the link and .card__link::after stretches over the whole
     card, so this has to be the positioned ancestor or the hit area escapes. */
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--mint); }
/* The visible focus ring belongs on the card, since the card is the target —
   the link itself is a stretched invisible layer and outlining it would draw
   a box around the heading text alone. */
.svc-card:focus-within { border-color: var(--mint); outline: 2px solid var(--mint); outline-offset: 2px; }
.svc-card .card__link:focus-visible { outline: none; }
.svc-card__media img { transition: transform .3s ease; }
.svc-card:hover .svc-card__media img { transform: scale(1.03); }
.svc-card__media {
  aspect-ratio: 16 / 10;
  background: var(--media-bg);
  overflow: hidden;
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__body { padding: 20px 22px 24px; }
.svc-card__body h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0 0 9px;
}
.svc-card__body h3 a { color: inherit; text-decoration: none; }
.svc-card:hover .svc-card__body h3 a { color: var(--red); }

/* Side-by-side before/after pair.
   Used where two photos show the same job but were not shot from the same
   spot — a drag slider only reads correctly when both frames register. */
.ba { margin: 0; }
.ba__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--media-bg);
  border: 1px solid var(--line);
}
.ba__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
}
.ba__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
}
.ba__tag--before {
  background: rgba(9, 7, 26, .86);
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--white);
}
.ba__tag--after { background: var(--grad-cta); color: var(--ink); }
.ba figcaption { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Window shape picker
   -------------------------------------------------------------------------- */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(134px, 100%), 1fr));
  gap: 12px;
}
.shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 12px 15px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: #FCFBF8;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  color: var(--text);
}
.shape:hover {
  border-color: var(--mint);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 24, 46, .09);
  color: var(--text);
}
.shape img { width: 100%; height: 56px; object-fit: contain; display: block; }
.shape span {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__error { font-size: 12.5px; color: var(--red-deep); }
.field__error:empty { display: none; }

.input, .select, .textarea {
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--text);
  font-size: 15px;
  outline: none;
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.textarea { resize: vertical; font-family: var(--body); min-height: 96px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--mint); background: var(--white); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--red-deep); }

/* Dark form variant (contact panel, home estimate panel) */
.form--dark .field__label { color: var(--dim); }
.form--dark .field__error { color: var(--error-dark); }
.form--dark .input,
.form--dark .select,
.form--dark .textarea {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--white);
}
.form--dark .input::placeholder,
.form--dark .textarea::placeholder { color: rgba(255, 255, 255, .42); }
.form--dark .input:focus,
.form--dark .select:focus,
.form--dark .textarea:focus {
  border-color: var(--mint);
  background: rgba(255, 255, 255, .09);
}
.form--dark .select option { color: var(--text); }

/* Honeypot — must stay reachable to bots but invisible and unfocusable to people */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  padding: 34px 30px;
  border-radius: 18px;
  background: rgba(52, 224, 161, .12);
  border: 1px solid rgba(52, 224, 161, .4);
  animation: fadeUp .4s ease both;
}
.form-success__mark { font-size: 32px; color: var(--mint); margin-bottom: 12px; line-height: 1; }
.form-success__title { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--white); margin: 0 0 8px; }
.form-success p { font-size: 15px; line-height: 1.55; color: var(--on-dark); margin: 0 0 20px; }

.form-error {
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(240, 67, 42, .12);
  border: 1px solid rgba(240, 67, 42, .45);
  color: var(--error-dark);
  font-size: 14.5px;
  line-height: 1.5;
  grid-column: 1 / -1;
}
.form-error:empty, .form-error[hidden] { display: none; }

/* Selectable option tiles (diagnose / builder) */
.opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: var(--cream);
  border: 1.5px solid var(--line);
  transition: background-color .15s ease, border-color .15s ease;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.opt__box::after { content: ""; }
.opt__label { font-weight: 600; font-size: 14.5px; color: var(--text); line-height: 1.35; }
.opt:has(input:checked) { background: #F1FBF6; border-color: var(--mint); }
.opt:has(input:checked) .opt__box { background: var(--mint); border-color: var(--mint); }
.opt:has(input:checked) .opt__box::after { content: "✓"; }
.opt:has(input:focus-visible) { outline: 3px solid var(--mint); outline-offset: 2px; }

/* Radio variant */
.opt--radio .opt__box { border-radius: 999px; width: 18px; height: 18px; border: 2px solid var(--line-strong); background: transparent; }
.opt--radio:has(input:checked) .opt__box { background: var(--mint); border-color: var(--mint); }
.opt--radio:has(input:checked) .opt__box::after { content: ""; }

/* Glyph tile variant (diagnose step 1) */
.opt--tile {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: var(--radius-sm);
  background: var(--cream);
}
.opt--tile .opt__glyph { font-size: 22px; color: var(--muted-2); line-height: 1; }
.opt--tile .opt__label { font-family: var(--display); font-weight: 700; font-size: 13.5px; }
.opt--tile:has(input:checked) { background: #0B1F1A; border-color: var(--mint); }
.opt--tile:has(input:checked) .opt__glyph { color: var(--mint); }
.opt--tile:has(input:checked) .opt__label { color: var(--white); }

/* Pill toggle variant (builder reasons) */
.opt--pill {
  display: inline-flex;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  min-height: 44px;
}
.opt--pill:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--white); }

/* Image-tile variant (builder project types) */
.opt--card {
  display: block;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--line);
  cursor: pointer;
}
.opt--card:has(input:checked) { background: var(--white); border-color: var(--mint); }
/* These are <span>s inside a <label>, so they need an explicit box display
   before height and padding mean anything. */
.opt--card__media {
  display: block;
  height: 104px;
  background: var(--media-bg);
  position: relative;
}
.opt--card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt--card__body { display: block; padding: 14px 15px 16px; }
.opt--card__title { display: block; font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--text); margin-bottom: 4px; }
.opt--card__sub { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* Numeric stepper */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
}
.stepper__label { font-weight: 600; font-size: 14.5px; color: var(--text); }
.stepper__controls { display: flex; align-items: center; gap: 10px; }
.stepper__btn {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--text);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.stepper__btn--dec:hover { border-color: var(--red); color: var(--red); }
.stepper__btn--inc:hover { border-color: var(--mint); color: var(--mint-mid); }
.stepper__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

/* Numbered step heading */
.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.step-head__num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mint);
  color: var(--ink);
}
.step-head__num--2 { background: var(--amber); }
.step-head__num--3 { background: var(--lime); }
.step-head__num--4 { background: var(--red); color: var(--white); }
.step-head__num--5 { background: var(--text); color: var(--white); }
.step-head h2 { font-family: var(--display); font-weight: 800; font-size: 19.5px; color: var(--text); margin: 0; }
.step-note { font-size: 14.5px; color: var(--muted); margin: -16px 0 22px; padding-left: 41px; }

/* --------------------------------------------------------------------------
   15. Sticky summary rail (diagnose / builder)
   -------------------------------------------------------------------------- */
.rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 900px) {
  .rail {
    position: sticky;
    top: calc(var(--header-h) + 22px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 42px);
    overflow-y: auto;
  }
}
.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.rail__head h2 { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 0; }

.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.verdict__ring {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  border: 3px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.verdict__title { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; }
.verdict p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.reasons li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text); }
.reasons li::before { content: "●"; flex-shrink: 0; margin-top: 1px; font-size: 14px; color: currentColor; }

.summary-dark {
  background: var(--ink);
  border-radius: 22px;
  padding: 32px 30px 34px;
  color: var(--on-dark);
}
.summary-dark h2 { color: var(--white); }
.summary__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--dim);
  margin: 22px 0 13px;
}
.summary__label:first-of-type { margin-top: 0; }
.summary__group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin: 0;
}
.summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.summary__row dt { font-size: 14.5px; color: var(--on-dark); }
.summary__row dd { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--white); margin: 0; }
.summary__row--plain dd { font-family: var(--body); font-weight: 700; font-size: 14.5px; }
.summary__note {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(251, 198, 60, .1);
  border: 1px solid rgba(251, 198, 60, .28);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--amber);
}
.summary__note:empty, .summary__note[hidden] { display: none; }
.summary__fine { margin-top: 16px; font-size: 12.5px; color: var(--dim-2); text-align: center; }

.next-steps { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li { display: flex; gap: 13px; counter-increment: step; }
.next-steps li::before {
  content: counter(step);
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.next-steps strong { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); }
.next-steps span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   16. Pricing packages
   -------------------------------------------------------------------------- */
.pkg {
  position: relative;
  background: var(--white);
  border-radius: 22px;
  padding: 32px 28px 34px;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pkg[data-selected="true"] {
  border-color: var(--red);
  box-shadow: 0 20px 46px rgba(240, 67, 42, .18);
}
.pkg__name { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -.02em; color: var(--text); margin: 0 0 5px; }
.pkg__tagline { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }
.pkg__price-wrap { padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.pkg__price { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.03em; color: var(--text); line-height: 1; }
.pkg__price-note { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pkg__features { list-style: none; margin: 0; padding: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.checklist li, .pkg__features li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.checklist li::before, .pkg__features li::before {
  content: "✓";
  color: var(--mint-mid);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pkg__btn {
  width: 100%;
  padding: 15px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14.5px;
  background: none;
  border: 1.5px solid var(--text);
  color: var(--text);
  min-height: 44px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pkg[data-selected="true"] .pkg__btn {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--ink);
}

.estimate-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.estimate-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.estimate-rows span:first-child { font-size: 14.5px; color: var(--muted); }
.estimate-rows span:last-child { font-weight: 700; font-size: 14.5px; color: var(--text); }
.estimate-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.estimate-total__label { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--text); }
.estimate-total__value { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--text); }

/* --------------------------------------------------------------------------
   17. Projects gallery + lightbox
   -------------------------------------------------------------------------- */
.project-card { cursor: pointer; }
.project-card__body {
  padding: 22px 24px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex: 1;
}
.project-card h3 { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--text); margin: 0 0 6px; }
.project-card__meta { font-size: 13.5px; color: var(--muted); }
.project-card__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
.project-card[hidden] { display: none; }

.lightbox {
  border: 0;
  padding: 0;
  background: none;
  max-width: 1100px;
  width: calc(100% - 48px);
  color: var(--white);
}
.lightbox::backdrop { background: rgba(5, 4, 14, .9); backdrop-filter: blur(6px); }
.lightbox__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}
.lightbox__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 22px;
}
.lightbox__title { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--white); margin: 0 0 6px; }
.lightbox__meta { font-size: 14.5px; color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   18. Estimate CTA panel (home)
   -------------------------------------------------------------------------- */
.estimate-panel {
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.estimate-panel__copy { padding: 60px 52px 64px; }
.estimate-panel__media { position: relative; min-height: 420px; background: var(--ink-2); }
.estimate-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
@media (max-width: 620px) {
  .estimate-panel__copy { padding: 40px 26px 44px; }
  .estimate-panel__media { min-height: 240px; }
}

/* Contact quick links */
.contact-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(251, 198, 60, .16), rgba(240, 67, 42, .16));
  border: 1px solid rgba(251, 198, 60, .4);
  margin-bottom: 16px;
}
.contact-tile:hover { border-color: var(--amber); }
.contact-tile--plain {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  padding: 22px 30px;
}
.contact-tile--plain:hover { border-color: var(--mint); }
.contact-tile__icon { font-size: 26px; color: var(--amber); line-height: 1; }
.contact-tile--plain .contact-tile__icon { font-size: 24px; color: var(--mint); }
.contact-tile__body { display: flex; flex-direction: column; gap: 4px; }
.contact-tile__label { font-size: 12px; letter-spacing: .16em; color: var(--dim); font-weight: 700; }
.contact-tile__value { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--white); letter-spacing: -.01em; }
.contact-tile--plain .contact-tile__value { font-size: 17px; font-weight: 700; }

.info-box {
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.info-box__label { font-size: 11.5px; letter-spacing: .16em; color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.info-box__value { font-size: 14.5px; color: #E6E9F5; line-height: 1.55; }

/* --------------------------------------------------------------------------
   19. About page stat strip
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--line);
}
.facts__cell {
  background: var(--white);
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.facts__cell--split { flex-direction: row; align-items: center; gap: 18px; }
.facts__badge {
  width: 66px; height: 66px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
}
.facts__badge b { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.04em; color: var(--mint); line-height: 1; }
.facts__badge span { font-family: var(--body); font-weight: 700; font-size: 8.5px; letter-spacing: .14em; color: var(--dim); margin-top: 3px; }
.facts__title { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.015em; color: var(--text); }
.facts__big { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--text); line-height: 1; }
.facts__text { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------------------------
   20. Portal sign-in (public entry only)
   -------------------------------------------------------------------------- */
.portal {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  background: var(--ink);
  padding-block: 72px;
}
.portal__card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark-2);
  border-radius: 24px;
  padding: 44px 40px 46px;
  max-width: 460px;
  width: 100%;
}
.portal__card h1 { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--white); margin: 0 0 8px; }
.portal__note {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   21. Legal / long-form copy
   -------------------------------------------------------------------------- */
.legal { max-width: 76ch; }
.legal h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 44px 0 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text); margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.legal ul, .legal ol { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal__updated { font-size: 13.5px; color: var(--muted-2); margin-bottom: 36px; }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: 70px 0 34px;
  color: var(--on-dark);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 44px 34px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer img { height: 78px; width: 78px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 18px; }
.site-footer__blurb { font-size: 13.5px; line-height: 1.65; color: var(--dim); max-width: 26ch; }
.site-footer__head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--white);
  margin-bottom: 18px;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-footer__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 13px 0;
  font-size: 14px;
  color: var(--on-dark);
}
.site-footer__links a:hover { color: var(--mint); }
.site-footer__phone {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 4px;
}
.site-footer__phone:hover { color: var(--amber); filter: brightness(1.1); }
.site-footer__area { font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.site-footer__base {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.site-footer__copy { font-size: 12.5px; color: var(--dim-2); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.site-footer__legal a, .site-footer__legal span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--dim);
}
.site-footer__legal a:hover { color: var(--mint); }

/* --------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------- */
@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes swirl  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.reveal { animation: reveal .9s cubic-bezier(.16, .84, .28, 1) both; }
.fade-up { animation: fadeUp .8s ease both; }
.d1 { animation-delay: .06s; }
.d2 { animation-delay: .12s; }
.d3 { animation-delay: .18s; }
.d4 { animation-delay: .24s; }
.d5 { animation-delay: .3s; }

/* Where the browser supports scroll-driven animations, retime the reveals to
   the scroll position instead of page load — this is what the prototype did. */
@supports (animation-timeline: view()) {
  .reveal {
    animation-timeline: view();
    animation-range: entry 2% entry 46%;
    animation-delay: 0s;
  }
}

.swirl {
  position: absolute;
  top: 34px;
  left: -46px;
  width: clamp(300px, 27vw, 430px);
  height: auto;
  opacity: .2;
  z-index: 0;
  pointer-events: none;
  animation: swirl 90s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .fade-up { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: 8px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.relative { position: relative; }

.media {
  position: relative;
  overflow: hidden;
  background: var(--media-bg);
  border-radius: var(--radius);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--260 { height: 260px; border-radius: 16px; }
.media--280 { height: 280px; }
.media--340 { height: 340px; }
.media--400 { height: 400px; }
.media--dark { background: var(--ink-2); border: 1px solid var(--line-dark-2); }
/* A logo is not a photograph. Cover-cropping one cuts the wordmark in half,
   so contain it, give it breathing room, and put it on white — the artwork
   is a transparent PNG and needs something to sit on. */
.media--brand { background: var(--white); }
.media--brand img { object-fit: contain; padding: 40px; }

.credit {
  display: inline-block;
  margin-top: 20px;
  font-size: 11.5px;
  color: var(--dim-2);
}
.credit:hover { color: var(--mint); }

/* Section header block: heading left, supporting paragraph right */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 44px;
}
.sec-head p { margin: 0; max-width: 44ch; }

/* Wide split CTA band */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { margin: 0; font-size: 16.5px; color: var(--muted); }

.callout {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.callout__icon { font-size: 26px; color: var(--red); line-height: 1; }
.callout__title { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--text); }
.callout__text { font-size: 14.5px; color: var(--muted); margin-top: 4px; }

/* Video review thumbnail */
.video-card {
  position: relative;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-dark-2);
  display: block;
}
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,7,26,.12) 0%, rgba(9,7,26,.08) 52%, rgba(9,7,26,.78) 100%);
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: 25px;
  color: var(--ink);
  padding-left: 5px;
}
.video-card__bar {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.video-card__bar b { font-weight: 700; font-size: 13.5px; color: var(--white); }
.video-card__bar span { font-weight: 600; font-size: 12px; color: rgba(255, 255, 255, .74); }


.badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(251, 198, 60, .14);
  border: 1px solid rgba(251, 198, 60, .34);
  margin-bottom: 22px;
}
.badge-inline b { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: -.01em; color: var(--amber); }
.badge-inline span { font-size: 12.5px; color: var(--on-dark); }

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .drawer, .compare__range, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 16px; }
}