/* ============================================================
   Miller Window Fashions — "The Louver Line"
   Palette from client logo: ink #071330, steel #738fa7
   Type: Sentient (display), Switzer (body) — self-hosted
   ============================================================ */

@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-VariableItalic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #071330;
  --ink-2: #0d1f45;
  --ink-3: #132a5c;
  --steel: #738fa7;
  --steel-soft: #a8bccb;
  --steel-faint: #d7e0e7;
  --steel-deep: #5b7590;   /* numerals on linen/sand and on phones: 4.2:1 on linen */
  --linen: #f4f1ea;
  --bone: #fbfaf7;
  --sand: #e9e3d6;
  --brass: #b8862f;
  --brass-bright: #d9a83f;
  --white: #ffffff;
  --text: #212b3d;
  --text-soft: #4c5a70;

  --font-display: 'Sentient', 'Georgia', serif;
  --font-body: 'Switzer', 'Helvetica Neue', sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 8.5rem);
  --hairline: 1px solid rgba(7, 19, 48, 0.14);
  --hairline-light: 1px solid rgba(244, 241, 234, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bone);
  line-height: 1.65;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 380; line-height: 1.12; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 450; }
h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.container { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 880px; }

/* ---------- Louver motifs ---------- */
.slat-rule {
  height: 14px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(7, 19, 48, 0.16) 3px 4px
  );
  border: none;
}
.slat-rule--light {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(244, 241, 234, 0.22) 3px 4px
  );
}

.tick-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.tick-label::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--brass);
  flex: none;
}
.on-ink .tick-label { color: var(--steel-soft); }

/* Step and index numerals. They were --steel-faint (1.3:1 on bone), which the
   Ads recommendations doc flagged as unreadable on phones. --steel clears 3:1
   at these display sizes on bone; --steel-deep covers linen and small screens. */
.spec-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--steel);
  line-height: 1;
}

/* ---------- Slat-light ambience: sun through louvers ---------- */
.section--linen, .section--sand, .page-hero { position: relative; }
.section--linen::before, .section--sand::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    104deg,
    rgba(7, 19, 48, 0.028) 0 22px,
    transparent 22px 74px
  );
}
.section--linen > *, .section--sand > * { position: relative; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    104deg,
    rgba(244, 241, 234, 0.022) 0 22px,
    transparent 22px 74px
  );
}
.page-hero > * { position: relative; }

/* ---------- Pre-header utility bar ---------- */
.pre-header {
  background: var(--ink);
  color: var(--steel-soft);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.pre-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.42rem var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.pre-header a { color: var(--linen); text-decoration: none; font-weight: 600; }
.pre-header a:hover { color: var(--brass-bright); }
.pre-header .sep { color: var(--steel); padding-inline: 0.55rem; }
/* The trust line (since 1999, free consultations, hours, phone) stays on every
   screen; on narrow ones it stacks and centres instead of disappearing. It is
   not sticky, so the height it costs is paid once at the top of the page. */
@media (max-width: 980px) {
  .pre-header { font-size: 0.72rem; letter-spacing: 0.04em; text-align: center; }
  .pre-header__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.4rem var(--gutter);
  }
}
@media (max-width: 560px) {
  .pre-header { font-size: 0.66rem; line-height: 1.5; }
  .pre-header .sep { padding-inline: 0.38rem; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bone);
  border-bottom: var(--hairline);
}
/* NO backdrop-filter here. A filtered element becomes the containing block for
   its position:fixed descendants, and .site-nav is one: the mobile drawer
   collapsed to a box the size of the header and scrolled inside it instead of
   covering the screen. Frosted glass is also off-limits in this brand. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem var(--gutter);
  max-width: 1400px;
  margin: 0 auto;
}
.site-header__logo img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.7rem; }
.site-nav a {
  font-size: 0.92rem;
  font-weight: 520;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brass); }
@media (min-width: 981px) and (hover: hover) {
  .site-nav > a, .site-nav .has-sub > a {
    background-image: linear-gradient(var(--brass), var(--brass));
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 calc(100% + 4px);
    transition: background-size 0.22s ease;
  }
  .site-nav > a:hover, .site-nav .has-sub > a:hover,
  .site-nav > a[aria-current="page"] { background-size: 100% 1.5px; }
}
.site-nav .has-sub { position: relative; }
.site-nav .has-sub > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav .has-sub > a::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.subnav {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  min-width: 240px;
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  border-top: 2px solid var(--brass);
}
.subnav::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; }
.subnav a {
  display: block;
  padding: 0.55rem 1.4rem;
  color: var(--linen) !important;
  font-size: 0.9rem;
}
.subnav a:hover { background: var(--ink-2); color: var(--brass-bright) !important; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 640;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.header-phone:hover { background: var(--ink); color: var(--brass-bright); }
/* Sticky header CTA (Ads recommendations doc, item 7): the header is sticky, so
   "Free estimate" stays in reach on every scroll. Phones get the call bar. */
.header-actions { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* .btn.header-cta: .btn is declared further down and would win a tie */
.btn.header-cta { padding: 0.66rem 1.15rem; font-size: 0.84rem; white-space: nowrap; }
/* The logo, the full nav, the phone and this button need about 1,140px of
   row; below 1240px (with the gutters) they do not fit, and the logo was being
   squeezed to nothing. So the button steps aside there, the phone button stays,
   and phones and small tablets get the call bar, which carries "Free estimate".
   .btn.header-cta, not .header-cta: .btn sets display later in the file. */
.site-header__logo { flex: none; }
@media (max-width: 1239px) { .btn.header-cta { display: none; } }
/* just past it, tighten the nav a touch so it stays on one line (measured:
   at 1240 the nav wrapped to two lines with the default 1.7rem gap) */
@media (min-width: 1240px) and (max-width: 1360px) { .site-nav { gap: 1.2rem; } }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(7, 19, 48, 0.24);
  cursor: pointer;
  padding: 0.55rem 0.5rem;
  line-height: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.nav-toggle:hover { border-color: var(--brass); }
.nav-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.nav-toggle.is-open { background: var(--ink); border-color: var(--ink); }
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.nav-toggle.is-open span { background: var(--linen); }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  /* All 24 destinations have to be reachable without scrolling, so the drawer
     is a two-column grid: the two groups (Products, Service Areas) span both
     columns and set their children in two columns of their own, and the six
     single pages pair up. --nav-top is the header's real bottom edge, measured
     in JS, because the header is sticky ABOVE a pre-header that is now visible
     on phones too, so its bottom moves as the page scrolls. */
  .site-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: var(--nav-top, 73px);
    background: var(--ink);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    column-gap: 1.25rem;
    row-gap: 0;
    padding: 0.9rem var(--gutter) 1.2rem;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;            /* safety net; it should not need to scroll */
    overscroll-behavior: contain;
    z-index: 55;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav .has-sub { grid-column: 1 / -1; }
  .site-nav > a { grid-column: span 3; }
  .site-nav > a, .site-nav .has-sub > a {
    color: var(--linen);
    font-size: 1rem;
    font-family: var(--font-display);
    font-weight: 400;
    padding: 0.48rem 0;
    border-bottom: var(--hairline-light);
    width: 100%;
  }
  .site-nav .has-sub > a {
    font-size: 1.1rem;
    color: var(--bone);
    border-bottom-color: rgba(184, 134, 47, 0.55);
  }
  .site-nav .has-sub > a::after { display: none; }
  /* The desktop dropdown's 16px hover bridge (.subnav::before, absolutely
     positioned above the panel) survives into the drawer, where it lies over
     the bottom of the row above each group and swallows taps: on phones,
     "Reviews" did nothing. The drawer has no hover, so no bridge. */
  .subnav::before { display: none; }
  .subnav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border-top: none;
    min-width: 0;
    columns: 2;
    column-gap: 1.25rem;
    padding: 0.35rem 0 0.55rem;
  }
  .subnav a {
    display: block;
    padding: 0.29rem 0;
    font-size: 0.88rem;
    color: var(--steel-soft) !important;
  }
  .subnav a:hover, .subnav a[aria-current="page"] { color: var(--brass-bright) !important; }
  /* the whole wrapper goes, or an empty flex item pulls the toggle off the edge */
  .header-actions { display: none; }
  body.nav-open { overflow: hidden; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 980px) and (max-height: 700px) {
  .site-nav { padding-block: 0.6rem 0.8rem; }
  .site-nav > a, .site-nav .has-sub > a { font-size: 0.94rem; padding: 0.36rem 0; }
  .site-nav .has-sub > a { font-size: 1.02rem; }
  .subnav { padding: 0.25rem 0 0.4rem; }
  .subnav a { font-size: 0.83rem; padding: 0.22rem 0; }
}
/* 360x640 class devices: the 24 links still have to land in one screen, so the
   rail tightens once more rather than handing the visitor a scrollbar. */
@media (max-width: 980px) and (max-height: 665px) {
  .pre-header { font-size: 0.62rem; }
  .site-nav { padding-block: 0.4rem 0.55rem; }
  .site-nav > a, .site-nav .has-sub > a { font-size: 0.87rem; padding: 0.26rem 0; }
  .site-nav .has-sub > a { font-size: 0.95rem; }
  .subnav { padding: 0.18rem 0 0.3rem; }
  .subnav a { font-size: 0.78rem; padding: 0.155rem 0; }
  /* Short screens (iPhone SE and small Androids with the browser bars showing):
     the six single pages sit three to a row, which frees two rows so Contact
     still lands on screen. Taller phones keep two to a row. */
  .site-nav > a { grid-column: span 2; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 620;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--primary { background: var(--ink); color: #fdfcf9; }
.btn--primary:hover { background: var(--ink-3); color: var(--brass-bright); }
.btn--brass { background: var(--brass); color: #0a0f1e; }
.btn--brass:hover { background: var(--brass-bright); color: #0a0f1e; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(7,19,48,0.5); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(7,19,48,0.05); }
/* Ghost button on an ink ground. The CTA band's "Call" button used to carry
   .on-ink ON ITSELF, so the descendant rules below never matched it: at rest it
   kept the light-ground ink border (invisible on ink), and on hover
   .btn--ghost:hover turned its text ink, on ink (Ads recommendations doc,
   item 2). The band now puts .on-ink on its copy wrapper, and the hover is a
   solid bone fill with ink text, 16:1, so it reads at all times. */
.on-ink .btn--ghost { color: var(--linen); border-color: rgba(244,241,234,0.72); }
.on-ink .btn--ghost:hover,
.on-ink .btn--ghost:focus-visible { border-color: var(--bone); color: var(--ink); background: var(--bone); }
.btn__arrow { font-family: var(--font-display); font-weight: 400; }

/* ---------- Hero (split) ---------- */
.hero {
  background: var(--ink);
  color: var(--linen);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  min-height: min(78vh, 760px);
  max-width: 1500px;
  margin: 0 auto;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4.5vw, 4.5rem);
}
.hero__copy h1 { color: var(--bone); margin: 1.4rem 0 1.3rem; }
.hero__copy h1 em { font-style: italic; color: var(--steel-soft); }
.hero__lede { color: var(--steel-soft); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 48ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: var(--hairline-light);
}
.hero__proof div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 420;
  color: var(--bone);
}
.hero__proof div span { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }

.hero__media { position: relative; min-height: 420px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.louver-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}
.louver-screen span {
  flex: 1;
  background: var(--ink);
  transform-origin: center top;
}
.js .louver-screen.is-run span {
  animation: louverOpen 1.15s cubic-bezier(0.65, 0, 0.2, 1) forwards;
}
.js .louver-screen:not(.is-run) span { opacity: 1; }
.js .louver-screen.is-run span:nth-child(2) { animation-delay: 0.06s; }
.js .louver-screen.is-run span:nth-child(3) { animation-delay: 0.12s; }
.js .louver-screen.is-run span:nth-child(4) { animation-delay: 0.18s; }
.js .louver-screen.is-run span:nth-child(5) { animation-delay: 0.24s; }
.js .louver-screen.is-run span:nth-child(6) { animation-delay: 0.3s; }
.js .louver-screen.is-run span:nth-child(7) { animation-delay: 0.36s; }
.js .louver-screen.is-run span:nth-child(8) { animation-delay: 0.42s; }
@keyframes louverOpen {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.012); opacity: 0.4; }
}
/* no-JS and reduced-motion: screen stays open */
.no-js .louver-screen span, html.no-js .louver-screen span { transform: scaleY(0.012); opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .js .louver-screen span { transform: scaleY(0.012) !important; opacity: 0.4 !important; animation: none !important; }
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: 320px; order: -1; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--ink);
  color: var(--linen);
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(2.6rem, 5vw, 4.5rem);
}
.page-hero h1 { color: var(--bone); margin-top: 1.2rem; max-width: 20ch; }
.page-hero h1 em { color: var(--steel-soft); }
.page-hero__lede { color: var(--steel-soft); max-width: 62ch; margin-top: 1.2rem; font-size: 1.08rem; }
.page-hero__crumbs { font-size: 0.85rem; color: var(--steel); margin-bottom: 0.4rem; }
.page-hero__crumbs a { color: var(--steel-soft); text-decoration: none; }
.page-hero__crumbs a:hover { color: var(--brass-bright); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); }
.section--ink { background: var(--ink); color: var(--linen); }
.section--ink h2, .section--ink h3 { color: var(--bone); }
.section--ink p { color: var(--steel-soft); }
.section--linen { background: var(--linen); }
.section--sand { background: var(--sand); }
.section-head { max-width: 780px; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.section-head h2 { margin-top: 1.1rem; }
.section-head h2 em { color: var(--steel); }
.section-head p { margin-top: 1rem; color: var(--text-soft); }
.section--ink .section-head p { color: var(--steel-soft); }

/* ---------- Editorial split rows ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3.5rem, 7vw, 6rem); }
.split--rev .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__media::after {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(7, 19, 48, 0.22);
  z-index: -1;
}
.on-ink .split__media::after { border-color: rgba(244,241,234,0.22); }
.split__body h2, .split__body h3 { margin: 0.9rem 0 1.1rem; }
.split__body p + p { margin-top: 1rem; }
.split__body .btn { margin-top: 1.7rem; }
.split__body ul { list-style: none; margin-top: 1.3rem; }
.split__body li {
  padding: 0.55rem 0 0.55rem 1.7rem;
  position: relative;
  border-bottom: 1px solid rgba(7,19,48,0.09);
}
.split__body li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.15em;
  width: 12px; height: 1.5px;
  background: var(--brass);
}
.on-ink .split__body li { border-color: rgba(244,241,234,0.12); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .split__media::after { display: none; }
}

/* ---------- Product index (home) ---------- */
.product-index { border-top: var(--hairline); }
.product-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 2fr) 200px;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: var(--hairline);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}
.product-row:hover { background: var(--linen); }
.product-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); transition: color 0.2s ease; }
.product-row:hover h3 { color: var(--brass); }
.product-row p { font-size: 0.98rem; color: var(--text-soft); }
.product-row__img { overflow: hidden; }
.product-row__img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform 0.5s ease; }
.product-row:hover .product-row__img img { transform: scale(1.05); }
@media (max-width: 880px) {
  .product-row { grid-template-columns: 60px 1fr; }
  .product-row p { grid-column: 2; }
  .product-row__img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-row__img img, .product-row:hover .product-row__img img { transition: none; transform: none; }
}

/* ---------- Standard band (differentiators) ---------- */
.standard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-left: var(--hairline-light);
}
.standard-grid > div {
  border-right: var(--hairline-light);
  border-top: 2px solid transparent;
  padding: 1.8rem 1.5rem 1.5rem;
  transition: border-top-color 0.25s ease;
}
.standard-grid > div:hover { border-top-color: var(--brass); }
.standard-grid strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.25rem;
  color: var(--bone);
  margin: 0.9rem 0 0.5rem;
}
.standard-grid p { font-size: 0.92rem; }

/* ---------- Process rail ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  counter-reset: step;
}
.process > div {
  position: relative;
  padding: 2.4rem 2.2rem 0.5rem 0;
  border-top: 1px solid rgba(7,19,48,0.25);
}
/* The rules butt edge to edge so the rail reads as ONE continuous line with a
   brass tick at each step. The old 1.8rem right margin left a gap after every
   step and a stub hanging off the last one, which read as unfinished. */
.on-ink .process > div { border-top-color: rgba(244,241,234,0.32); }
.on-ink .process p { color: var(--steel-faint); }
.process > div::before {
  content: '';
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  background: var(--brass);
}
.process h3 { margin-bottom: 0.6rem; }
.process p { font-size: 0.97rem; color: var(--text-soft); }
.process .spec-num { position: absolute; top: 0.65rem; right: 0.5rem; font-size: 2rem; color: var(--steel-deep); }
.on-ink .spec-num { color: var(--steel-soft); }
@media (max-width: 880px) {
  .spec-num { color: var(--steel-deep); }
  .on-ink .spec-num { color: var(--steel-soft); }
  .product-row .spec-num { font-size: 2.2rem; }
}


/* ---------- Review marquee ----------
   Two full-bleed rows of real client reviews sliding in opposite directions,
   the pattern proven on Brightwild Adventures.

   Loop maths: the track carries NO gap. Spacing is margin-right ON THE CARD,
   so one copy of the set (cards plus their trailing margins) is exactly half
   the track and translating -50% lands pixel-perfect on the clone. A gap on
   the track would add half a gap of drift every cycle and the wall would jump.

   Cards are a fixed height with the name pinned to the bottom, so the length
   variance between reviews falls in the middle and every card in a row
   bottom-aligns. Long reviews clamp here; /reviews/ carries every word
   unclipped, which is where the button goes. No stars anywhere, and the quoted
   words are the client's own, untouched. */
.rv-section { overflow: hidden; }
.rv-wall { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.rv-wall::before, .rv-wall::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 6vw, 140px); z-index: 3; pointer-events: none;
}
.rv-wall::before { left: 0; background: linear-gradient(to right, var(--bone) 8%, rgba(251,250,247,0)); }
.rv-wall::after { right: 0; background: linear-gradient(to left, var(--bone) 8%, rgba(251,250,247,0)); }
.rv-row { overflow: hidden; }
.rv-row + .rv-row { margin-top: 1.25rem; }
.rv-track {
  display: flex; gap: 0; width: max-content;
  will-change: transform;
  animation: rv-ltr var(--rv-dur, 66s) linear infinite;
}
.rv-row--rtl .rv-track { animation-name: rv-rtl; animation-duration: var(--rv-dur-b, 78s); }
@keyframes rv-ltr { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes rv-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.rv-wall:hover .rv-track, .rv-wall:focus-within .rv-track { animation-play-state: paused; }

.rv {
  flex: 0 0 auto;
  width: 440px; height: 344px;
  margin-right: 1.25rem;
  padding: 1.6rem 1.8rem 1.4rem;
  display: flex; flex-direction: column;
  background: var(--bone);
  border: 1px solid rgba(7,19,48,0.14);
  border-left: 2px solid var(--brass);
  overflow: hidden;
}
.rv--alt { background: var(--linen); }
.rv__label {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--steel);
}
.rv__text {
  margin: 0.95rem 0 0;
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 400; line-height: 1.5;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv__name { margin-top: auto; padding-top: 1.05rem; }
.rv__name strong {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  color: var(--ink);
}
.rv__name span {
  display: block; margin-top: 0.2rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}

/* on an ink ground (the reviews page band) */
.on-ink .rv-wall::before { background: linear-gradient(to right, var(--ink) 8%, rgba(7,19,48,0)); }
.on-ink .rv-wall::after { background: linear-gradient(to left, var(--ink) 8%, rgba(7,19,48,0)); }
.on-ink .rv { background: rgba(244,241,234,0.05); border-color: rgba(244,241,234,0.18); }
.on-ink .rv--alt { background: rgba(244,241,234,0.10); }
.on-ink .rv__text { color: var(--linen); }
.on-ink .rv__name strong { color: var(--bone); }
.on-ink .rv__label, .on-ink .rv__name span { color: var(--steel-soft); }

@media (max-width: 700px) {
  .rv { width: min(84vw, 366px); height: 356px; padding: 1.35rem 1.5rem 1.2rem; }
  .rv__text { font-size: 1rem; -webkit-line-clamp: 10; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rv-row::-webkit-scrollbar { display: none; }
  .rv { scroll-snap-align: start; }
  .rv[aria-hidden="true"] { display: none; }
  .rv-wall::before, .rv-wall::after { display: none; }
}

/* ---------- Review slider (phones and touch screens) ----------
   Ads recommendations doc, item 5: on a phone the marquee moved by itself and
   stopped dead under a finger. Touch screens get one row the visitor drives:
   swipe, the arrows, or the slat indicators. Nothing moves on its own. Mouse
   and trackpad screens keep the marquee the client asked for. */
.rv-slider { display: none; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .rv-wall { display: none; }
  .rv-slider { display: block; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
}
.rv-slider__track {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 0.2rem var(--gutter) 0.4rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rv-slider__track::-webkit-scrollbar { display: none; }
.rv-slider__track:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.rv-slider .rv {
  flex: 0 0 min(86vw, 400px);
  width: auto;
  height: 356px;
  margin-right: 0;
  scroll-snap-align: center;
}
.rv-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.2rem;
  padding-inline: var(--gutter);
}
.no-js .rv-slider__nav { display: none; }
.rv-slider__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  flex: none;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(7,19,48,0.5);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
/* hover only where hover is real: on touch it sticks after the tap */
@media (hover: hover) { .rv-slider__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); } }
.rv-slider__btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.rv-slider__btn[disabled] { opacity: 0.3; cursor: default; background: transparent; color: var(--ink); border-color: rgba(7,19,48,0.5); }
/* Indicators are slats, not dots: the louver is the brand's mark. The button is
   a full 28px touch target; the slat is drawn inside it. */
.rv-slider__dots { display: flex; align-items: center; gap: 0.1rem; }
.rv-slider__dot {
  width: 28px; height: 28px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.rv-slider__dot::before {
  content: '';
  width: 16px; height: 3px;
  background: rgba(7,19,48,0.28);
  transition: width 0.2s ease, background 0.2s ease;
}
.rv-slider__dot[aria-current="true"]::before { width: 26px; background: var(--brass); }
.rv-slider__dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.rv-more { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 3rem; }
.rv-more__google, .g-link { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.rv-more__google:hover, .g-link:hover { color: var(--brass); }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .rv-more { margin-top: 2rem; }
}

/* ---------- Quotes ---------- */
.quote-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.quote {
  border-left: 2px solid var(--brass);
  padding: 0.4rem 0 0.4rem 1.6rem;
  break-inside: avoid;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}
.on-ink .quote blockquote { color: var(--linen); }
.quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.quote--feature blockquote { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 350; }

/* ---------- Portfolio grid ---------- */
.folio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.folio-grid figure { position: relative; overflow: hidden; margin: 0; }
.folio-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 0.6s ease; }
.folio-grid figure:hover img { transform: scale(1.04); }
.folio-grid figure.tall img { aspect-ratio: 3/4; }
@media (prefers-reduced-motion: reduce) {
  .folio-grid img { transition: none; }
}

/* ---------- Area index ---------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  border-top: var(--hairline);
  border-left: var(--hairline);
}
.area-grid a {
  padding: 1.6rem 1.4rem;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease;
}
.area-grid a:hover { background: var(--linen); }
.area-grid strong { font-family: var(--font-display); font-weight: 450; font-size: 1.25rem; display: block; }
.area-grid span { font-size: 0.88rem; color: var(--text-soft); display: block; margin-top: 0.35rem; }
.area-grid a:hover strong { color: var(--brass); }

/* ---------- FAQ ---------- */
.faq-list { border-top: var(--hairline); }
.faq-list details { border-bottom: var(--hairline); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 430;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--brass);
  flex: none;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-a { padding: 0 0 1.5rem; max-width: var(--measure); color: var(--text-soft); }
.faq-list .faq-a p + p { margin-top: 0.8rem; }

/* FAQ on ink sections: the base summary colour is --ink, which is the same as
   the background there, so questions and rules vanish without these. */
.on-ink .faq-list { border-top-color: rgba(244, 241, 234, 0.18); }
.on-ink .faq-list details { border-bottom-color: rgba(244, 241, 234, 0.18); }
.on-ink .faq-list summary { color: var(--linen); }
.on-ink .faq-list .faq-a { color: var(--steel-soft); }

/* ---------- Mascot (transparent looping video, poster fallback) ---------- */
.mascot-motion { display: block; aspect-ratio: 800 / 720; }
.mascot-motion__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}
/* (The CTA band's mascot was replaced by the estimate form on 2026-10-02; the
   mascot still appears in the logo, the FAQ intro and the contact card.) */
.faq-intro__mascot { flex: none; height: 124px; width: auto; }
.faq-intro {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.2rem;
  padding: 1.2rem 1.6rem;
  border: var(--hairline);
  border-left: 3px solid var(--brass);
  background: var(--linen);
}
.faq-intro img { flex: none; width: 116px; height: auto; }
.faq-intro p { font-size: 1.02rem; color: var(--text-soft); }
@media (max-width: 560px) { .faq-intro { flex-direction: column; text-align: center; } }
.contact-card__mascot {
  width: 156px;
  height: auto;
  margin: 2rem auto 0;
}

/* ---------- CTA band: copy left, estimate form right ---------- */
.cta-band { position: relative; color: var(--linen); overflow: hidden; }
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,19,48,0.94) 30%, rgba(7,19,48,0.80)); }
/* Wide: heading and trust points stacked on the left, the form spanning both
   rows on the right. Narrow: DOM order, heading, form, trust points. */
.cta-band__inner {
  position: relative; z-index: 1;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 440px);
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 0;
}
.cta-band__head { grid-column: 1; grid-row: 1; align-self: end; }
.cta-band__extras { grid-column: 1; grid-row: 2; align-self: start; }
.cta-band__form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 2.2rem; }
  .cta-band__head, .cta-band__extras, .cta-band__form { grid-column: 1; grid-row: auto; }
  .cta-band__extras .usp-list { margin-top: 0; }
}
.cta-band__head h2 { color: var(--bone); max-width: 22ch; }
.cta-band__head h2 em { color: var(--steel-soft); }
.cta-band__head > p:not(.tick-label) { color: var(--steel-soft); max-width: 54ch; margin-top: 1.1rem; }
.cta-band .hero__ctas { margin-top: 1.8rem; }
.usp-list { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.usp-list li { position: relative; padding-left: 1.75rem; color: var(--linen); font-size: 0.98rem; }
.usp-list li::before, .trust-chips li::before {
  content: '';
  position: absolute;
  left: 0.15rem; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--brass-bright);
  border-bottom: 2px solid var(--brass-bright);
  transform: rotate(-45deg);
}
.g-rating { margin-top: 1.3rem; }
.g-rating a { color: var(--bone); font-weight: 620; text-underline-offset: 3px; }
.g-rating a:hover { color: var(--brass-bright); }
.cta-band__phone {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--bone);
  text-decoration: none;
  display: inline-block;
  margin-top: 1.6rem;
  border-bottom: 1px solid var(--brass);
}
.cta-band__phone:hover { color: var(--brass-bright); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 5vw, 5rem); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
/* Every lead form (contact page, home hero, band above the footer) shares
   these; .contact-form keeps the roomier spacing of the full form. */
.lead-form { position: relative; }
.lead-form label { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin: 1.2rem 0 0.4rem; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px: iOS zooms the page into anything smaller */
  padding: 0.85rem 1rem;
  border: 1px solid rgba(7,19,48,0.3);
  border-radius: 0;
  background: var(--white);
  color: var(--text);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 0;
  border-color: transparent;
}
.lead-form .btn { margin-top: 1.6rem; }
.form-note { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.9rem; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lead-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead-form .btn[disabled] { opacity: 0.65; cursor: progress; }
.lead-form__rc { margin-top: 1.2rem; }
.lead-form__rc:empty { display: none; }

/* The quick form inside its card */
.lead-card {
  position: relative;
  background: var(--bone);
  color: var(--text);
  border-top: 3px solid var(--brass);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
  text-shadow: none;
}
.lead-card__title { font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 420; line-height: 1.15; color: var(--ink); margin: 0; }
.lead-card__sub { margin-top: 0.4rem; font-size: 0.95rem; color: var(--text-soft); }
.lead-form--quick label { font-size: 0.76rem; margin: 0.9rem 0 0.32rem; }
.lead-form--quick input, .lead-form--quick select { padding: 0.72rem 0.85rem; }
.lead-form--quick .btn { width: 100%; justify-content: center; margin-top: 1.25rem; }
.lead-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.8rem; }
@media (max-width: 420px) { .lead-form__pair { grid-template-columns: minmax(0, 1fr); } }
.lead-card .form-done { margin-top: 0; }
.form-status { margin-top: 1rem; padding: 0.95rem 1.1rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.form-status--err { background: #f8ebe8; border: 1px solid #d9a79f; }
.form-status--invalid { background: var(--linen); border: 1px solid var(--sand); }
.form-status p { margin: 0; }
.form-status .btn { margin-top: 0.9rem; }
.form-done { margin-top: 1.6rem; padding: 1.4rem 1.5rem; background: var(--linen); border: 1px solid var(--sand); border-left: 4px solid var(--brass); color: var(--ink); }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.form-done h3 { margin: 0 0 0.5rem; }
.form-done p { margin: 0; }

/* ---------- Mid-page CTA (product pages) ---------- */
.section--tight { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.mid-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--linen);
  border-top: 3px solid var(--brass);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.mid-cta::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(104deg, rgba(244,241,234,0.035) 0 22px, transparent 22px 74px);
}
.mid-cta > * { position: relative; }
.mid-cta h2 { color: var(--bone); font-size: clamp(1.6rem, 3vw, 2.3rem); margin-top: 0.85rem; max-width: 24ch; }
.mid-cta__copy p:not(.tick-label) { color: var(--steel-soft); margin-top: 0.75rem; max-width: 56ch; }
.mid-cta__actions { display: flex; flex-direction: column; gap: 0.8rem; }
.mid-cta__actions .btn { justify-content: center; }
@media (max-width: 860px) {
  .mid-cta { grid-template-columns: minmax(0, 1fr); }
  .mid-cta__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Trust line in product-page heroes ---------- */
.trust-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem 1.6rem; margin-top: 1.6rem; }
.trust-chips li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; font-weight: 560; color: var(--bone); }
.trust-chips a { color: var(--bone); text-underline-offset: 3px; }
.trust-chips a:hover { color: var(--brass-bright); }
.page-hero--video .trust-chips li { text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.42); }

/* ---------- Shutter spec sheet ---------- */
.spec-sheet { border-top: 2px solid var(--ink); }
.spec-sheet > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: var(--hairline);
}
.spec-sheet dt { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-deep); padding-top: 0.2rem; }
.spec-sheet dd { margin: 0; color: var(--ink); }
@media (max-width: 480px) { .spec-sheet > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

/* ---------- Thank-you page ---------- */
.next-steps { list-style: none; counter-reset: ns; border-top: var(--hairline); }
.next-steps li {
  counter-increment: ns;
  position: relative;
  padding: 1.15rem 0 1.15rem 3.4rem;
  border-bottom: var(--hairline);
}
.next-steps li::before {
  content: counter(ns, decimal-leading-zero);
  position: absolute; left: 0; top: 0.95rem;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.9rem; line-height: 1; color: var(--steel-deep);
}
.next-steps strong { display: block; font-family: var(--font-display); font-weight: 450; font-size: 1.2rem; color: var(--ink); }
.next-steps span { display: block; margin-top: 0.25rem; color: var(--text-soft); }
.contact-card { background: var(--ink); color: var(--linen); padding: clamp(1.8rem, 4vw, 2.8rem); height: fit-content; }
.contact-card h3 { color: var(--bone); }
.contact-card dl { margin-top: 1.4rem; }
.contact-card dt { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); margin-top: 1.2rem; }
.contact-card dd { margin: 0.25rem 0 0; color: var(--linen); }
.contact-card a { color: var(--linen); }
.contact-card a:hover { color: var(--brass-bright); }
.contact-card .btn { margin-top: 1.8rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--steel-soft); font-size: 0.95rem; }
.site-footer a { color: var(--steel-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brass-bright); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
}
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
/* The -light asset is already the on-dark variant: no filter, or the mascot
   flattens to a silhouette and the brass rule disappears. */
.site-footer__logo img { height: 46px; width: auto; }
.site-footer h4 { color: var(--bone); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; }
.site-footer li { padding: 0.28rem 0; }
.site-footer__legal {
  border-top: var(--hairline-light);
  padding: 1.4rem 0 5.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.83rem;
  color: var(--steel);
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; }

/* ---------- Sticky call bar (mobile) ---------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--brass);
}
.call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
.call-bar a:first-child { background: var(--brass); color: #0a0f1e; }
.call-bar a:last-child { background: var(--ink); color: var(--linen); }
/* 980, not 880: the header phone button goes at 980 with the drawer nav, and
   between the two there was no call to action on screen at all. */
@media (max-width: 980px) {
  .call-bar { display: grid; }
  /* The open menu runs to the bottom of the screen, and this bar is fixed above
     it (z-index 70 over 55), so it was sitting on the menu's last row (About,
     FAQ, Contact). Step it aside while the menu is open; the phone number stays
     in the pre-header right above the menu. */
  body.nav-open .call-bar { display: none; }
}

/* ---------- Reveal (progressive enhancement) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--late { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Louver image reveal (strips injected by JS) ---------- */
.split__media { overflow: visible; }
.louver-strips {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}
.louver-strips i {
  flex: 1;
  background: var(--bone);
  transform-origin: center top;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.2, 1);
}
.section--ink .louver-strips i, .on-ink .louver-strips i { background: var(--ink); }
.section--linen .louver-strips i { background: var(--linen); }
.section--sand .louver-strips i { background: var(--sand); }
.louver-strips i:nth-child(2) { transition-delay: 0.07s; }
.louver-strips i:nth-child(3) { transition-delay: 0.14s; }
.louver-strips i:nth-child(4) { transition-delay: 0.21s; }
.louver-strips i:nth-child(5) { transition-delay: 0.28s; }
.louver-strips i:nth-child(6) { transition-delay: 0.35s; }
.reveal.is-in .louver-strips i { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  .louver-strips { display: none; }
}

/* ---------- Utility ---------- */
.on-ink { color: var(--linen); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.prose { max-width: var(--measure); }
.prose p + p, .prose p + h2, .prose h2 + p, .prose p + h3, .prose h3 + p { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
/* Legal and utility pages (privacy, accessibility, 404): long-form reading, so
   section heads step down from the display h2 and lists get their markers back
   (the global reset strips list padding). */
.prose--legal h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.prose--legal ul { margin-top: 1.1rem; padding-left: 1.3rem; }
.prose--legal li + li { margin-top: 0.35rem; }
.prose--legal ul + p { margin-top: 1.1rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: #0a0f1e;
  padding: 0.7rem 1.2rem;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Product type examples (static labels, not hover overlays) ---------- */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.type-grid figure { margin: 0; }
.type-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.type-grid .type-label {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-soft);
}

/* ---------- Hero video (page heroes + home) ---------- */
.hero__media video.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* the still stays underneath as the no-video / reduced-motion fallback */
.hero__media .hero__poster { z-index: 0; }
.js .hero__media video.hero__video[data-paused] { display: none; }

.page-hero--video { position: relative; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media video,
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the shutter wall's subject sits right of centre; hold it in frame */
.page-hero--photo .page-hero__media img { object-position: 62% 50%; }
/* Neutral, not blue: a soft black falloff behind the copy only, so the
   footage keeps its own colour on the open right-hand side. */
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.55) 32%,
      rgba(0,0,0,0.22) 62%,
      rgba(0,0,0,0.00) 88%),
    linear-gradient(180deg,
      rgba(0,0,0,0.28) 0%,
      rgba(0,0,0,0.10) 45%,
      rgba(0,0,0,0.30) 100%);
}
.page-hero--video > .container { position: relative; z-index: 2; }
/* the video is unfiltered now, so give the type its own edge */
.page-hero--video h1,
.page-hero--video .page-hero__lede,
.page-hero--video .tick-label,
.page-hero--video .page-hero__crumbs {
  text-shadow: 0 1px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.42);
}
/* the louver haze reads as a film over footage; keep it off video heroes */
.page-hero--video::before { display: none; }
/* Phones (Ads recommendations doc, item 4): the copy spans the full width of
   the footage there, so the scrim has to carry it everywhere, not just on the
   left. At 0.72+ black even a white frame leaves steel-soft type above 5:1 and
   the brightened lede above 7:1. Neutral black still: never an ink tint. */
@media (max-width: 880px) {
  .page-hero__scrim {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.72) 50%,
      rgba(0,0,0,0.80) 100%);
  }
  .page-hero--video .page-hero__lede { color: var(--steel-faint); }
  .page-hero--video .page-hero__crumbs,
  .page-hero--video .page-hero__crumbs a { color: var(--steel-faint); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__media video, .hero__media video.hero__video,
  .hero--video .hero__bg video { display: none; }
}
.js .hero--video .hero__bg video[data-paused] { display: none; }

/* These videos are decorative backgrounds. When a browser holds one back
   (iPhone Low Power Mode, in-app browsers), iOS and Safari draw a big native
   play button over it; never show browser chrome here, the poster still reads.
   One rule per pseudo-element so an engine that rejects one keeps the rest. */
.hero__video, .page-hero__media video, .mascot-motion__video { pointer-events: none; }
.hero__video::-webkit-media-controls-start-playback-button,
.page-hero__media video::-webkit-media-controls-start-playback-button,
.mascot-motion__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero__video::-webkit-media-controls-overlay-play-button,
.page-hero__media video::-webkit-media-controls-overlay-play-button,
.mascot-motion__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.hero__video::-webkit-media-controls,
.page-hero__media video::-webkit-media-controls,
.mascot-motion__video::-webkit-media-controls { display: none !important; }

/* ---------- Home hero: full-bleed video, same treatment as the page heroes ---------- */
.hero--video { position: relative; }
.hero--video .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero--video .hero__bg video,
.hero--video .hero__bg .hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero--video .hero__bg .hero__poster { z-index: 0; }
.hero--video .hero__bg video { z-index: 1; }
.hero--video .hero__bg .louver-screen { z-index: 2; }
.hero--video .hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.74) 0%,
      rgba(0,0,0,0.58) 34%,
      rgba(0,0,0,0.26) 64%,
      rgba(0,0,0,0.04) 90%),
    linear-gradient(180deg,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.12) 45%,
      rgba(0,0,0,0.34) 100%);
}
.hero--video .hero__grid {
  position: relative; z-index: 4;
  grid-template-columns: minmax(0, 1fr);
}
.hero--video .hero__copy { max-width: 760px; }
.hero--video .hero__copy h1,
.hero--video .hero__lede,
.hero--video .tick-label,
.hero--video .hero__proof div strong,
.hero--video .hero__proof div span {
  text-shadow: 0 1px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45);
}
@media (max-width: 880px) {
  .hero--video .hero__scrim {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.74) 45%,
      rgba(0,0,0,0.84) 100%);
  }
  .hero--video .hero__lede { color: var(--steel-faint); }
  .hero--video .hero__proof div span { color: var(--steel-soft); }
}

/* ---------- Home hero: the quick estimate form (Ads doc, item 6) ----------
   Wide screens set it beside the copy, where the open right side of the
   footage was; narrower ones stack it under the copy, still inside the hero.
   The card is opaque bone, so the footage never touches its type. */
.hero__form { position: relative; padding: 0 clamp(1.5rem, 4.5vw, 4.5rem) clamp(3rem, 7vw, 4.5rem); }
.hero__form .lead-card { max-width: 460px; }
@media (min-width: 1100px) {
  .hero--video .hero__grid--form {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 4.5vw, 4.5rem);
  }
  .hero__grid--form .hero__form { padding: clamp(2.5rem, 5vw, 4rem) 0; }
  /* a little smaller beside the form, so the headline still sets in three lines */
  .hero__grid--form .hero__copy h1 { font-size: clamp(2.4rem, 4.2vw, 3.85rem); }
  /* the form is right there; the button that jumps to it would be noise */
  .hero__grid--form .hero__ctas .btn--brass { display: none; }
}
.hero__rating { margin-top: 1.3rem; font-weight: 620; }
.hero__rating a { color: var(--bone); text-underline-offset: 3px; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.hero__rating a:hover { color: var(--brass-bright); }
#estimate, #hero-estimate { scroll-margin-top: calc(var(--header-h, 76px) + 14px); }
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__bg video { display: none; }
}

/* the louver reveal leaves ink-blue slats at rest; never over footage */
.hero--video .louver-screen, .page-hero--video .louver-screen { display: none; }