/* vistaza.com — design system. One stylesheet, mobile rules at the bottom.
   Color approved by AJ 2026-09-18: slate + orange. Type: Montserrat. */

:root {
  --slate: #2C3947; --slate-deep: #1E2833; --slate-line: #46586A; --on-slate: #C5CFD9;
  --orange: #F2753F; --orange-ink: #D9531F; --orange-soft: #F6A77F; --peach: #FDE6DA;
  --ink: #2C3947; --body: #566270; --muted: #6B7785; --faint: #8A95A1;
  --ground: #FFFFFF; --ground-2: #F3F5F7; --tint: #E9EEF2; --line: #D5DCE3; --line-soft: #E3E8ED;
  --btn-ink: #1E2326;
  --gutter: clamp(1.25rem, 3.9vw, 3.5rem);
  --block: clamp(3.5rem, 6.5vw, 6rem);
  --radius: 1.25rem;
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--orange-ink); text-decoration: none; }
a:hover { color: #B8431A; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
.eyebrow { font-size: clamp(.8125rem, .25vw + .75rem, .9375rem); letter-spacing: .28em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.display { font-size: clamp(2.75rem, 5.4vw + 1rem, 6rem); line-height: .98; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.mega { font-size: clamp(5rem, 7vw + 2.5rem, 7.25rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.title { font-size: clamp(2.125rem, 2.6vw + 1.25rem, 3.75rem); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.title-2 { font-size: clamp(1.875rem, 1.6vw + 1.3rem, 3rem); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font-size: clamp(1.5rem, .9vw + 1.2rem, 2rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.tagline { font-size: clamp(1.25rem, .9vw + 1rem, 1.875rem); font-weight: 300; }
.lede { font-size: clamp(1.125rem, .5vw + 1rem, 1.5rem); font-weight: 300; text-wrap: pretty; }
.prose { font-size: clamp(1.0625rem, .3vw + 1rem, 1.25rem); color: var(--body); text-wrap: pretty; }
.small { font-size: clamp(.875rem, .15vw + .84rem, 1rem); color: var(--muted); }
.fine { font-size: .875rem; color: var(--faint); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--gap, 1rem); }

/* ---------- layout ---------- */
.wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 50rem; }
.section { padding-block: var(--block); }
.section--tint { background: var(--ground-2); }
.section--slate { background: var(--slate); color: #FFFFFF; }
.section--black { background: #000000; color: #FFFFFF; }
.section--slate .prose, .section--slate .small { color: var(--on-slate); }
.section--slate a:not(.btn), .section--black a:not(.btn) { color: var(--orange-soft); }   /* buttons keep their own text color — a pale label on an orange button failed contrast */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
.split--hero { grid-template-columns: 1.25fr .75fr; align-items: end; }
.split--hero .display { font-size: clamp(2.75rem, 3.9vw + 1rem, 4.75rem); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; }
.head-row .lede { max-width: 35rem; padding-bottom: .75rem; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.125rem var(--gutter); }
.header__logo { flex: 0 0 auto; }
.header__logo img { height: clamp(2.25rem, 2.2vw + 1.4rem, 3.625rem); width: auto; max-width: none; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); font-size: clamp(1rem, .3vw + .95rem, 1.125rem); font-weight: 600; }
.nav a { color: #33414F; padding: .5rem 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--slate); border-bottom-color: var(--line); }
.nav a[aria-current="page"] { color: var(--slate); font-weight: 700; border-bottom-color: var(--orange); }
.header__cta { display: flex; align-items: center; gap: .5rem; }
.header__tel { color: #33414F; font-weight: 700; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; padding: .5rem 0; border-bottom: 3px solid transparent; }
.header__tel:hover { color: var(--slate); border-bottom-color: var(--orange); }
.header--over .header__tel { color: #FFFFFF; } .header--over.is-stuck .header__tel { color: #33414F; }
.menu-btn { display: none; width: 3rem; height: 3rem; border: 0; background: none; padding: 0; cursor: pointer; align-items: center; justify-content: center; color: var(--slate); }
.header--over { position: absolute; left: 0; right: 0; background: none; backdrop-filter: none; border-bottom: 0; }
.header--over .nav a { color: #FFFFFF; }
.header--over .nav a:hover { border-bottom-color: rgba(255,255,255,.5); }
.header--over .menu-btn { color: #FFFFFF; }
.header--over.is-stuck { position: fixed; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.header--over.is-stuck .nav a, .header--over.is-stuck .menu-btn { color: #33414F; }
.header .logo--light { display: none; }
.header--over:not(.is-stuck) .logo--light { display: block; }
.header--over:not(.is-stuck) .logo--dark { display: none; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .875rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: clamp(1rem, .2vw + .96rem, 1.125rem); border: 2px solid transparent; cursor: pointer; font-family: inherit; text-align: center; }
.btn--solid { background: var(--orange); color: var(--btn-ink); }
.btn--solid:hover { background: #F58A5B; color: var(--btn-ink); }
.btn--slate { background: var(--slate); color: #FFFFFF; }
.btn--slate:hover { background: var(--slate-deep); color: #FFFFFF; }
.btn--ghost { border-color: var(--slate); color: var(--slate); }
.btn--ghost-light { border: 1px solid rgba(255,255,255,.8); color: #FFFFFF; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.btn--lg { min-height: 3.5rem; padding: 1.0625rem 2.5rem; }
.btn--sm { min-height: 2.75rem; padding: .625rem 1.375rem; font-size: 1rem; }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-weight: 700; font-size: clamp(1.0625rem, .2vw + 1rem, 1.125rem); }
.links a { padding: .625rem 0; }
.center .links, .links--center { justify-content: center; }

/* ---------- photo hero & bands ---------- */
.photo-hero { position: relative; z-index: 0; overflow: hidden; color: #FFFFFF; min-height: clamp(36rem, 62vw, 54rem); display: flex; align-items: flex-end; }
.photo-hero > picture, .photo-band > picture { position: absolute; inset: 0; z-index: -2; }
.photo-hero > picture img, .photo-band > picture img { width: 100%; height: 100%; object-fit: cover; }
.photo-hero > picture img.img-top { object-position: 50% 0; }   /* shapes hero: the arch is at the top of a square photo — keep it in frame (AJ 9/22) */
.photo-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,37,47,.62) 0%, rgba(28,37,47,.05) 26%, rgba(28,37,47,.30) 46%, rgba(28,37,47,.80) 72%, rgba(28,37,47,.94) 100%); }
/* over a photo the small label is WHITE with an orange bar — orange letters get lost on a busy picture (AJ 2026-09-18) */
.photo-hero .eyebrow { color: #FFFFFF; display: block; position: relative; padding-left: 3rem; text-shadow: 0 1px 12px rgba(20,28,38,.55); }   /* was display:flex — on a phone the text before and after the uPVC span became separate flex items and wrapped out of line (AJ 9/20) */
.photo-hero .eyebrow::before { content: ""; position: absolute; left: 0; top: .55em; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--orange); }
.photo-hero h1, .photo-hero .lede { text-shadow: 0 2px 24px rgba(20,28,38,.45); }
.photo-hero__in { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; padding: 0 var(--gutter) clamp(1.75rem, 4.4vw, 4rem); }
.photo-hero__in > :first-child { flex: 1 1 auto; min-width: 0; }
.photo-hero__side { flex: 0 0 auto; }
.photo-hero .display { text-wrap: wrap; font-size: clamp(2.75rem, 5vw + 1rem, 6rem); }
.photo-hero--left::after { background: linear-gradient(90deg, rgba(28,37,47,.96) 0%, rgba(28,37,47,.80) 45%, rgba(28,37,47,.25) 100%); }
.photo-hero--right > picture img { object-position: 78% 92%; }   /* keep the right edge of the photo in view when the crop is narrow */
.photo-hero--left { align-items: center; min-height: clamp(30rem, 44vw, 40rem); }
.photo-band { position: relative; z-index: 0; overflow: hidden; color: #FFFFFF; min-height: clamp(26rem, 50vw, 47.5rem); display: flex; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,37,47,.85) 0%, rgba(28,37,47,.25) 45%, rgba(28,37,47,.05) 100%); }
.photo-band--bottom::after { background: linear-gradient(180deg, rgba(28,37,47,0) 50%, rgba(28,37,47,.82) 100%); }
.photo-band--bottom { align-items: flex-end; }
.photo-band__in { width: 100%; padding: clamp(2.5rem, 6vw, 5.25rem) var(--gutter); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.inset { padding: 1rem 1rem 0; }

/* ---------- product showcase ---------- */
.showcase { padding-block: var(--block) calc(var(--block) * .75); text-align: center; }
.showcase__img { display: flex; justify-content: center; margin-top: 1.75rem; }
.showcase__img img { height: clamp(22rem, 46vw, 43rem); width: auto; }
.card-img { background: #FFFFFF; border-radius: 1.75rem; padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 5vw, 4.5rem); display: inline-block; }
.card-img img { height: clamp(16rem, 36vw, 32.5rem); width: auto; }

/* ---------- ratings ---------- */
.rates { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); max-width: 68rem; margin-inline: auto; text-align: center; }
.rates[style*="--cols: 4"] { max-width: 78rem; }
.rates[style*="--cols: 4"] .rate__n { font-size: clamp(1.875rem, 1.5vw + 1.3rem, 2.75rem); }
.rate { padding: 1.75rem 1rem 0; }
.rate + .rate { border-left: 1px solid var(--line); }
.rate__n { font-size: clamp(2.25rem, 2vw + 1.6rem, 3.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; color: var(--slate); }
.rate__c { font-size: clamp(.875rem, .15vw + .84rem, 1rem); color: var(--muted); margin-top: .625rem; }
.section--slate .rates, .section--slate .rate + .rate { border-color: var(--slate-line); }
.section--slate .rate__n { color: #FFFFFF; }
.section--slate .rate__c { color: var(--on-slate); }

/* ---------- made-for row, tiles, cards ---------- */
.madefor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1rem 0; }
.mf { display: block; background: var(--ground-2); color: var(--slate); padding: 2.5rem 2rem; min-height: 14.5rem; }
.mf:hover { background: var(--tint); color: var(--slate); }
.mf__k { font-size: .75rem; letter-spacing: .2em; font-weight: 700; color: var(--orange); }
.mf__t { font-size: clamp(1.5rem, .8vw + 1.2rem, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin-top: .5rem; }
.mf__s { font-size: .9375rem; color: var(--muted); margin-top: .375rem; }
.mf__l { font-weight: 700; color: var(--orange-ink); margin-top: .75rem; display: block; }
.mf--dark { background: var(--slate); color: #FFFFFF; }
.mf--dark:hover { background: var(--slate-deep); color: #FFFFFF; }
.mf--dark .mf__s { color: var(--on-slate); } .mf--dark .mf__l { color: var(--orange-soft); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.tile { position: relative; z-index: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: clamp(20rem, 38vw, 35rem); padding: clamp(2.5rem, 3.6vw, 3.25rem) 1.5rem 0; background: var(--ground-2); color: var(--slate); }
.tile__t { font-size: clamp(2rem, 1.2vw + 1.6rem, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.tile__s { font-size: clamp(1.125rem, .3vw + 1.05rem, 1.25rem); font-weight: 300; margin-top: .5rem; }
.tile__l { font-weight: 700; padding: .75rem 0 1.5rem; color: var(--orange-ink); }
.tile--slate { background: var(--slate); color: #FFFFFF; } .tile--deep { background: var(--slate-deep); color: #FFFFFF; }
.tile--slate .tile__l, .tile--deep .tile__l, .tile--photo .tile__l { color: var(--orange-soft); }
.tile--orange { background: var(--orange); color: var(--btn-ink); } .tile--orange .tile__l { color: var(--btn-ink); }
.tile--photo { color: #FFFFFF; }
.tile:hover { color: var(--slate); } .tile--slate:hover, .tile--deep:hover, .tile--photo:hover { color: #FFFFFF; } /* 9/22 AJ: the global a:hover was turning photo/dark tiles orange on hover ('can't be orange on the colour pic') */
.tile--photo > picture { position: absolute; inset: 0; z-index: -2; } .tile--photo > picture img { width: 100%; height: 100%; object-fit: cover; }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,37,47,.80) 0%, rgba(28,37,47,.18) 48%, rgba(28,37,47,0) 100%); }
.tile__media { flex-grow: 1; width: 100%; margin-top: .5rem; min-height: 12rem; position: relative; }
.tile__media picture, .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swatches { display: grid; grid-template-columns: repeat(5, auto); gap: clamp(.625rem, 1.2vw, 1.125rem); justify-content: center; padding: 1rem 0 2rem; }
.swatch { width: clamp(2.75rem, 5vw, 4.875rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.25rem; }
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.card--on { border: 2px solid var(--orange); }
.card__t { font-size: 1.5rem; font-weight: 800; }
.card__s { font-size: .9375rem; color: var(--muted); }
.card__big { display: flex; align-items: baseline; gap: .625rem; margin-top: 1.125rem; }
.card__big b { font-size: clamp(2.5rem, 1.6vw + 2rem, 3.375rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--slate); }
.card__big span { font-size: .875rem; font-weight: 700; color: var(--muted); }
.card__foot { font-size: .9375rem; color: var(--muted); margin-top: .75rem; border-top: 1px solid var(--line-soft); padding-top: .75rem; }
.cards--glass { --cols: 4; gap: 1rem; } .card--glass { padding: 1.125rem 1.125rem 1rem; } .card--glass .card__t { font-size: 1.25rem; } .card--glass .card__s { font-size: .875rem; }   /* compact glass finder cards (AJ 9/20: "do these boxes need to be so big?") */
@media (max-width: 78rem) { .cards--glass { --cols: 2; } }
.gstats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); }
.gstats b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--slate); white-space: nowrap; } .gstats div > span { display: block; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: .125rem; white-space: nowrap; } .gstats .nocase { text-transform: none; letter-spacing: .02em; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.kv span:first-child { color: var(--muted); } .kv span:last-child { font-weight: 700; text-align: right; }
.kv-list { border-bottom: 1px solid var(--line-soft); }
.dl a, .dl div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; border-top: 1px solid var(--line-soft); color: var(--ink); font-weight: 600; font-size: clamp(1.0625rem, .2vw + 1rem, 1.125rem); }
.dl a:hover { color: var(--orange-ink); }
.dl .dl__soon { color: var(--muted); font-weight: 500; }
.dl span { font-size: .9375rem; color: var(--muted); font-weight: 400; letter-spacing: .06em; white-space: nowrap; }
.dl { border-bottom: 1px solid var(--line-soft); }
.panel { background: var(--ground-2); padding: clamp(2.25rem, 4.4vw, 4rem) clamp(1.25rem, 3.9vw, 3.5rem); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; margin-top: .5rem; }
.mini b { display: block; font-size: clamp(1.5rem, .8vw + 1.2rem, 1.875rem); font-weight: 800; white-space: nowrap; }
.mini span { font-size: .9375rem; color: var(--body); }

/* ---------- strips (grid on desktop, swipe on phones) ---------- */
.strip { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1rem; }
.swipe-hint { display: none; }

/* ---------- footer, pinned bar ---------- */
.footer { background: var(--ground-2); padding: 3.5rem var(--gutter) 2rem; font-size: .9375rem; color: var(--muted); }
.footer__in { max-width: 82rem; margin-inline: auto; display: grid; grid-template-columns: minmax(15rem, 1.2fr) 3fr; gap: 3rem; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .footer__brand img { height: 2.375rem; width: auto; margin-bottom: .75rem; } .footer__brand b { color: var(--slate); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; } .footer__h { color: var(--slate); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .625rem; }
.footer__col a { color: var(--muted); padding: .3125rem 0; } .footer__col a:hover { color: var(--slate); }
.footer__social { display: flex; gap: .5rem; margin: .625rem 0 0 -.5rem; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--slate); } .footer__social a:hover { background: var(--line-soft); color: var(--ink); }
.footer__legal { max-width: 82rem; margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .8125rem; }
.bar { display: none; }
.mobile-nav { display: none; }
.gallery > *, .split > *, .cards > *, .pgrid > * { min-width: 0; }
.card--part { padding-top: 1.25rem; } .part__img { aspect-ratio: 4 / 3; border-radius: .875rem; background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .part__img picture { display: block; width: 100%; height: 100%; } .part__img img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; } .part__img .ph { width: 100%; height: 100%; min-height: 0; border-radius: .875rem; font-size: .75rem; letter-spacing: .1em; }
.plist { list-style: none; margin: .875rem 0 0; padding: 0; border-top: 1px solid var(--line); } .plist li { padding: .625rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--slate); } .plist li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ---- inches: always smaller and lighter than the metric value; big display numbers stack them underneath ---- */
.in { font-size: max(.8em, .75rem); font-weight: 500; opacity: .72; white-space: nowrap; letter-spacing: 0; } .in i { font-style: normal; }
.rate__n .in, .both__num b .in, .card__big .in, .display .in, .sum-nums b .in { display: block; font-size: max(.4em, .875rem); font-weight: 600; opacity: .7; margin-top: .45em; line-height: 1.1; }
/* ---- device frame for app screens ---- */
.device { background: #0B0E13; border-radius: 1.25rem; padding: .5rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(20, 28, 38, .45); }
.device img { display: block; width: 100%; height: auto; border-radius: .875rem; }
.device--hero { max-width: 68rem; margin: 3.5rem auto 0; border-radius: 1.75rem 1.75rem 0 0; padding: .75rem .75rem 0; box-shadow: none; }
.device--hero img { border-radius: 1.125rem 1.125rem 0 0; }
.ph { overflow-wrap: anywhere; border: 1px dashed #B4C0CB; background: var(--tint); color: var(--faint); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; font-size: .875rem; letter-spacing: .14em; min-height: 16rem; }
.section--slate .ph { border-color: #5A6C7E; background: #354556; color: #A9B5C1; }

/* ---------- tables, sub-nav, made-for family, story band ---------- */
.subnav { border-bottom: 1px solid var(--line-soft); background: #FFFFFF; }
.subnav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .875rem var(--gutter); }
.subnav__name { font-weight: 800; font-size: 1.125rem; }
.subnav__links { display: flex; gap: 1.75rem; font-size: 1rem; }
.subnav__links a { color: var(--body); padding: .375rem 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: clamp(1rem, .2vw + .95rem, 1.0625rem); }
.tbl th { text-align: left; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 .75rem .625rem 0; }
.tbl td { padding: .9375rem .75rem .9375rem 0; border-top: 1px solid var(--line-soft); vertical-align: baseline; }
.tbl tr:last-child td { border-bottom: 1px solid var(--line-soft); }
.tbl td:first-child { font-weight: 700; }
.tbl .n { font-weight: 800; color: var(--slate); white-space: nowrap; }
.tbl .r { color: var(--muted); }
.tbl .sub { display: none; font-size: .75rem; color: var(--faint); font-weight: 400; }
.mf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0 1rem 1rem; }
.mf-grid .mf { min-height: 12rem; background: var(--tint); }
.mf-grid .mf--dark { background: var(--slate); }
.story { position: relative; z-index: 0; overflow: hidden; min-height: clamp(22rem, 39vw, 35rem); display: flex; align-items: flex-end; color: #FFFFFF; }
.story > picture { position: absolute; inset: 0; z-index: -2; } .story > picture img { width: 100%; height: 100%; object-fit: cover; }
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,37,47,.08) 20%, rgba(28,37,47,.94) 100%); }   /* 2026-10-09: darker, so a paragraph reads */
.story__p { margin-top: .75rem; max-width: 34rem; font-size: clamp(1rem, .25vw + .95rem, 1.125rem); line-height: 1.55; color: rgba(255,255,255,.92); text-wrap: pretty; }
.story__link { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--orange-soft); }
.story__in { padding: clamp(1.5rem, 2.8vw, 2.5rem); max-width: 52rem; }
.both { background: var(--tint); padding: clamp(2rem, 3.9vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.9vw, 3.5rem); align-items: center; }
.both__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.both__num { background: #FFFFFF; border-radius: var(--radius); padding: 1.75rem; }
.both__num b { display: block; font-size: clamp(2.25rem, 1.6vw + 1.8rem, 3.375rem); font-weight: 800; line-height: 1; color: var(--slate); white-space: nowrap; }
.both__num span { display: block; font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.why { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.875rem 1.75rem; display: flex; flex-direction: column; gap: .625rem; color: var(--ink); }
.why:hover { border-color: var(--orange); color: var(--ink); }
.why b { font-size: clamp(1.375rem, .5vw + 1.2rem, 1.625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.why p { color: var(--body); flex-grow: 1; } .why span { font-weight: 700; color: var(--orange-ink); }
.types3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.type { position: relative; z-index: 0; overflow: hidden; min-height: clamp(18rem, 36vw, 32.5rem); display: flex; align-items: flex-end; color: #FFFFFF; font-size: clamp(1.5rem, .8vw + 1.2rem, 1.875rem); font-weight: 800; padding: 1.5rem 1.75rem; }
.type > picture { position: absolute; inset: 0; z-index: -2; } .type > picture img { width: 100%; height: 100%; object-fit: cover; }
.type::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,37,47,0) 50%, rgba(28,37,47,.85) 100%); }

/* ---------- projects, knowledge, professionals ---------- */
.pills { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.pill { border: 1px solid #C9D2DB; background: #FFFFFF; color: var(--slate); font: inherit; font-size: 1rem; font-weight: 600; padding: .625rem 1.25rem; border-radius: 999px; cursor: pointer; min-height: 2.75rem; }
.pill:hover { border-color: var(--slate); }
.pill[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: #FFFFFF; }
.pill-sep { width: 1px; height: 1.625rem; background: #C9D2DB; margin: 0 .375rem; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.75rem; }
.pcard { display: flex; flex-direction: column; gap: .875rem; color: var(--ink); }
.pcard:hover { color: var(--ink); } .pcard:hover .pcard__t { color: var(--orange-ink); }
.pcard picture img, .post picture img, .guide picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcard__t { font-size: clamp(1.5rem, .5vw + 1.35rem, 1.75rem); font-weight: 800; letter-spacing: -.01em; }
.pcard__m { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; font-size: .875rem; font-weight: 600; margin-top: .25rem; }
.chip { background: var(--tint); color: var(--slate); padding: .375rem .75rem; border-radius: 999px; }
.chip--hot { background: var(--peach); color: #A8400F; }
.feature { position: relative; z-index: 0; overflow: hidden; min-height: clamp(30rem, 47vw, 42.5rem); color: #FFFFFF; display: flex; align-items: center; }
.feature > picture { position: absolute; inset: 0; z-index: -2; } .feature > picture img { width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28,37,47,.92) 0%, rgba(28,37,47,.70) 38%, rgba(28,37,47,0) 72%); }
.feature__in { padding: clamp(2rem, 4.4vw, 4rem) clamp(1.25rem, 3.9vw, 3.5rem); max-width: 38rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.3); margin-top: 1.75rem; }
.facts div { padding: 1rem .75rem 0 0; } .facts div + div { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.3); }
.facts span { display: block; font-size: .875rem; color: var(--on-slate); } .facts b { font-size: clamp(1.25rem, .6vw + 1.1rem, 1.625rem); font-weight: 800; }
.case { background: var(--slate); color: #FFFFFF; display: flex; flex-direction: column; }
.case picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case__in { padding: 1.875rem; display: flex; flex-direction: column; gap: .5rem; flex-grow: 1; }
.case .kv { border-color: var(--slate-line); } .case .kv span:first-child { color: var(--on-slate); } .case .kv-list { border-color: var(--slate-line); }
.band-peach { background: var(--peach); padding: clamp(2rem, 3.9vw, 3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.gallery picture img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery .wide { grid-column: span 2; } .gallery .wide img { aspect-ratio: 16 / 9; }
.gallery--fit { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gallery--fit .g2 { grid-column: span 2; } .gallery--fit .g3 { grid-column: span 3; } .gallery--fit .g6 { grid-column: span 6; } .gallery--fit .g3 img { aspect-ratio: 3 / 2; } .gallery--fit .g6 img { aspect-ratio: 21 / 9; }
.post { display: flex; flex-direction: column; gap: .875rem; color: var(--ink); } .post:hover { color: var(--ink); }
.post__k { font-size: .875rem; letter-spacing: .2em; font-weight: 700; color: var(--orange); text-transform: uppercase; }
.post__t { font-size: clamp(1.375rem, .5vw + 1.25rem, 1.625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.14; }
.post__d { color: var(--muted); } .post__m { font-size: .9375rem; color: var(--faint); }
.cmp-pic { height: clamp(16rem, 30vw, 24rem); max-width: 20rem; margin: 0 auto; } .cmp-pic picture { display: block; height: 100%; } .cmp-pic img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.zoomable { cursor: zoom-in; position: relative; } .zoomable:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.zoomable::after { content: "⤢ Enlarge"; position: absolute; right: .75rem; bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; background: rgba(28,37,47,.88); color: #fff; border-radius: 999px; padding: .25rem .625rem; pointer-events: none; }
.zoom { position: fixed; inset: 0; z-index: 100; background: rgba(15,20,27,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3.5rem 1rem 1.25rem; cursor: zoom-out; }
.zoom img { max-width: min(100%, 110rem); max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; border-radius: .5rem; background: #fff; cursor: default; }
.zoom__cap { color: #D5DBE1; font-size: .9375rem; max-width: 60rem; text-align: center; margin: 0; }
.zoom__x { position: absolute; top: .75rem; right: .75rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 2px solid #fff; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.nocase { text-transform: none; }
mark.check { background: #FFE45C; color: #1C252F; border: 2px solid #1C252F; border-radius: .375rem; padding: .05em .35em; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.notice--check { background: #FFE45C; border: 2px solid #1C252F; color: #1C252F; }
.draft-tag--check { background: #FFE45C; border-color: #1C252F; color: #1C252F; white-space: nowrap; }
.post--draft { opacity: .62; } .draft-tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; border: 1px solid var(--line); border-radius: 999px; padding: .125rem .5rem; margin-left: .5rem; color: var(--muted); }
.guide { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.guide__in { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .5rem; }
.article { max-width: 47.5rem; margin-inline: auto; padding-inline: var(--gutter); font-size: clamp(1.125rem, .3vw + 1.06rem, 1.25rem); line-height: 1.65; color: #33414F; }
.article p { margin-top: 1.625rem; } .article h2 { font-size: clamp(1.625rem, 1vw + 1.35rem, 2.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-top: 3.5rem; color: var(--ink); }
.article blockquote { margin: 3.5rem 0 0; padding-left: 1.75rem; border-left: 4px solid var(--orange); font-size: clamp(1.625rem, 1.2vw + 1.3rem, 2.375rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); }
.article table { margin-top: 1.75rem; }
.article ul, .article ol { margin: 1.25rem 0 0; padding-left: 1.375rem; } .article li { margin-top: .5rem; }
.article h3 { font-size: clamp(1.25rem, .5vw + 1.12rem, 1.5rem); font-weight: 800; margin-top: 2.25rem; color: var(--ink); }
.article a { font-weight: 600; }
.box { background: var(--slate); color: #FFFFFF; padding: clamp(1.75rem, 3.4vw, 3rem); }
.box .tbl td { border-color: var(--slate-line); } .box .tbl .n { color: #FFFFFF; } .box .tbl .r { color: var(--on-slate); } .box .tbl th { color: var(--on-slate); }
.doorcard { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: .5rem; min-height: 14.5rem; color: var(--ink); }
.doorcard:hover { border-color: var(--orange); color: var(--ink); }
.doorcard b { font-size: clamp(1.5rem, .5vw + 1.35rem, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.doorcard p { color: var(--body); flex-grow: 1; } .doorcard span { font-weight: 700; color: var(--orange-ink); }
.doorcard--dark { background: var(--slate); border-color: var(--slate); color: #FFFFFF; } .doorcard--dark:hover { color: #FFFFFF; } .doorcard--dark p { color: var(--on-slate); } .doorcard--dark span { color: var(--orange-soft); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--slate); margin-top: 2.5rem; }
.step { padding: 1.5rem 1.25rem 0 0; } .step i { font-style: normal; font-size: .9375rem; font-weight: 800; letter-spacing: .14em; color: var(--orange); }
.step b { display: block; font-size: clamp(1.25rem, .4vw + 1.15rem, 1.5rem); font-weight: 800; line-height: 1.15; margin-top: .5rem; } .step p { color: var(--body); margin-top: .5rem; }
.scale { height: 1.375rem; border-radius: 999px; background: linear-gradient(90deg, var(--slate) 0 25%, #C9D2DB 25% 100%); margin-top: 1.125rem; }
.scale-labels { display: grid; grid-template-columns: 25% 1fr auto; font-weight: 700; margin-top: .625rem; }
.swatch-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #FFFFFF; color: var(--ink); }
a.swatch-card:hover { border-color: var(--orange); color: var(--ink); } a.swatch-card:hover b { color: var(--orange-ink); }
.swatch-card i { display: block; aspect-ratio: 16 / 10; }
.swatch-card picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.swatch-card div { padding: .875rem 1rem 1rem; } .swatch-card b { display: block; font-weight: 800; } .swatch-card span { font-size: .875rem; color: var(--orange-ink); font-weight: 700; } .swatch-card em { font-style: normal; font-size: .8125rem; color: var(--faint); display: block; }
/* one color, big: the real surface where we own a picture of it, the flat color where we do not */
.cbig { border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 2; border: 1px solid var(--line); }
.cbig picture, .cbig img { width: 100%; height: 100%; object-fit: cover; }
.cbig--flat { aspect-ratio: 3 / 2; }

/* ---------- shop drawing sheets ---------- */
.sheets { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem; margin-top: 3rem; }
.sheet { margin: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.sheet picture { flex-grow: 1; padding: 1.25rem; } .sheet img { width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.sheet figcaption { border-top: 1px solid var(--line-soft); padding: .75rem 1.125rem; font-size: .9375rem; color: var(--muted); font-weight: 600; }

/* ---------- chooser, glass finder, forms ---------- */
.chooser { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; gap: 3rem; align-items: start; }
.step-h { display: flex; align-items: baseline; gap: .875rem; margin-top: 3.25rem; } .step-h i { font-style: normal; font-weight: 800; color: var(--orange); } .step-h b { font-size: clamp(1.5rem, .8vw + 1.25rem, 1.875rem); font-weight: 800; letter-spacing: -.02em; }
.opts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .75rem; margin-top: 1.125rem; }
.opt { text-align: left; border: 1px solid var(--line); background: #FFFFFF; border-radius: .875rem; padding: 1rem 1.125rem; font: inherit; color: var(--ink); cursor: pointer; min-height: 4rem; }
.opt b { display: block; font-weight: 700; } .opt span { font-size: .875rem; color: var(--muted); }
.opt:hover { border-color: var(--slate); }
.opt[aria-pressed="true"], .tick[aria-pressed="true"] { border: 2px solid var(--orange); background: #FFF4EE; }
.tick { border: 1px solid var(--line); background: #FFFFFF; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); padding: .625rem 1.125rem; border-radius: 999px; cursor: pointer; min-height: 2.75rem; }
.sw-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--body); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .375rem; width: 4.75rem; font-size: .75rem; line-height: 1.2; text-align: center; }
.sw-btn i { display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); box-sizing: border-box; }
.sw-btn[aria-pressed="true"] i { border: 3px solid var(--orange); }
.handle-btn { border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #C9D2DB; padding: 0; font: inherit; cursor: pointer; width: 9.5rem; color: var(--ink); }
.handle-btn span { display: block; background: #FFFFFF; font-weight: 700; padding: .625rem 0; } .handle-btn[aria-pressed="true"] { border: 3px solid var(--orange); }
.summary { position: sticky; top: 6.5rem; background: var(--slate); color: #FFFFFF; border-radius: 1.375rem; padding: 2rem 1.875rem; }
.summary .kv { border-color: var(--slate-line); font-size: .9375rem; } .summary .kv span:first-child { color: var(--on-slate); } .summary .kv-list { border-color: var(--slate-line); }
.sum-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem .75rem; margin: 1.5rem 0; }
.sum-nums b { display: block; font-size: 2.125rem; font-weight: 800; line-height: 1; white-space: nowrap; } .sum-nums span { font-size: .75rem; color: var(--on-slate); display: block; margin-top: .375rem; }
.field { display: block; } .field span { display: block; font-size: .9375rem; color: var(--muted); margin-bottom: .25rem; }
.field span span { display: inline; font-size: inherit; margin: 0; }
.article .tbl td { padding-top: .5625rem; padding-bottom: .5625rem; line-height: 1.4; }   /* article tables: compact rows (AJ 9/20: "takes up too much room") */
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--ink); background: #FFFFFF; border: 1px solid #C9D2DB; border-radius: .75rem; min-height: 3.25rem; padding: .75rem 1rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; } .form-grid .span2 { grid-column: span 2; } .form-grid .span4 { grid-column: span 4; }
.drop { border: 2px dashed var(--slate); border-radius: 1rem; background: #FFFFFF; padding: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; align-items: center; }
.form-label { font-size: .875rem; font-weight: 800; letter-spacing: .14em; margin: 2.25rem 0 .875rem; }
.role { display: flex; align-items: center; gap: .75rem; border: 1px solid #C9D2DB; background: #FFFFFF; border-radius: .875rem; min-height: 3.5rem; padding: 0 1.125rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.role i { font-style: normal; font-weight: 800; color: var(--orange); } .role[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: #FFFFFF; } .role--quiet { border-style: dashed; color: var(--muted); }
.notice { background: var(--peach); border-radius: 1rem; padding: 1.5rem 1.75rem; }
.rule { background: var(--ground-2); border-radius: var(--radius); overflow: hidden; } .rule__h { background: var(--orange); color: var(--btn-ink); font-weight: 700; padding: .75rem 1.375rem; } .rule__h i { font-style: normal; font-size: .75rem; opacity: .75; margin-right: .5rem; } .rule p { padding: 1.125rem 1.375rem 1.375rem; color: var(--body); }

/* ---------- the menu collapses before the header can crowd ---------- */
@media (max-width: 74rem) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  /* the open menu: the logo leads, the items sit under it (AJ: "logo should be bigger than menu items or not at all" — so the items shrank, the logo stays the header size) */
  .mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--slate); color: #FFFFFF; padding: 1.125rem var(--gutter) 2rem; flex-direction: column; overflow-y: auto; }
  .mobile-nav.is-open { display: flex; }
  .mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  .mobile-nav__top img { height: clamp(2.25rem, 2.2vw + 1.4rem, 3.625rem); width: auto; }   /* same size, same spot as the header logo — it must not jump when the menu opens */
  .mobile-nav a.m { display: flex; align-items: center; min-height: 3.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: #FFFFFF; border-bottom: 1px solid var(--slate-line); }
  .mobile-nav .btn { margin-top: 1.5rem; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 60rem) {
  .header__cta .btn { display: none; }
  .header__tel { display: none; }   /* phones have the call button in the pinned bar */
  .pills--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; scrollbar-width: none; }   /* many topics: one swipeable row, not a wall of pills */
  .pills--scroll::-webkit-scrollbar { display: none; }
  .pills--scroll .pill { flex: 0 0 auto; }
  .split, .split--hero, .panels, .tiles { grid-template-columns: 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .photo-hero__in { align-items: stretch; gap: 1.25rem; }
  .photo-hero--left::after { background: linear-gradient(90deg, rgba(28,37,47,.86) 0%, rgba(28,37,47,.62) 55%, rgba(28,37,47,.34) 100%); }   /* narrow crops: let the building show through */
  /* phone hero: text links, not pills — the pinned bar is the one big button on screen (AJ: "too much on one view. these are like big bubbles") */
  .photo-hero .btn-row { flex-direction: row; gap: 0 1.75rem; }
  .photo-hero .btn-row .btn { background: none; border: 0; padding: .5rem 0; min-height: 2.75rem; color: #FFFFFF; font-size: 1.0625rem; }
  .photo-hero .btn-row .btn::after { content: "\00a0›"; }
  .madefor { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.75rem var(--gutter) .5rem; scrollbar-width: none; }
  .madefor::-webkit-scrollbar { display: none; }
  .mf { flex: 0 0 14.5rem; min-height: 10.5rem; padding: 1.5rem 1.25rem; scroll-snap-align: start; }
  .rates { grid-template-columns: 1fr; text-align: left; border-top: 0; }
  .rate { display: flex; align-items: baseline; justify-content: space-between; gap: .875rem; padding: 1rem 0; border-top: 1px solid var(--line); }
  .rate + .rate { border-left: 0; }
  .rate__c { margin-top: 0; text-align: right; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip > * { flex: 0 0 min(17rem, 78vw); scroll-snap-align: start; }
  .swipe-hint { display: block; font-size: .8125rem; color: var(--faint); margin-top: .75rem; }
  .cards { grid-template-columns: 1fr; }
  .minis { grid-template-columns: 1fr; gap: 0; }
  .mini { display: flex; align-items: baseline; justify-content: space-between; gap: .875rem; padding: .875rem 0; border-top: 1px solid var(--line); }
  .swatches { grid-template-columns: repeat(5, 1fr); }
  .subnav__links { display: none; }
  .tbl .hide-m { display: none; }
  .tbl .sub { display: block; }
  .mf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-grid .mf { flex: none; min-height: 8rem; padding: 1.25rem 1rem; }
  .both, .types3, .both__nums { grid-template-columns: 1fr; }
  .pgrid, .gallery, .steps { grid-template-columns: 1fr; }
  .gallery .wide { grid-column: auto; }
  .gallery--fit > div { grid-column: auto !important; } .gallery--fit img { aspect-ratio: 4 / 3 !important; }
  .steps { border-top: 0; margin-top: 1.5rem; } .step { border-top: 1px solid var(--line); padding: 1.25rem 0; }
  .feature { align-items: flex-end; min-height: 34rem; } .feature::after { background: linear-gradient(180deg, rgba(28,37,47,.1) 0%, rgba(28,37,47,.92) 62%); }
  .pills { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .pills::-webkit-scrollbar { display: none; } .pill { white-space: nowrap; }
  .sheets { grid-template-columns: 1fr; }
  .chooser { grid-template-columns: 1fr; gap: 1rem; } .summary { position: static; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; } .form-grid .span2, .form-grid .span4 { grid-column: auto; }
  .drop { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr; gap: 2.25rem; } .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__col a { padding: .5rem 0; }
  body.has-bar { padding-bottom: 4.25rem; }
  .bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: .625rem; align-items: center; background: #FFFFFF; border-top: 1px solid var(--line); padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); }
  .bar .btn { flex-grow: 1; min-height: 2.75rem; padding-block: .5rem; font-size: 1rem; }
  .bar__call { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--slate); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* figures inside articles ({{fig:name|caption}}) */
.fig { max-width: 58rem; margin: 3rem auto 0; padding-inline: var(--gutter); }
.fig__art { background: var(--ground-2); border-radius: 1.25rem; padding: clamp(1rem, 2.5vw, 2rem); }
.fig--photo .fig__art { padding: 0; overflow: hidden; } .fig--photo img { width: 100%; height: auto; max-height: 36rem; object-fit: cover; display: block; }
.figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.figrow__cell { background: #fff; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 1rem; padding: 1rem 1rem .875rem; display: flex; flex-direction: column; align-items: center; gap: .625rem; }
.figrow__cell picture { display: block; } .figrow__cell img { display: block; width: auto; max-width: 100%; height: auto; max-height: 22rem; object-fit: contain; }
.figrow__cell span { font-size: .875rem; line-height: 1.35; color: var(--muted); text-align: center; }
.fig--tall .fig__art { display: flex; justify-content: center; background: transparent; border-radius: 0; overflow: visible; } .fig--tall picture { display: block; }
.fig--tall img { width: auto; max-width: 100%; height: auto; max-height: 30rem; object-fit: contain; border-radius: 1rem; border: 1px solid #E3E8ED; }   /* AJ 9/20: a tall render or photo in an article is shown WHOLE at a modest height, never sliced into the wide slot */
.fig figcaption { margin-top: .875rem; font-size: clamp(.9375rem, .15vw + .9rem, 1.0625rem); line-height: 1.5; color: var(--muted); max-width: 47.5rem; }
@media (max-width: 40rem) { .fig:not(.fig--photo) .fig__art { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1.25rem 0 0 1.25rem; margin-right: calc(var(--gutter) * -1); } .fig:not(.fig--photo) svg { width: 34rem !important; max-width: none; } }
@media (max-width: 40rem) { .article .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .article .tbl th, .article .tbl td { min-width: 8.5rem; } }   /* wide article tables scroll inside themselves instead of widening the page */

/* a wide CAD sheet needs the whole column, and the "Enlarge" badge must not land on the caption */
.sheet--wide img { max-height: 40rem; }
.sheet figcaption { padding-right: 8rem; }

/* ---------- options ---------- */
.optshot { background: #FFFFFF; border: 1px solid var(--line); border-radius: 1.5rem; padding: clamp(1rem, 2.4vw, 2rem); display: flex; align-items: center; justify-content: center; }
.optshot img { width: auto; max-width: 100%; max-height: 24rem; object-fit: contain; }
.optshot--photo { padding: 0; overflow: hidden; }
.optshot--photo img { width: 100%; max-height: 26rem; object-fit: cover; }
.obig { border-top: 3px solid var(--slate); padding-top: 1rem; }
.obig b { display: block; font-size: clamp(2.25rem, 1.6vw + 1.8rem, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--slate); }
.obig b .in { display: block; font-size: max(.42em, .9375rem); font-weight: 600; opacity: .7; margin-top: .4em; line-height: 1.1; }
.obig span { display: block; font-size: .9375rem; color: var(--muted); margin-top: .625rem; max-width: 28rem; }
.section--slate .obig { border-color: var(--slate-line); } .section--slate .obig b { color: #FFFFFF; } .section--slate .obig span { color: var(--on-slate); }
/* the option pill on /choose/ keeps its button; the ? beside it is a plain link to that option on /options/ */
.tickq { display: inline-flex; align-items: center; gap: .25rem; }
.tickq__a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: #FFFFFF; font-weight: 800; color: var(--orange-ink); }
.tickq__a:hover, .tickq__a:focus-visible { border-color: var(--orange); color: var(--orange-ink); }
.gallery--fit .g6--2x1 img { aspect-ratio: 2 / 1; }   /* product gallery lead photo, cropped by AJ to 2:1 (9/20) */
.gallery--fit .g4 { grid-column: span 4; } .gallery--fit .g4 img { aspect-ratio: 3 / 2; } .gallery--fit .g2--tall img { aspect-ratio: 3 / 4 !important; }   /* a portrait photo beside a landscape one, equal heights (AJ's slider crops, 9/20) */
.gallery--top picture img { object-position: 50% 0; }   /* keep the HEAD of the window in frame — the trickle vent sits at the top edge (AJ 9/20: 'this is cut off, I can't see it') */
/* project galleries: justified rows, every photo keeps its shape (AJ 9/20) */
.jgal { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.jrow { display: flex; gap: 1rem; }
.jrow > div { min-width: 0; overflow: hidden; border-radius: .25rem; }
.jrow picture, .jrow img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-hero--tall { min-height: 0; align-items: stretch; background: var(--slate); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.photo-hero--tall::after { display: none; }
.photo-hero--tall > picture { position: static; grid-column: 2; grid-row: 1; z-index: 0; max-height: min(92vh, 60rem); }
.photo-hero--tall > picture img { object-fit: contain; object-position: right center; background: var(--slate); }
.photo-hero--tall .photo-hero__in { grid-column: 1; grid-row: 1; align-self: end; padding-top: 7rem; }
@media (max-width: 60rem) {
  .jrow { flex-direction: column; } .jrow > div { flex: none !important; }
  .photo-hero--tall { grid-template-columns: 1fr; } .photo-hero--tall > picture { grid-column: 1; grid-row: 1; max-height: 78vh; } .photo-hero--tall > picture img { object-position: center; }
  .photo-hero--tall .photo-hero__in { grid-row: 2; padding-top: 1.5rem; }
}
/* document viewer for /downloads/*.pdf (same behaviour as the enlarge overlay: Esc, click outside, Close) */
.docview { position: fixed; inset: 0; z-index: 110; background: rgba(15,20,27,.9); display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 2.5vw, 2rem); }
.docview__card { width: min(100%, 72rem); height: 100%; display: flex; flex-direction: column; border-radius: .875rem; overflow: hidden; background: #fff; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); }
.docview__head { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem .625rem 1.25rem; background: var(--slate); color: #fff; }
.docview__t { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docview__dl, .docview__x { flex: 0 0 auto; min-height: 2.5rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; text-decoration: none; }
.docview__dl { background: var(--orange); color: var(--slate); border: 0; } .docview__x { background: none; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.docview__dl:focus-visible, .docview__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.docview__body { flex: 1 1 auto; overflow: auto; background: #525659; padding: 1rem; -webkit-overflow-scrolling: touch; }
.docview__pages { margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; max-width: none; }
.docview__pages img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 .25rem 1rem rgba(0,0,0,.35); }
.docview__z { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .875rem; }
.docview__zb { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.55); background: none; color: #fff; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; line-height: 1; }
.docview__zl { min-width: 3.25rem; text-align: center; }
@media (max-width: 48rem) { .docview { padding: 0; } .docview__card { border-radius: 0; } .docview__head { flex-wrap: wrap; padding: .5rem .75rem; } .docview__t { flex-basis: 100%; white-space: normal; font-size: .9375rem; } .docview__x span { display: none; } .docview__body { padding: .5rem; } }
/* Choose yours · step 5: options in named groups, one row each, the ? inside the row (AJ 9/20: "make this more coherent") */
.optindex { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.optindex a { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 0 1.375rem; border-top: 2px solid #DCE2E8; color: var(--ink); transition: border-color .15s; }
.optindex a:hover, .optindex a:focus-visible { border-top-color: var(--orange); }
.optindex__n { font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--orange-ink); }
.optindex__t { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.optindex__s { font-size: .75rem; font-weight: 600; color: var(--muted); }
@media (max-width: 64rem) { .optindex { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .optindex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .optindex__t { font-size: 1rem; } }
.optgroups { display: grid; gap: 1.5rem; margin-top: 1rem; }
.optgroup__h { font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: .625rem; }
.optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.optgrid .tickq { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: .875rem; background: #FFFFFF; overflow: hidden; }
.optgrid .tickq:has(.tick[aria-pressed="true"]) { border: 2px solid var(--orange); background: #FFF4EE; }
.optgrid .tick { flex: 1 1 auto; min-width: 0; text-align: left; border: 0 !important; border-radius: 0; background: none !important; padding: .75rem 1rem; }
.optgrid .tick::before { content: ""; display: inline-block; width: 1.125rem; height: 1.125rem; margin-right: .625rem; vertical-align: -.1875rem; border: 2px solid var(--line); border-radius: .25rem; background: #FFFFFF; }
.optgrid .tick[aria-pressed="true"]::before { border-color: var(--orange); background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; }
.optgrid .tickq__a { width: 3rem; height: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.tickq--std { background: var(--tint) !important; } .tickq__std { flex: 1 1 auto; padding: .75rem 1rem; font-weight: 600; color: var(--ink); }
@media (max-width: 40rem) { .optgrid { grid-template-columns: 1fr; } }
/* article lead picture: never taller than the text it introduces (AJ 9/20: "the fin pic is too big for the page. it overpowers it") */
.arthero img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: 1rem; }
.arthero--tall { display: flex; justify-content: center; } .arthero--tall picture { display: block; }
.arthero--tall img { width: auto; max-width: 100%; max-height: 26rem; object-fit: contain; border-radius: 0; }
a.type { text-decoration: none; } a.type:hover > picture img, a.type:focus-visible > picture img { transform: scale(1.03); } a.type > picture img { transition: transform .4s ease; } a.type:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

/* water-test hero photo fills its frame (2026-09-20) */
.wt-hero picture,.wt-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

/* water-test page: pictured sections are one centred row, picture | text, all pictures one size (AJ 2026-09-20 "align the pics and text better") */
.wt-row{align-items:center}
.wt-media{margin:0;width:100%;max-width:30rem;justify-self:center}
.wt-frame{aspect-ratio:4/5;border-radius:1.25rem;overflow:hidden}
.wt-frame picture,.wt-frame img{display:block;width:100%;height:100%;object-fit:cover}
.wt-panel{background:var(--ground-2);border-radius:1.25rem;padding:clamp(.75rem,2vw,1.5rem)}
.wt-media figcaption{margin-top:.75rem}
@media (min-width:60.01rem){.wt-row--flip .wt-media{order:2}}

/* Choose yours — handle tiles (AJ 2026-09-20: "handles … are too big. make much smaller") */
.handle-btn{width:5.5rem;border-radius:.75rem}
.handle-btn picture,.handle-btn img{display:block;width:100%;height:6.5rem;object-fit:cover;object-position:50% 22%}
.handle-btn span{font-size:.8125rem;padding:.375rem 0}

/* ---------- help bot (AJ 2026-09-22: lives top-right, where the phone number was; helps first, hands off to plans@) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header__help { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: none; padding: .5rem 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .01em; color: #33414F; border-bottom: 3px solid transparent; }
.header__help:hover, .header__help[aria-expanded="true"] { color: var(--slate); border-bottom-color: var(--orange); }
.header--over .header__help { color: #FFFFFF; } .header--over.is-stuck .header__help { color: #33414F; }
.help { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; width: min(24rem, calc(100vw - 2.5rem)); height: min(38rem, calc(100vh - 2.5rem)); display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1.5rem 3rem -1rem rgba(20,28,38,.35); overflow: hidden; }
.help__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem .875rem .875rem 1.25rem; background: var(--slate); color: #FFFFFF; flex: 0 0 auto; }
.help__top b { display: block; font-size: 1rem; } .help__top span { display: block; font-size: .8125rem; color: var(--on-slate); margin-top: .125rem; }
.help__close { display: inline-flex; color: #FFFFFF; width: 2.5rem; height: 2.5rem; }
.help__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .625rem; }
.help__msg { max-width: 90%; padding: .625rem .875rem; border-radius: 1rem; font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.help__msg--bot { align-self: flex-start; background: var(--ground-2); color: var(--ink); border-bottom-left-radius: .25rem; }
.help__msg--me { align-self: flex-end; background: var(--slate); color: #FFFFFF; border-bottom-right-radius: .25rem; white-space: pre-wrap; }
.help__msg--err { background: var(--peach); }
.help__msg p { margin: 0; } .help__msg p + p, .help__msg p + ul, .help__msg ul + p { margin-top: .5rem; } .help__msg ul { margin: 0; padding-left: 1.125rem; } .help__msg a { font-weight: 700; }
.help__wait { align-self: flex-start; display: flex; gap: .3rem; padding: .875rem .875rem; } .help__wait i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--faint); animation: help-blink 1.2s infinite; } .help__wait i:nth-child(2) { animation-delay: .2s; } .help__wait i:nth-child(3) { animation-delay: .4s; }
@keyframes help-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.help__starts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.help__start { font: inherit; font-size: .875rem; font-weight: 600; color: var(--slate); background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .875rem; cursor: pointer; text-align: left; }
.help__start:hover { border-color: var(--slate); }
.help__ask { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem 1rem .5rem; border-top: 1px solid var(--line-soft); flex: 0 0 auto; }
.help__ask textarea { flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: 1rem; line-height: 1.4; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: 1.375rem; min-height: 2.75rem; max-height: 7.5rem; background: #FFFFFF; color: var(--ink); }
.help__ask textarea:focus { outline: 0; border-color: var(--slate); }
.help__send { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--orange); color: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.help__send:hover { background: #F58A5B; } .help__send[disabled] { opacity: .5; cursor: default; }
.help__fine { margin: 0; padding: 0 1.125rem .75rem; font-size: .75rem; line-height: 1.4; color: var(--faint); flex: 0 0 auto; } .help__fine a { color: var(--muted); }
@media (max-width: 60rem) {
  .header__help span { display: none; }   /* phones: the icon alone; the label would crowd the logo */
  .header__help { padding: .5rem; }
  .help { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; box-shadow: none; }
  .help__top { padding-top: calc(.875rem + env(safe-area-inset-top)); }
  .help__fine { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}

/* ---------- What you'll hear (AJ 2026-09-22): the street, the window, the readout ---------- */
.hear__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pills--glass .pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .125rem; line-height: 1.15; padding: .625rem 1rem; }
.pills--glass .pill b { font-weight: 800; } .pills--glass .pill span { font-size: .75rem; font-weight: 500; opacity: .8; }
.hear__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.75rem; align-items: start; }
.hear__scene { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #FFFFFF; }
.street { display: block; width: 100%; height: auto; font-family: inherit; }
.hear__hint { padding: .75rem 1.25rem; border-top: 1px solid var(--line-soft); margin: 0; } .hear__hp { color: var(--faint); }
.sc { cursor: pointer; outline: 0; } .sc .sc__tag { fill: #FFFFFF; stroke: var(--line); stroke-width: 1.5; } .sc .sc__txt { fill: var(--slate); }
.sc:hover .sc__tag, .sc:focus-visible .sc__tag { stroke: var(--slate); }
.sc.is-on .sc__tag { fill: var(--orange); stroke: var(--orange); } .sc.is-on .sc__txt { fill: var(--btn-ink); }
.sc__ring { fill: none; stroke: var(--orange); stroke-width: 3; opacity: 0; }
.sc.is-on .sc__ring { animation: sc-ring 1.6s ease-out infinite; } .sc.is-on .sc__ring--2 { animation-delay: .8s; }
.sc.is-on.is-closed .sc__ring { animation-duration: 2.6s; stroke-width: 1.5; }
@keyframes sc-ring { 0% { r: 8; opacity: .9; } 100% { r: 90; opacity: 0; } }
.win { border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 6.5rem; }
.win__img { width: 100%; max-height: 22rem; display: flex; justify-content: center; } .win__img img { height: 100%; width: auto; max-height: 22rem; object-fit: contain; cursor: pointer; }
.win__btn { align-self: stretch; }
.readout { border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.readout__pick { font-weight: 700; color: var(--slate); }
.readout__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .75rem; margin-top: .75rem; }
.readout__k { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.readout__n { font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--slate); margin-top: .25rem; white-space: nowrap; }
.readout__n small { font-size: .4em; font-weight: 600; opacity: .7; margin-left: .15em; }
.readout__n--in { color: var(--orange-ink); } .readout__arrow { font-size: 2rem; color: var(--faint); padding-bottom: .25rem; }
.readout__feel { margin-top: .75rem; font-weight: 600; color: var(--ink); min-height: 1.5em; }
.hear__all { margin-top: 2.5rem; } .hear-table .sub { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; }
.hear-table td.num, .hear-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hear-table tr.is-on td { background: var(--peach); }
@media (max-width: 60rem) {
  .hear__grid { grid-template-columns: 1fr; } .win { position: static; }
  .win__img, .win__img img { max-height: 15rem; }
  .readout__n { font-size: 2rem; }
}

/* ---- Architect support (2026-09-23): checkbox tiles that look like the role buttons, the four sample cards ---- */
.form-grid .span3 { grid-column: span 3; }
.role--pick { position: relative; cursor: pointer; }
.role--pick input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.role--pick[data-on="1"], .role--pick:has(input:checked) { background: var(--slate); border-color: var(--slate); color: #FFFFFF; }
.role--pick:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 1px; }
.samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.sample { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sample__pic { height: 15rem; display: flex; align-items: center; justify-content: center; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.sample__pic picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.sample__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sample__pic--cover { padding: 0; } .sample__pic--cover img { width: 100%; height: 100%; object-fit: cover; }
.sample-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sample b { display: block; padding: 1rem 1.25rem 0; font-size: 1.125rem; }
.sample p { padding: .25rem 1.25rem 1.25rem; color: var(--body); font-size: .9375rem; }
@media (max-width: 60rem) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span3 { grid-column: auto; } }

/* two columns whose eyebrow / heading / text / links line up row by row (AJ 2026-10-01) */
.split--rows { grid-template-rows: repeat(4, auto); grid-auto-flow: column; row-gap: 1rem; align-items: start; }
.split--rows > .stack { display: contents; }
.split--rows > .stack > * { margin-top: 0; }
@media (max-width: 60rem) {
  .split--rows { grid-auto-flow: row; grid-template-rows: none; }
  .split--rows > .stack + .stack > :first-child { margin-top: 1.75rem; }
}

/* ---- request-access dialog (2026-10-01): a short form in a centred pop-up; Esc, the backdrop and Close dismiss it */
.dlg { border: 0; border-radius: 1.25rem; padding: 0; width: min(38rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; color: var(--ink); background: #FFFFFF; box-shadow: 0 1.5rem 4rem rgba(15,20,27,.35); text-align: left; }
.dlg::backdrop { background: rgba(15,20,27,.62); }
.dlg:focus, .dlg:focus-visible { outline: none; }
.dlg form, .dlg__done { padding: 1.75rem 1.75rem 1.5rem; }
.dlg__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dlg__x { font: inherit; font-size: .9375rem; font-weight: 700; color: var(--muted); background: none; border: 0; padding: .5rem .25rem; cursor: pointer; }
.dlg__x:hover { color: var(--ink); }
.dlg .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dlg__actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
@media (max-width: 34rem) { .dlg .form-grid { grid-template-columns: 1fr; } .dlg .form-grid .span2 { grid-column: auto; } .dlg form, .dlg__done { padding: 1.25rem; } }

/* ---- window schedule tool page (2026-10-01): five steps in a row on wide screens, the video in a device frame, plain lists */
@media (min-width: 60.01rem) { .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.device video { display: block; width: 100%; height: auto; border-radius: .875rem; background: #0B0E13; }
.list { padding-left: 1.25rem; } .list li + li { margin-top: .625rem; } .list b { color: var(--ink); }
/* ---- grouped download lists (2026-10-01): a small heading over each group */
.dl-h { font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin: 2.25rem 0 .5rem; }
.dl-h:first-child { margin-top: 0; }

/* ---- closeout page (2026-10-01): tables of words, stacked on a phone */
.tbl--text th, .tbl--text td { text-align: left; vertical-align: top; }
.tbl--text td:first-child { font-weight: 700; color: var(--ink); }
@media (max-width: 44rem) {
  .tbl--text thead { display: none; }
  .tbl--text, .tbl--text tbody, .tbl--text tr, .tbl--text td { display: block; width: auto; }
  .tbl--text tr { padding: .875rem 0; border-top: 1px solid var(--line-soft); }
  .tbl--text td { border: 0; padding: .125rem 0; }
  .tbl--text td:empty { display: none; }
}
#svc-form textarea { min-height: 7rem; resize: vertical; }

/* ---- /parts/ — the parts shop (2026-10-07, src/pages_parts.py). Every class starts ps-. NO MOTION (AJ): no transitions, no
   transforms on hover; the part box keeps one fixed height and swaps its content in place. Phone: 16px gutter, nothing scrolls sideways. */
.ps-sec { --ps-fig-h: calc(100vh - 21rem); }
.ps-top { padding-bottom: 2rem; }
.ps-top .title { margin-top: .625rem; }
.ps-top__side { --gap: 1.25rem; padding-top: .5rem; }
/* 2026-10-09 AJ: the parts list as a box in the top-right corner of the page (not the site header); the count updates as parts are added */
/* 2026-10-09 AJ: "parts list should always be anchored to the side. it jumps" — the pill is fixed top-right from the start, under the header; it steps left when the panel is open */
.ps-cartwrap { position: fixed; top: 6.5rem; right: 1.25rem; z-index: 55; width: max-content; max-width: calc(100vw - 2rem); }
.ps-cartbox { display: flex; align-items: center; gap: 1.25rem; padding: .875rem 1.125rem; border: 1px solid var(--line); border-radius: 1rem; background: #FFFFFF; box-shadow: 0 .25rem 1rem rgba(15,20,27,.06); width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ps-cartbox[aria-expanded="true"] { border-color: var(--slate); }
.ps-cartbox__caret { font-size: 1.25rem; color: var(--muted); line-height: 1; }
.ps-cartbox > span:first-child { display: flex; flex-direction: column; }   /* label over count (they ran together once the box became a button) */
.ps-cartbox { box-shadow: 0 .5rem 1.5rem rgba(15,20,27,.16); }
.ps-panel-open .ps-cartwrap { right: calc(min(24rem, 100vw) + 1.25rem); }
@media (max-width: 60rem) { .ps-cartwrap { top: 6rem; right: .75rem; } .ps-cartbox { padding: .5rem .875rem; gap: .75rem; } .ps-panel-open .ps-cartbox { display: none; } }   /* 2026-10-09 mobile review: hiding the whole wrap hid the panel inside it — on a phone, Add made everything vanish */
/* 2026-10-09 AJ: "when there is stuff in your cart a fixed side panel opens up. like amazon" — opens on the box or on Add; "Send the list" (the checkout) at its top → /parts/send/ */
.ps-dd { position: fixed; top: 5.75rem; right: 0; bottom: 0; z-index: 60; width: min(24rem, 100vw); padding: 1rem 1.25rem 1.5rem; background: #FFFFFF; border-left: 1px solid var(--line); box-shadow: -1rem 0 2.5rem rgba(15,20,27,.14); overflow: auto; text-align: left; }
.ps-dd__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ps-dd__go { margin: 1rem 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-soft); }
.ps-dd__go .btn { width: 100%; justify-content: center; }
@media (max-width: 60rem) { .ps-cartwrap { width: 100%; } .ps-cartbox { justify-content: space-between; } .ps-dd { top: 5.375rem; width: 100vw; } }
.ps-cartbox__n { font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-top: .125rem; }
@media (max-width: 60rem) { .ps-cartbox { width: 100%; justify-content: space-between; } }
.ps-shop { padding-bottom: var(--block); }
.ps-pills { margin-bottom: 1.25rem; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; align-items: start; }
.ps-stage { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; position: sticky; top: 5.75rem; }
.ps-stagebar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ps-ut { font-size: 1.25rem; font-weight: 800; }
.ps-seg { display: inline-flex; border: 1px solid #C9D2DB; border-radius: 999px; overflow: hidden; }
.ps-seg:empty { display: none; }
.ps-seg button { border: 0; background: #FFFFFF; color: var(--slate); font: inherit; font-size: .875rem; font-weight: 600; padding: .5rem 1rem; min-height: 2.5rem; cursor: pointer; }
.ps-seg button[aria-pressed="true"] { background: var(--slate); color: #FFFFFF; }
.ps-fig { position: relative; margin: 0 auto; max-width: 100%; min-height: 12rem; }
.ps-fig img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.ps-dot { position: absolute; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 999px; background: var(--orange); color: var(--btn-ink); border: 0; padding: 0; font: inherit; font-size: .8125rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FFFFFF, 0 2px 6px rgba(0,0,0,.3); cursor: pointer; }
.ps-dot.ps-hi, .ps-dot:hover { background: var(--slate); color: #FFFFFF; z-index: 2; }
.ps-dot.ps-sel { background: var(--slate); color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--slate); z-index: 3; }
.ps-hint { font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.ps-count { font-size: .9375rem; color: var(--body); margin-top: .75rem; }
.ps-count a { font-weight: 700; margin-left: .25rem; }
/* the permanent part box under the picture: one height, the content changes */
.ps-box { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; height: 16rem; overflow: hidden; margin-top: .75rem; padding: .875rem; border: 1px solid var(--line); border-radius: 1rem; background: #FFFFFF; }
.ps-pic { height: 10rem; border: 1px solid var(--line); border-radius: .75rem; background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
.ps-pic img { max-width: 90%; max-height: 90%; width: auto; height: auto; }
.ps-pic--zoom { cursor: zoom-in; font: inherit; }
.ps-pic--zoom::after { content: "⤢ Enlarge"; position: absolute; right: .375rem; bottom: .375rem; font-size: .6875rem; font-weight: 700; background: rgba(28,37,47,.88); color: #FFFFFF; border-radius: 999px; padding: .125rem .5rem; }
.ps-box__txt { min-width: 0; overflow: auto; }
.ps-eb { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); font-weight: 700; }
.ps-pname { font-size: 1.125rem; font-weight: 800; line-height: 1.25; margin: .25rem 0 .375rem; }
.ps-avrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ps-av { display: inline-block; font-size: .75rem; font-weight: 700; padding: .125rem .5rem; border-radius: 999px; background: var(--tint); color: var(--slate); margin-right: .375rem; white-space: nowrap; }
.ps-av--in { background: #DDF3E4; color: #146C3A; }
.ps-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.ps-fits { display: flex; flex-wrap: wrap; gap: .375rem; margin: .625rem 0; }
.ps-fits button { border: 1px solid #C9D2DB; background: #FFFFFF; color: var(--slate); border-radius: 999px; padding: .25rem .75rem; font: inherit; font-size: .8125rem; cursor: pointer; }
.ps-fits button[aria-pressed="true"] { border-color: var(--slate); font-weight: 700; }
.ps-fits button b { color: var(--orange-ink); }
.ps-addrow { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.ps-qty { display: inline-flex; align-items: center; border: 1px solid #C9D2DB; border-radius: .625rem; overflow: hidden; flex-shrink: 0; }
.ps-qty button { border: 0; background: var(--ground-2); width: 2.5rem; height: 2.5rem; font: inherit; font-size: 1.125rem; cursor: pointer; color: var(--ink); }
.ps-qty span { min-width: 2.25rem; text-align: center; font-weight: 700; }
.ps-added { font-size: .875rem; font-weight: 700; color: var(--slate); margin-top: .375rem; min-height: 1.3em; }
/* the parts list */
.ps-h { font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin: 0 0 .5rem; }
.ps-h ~ .ps-h { margin-top: 2rem; }
.ps-fam { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .25rem; }
.ps-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line-soft); border-radius: .5rem; }
.ps-row:hover, .ps-row.ps-hi { background: var(--ground-2); }
.ps-row.ps-sel { background: var(--ground-2); box-shadow: inset 4px 0 0 var(--orange); }
.ps-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .625rem .5rem; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ps-n { flex: 0 0 auto; width: 1.625rem; height: 1.625rem; border-radius: 999px; background: var(--orange); color: var(--btn-ink); font-weight: 800; font-size: .8125rem; display: flex; align-items: center; justify-content: center; }
.ps-th { flex: 0 0 auto; width: 3.5rem; height: 2.75rem; border: 1px solid var(--line); border-radius: .375rem; background: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ps-th img { max-width: 92%; max-height: 92%; width: auto; height: auto; }
.ps-none { font-size: .625rem; color: var(--muted); text-align: center; line-height: 1.1; padding: .125rem; }
.ps-row__txt { min-width: 0; display: block; }
.ps-nm { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.25; color: var(--ink); }
.ps-sm { display: block; font-size: .8125rem; color: var(--muted); margin-top: .125rem; }
.ps-avrow .ps-sm { display: inline; margin: 0; }
.ps-add { flex: 0 0 auto; min-height: 2.5rem; padding: .375rem 1.125rem; margin-right: .25rem; }
/* the zoom: site .zoom overlay, two pictures side by side */
.ps-zoom { cursor: default; }
.ps-zoom__t { color: #FFFFFF; font-weight: 700; font-size: 1.0625rem; }
.ps-zoom__g { display: grid; gap: 1rem; width: min(100%, 110rem); flex: 1; min-height: 0; }
.ps-zoom__g div { background: #FFFFFF; border-radius: .75rem; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.ps-zoom__g img { max-width: 94%; max-height: 94%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
/* your parts list */
.ps-lines { margin-top: 1.25rem; }
.ps-cl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ps-cl li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.ps-rm { border: 0; background: none; color: var(--orange-ink); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: underline; padding: .25rem 0; cursor: pointer; }
#ps-form textarea { min-height: 5.5rem; resize: vertical; }
@media (max-width: 60rem) {
  .ps-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ps-stage { position: static; padding: .625rem; }
  .ps-sec { --ps-fig-h: 55vh; }
}
@media (max-width: 40rem) {
  .ps-sec { --gutter: 1rem; }
  .ps-dot { width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; font-size: .75rem; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 5px rgba(0,0,0,.3); }
  .ps-dot.ps-sel { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--slate); }
  .ps-box { grid-template-columns: 6rem minmax(0, 1fr); height: 19rem; gap: .75rem; padding: .625rem; }
  .ps-pic { height: 6rem; }
  .ps-pic--zoom::after { content: "⤢"; }
  .ps-row__main { gap: .5rem; padding: .5rem .25rem; }
  .ps-th { width: 3rem; height: 2.5rem; }
  .ps-add { padding: .375rem .875rem; }
  .ps-zoom__g { grid-template-columns: 1fr !important; }
}
@media (max-width: 60rem) { .ps-pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }   /* all five units in view on a phone, no sideways swipe */
.ps-top .btn { white-space: normal; text-align: center; }

/* ---- /parts/ — the live 3D unit (W2 2026-10-08; src/pages_parts.py JS3 + /parts-shop/3d/viewer.js from tools/export_parts_3d.py).
   .ps-is3d = this browser can show 3D. The unit picture sits in the same fixed box until the model is ready (.ps-live), then the
   model replaces it in place. NO MOTION: no transitions, the camera only moves while dragged. Without .ps-is3d the page is W1's. */
.ps3-bar, .ps-ctl, .ps-3d { display: none; }
.ps-is3d .ps3-bar { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.ps-is3d #ps-seg { display: none; }
.ps3-seg button { padding: .5rem .875rem; }
.ps3-seg button.on { background: var(--slate); color: #FFFFFF; }
.ps-is3d .ps-view { position: relative; --ps-fig-h: clamp(26rem, calc(100vh - 21rem), 54rem); height: var(--ps-fig-h); }   /* 2026-10-09 AJ: bigger, a vertical rectangle, so the unit fills it */
.ps-is3d .ps-flat { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #FFFFFF; }
.ps-is3d.ps-live .ps-flat { display: none; }
.ps-is3d .ps-3d { display: block; position: absolute; inset: 0; border-radius: .75rem; overflow: hidden; background: #F7F8F9; touch-action: none; user-select: none; -webkit-user-select: none; }
.ps-3d canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.ps3-msg { display: none !important; }
.ps3-dots { position: absolute; inset: 0; pointer-events: none; }
.ps3-dots .dot { position: absolute; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 999px; background: var(--orange); color: var(--btn-ink); border: 0; padding: 0; font: inherit; font-size: .8125rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FFFFFF, 0 2px 6px rgba(0,0,0,.3); cursor: pointer; pointer-events: auto; }
.ps3-dots .dot.ps-hi, .ps3-dots .dot:hover { background: var(--slate); color: #FFFFFF; z-index: 2; }
.ps3-dots .dot.ps-sel { background: var(--slate); color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--slate); z-index: 3; }
.ps-is3d .ps-ctl { display: block; min-height: 2.75rem; margin-top: .625rem; }
.ps3-ctl { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; color: var(--body); }
.ps3-rng { display: flex; align-items: center; gap: .5rem; flex: 1 1 8rem; min-width: 0; }
.ps3-rng input { flex: 1; min-width: 0; accent-color: var(--orange); height: 2rem; margin: 0; }
.ps-is3d .ps-hint { min-height: 2.9em; }
@media (max-width: 60rem) { .ps-is3d .ps-view { --ps-fig-h: clamp(18rem, 88vw, 30rem); } }
/* 2026-10-09 AJ ("how about we put it there"): the selected part's card sits at the top of the list column and stays pinned while the list scrolls */
.ps-side { min-width: 0; }
.ps-side .ps-box { position: sticky; top: 5.75rem; z-index: 4; height: auto; max-height: none; margin: 0 0 1rem; grid-template-columns: 7rem minmax(0, 1fr); box-shadow: 0 .5rem 1.5rem rgba(15,20,27,.12); }
.ps-side .ps-box:empty { display: none; }
.ps-side .ps-box .ps-pic { height: 7rem; }
@media (max-width: 60rem) { .ps-side .ps-box { position: static; grid-template-columns: 6rem minmax(0, 1fr); } .ps-side .ps-box .ps-pic { height: 6rem; } }
.ps-is3d .ps-view .ps-box .ps-pic { height: 6.5rem; }
.ps-is3d .ps-view .ps-box .ps-pname { font-size: 1rem; margin: .125rem 0 .25rem; }
.ps-is3d .ps-view .ps-box .ps-fits { margin: .375rem 0; }
@media (max-width: 60rem) { .ps-is3d .ps-view .ps-box { max-height: 8.5rem; grid-template-columns: 4.5rem minmax(0, 1fr); } .ps-is3d .ps-view .ps-box .ps-pic { height: 4.5rem; } .ps-is3d .ps-view .ps-box .ps-fits { display: none; } }

@media (max-width: 40rem) {
  .ps3-seg button { padding: .5rem .625rem; font-size: .8125rem; }
  .ps3-ctl { flex-wrap: wrap; row-gap: .375rem; }
  .ps-is3d .ps-ctl { min-height: 5.75rem; }
  .ps-is3d .ps-hint { min-height: 4.4em; }
  .ps3-dots .dot { width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; font-size: .75rem; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 5px rgba(0,0,0,.3); }
  .ps3-dots .dot.ps-sel { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--slate); }
}

/* Closeout "On this page": a jump link and a PDF button on one row (AJ 2026-10-09) */
.dl--pdf .dl__row { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--line-soft); min-height: 3.5rem; }
.dl--pdf .dl__row > a:first-child, .dl--pdf .dl__row > .dl__all { flex: 1 1 auto; border-top: 0; min-height: 0; }
.dl--pdf .dl__all { font-weight: 600; color: var(--ink); }
.dl--pdf .dl__pdf { flex: 0 0 auto; border-top: 0; min-height: 0; padding: .3rem .75rem; border: 1.5px solid var(--slate); border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--slate); }
.dl--pdf .dl__pdf:hover { border-color: var(--orange-ink); color: var(--orange-ink); }

/* ---- Mobile review (2026-10-09, after launch): what the 320–375 px pass turned up ---- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* any table wider than a phone scrolls inside its box instead of pushing the page sideways */
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; accent-color: var(--orange); flex: 0 0 auto; }
@media (max-width: 40rem) {
  /* the twelve-noise table: name · outside · inside on one line, "what is left" under them, no sideways scroll */
  .hear-table, .hear-table thead, .hear-table tbody { display: block; }
  .hear-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: .875rem; }
  .hear-table th:last-child { display: none; }
  .hear-table td:last-child { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
  .hear-table tr:last-child td:not(:last-child) { border-bottom: 0; }
}
@media (max-width: 25rem) {
  /* rating rows: on the narrowest phones the caption sits under the number instead of wrapping four lines deep on the right */
  .rate { display: block; }
  .rate__c { margin-top: .125rem; text-align: left; }
}
@media (max-width: 60rem) {
  /* parts shop: the fixed "Your parts list" pill sits over the top of the page on a phone — the page starts below it */
  .ps-top { padding-top: 6.75rem; }
}
@media (max-width: 25rem) {
  .drop__ticks { grid-template-columns: 1fr !important; }   /* send-plans: "Specifications" ran out of the dashed box in two columns */
}
@media (max-width: 60rem) {
  .chooser { grid-template-columns: minmax(0, 1fr); } .chooser > * { min-width: 0; }   /* choose yours: the step column grew past the phone and its one-line notes were cut off */
}
@media (max-width: 34rem) {
  .dlg__actions { flex-direction: column-reverse; } .dlg__actions .btn { width: 100%; }   /* sign-up / access dialogs: two full-width buttons, the main one on top */
}