/* ==========================================================================
   Galveston Shutter & Shade Co.
   Design system v2: built from the company's own mark.

   The logo is a blue house outline under an orange roofline, with a stack
   of slanted orange shutter slats beside it, set in a geometric sans. The
   site uses exactly those pieces: photos framed in the house shape with the
   blue outline offset behind them, the slanted slat as the one recurring
   accent, the logo's blue and orange on white, and Jost, a geometric face
   close to the wordmark. Nothing decorative that is not in the logo.

   1. Tokens          7. Heroes + trust    13. Reviews + warranty seal
   2. Base            8. Offer panels      14. Steps + storm band
   3. Layout          9. Glance table      15. FAQ + related
   4. Type           10. Benefits          16. Forms + CTA band
   5. Buttons        11. Split + callout   17. Contact + articles
   6. Header + nav   12. Gallery           18. Footer + utilities
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
/* Jost arrives after first paint, so the page draws in this Arial (Roboto on
   Android) scaled to Jost's measurements: same average width and line box,
   measured from the font files. The swap then moves almost nothing, which
   keeps layout shift down. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 95.79%; ascent-override: 111.7%; descent-override: 39.15%; line-gap-override: 0%;
}
:root {
  --text: #0D2236;          /* headings and body */
  --muted: #4A5C6A;         /* secondary text, 6.9:1 on white */
  --blue: #0856A2;          /* logo blue */
  --blue-dark: #06447F;
  --navy: #0B2D4D;          /* dark bands */
  --navy-deep: #071F36;     /* footer */
  --orange: #F69220;        /* logo orange: actions, slats */
  --orange-hover: #FFA53E;
  --orange-text: #B35A00;   /* orange as text on white (4.8:1) */
  --white: #FFFFFF;
  --sky: #EEF4F9;           /* alternate section */
  --mist: #F5F8FB;          /* cards on white */
  --line: #D9E3EB;
  --line-dark: rgba(255, 255, 255, .16);
  --on-dark-muted: #B6CADB; /* secondary text on navy, 8.3:1 */
  --on-blue-muted: #DCE8F4;

  --font: "Jost", "Jost Fallback", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --fs-h1: clamp(2.1rem, 1.6rem + 1.6vw, 3.25rem);
  --fs-h2: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.1rem + .25vw, 1.3rem);
  --fs-lead: clamp(1.1rem, 1.05rem + .25vw, 1.25rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(56px, 6.5vw, 96px);
  --container: 1220px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
  --radius-lg: 12px;
  --header-h: 84px;

  /* The house from the logo: walls and a pitched roof */
  --house: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%);
  /* The slats from the logo, stacked */
  --slats: repeating-linear-gradient(180deg, var(--orange) 0 9px, transparent 9px 17px);
  --shadow: 0 20px 40px -24px rgba(11, 45, 77, .45);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
svg[aria-hidden="true"] { flex-shrink: 0; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-dark :focus-visible, .section--ink :focus-visible, .footer :focus-visible, .cta :focus-visible, .trust :focus-visible, .stormband :focus-visible { outline-color: var(--orange); }
::selection { background: var(--orange); color: var(--text); }
button { font: inherit; color: inherit; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 200; background: var(--navy); color: var(--white); padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--s-4); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Retired v1 decorations. Their markup is being removed from the pages;
   until then they render as nothing. */
.eyebrow, .coords, .hero__caption { display: none !important; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* 3. Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(800px + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }
.section--sand, .section--haint { background: var(--sky); }
.section--ink { background: var(--navy); color: var(--white); }
.section--flush-top { padding-top: 0; }

.shead { margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.shead > * + * { margin-top: var(--s-4); }
.shead p { color: var(--muted); font-size: 1.1rem; }
.section--ink .shead p { color: var(--on-dark-muted); }

.grid-2 { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }

/* 4. Type ----------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; color: inherit; font-family: var(--font); }
h1 { font-size: var(--fs-h1); line-height: 1.12; font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: var(--fs-h2); line-height: 1.18; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
/* build.mjs wraps every hyphenated word in .nowrap, and the text run around
   it in .hy, so "5-year" never splits across lines. Both are invisible to
   layout: they take everything from the parent, whatever other rules say. */
.hy, .nowrap { display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; }
h4 { font-size: 1.1rem; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: 1rem; }
.data { font-size: .95rem; color: var(--muted); }
.measure { max-width: 64ch; }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  --bg: transparent; --fg: var(--text); --bd: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 2px solid var(--bd); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 1.05rem; font-weight: 600;
  line-height: 1.15; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; color: var(--fg); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { --bg: var(--orange); --fg: var(--text); --bd: var(--orange); }
.btn--primary:hover { --bg: var(--orange-hover); --bd: var(--orange-hover); }
.btn--ghost:hover { --bg: var(--text); --fg: var(--white); }
.btn--ghost-light { --fg: var(--white); --bd: rgba(255, 255, 255, .6); }
.btn--ghost-light:hover { --bg: var(--white); --fg: var(--navy); --bd: var(--white); }
.btn--blue { --bg: var(--blue); --fg: var(--white); --bd: var(--blue); }
.btn--blue:hover { --bg: var(--blue-dark); --bd: var(--blue-dark); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }
/* Text-sized links get a taller hit area (about 44px) from padding that a
   matching negative margin takes back out of the layout. */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; margin-block: -8px; font-weight: 600; color: var(--blue); text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .15s; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover svg { transform: translateX(3px); }
.section--ink .link-arrow, .on-dark .link-arrow { color: var(--white); }
.stars { display: inline-flex; gap: 2px; color: var(--orange); }
.stars svg { width: 18px; height: 18px; }

/* 6. Header + nav --------------------------------------------------------- */
.topbar { background: var(--blue); color: var(--white); font-size: .95rem; }
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); min-height: 44px; text-align: center; }
.topbar p { margin: 0; }
.topbar a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.topbar__lg, .topbar__xl { display: none; }
@media (max-width: 639px) { .topbar { font-size: .875rem; } }
@media (min-width: 640px) { .topbar__sm { display: none; } .topbar__lg { display: inline; } }
@media (min-width: 1000px) { .topbar__xl { display: inline; } }

.header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.header__logo { flex: none; display: block; width: 236px; padding-block: 6px; margin-block: -6px; }
.header__logo img { width: 100%; }
.header__actions { display: none; align-items: center; gap: var(--s-4); margin-left: auto; }
.header__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header__tel svg { width: 20px; height: 20px; color: var(--blue); }
.header__tel:hover { color: var(--blue); }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 2px solid var(--text); border-radius: var(--radius); background: transparent; cursor: pointer; font-weight: 600; }
.menu-toggle svg { width: 22px; height: 22px; }
@media (max-width: 429px) { .header__logo { width: 200px; } }
@media (max-width: 370px) { .header__inner { gap: var(--s-3); } .header__logo { width: 168px; } .menu-toggle { padding: 0 12px; } }

.nav { display: none; }
@media (min-width: 1140px) {
  .nav { display: block; margin-left: var(--s-5); }
  .header__actions { display: flex; }
  .menu-toggle { display: none; }
}
@media (min-width: 1140px) and (max-width: 1259px) { .header__tel { display: none; } }
.nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; min-height: var(--header-h); padding: 0 12px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 1.05rem; box-shadow: inset 0 -4px 0 transparent; }
.nav__link:has(+ .nav__caret) { padding-right: 2px; }
.nav__link:hover, .nav__link[aria-current="page"], .nav__link[data-section="active"] { color: var(--blue); box-shadow: inset 0 -4px 0 var(--orange); text-decoration: none; }
.nav__caret { display: inline-grid; place-items: center; width: 28px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.nav__caret svg { width: 12px; height: 12px; transition: transform .15s; }
.nav__item:hover .nav__caret svg, .nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: 100%; left: -20px; z-index: 120; width: max-content; max-width: min(760px, 90vw);
  display: grid; grid-template-columns: 1fr 240px; gap: var(--s-5); padding: var(--s-5);
  background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.menu--narrow { grid-template-columns: 1fr; min-width: 260px; }
.nav__item:hover > .menu, .nav__item:focus-within > .menu, .menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__item.is-dismissed > .menu { opacity: 0; visibility: hidden; }
/* Outdoor living sits mid-nav, so its wide menu centers under it instead of
   running past the right edge of the window */
.menu--center { left: 50%; transform: translate(-50%, -6px); }
.nav__item:hover > .menu--center, .nav__item:focus-within > .menu--center, .menu--center.is-open { transform: translate(-50%, 0); }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 2px var(--s-4); }
.menu--narrow .menu__list { grid-template-columns: 1fr; }
.menu__list a { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.menu__list a:hover, .menu__list a[aria-current="page"] { background: var(--sky); }
.menu__list strong { display: block; font-weight: 600; }
.menu__list span { display: block; font-size: .92rem; color: var(--muted); line-height: 1.35; }
.menu__feature { display: grid; align-content: start; gap: var(--s-3); font-size: .98rem; }
.menu__feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.menu__feature p { color: var(--muted); line-height: 1.4; }

.drawer { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--white); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s linear .15s; }
.drawer.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-bottom: 1px solid var(--line); }
.drawer__close { min-height: 46px; min-width: 46px; display: grid; place-items: center; border: 2px solid var(--text); border-radius: var(--radius); background: transparent; cursor: pointer; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__body { padding-block: var(--s-3) var(--s-7); }
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__toggle, .drawer__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font); font-size: 1.35rem; font-weight: 600; color: var(--text); text-decoration: none; }
.drawer__toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: none; padding-bottom: var(--s-4); }
.drawer__panel.is-open { display: block; }
.drawer__panel a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-size: 1.1rem; }
.drawer__panel a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.drawer__cta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.drawer__meta { margin-top: var(--s-6); color: var(--muted); font-size: 1rem; }

/* 7. Heroes, the house frame, the trust row ------------------------------- */
/* A photo cut to the logo's house shape, inside the blue house outline (drawn
   as SVG by build.mjs, open at the bottom like the mark), with the orange
   slats standing to its left. */
.hero__media, .pagehero__media { position: relative; margin: 0; padding-left: clamp(36px, 4.5vw, 60px); }
.frame { position: relative; display: block; padding: 16px 16px 0; }
.frame__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 6px; stroke-linejoin: miter; stroke-miterlimit: 8; pointer-events: none; }
.hero__media img, .pagehero__media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; clip-path: var(--house); }
.hero__media::after, .pagehero__media::after {
  content: ""; position: absolute; left: 0; top: 30%; width: clamp(24px, 2.6vw, 36px); height: 36%;
  background: var(--slats); transform: skewY(-8deg);
}
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 3.5vw, 44px); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
.hero__grid > .hero__media { width: 100%; max-width: 600px; }
.hero__title { max-width: 21ch; }
.hero__lead { margin-top: var(--s-5); }
.hero__rating { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: calc(var(--s-5) - 9px); margin-bottom: -9px; padding-block: 9px; color: var(--text); text-decoration: none; font-size: 1rem; }
.hero__rating b { font-weight: 700; }
.hero__rating:hover span:last-child { text-decoration: underline; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4.5vw, 72px); }
  .hero__grid > .hero__media { max-width: none; }
}
.pagehero { padding-block: clamp(28px, 4.5vw, 56px); border-bottom: 1px solid var(--line); }
.pagehero__grid { display: grid; gap: var(--s-6); align-items: center; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.pagehero__copy h1 { max-width: 18ch; }
.pagehero__copy .lead { margin-top: var(--s-4); }
.pagehero__note { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .98rem; color: var(--muted); }
.pagehero__note span { display: inline-flex; align-items: center; gap: 8px; }
.pagehero__note a { padding-block: 10px; }
.pagehero__note svg { width: 18px; height: 18px; color: var(--blue); }
.pagehero--text { border-bottom: 0; background: var(--sky); }
.pagehero--text h1 { max-width: 22ch; }
@media (min-width: 960px) {
  .pagehero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 5vw, 72px); }
  .pagehero--text .pagehero__grid { grid-template-columns: 1fr; }
}
.breadcrumb { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .95rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #A3B4C2; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }

/* The one entrance motion: the photo is revealed from the sill up, the way
   a roll-down shutter opens. Only with JS and without reduced motion. */
.js-motion .rollup img { animation: rollup .9s cubic-bezier(.6, 0, .2, 1) .15s both; }
@keyframes rollup {
  from { clip-path: polygon(50% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); }
  to { clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%); }
}

/* Trust row (src/includes/ledger.html) */
.trust { background: var(--navy); color: var(--white); }
.trust { font-size: 1rem; }
.trust__inner { display: grid; gap: var(--s-5); padding-block: 26px; align-items: center; }
.trust__google { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--white); text-decoration: none; }
.trust__google:hover { color: var(--white); }
.trust__google .g { width: 30px; height: 30px; }
.trust__google b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.trust__google small { display: block; color: var(--on-dark-muted); font-size: .88rem; }
.trust__google:hover small { text-decoration: underline; }
.trust__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.trust__facts li { display: flex; gap: 10px; align-items: baseline; color: var(--on-dark-muted); line-height: 1.4; }
.trust__facts li::before { content: ""; flex: none; width: 18px; height: 5px; background: var(--orange); transform: skewY(-9deg) translateY(-3px); }
.trust__facts strong { color: var(--white); font-weight: 600; }
.trust__badges { width: 100%; max-width: 330px; }
@media (min-width: 1000px) {
  .trust__inner { grid-template-columns: auto 1fr auto; gap: var(--s-6); }
  .trust__facts { grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s-6); justify-content: center; }
}

/* 8. Offer panels (home) and product rows (hubs) -------------------------- */
.offer { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .offer { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.offer__panel { display: flex; flex-direction: column; }
.offer__photo { margin: 0; }
.offer__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.offer__head { background: var(--blue); color: var(--white); padding: var(--s-5) var(--s-5) 20px; }
.offer__head p { color: var(--on-blue-muted); margin-top: 6px; font-size: 1.02rem; }
.offer--outdoor .offer__head { background: var(--navy); }
.offer__list { list-style: none; margin: 0; padding: 0 var(--s-5); background: var(--mist); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex: 1; }
.offer__list li + li { border-top: 1px solid var(--line); }
.offer__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3); padding: 16px 0; color: var(--text); text-decoration: none; }
.offer__list b { font-weight: 600; font-size: 1.15rem; }
.offer__list span { display: block; color: var(--muted); font-size: .98rem; line-height: 1.4; }
.offer__list svg { width: 20px; height: 20px; color: var(--orange-text); transition: transform .15s; }
.offer__list a:hover b { color: var(--blue); }
.offer__list a:hover svg { transform: translateX(3px); }

.prow { display: grid; gap: var(--s-5); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.prow:last-child { border-bottom: 1px solid var(--line); }
.prow__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.prow__body h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.prow__body p { margin-top: var(--s-3); color: var(--muted); max-width: 60ch; }
.prow__facts { list-style: none; padding: 0; margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 1rem; }
.prow__facts li { display: flex; align-items: baseline; gap: 8px; }
.prow__facts li::before { content: ""; flex: none; width: 14px; height: 4px; background: var(--orange); transform: skewY(-9deg) translateY(-3px); }
.prow__body .link-arrow { margin-top: var(--s-4); }
@media (min-width: 860px) { .prow { grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: center; } }

/* 9. At-a-glance table (the spec sheet) ----------------------------------- */
.specs { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.specs__title { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 16px var(--s-5); background: var(--blue); color: var(--white); }
.specs__title h3 { font-size: 1.15rem; }
.specs__title .data { color: var(--on-blue-muted); font-size: .95rem; }
.specs dl { display: grid; padding: 4px var(--s-5); }
.specs dl > div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dl > div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); font-size: 1rem; }
.specs dd { margin: 0; font-weight: 500; line-height: 1.45; }
.specs__foot { padding: 14px var(--s-5); background: var(--mist); border-top: 1px solid var(--line); }
.intro { display: grid; gap: var(--s-7); }
.intro__body h2 { max-width: 20ch; }
@media (min-width: 960px) {
  .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .intro > .specs { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (max-width: 520px) {
  .specs dl > div, .nap dl > div, .showroom__card dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 10. Benefits ------------------------------------------------------------ */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6) var(--s-7); }
.benefits li { padding-top: var(--s-5); border-top: 2px solid var(--line); }
.benefits li::before { content: ""; display: block; width: 34px; height: 7px; background: var(--orange); transform: skewY(-9deg); margin-bottom: var(--s-4); }
.benefits h3 { font-size: 1.25rem; }
.benefits p { margin-top: var(--s-2); color: var(--muted); }
.section--ink .benefits li { border-top-color: var(--line-dark); }
.section--ink .benefits p { color: var(--on-dark-muted); }
@media (min-width: 760px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .benefits--3 { grid-template-columns: repeat(3, 1fr); } }

/* 11. Split + callout + tables -------------------------------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
.split__media { margin: 0; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.split__media figcaption { margin-top: var(--s-3); }
.split__body h2 { max-width: 18ch; }
.split__body > p, .split__body > ul { margin-top: var(--s-4); }
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); }
  .split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--flip .split__media { order: 2; }
}
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 18px; height: 5px; background: var(--orange); transform: skewY(-9deg); }
.callout { display: grid; gap: var(--s-5); align-items: center; padding: clamp(28px, 4vw, 44px); background: var(--blue); color: var(--white); border-radius: var(--radius-lg); }
.callout h2, .callout h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1.15; }
.callout p { margin-top: var(--s-2); color: var(--on-blue-muted); }
.callout a:not(.btn) { color: var(--white); }
.callout .btn-row { margin-top: 0; }
.callout .btn--ghost { --fg: var(--white); --bd: rgba(255, 255, 255, .65); }
.callout .btn--ghost:hover { --bg: var(--white); --fg: var(--blue); }
@media (min-width: 900px) { .callout { grid-template-columns: 1fr auto; } }
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.compare { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 1rem; }
.compare th, .compare td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--navy); color: var(--white); font-weight: 600; }
.compare tbody th { font-weight: 600; }
.compare tbody th a { color: var(--blue); }
.compare tbody tr:nth-child(even) > * { background: var(--mist); }
.compare tbody tr:last-child > * { border-bottom: 0; }

/* 12. Gallery + mosaic + video -------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery__item { margin: 0; position: relative; }
.gallery__item[hidden] { display: none; }
.gallery__item button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .15s; }
.gallery__item button:hover img { opacity: .88; }
.gallery__item figcaption { margin-top: 6px; font-size: .95rem; color: var(--muted); }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .gallery__item.is-wide { grid-column: span 2; }
  .gallery__item.is-wide img { aspect-ratio: 8 / 3; }
  .gallery__item.is-big { grid-column: span 2; grid-row: span 2; }
  /* The big tile fills the two rows the small tiles set, whatever shape its
     photo is, so a portrait photo never stretches the grid. */
  .gallery__item.is-big button { position: absolute; inset: 0; height: 100%; }
  .gallery__item.is-big img { aspect-ratio: auto; height: 100%; }
}
.mosaic { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.mosaic figcaption, .mosaic figcaption.data { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; background: linear-gradient(transparent, rgba(7, 31, 54, .8)); color: var(--white); font-size: .98rem; font-weight: 500; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 116px; }
  .mosaic figure:nth-child(1) { grid-column: 1 / 7; grid-row: span 4; }
  .mosaic figure:nth-child(2) { grid-column: 7 / 10; grid-row: span 2; }
  .mosaic figure:nth-child(3) { grid-column: 10 / 13; grid-row: span 2; }
  .mosaic figure:nth-child(4) { grid-column: 7 / 11; grid-row: span 2; }
  .mosaic figure:nth-child(5) { grid-column: 11 / 13; grid-row: span 2; }
  .mosaic img { aspect-ratio: auto; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.filters button { min-height: 44px; padding: 0 18px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; font-weight: 500; }
.filters button:hover { border-color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.lightbox { width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; color: var(--white); }
.lightbox::backdrop { background: rgba(7, 31, 54, .94); }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox p { margin-top: var(--s-3); text-align: center; }
.lightbox__close { position: fixed; top: 16px; right: 16px; min-width: 48px; min-height: 48px; border: 2px solid rgba(255, 255, 255, .6); border-radius: var(--radius); background: transparent; color: var(--white); font-size: 1.6rem; cursor: pointer; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; border-radius: var(--radius-lg); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(7, 31, 54, .35); }
.video__play span { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; min-height: 56px; background: var(--orange); color: var(--text); border-radius: var(--radius); font-weight: 600; }
.video__play svg { width: 20px; height: 20px; }

/* 13. Reviews + warranty seal --------------------------------------------- */
.reviews { display: grid; gap: var(--s-6); }
.quote-lg blockquote p { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); line-height: 1.35; font-weight: 500; }
.quote-lg figcaption, .quote figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--s-5); font-size: 1rem; }
.quote-lg figcaption b, .quote figcaption b { font-weight: 600; }
.quote-list { display: grid; gap: var(--s-4); }
.quote { background: var(--white); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: 0 0 0 1px var(--line); }
.quote blockquote p { font-size: 1.05rem; line-height: 1.6; }
.quote figcaption { margin-top: var(--s-3); }
.rating-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.rating-sum__num { font-size: 3rem; font-weight: 600; line-height: 1; }
.rating-sum p { color: var(--muted); font-size: 1rem; }
@media (min-width: 960px) { .reviews { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }

.warranty { display: grid; gap: var(--s-6); align-items: center; }
.warranty__seal { width: min(300px, 72vw); margin-inline: auto; }
.warranty .lead { color: var(--on-dark-muted); margin-top: var(--s-4); }
.warranty__vs { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: 1.02rem; }
.warranty__vs dt { color: var(--on-dark-muted); }
.warranty__vs dd { margin: 0; }
@media (min-width: 900px) { .warranty { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-8); } }
@media (max-width: 520px) { .warranty__vs { grid-template-columns: 1fr; } .warranty__vs dd { margin-bottom: var(--s-3); } }

/* 14. Steps + storm band -------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: st; }
.steps li { counter-increment: st; }
.steps li::before { content: counter(st); display: block; font-size: 3.4rem; font-weight: 300; line-height: 1; color: var(--orange-text); margin-bottom: var(--s-3); }
.section--ink .steps li::before { color: var(--orange); }
.steps h3 { font-size: 1.25rem; }
.steps p { margin-top: var(--s-2); color: var(--muted); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.stormband { position: relative; overflow: hidden; background: var(--navy); color: var(--white); }
.stormband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.stormband__inner { position: relative; padding-block: clamp(80px, 10vw, 136px); }
.stormband h2 { max-width: 18ch; }
.stormband p { margin-top: var(--s-4); color: var(--on-blue-muted); font-size: 1.15rem; max-width: 38em; }
.stormband .stormband__status { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-5); padding: 8px 14px; border-radius: var(--radius); background: rgba(255, 255, 255, .12); color: var(--white); font-weight: 500; font-size: 1rem; }
.stormband .stormband__status:empty { display: none; }
.stormband__status::before { content: ""; width: 16px; height: 5px; background: var(--orange); transform: skewY(-9deg); }

/* 15. FAQ + related ------------------------------------------------------- */
.faq-wrap { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } }
.faq { border-top: 2px solid var(--text); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 20px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.2rem; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky); color: var(--blue); font-size: 1.4rem; font-weight: 500; line-height: 1; }
.section--sand .faq summary::after, .section--haint .faq summary::after { background: var(--white); }
.faq details[open] summary::after { content: "\2212"; background: var(--blue); color: var(--white); }
.faq__a { padding: 0 0 var(--s-5); max-width: 70ch; }
.faq__a p + p { margin-top: var(--s-3); }
.related { display: grid; gap: var(--s-3); }
.related a { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-4); align-items: center; padding: 10px; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: box-shadow .15s; }
.related a:hover { box-shadow: 0 0 0 2px var(--blue); }
.related img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius); }
.related strong { display: block; font-size: 1.15rem; font-weight: 600; }
.related span { display: block; font-size: .98rem; color: var(--muted); }
.related svg { width: 18px; height: 18px; color: var(--orange-text); margin-right: 6px; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .related--3 { grid-template-columns: repeat(3, 1fr); } }

/* 16. Forms + CTA band ---------------------------------------------------- */
.cta { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.cta__grid { position: relative; display: grid; gap: var(--s-7); }
.cta__copy h2 { max-width: 15ch; }
@media (min-width: 960px) { .cta__copy { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.cta__copy > p { margin-top: var(--s-4); color: var(--on-dark-muted); max-width: 32em; }
.cta__next { margin-top: var(--s-6); display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.cta__next li { position: relative; padding-left: 30px; color: var(--on-dark-muted); }
.cta__next li::before { content: ""; position: absolute; left: 0; top: .62em; width: 18px; height: 5px; background: var(--orange); transform: skewY(-9deg); }
.cta__next b { color: var(--white); font-weight: 600; }
.cta__contact { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.cta__contact a:not(.btn) { color: var(--white); }
.cta__contact .btn { justify-self: start; }
.cta__note { color: var(--on-dark-muted); }
@media (min-width: 960px) { .cta__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } }
.form { background: var(--white); color: var(--text); padding: clamp(22px, 3.5vw, 40px); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.section--sand .form, .section--haint .form, .contact .form { box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.form__title { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.form__sub { margin-top: 6px; color: var(--muted); font-size: 1rem; }
.form__grid { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__full { grid-column: 1 / -1; } }
.field label, .field legend { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 86, 162, .2); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 8px; }
.check, .field .check { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 8px 14px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 1rem; font-weight: 500; }
.check input, .field .check input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue); flex: none; }
.check:has(input:checked) { border-color: var(--blue); background: var(--sky); }
.check__icon { width: 26px; height: 26px; flex: none; color: var(--blue); }
.form__legal { margin-top: var(--s-4); font-size: .88rem; color: var(--muted); line-height: 1.5; }
.form__legal a { color: var(--muted); }
.form__status { margin-top: var(--s-4); font-weight: 600; }
.form__status[data-kind="error"] { color: #B3261E; }
.form .btn { margin-top: var(--s-5); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 17. Contact, showroom, articles ----------------------------------------- */
.contact { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.nap { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.nap address { font-style: normal; }
.nap dl { padding: 4px var(--s-5); }
.nap dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.nap dl > div:last-child { border-bottom: 0; }
.nap dt { color: var(--muted); }
.nap dd { margin: 0; font-weight: 500; }
.map { aspect-ratio: 4 / 3; background: var(--sky); }
.nap .map { border-top: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; }
.towns { columns: 2 150px; column-gap: var(--s-5); list-style: none; padding: 0; }
.towns li { padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid var(--line); break-inside: avoid; }
.towns li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 14px; height: 4px; background: var(--orange); transform: skewY(-9deg); }
.showroom { display: grid; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line); }
.showroom__card { padding: clamp(28px, 4vw, 48px); background: var(--blue); color: var(--white); }
.showroom__card h2 { max-width: 14ch; }
.showroom__card p { color: var(--on-blue-muted); margin-top: var(--s-4); }
.showroom__card dl { margin-top: var(--s-5); display: grid; }
.showroom__card dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s-3); padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.showroom__card dt { color: var(--on-blue-muted); }
.showroom__card dd { margin: 0; font-weight: 500; }
.showroom__card a:not(.btn) { color: var(--white); }
.showroom .map { aspect-ratio: auto; min-height: 340px; }
@media (min-width: 960px) { .showroom { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.badges { width: 100%; max-width: 420px; }

.posts { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.post-card[hidden] { display: none; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); background: var(--sky); }
.post-card .data { margin-top: var(--s-4); color: var(--blue); font-weight: 600; font-size: .95rem; }
.post-card h3 { margin-top: 6px; font-size: 1.3rem; line-height: 1.25; }
.post-card p { margin-top: var(--s-2); color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
.post-card:hover { color: var(--text); }
.post-card:hover h3 { color: var(--blue); }
.article { display: grid; gap: var(--s-7); }
@media (min-width: 1080px) { .article { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); align-items: start; } }
.article__aside { display: grid; gap: var(--s-4); }
@media (min-width: 1080px) { .article__aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.aside-card { background: var(--navy); color: var(--white); padding: var(--s-5); border-radius: var(--radius-lg); }
.aside-card h2 { font-size: 1.5rem; }
.aside-card p { margin-top: var(--s-3); color: var(--on-dark-muted); font-size: 1rem; }
.aside-card .btn { margin-top: var(--s-4); width: 100%; }
.aside-card .btn + .btn { margin-top: var(--s-2); }
.aside-links { background: var(--mist); border-radius: var(--radius-lg); padding: var(--s-5); }
.aside-links h2 { font-size: 1.1rem; }
.aside-links ul { list-style: none; padding: 0; margin-top: var(--s-3); }
.aside-links li { border-top: 1px solid var(--line); }
.aside-links a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-weight: 500; }
.aside-links a:hover { color: var(--blue); }
.prose { max-width: 70ch; font-size: 1.15rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.7em; font-size: clamp(1.55rem, 1.3rem + .9vw, 2rem); }
.prose h3 { margin-top: 1.5em; font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose figure { margin-block: 1.6em; }
.prose img { width: 100%; border-radius: var(--radius-lg); }
.prose figcaption { margin-top: var(--s-2); font-size: .95rem; color: var(--muted); }
.prose a { font-weight: 500; }
.prose blockquote { border-left: 4px solid var(--orange); padding-left: var(--s-5); font-size: 1.3rem; }
.article__lead-img { margin-bottom: var(--s-6); }
.article__lead-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.legal h2 { font-size: 1.45rem; }

/* 18. Footer + utilities -------------------------------------------------- */
.footer { background: var(--navy-deep); color: #9FB6C9; font-size: 1rem; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--white); }
.footer__top { display: grid; gap: var(--s-7); padding-block: var(--s-9) var(--s-7); }
.footer__brand img.footer__logo { width: 250px; }
.footer__brand p { margin-top: var(--s-5); max-width: 34ch; }
.footer__nap { margin-top: var(--s-5); display: grid; gap: 4px; font-style: normal; }
.footer__nap a { justify-self: start; padding-block: 9px; margin-block: -5px; }
.footer__nap .data { color: #9FB6C9; font-size: 1rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
.footer__h { font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: var(--s-3); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer__cols a { color: #C9D7E3; }
/* The badge artwork is transparent with white lettering (FINANCING), made for a
   dark ground, so it sits straight on the navy with no panel behind it. */
.footer__badges { margin-top: var(--s-6); }
.footer__badges img { width: min(100%, 480px); }
.footer__social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.footer__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.footer__social a:hover { background: var(--blue); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5) var(--s-6); border-top: 1px solid var(--line-dark); font-size: .95rem; }
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } }

.mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -1px 0 var(--line), 0 -10px 24px -16px rgba(11, 45, 77, .45); }
.mobilebar .btn { min-height: 50px; padding: 0 10px; }
body { padding-bottom: 74px; }
@media (min-width: 1140px) { .mobilebar { display: none; } body { padding-bottom: 0; } }

.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.text-mist { color: var(--on-dark-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .header, .mobilebar, .cta, .footer__social { display: none !important; }
  body { padding: 0; }
}

/* 19. Selling blocks (after the Beltway Blinds review, Oct 19 2026) ------- */

/* Quote bar: a short form straddling the hero and the trust row, with the
   financing offer beside it. The fastest way to ask for a price. */
.quotebar-wrap { background: var(--white); padding-bottom: clamp(40px, 5vw, 64px); }
.quotebar { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -28px rgba(11, 45, 77, .55); }
.quotebar__offer { display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; background: var(--blue); color: var(--white); }
.quotebar__offer h2 { font-size: 1.35rem; line-height: 1.2; }
.quotebar__offer p { margin-top: 6px; color: var(--on-blue-muted); font-size: .95rem; line-height: 1.45; }
.quotebar__form { padding: 20px 24px; }
.quotebar__fields { display: grid; gap: var(--s-3); }
.quotebar__fields .field label { font-size: .92rem; margin-bottom: 4px; }
.quotebar__fields .field input, .quotebar__fields .field select { min-height: 48px; padding: 10px 12px; font-size: 1rem; }
.quotebar__fields .btn { margin: 0; align-self: end; min-height: 48px; padding: 0 22px; white-space: nowrap; }
.quotebar__legal { margin-top: 10px; font-size: .82rem; color: var(--muted); }
.quotebar__legal a { color: var(--muted); }
.quotebar .form__status { margin-top: var(--s-2); }
@media (min-width: 700px) { .quotebar__fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .quotebar { grid-template-columns: 270px 1fr; }
  .quotebar__fields { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; }
}
.trust--after-quotebar .trust__inner { padding-top: var(--s-6); }

/* A review card under the hero photo, overlapping only its bottom edge so
   the house and the patio beneath it stay in view */
.hero__review { position: relative; z-index: 3; width: min(280px, 75%); margin: -28px 0 0 calc(clamp(36px, 4.5vw, 60px) + 28px); padding: 14px 16px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.hero__review blockquote p { margin-top: 4px; font-size: .98rem; line-height: 1.45; font-weight: 500; }
.hero__review figcaption { margin-top: 6px; font-size: .85rem; color: var(--muted); }
.hero__review .stars svg { width: 15px; height: 15px; }
.hero__media:has(.hero__review)::after { top: 24%; height: 32%; }
@media (max-width: 599px) {
  .hero__review { width: auto; margin: -40px 12px 0 calc(clamp(36px, 4.5vw, 60px) + 12px); }
  .hero__review blockquote p { font-size: .95rem; }
}

/* Product index: one featured product large, the rest as thumbnail rows */
.pindex { display: grid; gap: var(--s-5); align-items: stretch; }
.pindex + .pindex { margin-top: var(--s-8); }
.pfeature { position: relative; display: flex; min-height: 440px; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); text-decoration: none; background: var(--navy); }
.pfeature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pfeature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 31, 54, 0) 25%, rgba(7, 31, 54, .6) 52%, rgba(7, 31, 54, .95) 100%); }
.pfeature__body { position: relative; z-index: 1; align-self: flex-end; padding: var(--s-6); display: grid; gap: 8px; }
.pfeature__tag { justify-self: start; padding: 4px 10px; border-radius: var(--radius); background: var(--orange); color: var(--text); font-size: .9rem; font-weight: 600; }
@media (max-width: 479px) { .pfeature__body { padding: 20px; } .pfeature__tag { font-size: .84rem; padding: 3px 8px; } }
.pfeature__title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); font-weight: 600; line-height: 1.1; }
.pfeature__text { color: #E8EFF6; max-width: 30em; text-wrap: pretty; }
.pfeature__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--white); }
.pfeature__link svg { width: 18px; height: 18px; transition: transform .15s; }
.pfeature:hover { color: var(--white); }
.pfeature:hover .pfeature__link svg { transform: translateX(3px); }
.plist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.plist li { border-bottom: 1px solid var(--line); }
.plist a { display: grid; grid-template-columns: 88px 1fr 44px; gap: var(--s-4); align-items: center; padding: 14px 0; color: var(--text); text-decoration: none; }
.plist img { width: 88px; height: 66px; object-fit: cover; border-radius: var(--radius); }
.plist b { display: block; font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.plist span span { display: block; margin-top: 2px; color: var(--muted); font-size: .98rem; line-height: 1.4; }
.plist .plist__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); color: var(--blue); transition: background-color .15s, color .15s, box-shadow .15s; }
.plist .plist__go svg { width: 18px; height: 18px; }
.plist a:hover b { color: var(--blue); }
.plist a:hover .plist__go { background: var(--blue); color: var(--white); box-shadow: none; }
@media (min-width: 900px) {
  .pindex { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
  .pindex--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pindex--flip .pfeature { order: 2; }
}
.pindex__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.pindex__label h3 { font-size: 1.5rem; }
.pindex__label a { display: inline-flex; align-items: center; gap: 6px; padding-block: 8px; margin-block: -8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pindex__label a svg { width: 16px; height: 16px; }

/* Brands we install */
.brands { background: var(--navy); color: var(--white); padding-block: var(--s-7); }
.brands__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); align-items: baseline; margin-bottom: var(--s-5); }
.brands__head h2 { font-size: 1.5rem; }
.brands__head p { color: var(--on-dark-muted); }
.brands__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line-dark); }
.brands__list li { padding: 20px 18px; box-shadow: 0 0 0 .5px var(--line-dark); }
.brands__list b { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.brands__list span { display: block; margin-top: 2px; color: var(--on-dark-muted); font-size: .95rem; }
@media (min-width: 760px) { .brands__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .brands__list { grid-template-columns: repeat(6, 1fr); } }

/* Review cards: who wrote it, and what they bought */
.quote > .stars, .quote-lg > .stars { margin-bottom: var(--s-3); }
.quote figcaption > span:last-child, .quote-lg figcaption > span:last-child { display: grid; line-height: 1.3; }
.quote__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 600; font-size: .95rem; }
.quote__meta { color: var(--muted); font-size: .92rem; }
.quote-lg .quote__avatar { width: 48px; height: 48px; }

/* Why us: a finished install beside the promises, on every product page */
.why { display: grid; gap: var(--s-6); align-items: center; }
.why__media { margin: 0; }
.why__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius-lg); }
.why__body h2 { max-width: 18ch; }
.why__body > p { margin-top: var(--s-4); }
.why__body .ticks { margin-top: var(--s-5); }
@media (min-width: 900px) { .why { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); } }

/* 20. Product pages ------------------------------------------------------- */
/* Interior pages no longer share one hero. Each product page picks the hero
   that sells it best (src/pages/*.html):
     .phero--show     the install photo across the page, copy over the dark side
     .phero--split    product photo beside the copy, on sky
     .phero--collage  three photos beside the copy, for products with many uses
     .phero--toggle   one photo per state (open, closed) with a switch
     .phero--hub      the copy beside a grid of products to choose from
   Under the hero, .keynums holds the product's own numbers, and the intro
   runs beside the sticky price card (src/includes/pricecard.html). */
.phero { position: relative; }
.phero__grid { display: grid; gap: var(--s-6); align-items: center; }
.phero__copy h1 { max-width: 17ch; }
.phero__copy .lead { margin-top: var(--s-4); }
.phero__copy .btn-row { margin-top: var(--s-5); }

/* The proof line under the buttons */
.proofline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: var(--s-5); font-size: .98rem; }
.proofline > * { display: inline-flex; align-items: center; gap: 8px; }
.proofline a { color: inherit; text-decoration: none; padding-block: 9px; margin-block: -9px; }
.proofline a:hover span { text-decoration: underline; }
.proofline .stars svg { width: 15px; height: 15px; }
.proofline b { font-weight: 700; }
.proofline > a { flex-basis: 100%; }
.proofline__fact::before { content: ""; width: 14px; height: 4px; background: var(--orange); transform: skewY(-9deg); }

/* Photo across the page. On phones the photo sits on top and fades into the
   navy the copy is set on; from 960px the copy sits over the photo's dark side. */
.phero--show { background: var(--navy-deep); color: var(--white); overflow: hidden; }
.phero--show .phero__media { position: relative; margin: 0; }
.phero--show .phero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 600px) and (max-width: 959px) { .phero--show .phero__media img { aspect-ratio: 16 / 8; } }
.phero--show .phero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 31, 54, 0) 55%, var(--navy-deep) 100%); }
.phero--show .phero__copy { position: relative; padding-block: var(--s-2) 88px; }
.phero--show .breadcrumb, .phero--show .breadcrumb a { color: var(--on-dark-muted); }
.phero--show .breadcrumb a:hover { color: var(--white); }
.phero--show .breadcrumb li + li::before { color: rgba(255, 255, 255, .4); }
.phero--show .lead { color: #E1EAF2; }
.phero--show :focus-visible { outline-color: var(--orange); }
@media (min-width: 960px) {
  .phero--show { display: flex; align-items: center; min-height: clamp(560px, 72vh, 700px); }
  .phero--show .phero__media { position: absolute; inset: 0; }
  .phero--show .phero__media img { height: 100%; aspect-ratio: auto; object-position: var(--focus, 70% 50%); }
  .phero--show .phero__media::after { background: linear-gradient(90deg, rgba(7, 31, 54, .95) 0%, rgba(7, 31, 54, .86) 32%, rgba(7, 31, 54, .35) 58%, rgba(7, 31, 54, 0) 78%); }
  .phero--show .container { position: relative; }
  .phero--show .phero__copy { max-width: 630px; padding-block: 64px 120px; }
}

/* Product photo beside the copy */
.phero--split, .phero--collage, .phero--toggle, .phero--hub { background: var(--sky); padding-block: clamp(28px, 4.5vw, 56px) clamp(96px, 10vw, 128px); }
.phero--split .phero__media { position: relative; margin: 0; }
.phero--split .phero__media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.phero__inset { position: absolute; right: -10px; bottom: -28px; width: 30%; max-width: 150px; margin: 0; padding: 8px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.phero__inset img { width: 100%; border-radius: var(--radius); }
.phero__inset figcaption { margin-top: 6px; font-size: .86rem; line-height: 1.3; color: var(--muted); text-align: center; }
@media (min-width: 960px) {
  .phero--split .phero__grid, .phero--collage .phero__grid, .phero--toggle .phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  .phero__inset { right: -24px; }
}

/* Three photos: one tall, two stacked */
.phero__collage { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 5 / 4; margin: 0; }
.phero__collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.phero__collage img:first-child { grid-row: span 2; }

/* Open and closed */
.phero__toggle { margin: 0; }
.phero__frames { display: grid; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.phero__frames img { grid-area: 1 / 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .35s ease; }
.phero__frames img + img { opacity: 0; }
.phero__toggle[data-state="closed"] .phero__frames img:first-child { opacity: 0; }
.phero__toggle[data-state="closed"] .phero__frames img + img { opacity: 1; }
.seg { display: inline-flex; margin-top: var(--s-4); padding: 4px; background: var(--white); border-radius: 999px; box-shadow: 0 0 0 1px var(--line); }
.seg button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.phero__toggle figcaption { margin-top: var(--s-3); color: var(--muted); font-size: .95rem; }
html:not(.js) .seg { display: none; }

/* Products to choose from (hub pages) */
.chooser { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chooser a { position: relative; display: flex; align-items: flex-end; min-height: 150px; padding: 14px; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); text-decoration: none; background: var(--navy); }
.chooser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.chooser a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 31, 54, 0) 35%, rgba(7, 31, 54, .9) 100%); }
.chooser span { position: relative; z-index: 1; display: grid; gap: 2px; }
.chooser b { font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.chooser small { font-size: .88rem; color: #DCE6EF; line-height: 1.3; }
.chooser a:hover { color: var(--white); }
.chooser a:hover img { transform: scale(1.04); }
@media (min-width: 640px) { .chooser { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chooser a { min-height: 170px; } }
/* Nine town tiles: the first runs full width on phones so the two-up rows come out even */
@media (max-width: 639px) { .chooser--lead > li:first-child { grid-column: 1 / -1; } }
@media (min-width: 960px) { .phero--hub .phero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 64px); } }

/* The product's own numbers, laid over the bottom of the hero */
.keynums { position: relative; z-index: 2; margin-top: -56px; }
.keynums ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.keynums li { padding: 20px 20px 22px; box-shadow: 0 0 0 .5px var(--line); }
.keynums b { display: block; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); font-weight: 600; line-height: 1.05; color: var(--blue); }
.keynums b small { font-size: .55em; font-weight: 600; margin-left: 2px; }
.keynums span { display: block; margin-top: 8px; color: var(--muted); font-size: .97rem; line-height: 1.4; }
@media (min-width: 860px) { .keynums ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .keynums li { padding: 24px 26px 26px; } }
.keynums + .section { padding-top: clamp(48px, 6vw, 80px); }

/* Intro beside the sticky price card */
.reading { display: grid; gap: var(--s-7); }
.reading__body h2 { max-width: 20ch; }
.reading__body .specs { margin-top: var(--s-6); }
@media (min-width: 640px) {
  .reading__body .specs dl { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
  .reading__body .specs dl > div { grid-template-columns: 1fr; gap: 2px; align-content: start; }
  .reading__body .specs dt { font-size: .92rem; }
  .reading__body .specs dl > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (min-width: 1000px) {
  .reading { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(48px, 5vw, 80px); align-items: start; }
  .reading__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

.pricecard { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.pricecard__head { padding: 20px 22px 18px; background: var(--navy); color: var(--white); }
.pricecard__title { font-size: 1.35rem; line-height: 1.2; }
.pricecard__head p { margin-top: 6px; color: var(--on-dark-muted); font-size: .95rem; line-height: 1.45; }
.pricecard form { display: grid; gap: 12px; padding: 18px 22px 20px; }
.pricecard .field label { font-size: .92rem; margin-bottom: 4px; }
.pricecard .field input { min-height: 48px; padding: 10px 12px; font-size: 1rem; }
.pricecard .btn { margin-top: 4px; }
.pricecard .form__status { margin-top: 0; }
.pricecard__legal { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pricecard__legal a { color: var(--muted); }
.pricecard__foot { display: grid; gap: 0; padding: 14px 22px 16px; background: var(--mist); border-top: 1px solid var(--line); font-size: .95rem; }
.pricecard__foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; }
.pricecard__foot a:hover span { text-decoration: underline; }
.pricecard__foot svg { width: 18px; height: 18px; }
.pricecard__foot .stars svg { width: 14px; height: 14px; }
.pricecard__foot .g { width: 18px; height: 18px; }

/* Cards for options, uses and styles, with or without a photo */
.choose { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.choose > li { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.section--sand .choose > li { box-shadow: 0 0 0 1px var(--line), 0 10px 24px -20px rgba(11, 45, 77, .5); }
.choose img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.choose__body { display: grid; align-content: start; gap: 6px; padding: 18px 20px 22px; }
.choose__body::before { content: ""; width: 26px; height: 6px; margin-bottom: 6px; background: var(--orange); transform: skewY(-9deg); }
.choose__body h3 { font-size: 1.2rem; }
.choose__body p { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.choose__tag { justify-self: start; font-size: .85rem; font-weight: 600; color: var(--blue); }
@media (min-width: 640px) { .choose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .choose--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choose--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Color chips, for products sold in a short list of finishes */
.swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.swatches li { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.swatches i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(13, 34, 54, .25); }
.phero--flat { padding-bottom: clamp(40px, 5vw, 64px); }
.phero--show.phero--flat .phero__copy { padding-bottom: 72px; }
.keynums b.is-word { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem); line-height: 1.15; }
@media (min-width: 860px) { .keynums--3 ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sw-white { background: #F2F2EE; }
.sw-bronze { background: #5E4631; }
.sw-gray { background: #7D858C; }
.phero__toggle figcaption .swatches { margin-top: 6px; }

/* Gallery with the caption laid over each photo (the Bahama colors) */
.gallery--captions .gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 12px 10px; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(transparent, rgba(7, 31, 54, .85)); color: var(--white); font-size: .95rem; font-weight: 500; line-height: 1.3; pointer-events: none; }

/* Outdoor living: problems to the products that fix them, laid over the hero */
.fixes { position: relative; z-index: 2; margin-top: -56px; }
.fixes__card { display: grid; gap: var(--s-4); padding: 22px 24px 24px; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.fixes__card h2 { font-size: 1.3rem; line-height: 1.25; }
.fixes__card > div > p { margin-top: 6px; color: var(--muted); font-size: .97rem; line-height: 1.45; }
.fixes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fixes li b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; }
.fixes li b::before { content: ""; width: 14px; height: 4px; background: var(--orange); transform: skewY(-9deg); }
.fixes li a { display: block; padding: 3px 0; font-size: .98rem; line-height: 1.35; }
@media (min-width: 900px) { .fixes__card { grid-template-columns: 230px minmax(0, 1fr); gap: var(--s-6); padding: 26px 28px; } .fixes ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fixes + .section { padding-top: clamp(48px, 6vw, 80px); }

/* Our own videos (src/includes/video.html) and hero loops */
.vid { margin: 0; }
.contact__side > * + * { margin-top: var(--s-6); }
.vid figcaption:empty { display: none; }
.vid figcaption { margin-top: var(--s-3); color: var(--muted); font-size: .95rem; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.video__play small { font-size: .9rem; font-weight: 500; opacity: .8; }
.video[data-video] .video__play { place-items: end start; padding: 16px; background: linear-gradient(180deg, rgba(7, 31, 54, 0) 55%, rgba(7, 31, 54, .55)); }
.video[data-video] .video__play span { min-height: 48px; padding: 0 20px; }
.video--tall { aspect-ratio: 9 / 16; max-width: 360px; }
.vid-split { display: grid; gap: var(--s-6); align-items: center; }
.vid-split__body h2 { max-width: 18ch; }
.vid-split__body > p, .vid-split__body > ul { margin-top: var(--s-4); }
@media (min-width: 860px) {
  .vid-split { grid-template-columns: 360px minmax(0, 1fr); gap: var(--s-8); }
  .vid-split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.phero__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 70% 50%); opacity: 0; transition: opacity .6s ease; }
.phero__loop.is-playing { opacity: 1; }
.phero__media .phero__loop + .loop-toggle, .loop-toggle { position: absolute; right: 20px; bottom: 76px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(7, 31, 54, .55); color: var(--white); font-size: .9rem; font-weight: 600; cursor: pointer; }
.loop-toggle:hover { background: rgba(7, 31, 54, .8); }
.loop-toggle svg { width: 14px; height: 14px; }
.phero__media::after { pointer-events: none; }
@media (max-width: 959px) { .phero__loop, .loop-toggle { display: none; } }
.use__media { margin: 0 0 var(--s-2); }
.use__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.use__media figcaption { margin-top: var(--s-2); color: var(--muted); font-size: .95rem; }
.split__toggle figcaption, .use__media.phero__toggle figcaption { color: var(--muted); }