/* NextGen AV Systems. Look A "Lights Down" (2026-10-10): linen and espresso, a calm serif, the logo red only where you press.
   Fonts are self-hosted, OFL: Cormorant Garamond 600 (+ italic) for headings, Manrope for text and labels. */
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-600i.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --linen: #f3efe8;
  --paper: #faf8f4;
  --stone: #e3dbcf;
  --ink: #1d1a17;
  --ink2: #4a443d;
  --ink3: #625a50;
  --line: #d3c9bb;
  --line2: #c4b8a8;
  --field: #8f8577;
  --espresso: #25201c;
  --espresso2: #2f2924;
  --dline: rgba(243, 239, 232, .16);
  --cream: #f6f1ea;
  --cream2: #cbc2b6;
  --red: #c4001a;
  --red-d: #a10015;
  --radius: 2px;
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --hdr-h: 84px;
  --pad: clamp(72px, 9.4vw, 136px);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: var(--sans);
  --display: var(--serif);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; overflow-x: clip; }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 7vw, 6.6rem); line-height: .98; }
h2 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
h3 { font-size: 1.9rem; line-height: 1.08; }
h1 em, h2 em { font-style: italic; }
p { margin: 0 0 1em; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.narrow { width: min(860px, 100% - 2 * var(--gut)); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red); color: #fff; padding: 10px 16px; display: inline-flex; align-items: center; min-height: 48px; }
.skip:focus { left: 12px; }

.ico { width: 22px; height: 22px; flex: none; }
.ico-sm { width: 18px; height: 18px; }
.ico-lg { width: 32px; height: 32px; }

/* Labels: Manrope 600, small, tracked, uppercase */
.eyebrow { font: 600 .76rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin: 0 0 22px; }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--ink2); max-width: 36em; }
.fine { font-size: .86rem; color: var(--ink3); }
.more { display: inline-flex; align-items: center; gap: 10px; font: 600 .76rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--red); text-decoration: none; transition: gap .25s var(--ease); }
.more:hover { gap: 14px; }

/* Review marker for unconfirmed facts (review builds only) */
.uc { background: rgba(255, 196, 0, .22); box-shadow: inset 0 -2px 0 #e0a800; padding: 0 3px; cursor: help; }
.site-footer .uc { color: #fff6e0; }
.review-bar { background: #fff4cc; color: #5a4300; font-size: .82rem; text-align: center; padding: 6px 12px; border-bottom: 1px solid #ecd47a; position: relative; z-index: 51; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: var(--radius); border: 1px solid transparent; font: 600 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, border-color .25s, color .25s; white-space: nowrap; }
.btn .ico { width: 18px; height: 18px; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-d); }
.btn-ghost { background: transparent; border-color: currentColor; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-line { background: transparent; border-color: rgba(246, 241, 234, .55); color: var(--cream); }
.btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-sm { min-height: 44px; padding: 0 20px; }
.btn-lg { min-height: 56px; padding: 0 34px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 600 .76rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); margin: 0; }
.chip .ico { color: var(--red); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font: 600 .76rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }

/* ---------- Header: espresso bar; transparent over the photo on the home page ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--espresso); color: var(--cream); border-bottom: 1px solid transparent; transition: background .35s var(--ease), border-color .35s; }
.is-home .site-header, .over-photo .site-header { margin-bottom: calc(-1 * var(--hdr-h)); background: transparent; border-bottom-color: rgba(246, 241, 234, .18); }
.is-home .site-header.is-scrolled, .over-photo .site-header.is-scrolled, .nav-open .site-header { background: var(--espresso); border-bottom-color: transparent; }
.hdr { display: flex; align-items: center; gap: 28px; min-height: var(--hdr-h); }
.brand { align-self: stretch; display: flex; align-items: center; margin-left: -14px; padding: 0 14px; transition: background .35s var(--ease); }
.brand img { width: 172px; height: auto; }
/* Over a photo the logo sits on a solid espresso tab, so it reads on any picture (round 1: legible at 390). */
.is-home .site-header:not(.is-scrolled) .brand, .over-photo .site-header:not(.is-scrolled) .brand { background: var(--espresso); }
.nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
/* Menu items are page links (.nav-a). Items with a short list have a separate arrow button (.nav-top.nav-chev). */
.nav-a, .nav-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 10px; white-space: nowrap; background: none; border: 0; cursor: pointer; text-decoration: none; font: 500 1rem/1 var(--sans); color: var(--cream2); transition: color .2s; }
.nav-chev { padding: 10px 6px; margin-left: -8px; }
.is-home .site-header:not(.is-scrolled) :is(.nav-a, .nav-top, .lang, .hdr-phone),
.over-photo .site-header:not(.is-scrolled) :is(.nav-a, .nav-top, .lang, .hdr-phone) { color: var(--cream); }
.nav-a:hover, .nav-top:hover, .has-drop.is-open > .nav-top, .has-drop.is-open > .nav-a { color: #fff; }
/* You are here: the current page (and the menu item it sits under) is underlined in red. */
.nav-a[aria-current] { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 9px; }
.drop a[aria-current="page"] { color: var(--red); font-weight: 700; }
.drop a[aria-current="page"]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.chev { width: 14px; height: 14px; transition: transform .2s; }
.has-drop { position: relative; display: flex; align-items: center; }
.has-drop.is-open .chev { transform: rotate(180deg); }
.drop { position: absolute; top: calc(100% + 16px); left: 0; width: 300px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 0; box-shadow: 0 18px 40px -20px rgba(29, 26, 23, .45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
.has-drop.is-open .drop { opacity: 1; visibility: visible; transform: none; }
.drop ul { list-style: none; margin: 0; padding: 0; }
.drop li a { display: block; padding: 10px 22px; text-decoration: none; font-size: .96rem; font-weight: 500; }
.drop li a:hover { background: var(--linen); color: var(--red); }
.drop-all { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 14px 22px 8px; border-top: 1px solid var(--line); color: var(--red); font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.hdr-actions { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; text-decoration: none; font: 500 .95rem var(--sans); color: var(--cream2); }
.lang:hover { color: #fff; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 600 .98rem var(--sans); letter-spacing: .02em; color: var(--cream2); text-decoration: none; }
.hdr-phone:hover { color: #fff; }
.hdr-phone .ico { width: 18px; height: 18px; }
.menu-btn { display: none; background: none; border: 1px solid rgba(246, 241, 234, .5); border-radius: var(--radius); min-width: 48px; height: 48px; padding: 0 14px; gap: 8px; align-items: center; justify-content: center; cursor: pointer; color: var(--cream); font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.menu-ico { position: relative; width: 22px; height: 22px; }
.menu-ico .ico { position: absolute; inset: 0; }
.menu-btn .mi-close, .nav-open .menu-btn .mi-open { display: none; }
.nav-open .menu-btn .mi-close { display: block; }
.nav-open .menu-btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.nav-mobile-only { display: none; }

/* Desktop widths where the full number, the quote button and six nav items would crowd: the phone becomes an icon
   (the number stays its accessible name and is on the quote button's page, the footer and the call band). */
@media (max-width: 1500px) and (min-width: 1141px) {
  .hdr { gap: 18px; }
  .hdr-actions { gap: 12px; }
  .brand img { width: 160px; }
}
@media (max-width: 1320px) and (min-width: 1141px) {
  .hdr-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdr-phone { min-width: 44px; justify-content: center; }
}
/* Phone and tablet menu: a full-height panel, every row at least 56px tall, the list arrows are 56px squares,
   the free quote is one big red button, and the menu button reads "Close" while it is open. */
@media (max-width: 1140px) {
  .menu-btn { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h)); background: var(--espresso); padding: 8px var(--gut) 120px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; margin: 0; }
  .nav-open .nav { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--dline); }
  .nav-a { flex: 1 1 auto; min-height: 60px; padding: 14px 2px; font-size: 1.3rem; font-weight: 600; color: var(--cream); }
  .nav-a[aria-current] { text-underline-offset: 8px; }
  .nav-chev { flex: none; width: 56px; height: 56px; margin: 0; justify-content: center; border: 1px solid var(--dline); border-radius: var(--radius); color: var(--cream); }
  .nav-chev .chev { width: 18px; height: 18px; }
  .has-drop { flex-wrap: wrap; }
  .drop { position: static; flex: 1 0 100%; width: auto; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; margin: 0 0 12px; padding: 4px 0; background: var(--espresso2); color: var(--cream); border: 0; }
  .drop li a { display: flex; align-items: center; min-height: 52px; padding: 10px 18px; font-size: 1.1rem; }
  .drop li a:hover { background: transparent; color: #fff; }
  .drop a[aria-current="page"] { color: #fff; }
  .has-drop.is-open .drop { display: block; }
  .nav-mobile-only { display: block; }
  .nav-list > li.nav-quote { border-bottom: 0; padding: 22px 0 6px; }
  .nav-quote .btn { width: 100%; min-height: 60px; font-size: .86rem; white-space: normal; text-align: center; line-height: 1.3; }
  .nav-call .nav-a { gap: 12px; font-size: 1.15rem; }
}
@media (max-width: 640px) {
  :root { --hdr-h: 74px; }
  .hdr-phone, .hdr-quote { display: none; }
  .brand { margin-left: calc(-1 * var(--gut)); padding: 0 12px 0 var(--gut); }
  .brand img { width: 140px; }
  .hdr { gap: 10px; }
  .lang { font-size: .95rem; min-height: 48px; padding: 0 8px; }
}
@media (max-width: 370px) { .lang span { font-size: .85rem; } .menu-btn { padding: 0 10px; } }

/* ---------- Home hero: a bright photo, a soft shade on the left, and the fader ---------- */
.hero, .page-hero.has-img { position: relative; isolation: isolate; overflow: hidden; background: var(--espresso); color: var(--cream); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 24, 20, .86) 0%, rgba(29, 24, 20, .66) 50%, rgba(29, 24, 20, .4) 100%); }
.hero { min-height: max(660px, min(100vh, 980px)); min-height: max(660px, min(100svh, 980px)); display: flex; flex-direction: column; justify-content: flex-end; }
.hero .hero-bg img { object-position: 50% 62%; filter: brightness(1.05) saturate(1.04); }
.hero .hero-bg::after { background:
  linear-gradient(90deg, rgba(29, 24, 20, .88) 0%, rgba(29, 24, 20, .78) 30%, rgba(29, 24, 20, .5) 46%, rgba(29, 24, 20, 0) 64%),
  linear-gradient(180deg, rgba(29, 24, 20, .55) 0, rgba(29, 24, 20, 0) 190px),
  linear-gradient(0deg, rgba(29, 24, 20, .5) 0, rgba(29, 24, 20, 0) 260px); }
.hero-in { padding: calc(var(--hdr-h) + 56px) 0 0; }
.hero .eyebrow { color: var(--cream); margin-bottom: 26px; }
.hero h1 { max-width: 8.6em; font-size: clamp(3.1rem, 6.6vw, 6.25rem); color: #fff; margin-bottom: 28px; }
.hero h1 em { font-weight: 600; }
.hero .lead { color: #f0e9df; max-width: 31em; font-size: 1.16rem; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 38px 0 0; }
/* The second step is always a plain call link, never a second button. */
.cta-call { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 2px; font: 600 1.05rem/1.2 var(--sans); color: inherit; text-decoration: underline; text-decoration-color: rgba(196, 0, 26, .55); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cta-call:hover { color: var(--red); }
.cta-call .ico { color: var(--red); width: 20px; height: 20px; }
.hero .cta-call, .page-hero.has-img .cta-call, .sec-dark .cta-call { color: #fff; }
.hero .cta-call:hover, .page-hero.has-img .cta-call:hover { color: #fff; text-decoration-color: #fff; }
.hero .cta-call .ico, .page-hero.has-img .cta-call .ico { color: #fff; }
.hero .btn-ghost, .page-hero.has-img .btn-ghost { color: var(--cream); border-color: rgba(246, 241, 234, .7); }
.hero .btn-ghost:hover, .page-hero.has-img .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero-foot { padding: clamp(44px, 5vw, 64px) 0 30px; }
.hero-promises { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; font-size: .9rem; font-weight: 500; color: #e2d9cd; }
.hero-promises li + li::before { content: "\00b7"; margin: 0 14px; color: rgba(246, 241, 234, .55); }

/* The fader: a hairline with a red knob. Four stops, each centered over its label. */
.fader { position: relative; height: 1px; background: currentColor; }
.fader i { position: absolute; top: 50%; left: 12.5%; width: 16px; height: 16px; border-radius: 50%; background: var(--red); transform: translate(-50%, -50%); }
.fader-l { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font: 600 .74rem/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.hero-fader { color: rgba(246, 241, 234, .62); max-width: 780px; }
.hero-fader .fader-l { color: rgba(246, 241, 234, .78); }
.hero-fader .fader i { left: 62.5%; animation: knob 2.4s var(--inout) .7s both; }
.hero-fader .fader-l li:nth-child(3) { animation: lit .5s ease 2.9s both; }
@keyframes knob { from { left: 12.5%; } to { left: 62.5%; } }
@keyframes lit { from { color: rgba(246, 241, 234, .78); } to { color: #fff; } }
/* Phones: four labels do not fit one line, and the working dimmer sits further down the page. */
@media (max-width: 640px) {
  .hero-fader { display: none; }
  .hero-foot { padding-top: 36px; }
  .hero-promises { margin-top: 0; flex-direction: column; gap: 6px; }
  .hero-promises li + li::before { content: none; }
}

/* ---------- Page hero (other pages) ----------
   With a photo: the home hero, shorter. The header sits over it, text sits low, brochure lines on a hairline row.
   Without: a plain stone band. */
.page-hero { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6vw, 96px); background: var(--stone); }
.page-hero h1 { max-width: 16ch; font-size: clamp(2.9rem, 5.8vw, 5.4rem); line-height: 1; margin-bottom: .32em; }
.page-hero .lead { max-width: 34em; }
.page-hero.has-img { padding: 0; min-height: clamp(580px, 82vh, 860px); min-height: clamp(580px, 82svh, 860px); display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero.has-img .hero-bg img { object-position: 50% 55%; }
.page-hero.has-img .hero-bg::after { background:
  linear-gradient(90deg, rgba(29, 24, 20, .78) 0%, rgba(29, 24, 20, .52) 40%, rgba(29, 24, 20, .08) 72%),
  linear-gradient(180deg, rgba(29, 24, 20, .55) 0, rgba(29, 24, 20, 0) 190px),
  linear-gradient(0deg, rgba(29, 24, 20, .55) 0, rgba(29, 24, 20, 0) 300px); }
.page-hero-in { position: relative; }
.page-hero.has-img .page-hero-in { padding: calc(var(--hdr-h) + 64px) 0 clamp(56px, 6vw, 80px); }
.page-hero.has-img .page-hero-in:has(+ .hero-foot) { padding-bottom: 0; }
.page-hero.has-img h1 { color: #fff; }
.page-hero.has-img .lead { color: #f0e9df; }
.page-hero.has-img .eyebrow, .sec-dark .eyebrow { color: var(--cream); }
.page-hero.has-img .hero-foot { padding: clamp(40px, 4.4vw, 56px) 0 30px; }
.page-hero.has-img .hero-promises { margin: 0; padding-top: 22px; border-top: 1px solid rgba(246, 241, 234, .3); }
.page-hero:not(.has-img) .hero-ctas { margin-top: 30px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 28px; font-size: .86rem; color: var(--ink3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; color: var(--ink2); }
.crumbs a:hover { color: var(--red); }
.has-img .crumbs ol, .has-img .crumbs a { color: #d6cdc1; }
.has-img .crumbs a:hover { color: #fff; }
.simple-hero { min-height: 62vh; display: flex; align-items: center; border-bottom: 0; }
.simple-hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.6rem); }

/* ---------- Sections ---------- */
.sec { padding: var(--pad) 0; }
.sec-alt { background: var(--stone); }
.sec-dark { background: var(--espresso); color: var(--cream); }
.sec-dark .lead, .sec-dark p { color: var(--cream2); }
.sec-dark .more { color: var(--cream); }
.sec-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 72px); }
.sec-head .lead { margin-top: 6px; }
.sec-head-row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.two-col .sec-head { position: sticky; top: 120px; margin-bottom: 0; }
.sec-head h2.h-sentence { font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1.15; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 28px; } .two-col .sec-head { position: static; } }

.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

/* Story: photo beside text */
.story { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 7vw, 112px); align-items: center; }
.story-img img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.story-body h2 { margin-bottom: .5em; }
.story-links { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--line); }
.story-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .98rem; transition: color .2s; }
.story-links a::after { content: "\2192"; color: var(--red); opacity: .0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); }
.story-links a:hover { color: var(--red); }
.story-links a:hover::after { opacity: 1; transform: none; }
.story-body .more { margin-top: 30px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story-img img { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .story-links { grid-template-columns: 1fr; } }

/* Photo cards: no box, no shadow, a thin rule */
.pcard { display: flex; flex-direction: column; text-decoration: none; }
.pcard-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.03); }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 26px 0 0; }
.pcard-tag { font: 600 .72rem/1.45 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px; }
.pcard h3 { font-size: clamp(1.9rem, 2.4vw, 2.3rem); margin-bottom: .35em; transition: color .2s; }
.pcard:hover h3 { color: var(--red); }
.pcard-p { display: block; color: var(--ink2); font-size: 1rem; margin-bottom: 26px; }
.pcard .more { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line2); }
.grid-3:has(> .pcard) { gap: clamp(56px, 6vw, 80px) clamp(28px, 3vw, 44px); }

/* Ruled index: number, serif name, one line, arrow. Guides, services on sector pages. */
.ix { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.ix li { border-bottom: 1px solid var(--line2); }
.ix a { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.15fr) 32px; gap: 8px 32px; align-items: baseline; padding: 28px 0; text-decoration: none; }
.ix-n { font: 600 1.5rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--red); }
.ix-name { margin: 0; font-size: clamp(1.7rem, 2.2vw, 2.1rem); line-height: 1.1; transition: color .2s; }
.ix-p { color: var(--ink2); font-size: 1rem; }
.ix-go { color: var(--red); font-size: 1.2rem; justify-self: end; transition: transform .25s var(--ease); }
.ix a:hover .ix-name { color: var(--red); }
.ix a:hover .ix-go { transform: translateX(4px); }
@media (max-width: 760px) {
  .ix a { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 8px 14px; padding: 22px 0; }
  .ix-p { grid-column: 2 / 3; grid-row: 2; font-size: .96rem; }
  .ix-go { grid-column: 3; grid-row: 1; }
}

/* Hairline link lists (related links) */
.link-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line2); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line2); text-decoration: none; font-weight: 600; font-size: .98rem; transition: color .2s; }
.link-list a::after { content: "\2192"; color: var(--red); flex: none; transition: transform .25s var(--ease); }
.link-list a:hover { color: var(--red); }
.link-list a:hover::after { transform: translateX(4px); }
.fit-list .fit-n { display: block; }
.fit-list .fit-i { display: block; margin-top: 3px; font-weight: 400; font-size: .88rem; color: var(--ink3); }
.rel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 64px); }
.rel-h { font-size: clamp(1.9rem, 2.4vw, 2.3rem); margin-bottom: 22px; }
@media (max-width: 900px) { .rel-cols { grid-template-columns: 1fr; } }

/* Features: alternating photo and text rows */
.features { display: grid; gap: clamp(64px, 8vw, 120px); }
.feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature.flip .feature-img { order: 2; }
.feature-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature .eyebrow { margin-bottom: 16px; }
.feature h3, .feature .feature-h { font-size: clamp(2.2rem, 3.4vw, 3.1rem); margin-bottom: .55em; }
.feature h3 a, .feature-h a { text-decoration: none; }
.feature h3 a:hover, .feature-h a:hover { color: var(--red); }
.feature-p { color: var(--ink2); font-size: 1.06rem; margin-bottom: 26px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 30px; border-top: 1px solid var(--line2); }
.feature-list li { padding: 11px 0; border-bottom: 1px solid var(--line2); font-weight: 600; font-size: .96rem; }
.feature-dl { margin: 0 0 30px; display: grid; gap: 20px; }
.feature-dl > div { border-top: 1px solid var(--line2); padding-top: 16px; }
.feature-dl dt { font: 600 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; }
.feature-dl dd { margin: 0; color: var(--ink2); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature.flip .feature-img { order: 0; } }

/* Process: stacked rows with large serif numbers */
.steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line2); }
.step { display: grid; grid-template-columns: 110px 1fr; column-gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line2); }
.step-n { grid-row: span 2; font: 600 3.8rem/.9 var(--serif); font-variant-numeric: lining-nums; color: var(--red); }
.step h3 { font-size: 1.85rem; margin: 2px 0 6px; }
.step p { color: var(--ink2); margin: 0; }
.sec-dark .steps, .sec-dark .step { border-color: var(--dline); }
.sec-dark .step-n { color: #d8cab7; }
.sec-dark .step h3 { color: var(--cream); }
.sec-dark .step p { color: var(--cream2); }
@media (max-width: 560px) { .step { grid-template-columns: 62px 1fr; column-gap: 14px; } .step-n { font-size: 2.6rem; } .step h3 { font-size: 1.6rem; } }
.planner-side .steps { margin-top: 26px; }
.planner-side .step { grid-template-columns: 44px 1fr; column-gap: 10px; padding: 14px 0; }
.planner-side .step-n { font-size: 1.8rem; }
.planner-side .step h3 { font-size: 1.3rem; }
.planner-side .step p { font-size: .92rem; }

/* Sector page: the brochure's two lines as large serif statements, then the day in three scenes */
.sector-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(40px, 6vw, 96px); }
.sector-sum > div { border-top: 1px solid var(--ink); padding-top: 28px; }
.sector-sum h2.h-sentence { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.12; margin: 0; }
@media (max-width: 760px) { .sector-sum { grid-template-columns: 1fr; } }
.scene-grid { gap: 40px clamp(28px, 3vw, 48px); }
.scene-card { border-top: 1px solid var(--line2); padding-top: 22px; }
.scene-card .step-n { display: block; font-size: 2.4rem; margin-bottom: 14px; }
.scene-card p { color: var(--ink2); margin: 0; }

/* Service page */
.scopes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line2); }
.scope { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line2); }
.scope-n { font: 600 1.9rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--red); }
.scope h3 { font-size: 1.6rem; margin-bottom: .3em; }
.scope p { margin: 0; color: var(--ink2); }
.knows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.know { border-top: 1px solid var(--line2); padding-top: 20px; }
.know h3 { font-size: 1.6rem; }
.know p { color: var(--ink2); margin: 0; }
.knows-3 { grid-template-columns: repeat(3, 1fr); gap: 40px clamp(32px, 3.4vw, 48px); }
.knows-odd > .know:last-child { grid-column: 1 / -1; }
@media (max-width: 1000px) { .knows-3 { grid-template-columns: 1fr 1fr; } .knows-3 > .know:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .knows, .knows-3 { grid-template-columns: 1fr; } }
/* Related services row (round 2): link only, one line */
.sec-tight { padding: clamp(56px, 6vw, 88px) 0; }
.rel-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 3fr); gap: 20px clamp(32px, 4vw, 64px); align-items: start; }
.rel-wrap .rel-h { margin: 0; }
.rel-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line2); }
.rel-row li { flex: 1 1 auto; }
.rel-row a { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 100%; padding: 16px 20px 16px 0; margin-right: 20px; border-bottom: 1px solid var(--line2); text-decoration: none; font-weight: 600; font-size: .98rem; transition: color .2s; }
.rel-row a::after { content: "\2192"; color: var(--red); flex: none; transition: transform .25s var(--ease); }
.rel-row a:hover { color: var(--red); }
.rel-row a:hover::after { transform: translateX(4px); }
.rel-cols .rel-row { display: block; }
.rel-cols .rel-row a { margin-right: 0; padding: 15px 0; }
@media (max-width: 900px) { .rel-wrap { grid-template-columns: 1fr; } .rel-row { display: block; } .rel-row a { margin-right: 0; padding-right: 0; } }
/* Brands line on services with 1 to 3 brands (round 2) */
.brand-inline { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.bi-h { font: 600 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin: 0 0 16px; }
.bi-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.bi-logos img { display: block; max-width: 100%; height: auto; opacity: .84; }

/* FAQ */
.faqs { border-top: 1px solid var(--line2); }
.faq { border-bottom: 1px solid var(--line2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-weight: 600; font-size: 1.08rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq-ico { color: var(--red); transition: transform .25s var(--ease); }
.faq[open] .faq-ico { transform: rotate(45deg); }
.faq-a { padding: 0 44px 26px 0; color: var(--ink2); }
.faq-a p { margin: 0; }

/* Home: FAQ and the closing call, one section */
.close-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.close-grid .sec-head { position: sticky; top: 120px; margin: 0; }
.close-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px 64px; align-items: end; margin-top: clamp(80px, 9vw, 128px); padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--ink); }
.close-band h2 { margin: 0 0 18px; }
.close-band .lead { margin: 0; }
.close-band .hero-ctas { margin: 0; justify-content: flex-end; }
.close-band.close-solo { margin-top: 0; }
/* FAQ page: one group per topic, title beside its questions */
.faq-group { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px clamp(40px, 6vw, 96px); align-items: start; padding: 0 0 clamp(56px, 6vw, 88px); }
/* Round 4: every group opens the same way as "General questions": the list's own top rule, no second rule above it. */
.faq-group + .faq-group { padding-top: 0; }
.faq-group h2 { font-size: clamp(2rem, 3vw, 2.8rem); position: sticky; top: 120px; margin: 0; }
.faq-group:last-child { padding-bottom: 0; }
@media (max-width: 900px) {
  .close-grid, .close-band { grid-template-columns: 1fr; }
  .close-grid .sec-head { position: static; }
  .close-band .hero-ctas { justify-content: flex-start; }
  .faq-group { grid-template-columns: 1fr; }
  .faq-group h2 { position: static; }
}
.close-grid .sec-head .more { margin-top: 18px; }

/* ---------- Signature (home): the dimmer. A real photo that dims as the fader moves. ---------- */
.dim-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.dim-text h2 { margin-bottom: .45em; }
.dim-text .more { margin-top: 26px; }
/* Each scene button carries its look (brightness, saturation, a solid tint, the knob position); site.js copies it into
   these variables. Welcome is bright, movie night clearly dark. Without JS the first stop shows. */
.dim-photo { position: relative; margin: 0; background: #0d0b0a; overflow: hidden; aspect-ratio: 16 / 10; }
.dim-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--lv, 1)) saturate(var(--sat, 1)); transition: filter 1s var(--inout); }
.dim-photo::after { content: ""; position: absolute; inset: 0; background: var(--tint, transparent); mix-blend-mode: multiply; pointer-events: none; transition: background-color 1s var(--inout); }
.dim-hint { margin: 30px 0 18px; font-size: .9rem; color: var(--ink3); }
.dim .fader { color: var(--ink); }
.dim .fader i { left: var(--knob, 12.5%); transition: left 1s var(--inout); }
.dim-scenes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); margin-top: 8px; }
.dim .scene-btn { min-height: 52px; padding: 12px 4px; background: none; border: 0; cursor: pointer; font: 600 .74rem/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); transition: color .2s; }
.dim .scene-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.dim .scene-btn.is-on { color: var(--red); }
.dim-cap { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line2); color: var(--ink2); font-size: .98rem; min-height: 3.2em; }
@media (max-width: 900px) { .dim-grid { grid-template-columns: 1fr; } .dim-photo { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .dim .scene-btn, .fader-l { letter-spacing: .1em; font-size: .68rem; } }

/* ---------- Planner and forms: linen fields, hairline borders, red submit ---------- */
.planner-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.planner-wrap .sec-head { position: sticky; top: 120px; margin-bottom: 0; }
.or-call { margin-top: 28px; }
.or-call a { display: inline-flex; align-items: center; gap: 12px; font: 600 1.4rem var(--sans); letter-spacing: .01em; text-decoration: none; }
.or-call a:hover { color: var(--red); }
.or-call .ico { color: var(--red); }
.planner-page { display: grid; grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: start; }
.planner-side { position: sticky; top: 120px; }
.planner-side h2 { font-size: 2.2rem; }
.planner-side .chip { margin-top: 16px; }
@media (max-width: 960px) {
  .planner-wrap, .planner-page { grid-template-columns: 1fr; gap: 28px; }
  .planner-wrap .sec-head, .planner-side { position: static; }
}

.planner, .cform { background: var(--paper); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); position: relative; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.trap input { min-height: 48px; } /* offscreen bot trap; sized so tap audits do not count it as a small target */
.planner-progress { display: none; height: 2px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.planner-progress span { display: block; height: 100%; width: 25%; background: var(--red); transition: width .4s var(--ease); }
.planner-count { display: none; font: 600 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin: 0 0 18px; }
.is-stepped .planner-progress, .is-stepped .planner-count { display: block; }
.pstep { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.is-stepped .pstep { margin-bottom: 12px; animation: stepIn .4s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
.pstep legend { font: 600 2.1rem/1.08 var(--serif); padding: 0; margin-bottom: 22px; outline: none; }
.opts { display: grid; gap: 10px; }
.opts-4 { grid-template-columns: repeat(2, 1fr); }
.opts-sys { grid-template-columns: repeat(2, 1fr); }
.opts-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--field); border-radius: var(--radius); background: var(--linen); font-weight: 600; font-size: .98rem; transition: border-color .2s, background .2s; min-height: 58px; }
.opt span .ico { display: none; }
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { border-color: var(--red); background: #fff; box-shadow: inset 0 0 0 1px var(--red); }
.opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.opt-sm span { min-height: 0; padding: 10px 18px; }
@media (max-width: 560px) { .opts-4, .opts-sys { grid-template-columns: 1fr; } }

.fld { display: grid; gap: 8px; margin-bottom: 18px; }
.fld > span { font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .fld-row { grid-template-columns: 1fr; } }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--linen); border: 1px solid var(--field); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s, background .2s; font-size: 1rem; }
.fld select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23c4001a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.fld textarea { resize: vertical; min-height: 100px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); background-color: #fff; box-shadow: 0 0 0 3px rgba(29, 26, 23, .12); }
.fld [aria-invalid="true"] { border-color: var(--red); }
.form-err { color: var(--red-d); font-weight: 600; margin: 0 0 12px; }
.form-err:empty { display: none; }
.planner-nav { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.form-ok { text-align: left; padding: 10px 0; outline: none; }
.form-ok h3 { font-size: 2.3rem; }
.form-ok h3::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: #e7f6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%231f8a4c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat; }
.form-ok p { color: var(--ink2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-info .eyebrow { margin-bottom: 14px; }
.big-phone { display: inline-block; font: 600 clamp(2.8rem, 5vw, 4.4rem)/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; text-decoration: none; margin-bottom: 30px; transition: color .2s; }
.big-phone:hover { color: var(--red); }
.contact-facts { list-style: none; padding: 0; margin: 0 0 40px; border-top: 1px solid var(--line2); }
.contact-facts li { padding: 13px 0; border-bottom: 1px solid var(--line2); color: var(--ink2); font-size: .98rem; }
.contact-info h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.contact-info p { color: var(--ink2); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Articles ---------- */
/* Calm reading column: about 68 characters a line, serif headings, Manrope text */
.read { width: min(68ch, 100% - 2 * var(--gut)); margin-inline: auto; font-size: 1.08rem; }
.art-hero { background: var(--linen); border-bottom: 1px solid var(--line2); padding: clamp(56px, 7vw, 104px) 0 clamp(44px, 5vw, 64px); }
.art-hero h1 { max-width: none; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.04; }
.art-meta { color: var(--ink3); font-size: .9rem; margin: 0; }
.art-body { padding-top: clamp(48px, 5vw, 72px); }
.prose { font-size: 1.08rem; line-height: 1.7; color: #2e2925; max-width: 68ch; }
.prose h2 { font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.1; margin-top: 1.5em; }
.prose-lead { font-size: 1.16rem; color: var(--ink2); margin-bottom: 36px; }
.art-foot { margin-top: 64px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--red); }
.answer { font-size: 1.2rem; color: var(--ink); border-left: 2px solid var(--red); padding: 4px 0 4px 20px; margin-bottom: 1.6em; }
.sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line2); font-size: .92rem; }
.sources h2 { font-size: 1.6rem; margin-top: 0; }
.sources a { color: var(--ink2); }

/* ---------- Footer: espresso ---------- */
.site-footer { background: var(--espresso); color: var(--cream); padding: clamp(72px, 8vw, 112px) 0 0; }
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 48px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot ul a { text-decoration: none; color: var(--cream2); font-size: .95rem; }
.foot ul a:hover { color: #fff; }
.foot-brand img { width: 170px; margin-bottom: 20px; }
.foot-tag { color: var(--cream2); font-size: .95rem; }
.foot-phone { display: inline-flex; align-items: center; gap: 10px; font: 600 1.35rem var(--sans); text-decoration: none; }
.foot-phone .ico { color: var(--cream2); }
.foot-langs, .foot-area { color: #a59c90; font-size: .9rem; margin: 8px 0 0; }
.foot-h { font: 600 .72rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); margin-bottom: 20px; }
.foot-cta h2.foot-h { font: 600 1.9rem/1.1 var(--serif); letter-spacing: -.01em; text-transform: none; margin-bottom: 12px; }
.foot-cta p { color: var(--cream2); font-size: .95rem; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 64px; padding: 24px 0 30px; border-top: 1px solid var(--dline); font-size: .85rem; color: #a59c90; }
.foot-base p { margin: 0; }
.foot-base a { color: #a59c90; }
@media (max-width: 960px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot { grid-template-columns: 1fr; gap: 36px; } }

.mobile-call { display: none; }
@media (max-width: 640px) {
  .mobile-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch; min-height: 58px; background: var(--red); font: 600 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .mobile-call a { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none; padding: 0 12px; }
  .mobile-call .mc-call { flex: 1 1 auto; }
  .mobile-call .mc-quote { flex: 0 0 auto; background: var(--ink, #1c1714); border-left: 1px solid rgba(255,255,255,.25); padding: 0 18px; }
  .lang-es .mobile-call { letter-spacing: .05em; }
  .mobile-call { transition: transform .3s var(--ease), visibility 0s; }
  .mobile-call.is-away { transform: translateY(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  body { padding-bottom: 58px; }
}

/* ---------- Mobile type and spacing ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { min-height: max(600px, calc(100svh - 58px)); } /* ends at the top of the red call bar */
  .hero .hero-bg::after { background: linear-gradient(0deg, rgba(29, 24, 20, .86) 0%, rgba(29, 24, 20, .62) 48%, rgba(29, 24, 20, .2) 78%, rgba(29, 24, 20, .45) 100%); }
  .page-hero.has-img .hero-bg::after { background: linear-gradient(0deg, rgba(29, 24, 20, .86) 0%, rgba(29, 24, 20, .66) 52%, rgba(29, 24, 20, .3) 80%, rgba(29, 24, 20, .5) 100%); }
  .page-hero.has-img .page-hero-in { padding-top: calc(var(--hdr-h) + 56px); }
  .page-hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.2rem); }
  .art-hero h1 { font-size: clamp(2.2rem, 9vw, 2.6rem); }
  .ix-name { font-size: 1.55rem; }
  .crumbs ol { margin-bottom: 20px; font-size: .82rem; }
  .hero-in { padding-top: calc(var(--hdr-h) + 30px); }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .14em; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(2.5rem, 11.2vw, 3rem); margin-bottom: 16px; }
  .hero .lead { font-size: 1rem; line-height: 1.5; }
  .hero-ctas { margin-top: 22px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-foot { padding: 40px 0 26px; }
  .hero-promises { font-size: .84rem; margin-top: 24px; }
  .hero-promises li + li::before { margin: 0 9px; }
  /* round 1: the home hero must clear the red call bar at 390. The bar is the free-quote call, so the hero drops its
     duplicate red call button and the promise line on phones and keeps the planner button. */
  .hero .hero-promises { display: none; }
  .hero .hero-ctas { padding-right: 62px; } /* clears the "Questions?" bubble */
  .lead { font-size: 1.06rem; }
  h3 { font-size: 1.7rem; }
}

/* ---------- Round 2 visual fixes ---------- */
/* Home hero: the scene labels and promise line sit on a solid full-bleed plate; the hero fits the first screen
   under the review bar (1440x900 shows the promise line). */
.hero .hero-foot { position: relative; z-index: 0; padding: 22px 0 20px; margin-top: clamp(36px, 4.4vw, 56px); }
.hero .hero-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(24, 20, 17, .9); box-shadow: 0 0 0 100vmax rgba(24, 20, 17, .9); clip-path: inset(0 -100vmax); }
.hero-fader { color: rgba(246, 241, 234, .7); }
.hero-fader .fader-l { color: rgba(246, 241, 234, .92); }
.hero .hero-promises { margin-top: 18px; color: #efe7db; }
body:has(.review-bar) .hero { min-height: max(620px, min(calc(100vh - 34px), 946px)); min-height: max(620px, min(calc(100svh - 34px), 946px)); }
@media (max-width: 640px) {
  .hero .hero-foot { margin-top: 32px; padding: 0 0 22px; }
  .hero .hero-foot::before { content: none; }
  body:has(.review-bar) .hero { min-height: max(600px, calc(100svh - 58px)); }
}
/* The logo tab: the header hairline runs across its foot, so it sits on the header line instead of hanging from it. */
.is-home .site-header:not(.is-scrolled) .brand, .over-photo .site-header:not(.is-scrolled) .brand { box-shadow: inset 0 -1px 0 rgba(246, 241, 234, .18); }
/* Lighting hero: crop past the stray stool at the right edge. */
.page-hero .hero-bg img[src*="/lighting."] { transform: scale(1.12); transform-origin: 28% 60%; }
/* About and contact heroes on phones: brighter photo, lighter scrim above the text. */
@media (max-width: 640px) {
  .page-hero .hero-bg img[src*="/about."] { filter: brightness(1.18) saturate(1.05); }
  .page-hero .hero-bg img[src*="/about."] { object-position: 38% 50%; }
  .page-hero.has-img:has(img[src*="/about."]) .hero-bg::after {
    background: linear-gradient(0deg, rgba(29, 24, 20, .82) 0%, rgba(29, 24, 20, .6) 42%, rgba(29, 24, 20, .4) 74%, rgba(29, 24, 20, .3) 100%); }
  .page-hero.has-img:has(img[src*="/about."]) .page-hero-in { text-shadow: 0 1px 14px rgba(20, 16, 13, .6); }
}
/* Round 3: the lighting hero breadcrumb sits on a small plate on phones (it crossed the lamp); a lone closing call
   after a related row starts closer to it; inline brand logos sit under the "what it includes" list, not under the
   heading, so the left column is the heading alone like every other two-column section. */
@media (max-width: 640px) {
  .page-hero.has-img:has(img[src*="/lighting."]) .crumbs ol { display: inline-flex; padding: 6px 12px; background: rgba(24, 20, 17, .78); }
}
.sec:has(> .wrap > .close-solo) { padding-top: clamp(48px, 5vw, 72px); }
.scopes + .brand-inline { margin-top: 32px; padding-top: 0; border-top: 0; }
/* Round 4: the restaurants "From open to close" list is short, so its photo is shorter too and the two columns balance. */
@media (min-width: 901px) { .story:has(.sx-sol) .story-img img { aspect-ratio: 4 / 3; } }
/* Smart home story: Welcome Home is the bright scene; on phones the card sits low, off the TV; the fader labels end
   before the "Questions?" bubble at 1440. */
@media (min-width: 641px) { .ss-on .ss-fader .fader, .ss-on .ss-fader .fader-l { margin-right: clamp(150px, 16vw, 240px); } }
@media (max-width: 900px) {
  .ss-on .ss-steps .ss-step { align-items: flex-end; padding-bottom: 210px; }
  .ss-on .ss-steps .ss-card { padding: 20px 22px; background: rgba(29, 26, 23, .9); }
  .ss-on .ss-steps .ss-card h3 { font-size: 1.7rem; }
  .ss-steps .ss-n { font-size: 1.6rem; margin-bottom: 8px; }
  .ss[data-scene-now="welcome"] .ss-photo { --lv: 1.22; --con: 1.04; --sat: 1.08; }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .dim .fader i, .dim-photo img { transition: none !important; }
}
.nomotion *, .nomotion *::before, .nomotion *::after { animation: none !important; transition: none !important; }
.nomotion .reveal { opacity: 1 !important; transform: none !important; }

@media print {
  .site-header, .mobile-call, .review-bar, .planner, .hero-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .hx { display: none !important; }
}

/* ============================================================
   "Questions?" helper bubble. One block, its own variables:
   restyle the whole thing by changing the --hx-* values here.
   ============================================================ */
.hx {
  --hx-accent: var(--red);
  --hx-accent-d: var(--red-d);
  --hx-head: var(--espresso);
  --hx-head-ink: var(--cream);
  --hx-bg: var(--paper);
  --hx-soft: var(--linen);
  --hx-ink: var(--ink);
  --hx-ink2: var(--ink2);
  --hx-line: var(--line);
  --hx-field: var(--field);
  --hx-radius: var(--radius);
  --hx-font: var(--sans);
  --hx-label: var(--sans);
  --hx-title: var(--serif);
  --hx-gap: 20px;       /* distance from the screen edge */
  --hx-bar: 0px;        /* height of the fixed call bar below it (mobile) */
  --hx-fab: 52px;
  --hx-w: 392px;
  position: fixed; right: var(--hx-gap); bottom: calc(var(--hx-bar) + var(--hx-gap)); z-index: 60;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
  font: 400 .98rem/1.5 var(--hx-font); color: var(--hx-ink);
}
html:not(.js) .hx { display: none; }
/* Launcher: a round chat disc; on desktop it carries the "Questions?" label in a pill. A small red dot until the first open. */
.hx-fab { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: var(--hx-fab); padding: 0 22px 0 4px; border: 1px solid rgba(246, 241, 234, .22); border-radius: 999px; background: var(--hx-head); color: var(--hx-head-ink); font: 600 .74rem/1 var(--hx-label); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 28px -12px rgba(29, 26, 23, .6); transition: background .2s; }
.hx-fab:hover { background: #3a332d; }
.hx-fab:focus-visible, .hx-x:focus-visible, .hx-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--hx-ink); }
.hx-disc { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(246, 241, 234, .1); }
.hx-fab .ico { width: 21px; height: 21px; flex: none; }
.hx-i-x, .is-open .hx-i-chat { display: none; }
.is-open .hx-i-x { display: block; }
.hx-dot { position: absolute; top: 2px; left: 34px; width: 11px; height: 11px; border-radius: 50%; background: var(--hx-accent); box-shadow: 0 0 0 2px var(--hx-head); }
.hx-dot[hidden] { display: none; }
@media (max-width: 700px) {
  .hx-fab { width: var(--hx-fab); padding: 0; justify-content: center; }
  .hx-disc { background: none; }
  .hx-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hx-dot { top: 6px; left: auto; right: 6px; }
}

/* Panel: espresso header, linen thread, input bar pinned to the bottom. */
.hx-panel { width: var(--hx-w); max-width: calc(100vw - 2 * var(--hx-gap)); height: min(640px, calc(100dvh - var(--hx-bar) - 2 * var(--hx-gap) - var(--hx-fab) - 10px)); display: flex; flex-direction: column; background: var(--hx-soft); border-radius: var(--hx-radius); box-shadow: 0 24px 60px -20px rgba(29, 26, 23, .5), 0 0 0 1px rgba(29, 26, 23, .1); overflow: hidden; }
.hx-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hx-panel:not([hidden]) { animation: hx-in .22s var(--ease); }
}
@keyframes hx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hx-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 16px; background: var(--hx-head); color: var(--hx-head-ink); }
.hx-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1a1613; box-shadow: inset 0 0 0 1px rgba(246, 241, 234, .18); }
.hx-av img { width: 27px; height: auto; display: block; }
.hx-id { flex: 1 1 auto; min-width: 0; }
.hx-title { margin: 0; font: 600 1.3rem/1.1 var(--hx-title); }
.hx-status { margin: 3px 0 0; font-size: .78rem; line-height: 1.3; color: var(--cream2); }
.hx-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--hx-radius); }
.hx-x:hover { background: rgba(255, 255, 255, .12); }
.hx-x .ico { width: 20px; height: 20px; }

.hx-thread { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.hx-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hx-row-you { align-items: flex-end; }
.hx-b { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: .94rem; line-height: 1.5; overflow-wrap: anywhere; }
.hx-b-bot { background: var(--stone); color: var(--hx-ink); border-bottom-left-radius: 4px; }
.hx-b-you { background: var(--hx-head); color: var(--hx-head-ink); border-bottom-right-radius: 4px; }
.hx-txt { margin: 0; }
.hx-b-ok { box-shadow: inset 3px 0 0 #1f8a4c; }
.hx-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.hx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); opacity: .35; animation: hx-dot 1.1s infinite ease-in-out; }
.hx-typing i:nth-child(2) { animation-delay: .18s; }
.hx-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes hx-dot { 0%, 70%, 100% { opacity: .3; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }
.hx-more { display: inline-block; margin-top: 6px; font: 600 .7rem/1.4 var(--hx-label); letter-spacing: .16em; text-transform: uppercase; color: var(--hx-accent-d); text-decoration: none; padding: 4px 0; }
.hx-more:hover, .hx-tel:hover { text-decoration: underline; }
.hx-tel { color: var(--hx-accent-d); font-weight: 600; }
.hx-b-you .hx-tel { color: inherit; }

/* Suggestion and related pills */
.hx-chips-wrap { align-self: stretch; }
.hx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chip, .hx-pill { min-height: 38px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--hx-bg); color: var(--hx-ink); font: 500 .86rem/1.3 var(--hx-font); text-align: left; cursor: pointer; transition: border-color .15s, color .15s; }
.hx-chip:hover, .hx-pill:hover { border-color: var(--hx-ink); }
.hx-chip:focus-visible, .hx-pill:focus-visible, .hx-act:focus-visible, .hx-more:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.hx-rel-h { font: 600 .66rem/1.4 var(--hx-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.hx-pill { min-height: 34px; padding: 6px 12px; font-size: .82rem; }

/* Fallback actions inside the bubble */
.hx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hx-act { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--hx-ink); border-radius: var(--hx-radius); background: transparent; color: var(--hx-ink); font: 600 .68rem/1.2 var(--hx-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.hx-act:hover { background: var(--hx-ink); color: var(--cream); }
.hx-act-red { border-color: var(--hx-head); background: var(--hx-head); color: var(--hx-head-ink); }
.hx-act-red:hover { background: #3a332d; border-color: #3a332d; color: var(--hx-head-ink); }

/* Input bar */
.hx-ask { flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 6px; background: var(--hx-soft); border-top: 1px solid var(--hx-line); }
.hx-ask input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line2); border-radius: 999px; background: var(--hx-bg); font-size: .98rem; color: var(--hx-ink); }
.hx-ask input::placeholder { color: var(--ink3); }
.hx-ask input:focus-visible, .hx-fld input:focus-visible, .hx-fld textarea:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 1px; border-color: var(--hx-accent); background: #fff; }
.hx-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--hx-accent); color: #fff; cursor: pointer; }
.hx-go:hover { background: var(--hx-accent-d); }
.hx-go .ico { width: 20px; height: 20px; stroke-width: 2; }
.hx-foot { flex: none; margin: 0; padding: 2px 16px 10px; background: var(--hx-soft); font-size: .72rem; line-height: 1.4; color: var(--ink3); text-align: center; }

/* Message card (the form, shown in the thread) */
.hx-b-card { width: 100%; max-width: 100%; background: var(--hx-bg); box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-card-p { margin: 0 0 12px; font-size: .9rem; color: var(--hx-ink2); }
.hx-form { display: grid; gap: 10px; }
.hx-fld { display: grid; gap: 5px; margin: 0; }
.hx-fld span { font: 600 .68rem/1.4 var(--hx-label); letter-spacing: .16em; text-transform: uppercase; color: var(--hx-ink2); }
.hx-fld input, .hx-fld textarea { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--hx-field); border-radius: var(--hx-radius); background: var(--hx-soft); font-size: 1rem; }
.hx-fld textarea { resize: vertical; min-height: 84px; }
.hx-fld input[aria-invalid="true"] { border-color: var(--hx-accent-d); }
.hx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-hint { margin: -2px 0 0; font-size: .8rem; color: var(--hx-ink2); }
.hx-err { margin: 0; color: var(--hx-accent-d); font-weight: 600; font-size: .9rem; }
.hx-err:empty { display: none; }
.hx-form-row { display: flex; justify-content: flex-end; gap: 8px; }
.hx-send, .hx-cancel { min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--hx-radius); font: 600 .72rem/1 var(--hx-label); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.hx-send { background: var(--hx-accent); color: #fff; }
.hx-send:hover { background: var(--hx-accent-d); }
.hx-send:disabled { opacity: .7; cursor: wait; }
.hx-cancel { background: transparent; color: var(--hx-ink2); box-shadow: inset 0 0 0 1px var(--line2); }
.hx-cancel:hover { color: var(--hx-ink); box-shadow: inset 0 0 0 1px var(--hx-ink); }
@media (max-width: 640px) {
  /* The red call bar is fixed to the bottom here: the bubble sits above it, the panel above the bubble. */
  /* --hx-bar is the 58px bar plus 8px, so the bubble floats a clear 20px above the bar (round 7). */
  .hx { --hx-gap: 12px; --hx-bar: 66px; left: var(--hx-gap); }
  .hx-panel { width: 100%; max-width: none; }
  .hx-ask input, .hx-fld input, .hx-fld textarea { font-size: 16px; }
  .hx-two { grid-template-columns: 1fr; }
}

/* ---------- Showcase (2026-10-10): brand marquee, logo grids, room gallery, scroll story, photo bands ---------- */
/* Brand marquee (home). CSS only: two identical sets slide left by one set's width. Hover or focus pauses it. */
.brands-sec { padding: clamp(56px, 6vw, 88px) 0 clamp(60px, 6.4vw, 92px); }
.brands-h { font: 600 .76rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 30px; }
.mq { overflow: hidden; }
.mq:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.mq-track { display: flex; width: max-content; animation: mq 95s linear infinite; }
.mq:hover .mq-track, .mq:focus .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
.mq-set { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.mq-set li { height: 64px; padding: 0 clamp(26px, 3vw, 44px); display: flex; align-items: center; }
.mq-set img, .logos img { display: block; opacity: .84; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { width: auto; }
  .mq-set { flex-wrap: wrap; justify-content: center; width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
  .mq-set[aria-hidden="true"] { display: none; }
}
.nomotion .mq-track { width: auto; }
.nomotion .mq-set { flex-wrap: wrap; justify-content: center; width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.nomotion .mq-set[aria-hidden="true"] { display: none; }

/* Static logo grids: all brands (about, smart home), one category per service page (small) */
.brand-grid { margin-top: clamp(64px, 7vw, 104px); padding-top: 34px; border-top: 1px solid var(--line); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px clamp(34px, 4vw, 60px); }
.logos li { min-height: 52px; display: flex; align-items: center; }
.brand-grid-sm { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; }
.brand-grid-sm .logos { gap: 18px clamp(30px, 3.4vw, 48px); }
.brand-grid-sm .logos li { min-height: 44px; }
.brands-note { margin: 28px 0 0; font-size: .8rem; color: var(--ink3); }

/* Home gallery: "Picture it in your space". Big swipeable rooms, scroll-snap, arrows on desktop, no autoplay. */
.show-sec { overflow: hidden; }
.show-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.show-head .sec-head { margin-bottom: clamp(40px, 4.4vw, 60px); }
.show-note { margin: 16px 0 0; font-size: .86rem; }
.sec-dark .show-note { color: #b9afa2; }
.show-nav { display: flex; gap: 10px; flex: none; margin-bottom: clamp(40px, 4.4vw, 60px); }
.show-nav[hidden] { display: none; }
.show-btn { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(246, 241, 234, .42); border-radius: var(--radius); background: none; color: var(--cream); font: 400 1.35rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.show-btn:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.show-btn:disabled { opacity: .32; cursor: default; }
.show-btn:focus-visible, .show-track:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.show-track { --inset: max(var(--gut), (100vw - var(--wrap)) / 2); list-style: none; margin: 0; padding: 0 var(--inset) 6px; display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); scrollbar-width: none; overscroll-behavior-x: contain; }
.show-track::-webkit-scrollbar { display: none; }
.show-slide { flex: 0 0 min(70vw, 1000px); scroll-snap-align: start; }
.show-slide figure { margin: 0; }
.show-img { aspect-ratio: 3 / 2; overflow: hidden; background: #14110f; }
.show-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.show-slide:hover .show-img img { transform: scale(1.025); }
.show-slide figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; max-width: 640px; padding-top: 26px; }
.show-n { padding-top: 6px; font: 600 1.5rem/1 var(--serif); color: #d8cab7; }
.show-slide h3 { margin: 0 0 8px; font-size: clamp(1.6rem, 2.2vw, 2.1rem); color: var(--cream); }
.show-slide p { margin: 0 0 16px; }
@media (max-width: 700px) {
  .show-nav { display: none; }
  .show-slide { flex-basis: 84vw; }
  .show-slide figcaption { gap: 0 14px; padding-top: 20px; }
}

/* Scroll story (smart home). Default, and with reduced motion or no JS: the four scenes stacked, each photo at its light level.
   site.js adds .ss-on otherwise: one sticky full-bleed room, the scene cards scroll over it and set data-scene-now. */
.ss { background: var(--espresso); color: var(--cream); padding-top: var(--pad); }
.ss-head { margin-bottom: clamp(44px, 5vw, 72px); }
.ss-head h2 { color: var(--cream); }
.ss-head .lead { color: var(--cream2); }
.ss-stage { display: none; }
.ss-steps { list-style: none; margin: 0; padding: 0 0 var(--pad); }
.ss-step { width: min(var(--wrap), 100% - 2 * var(--gut)); margin: 0 auto clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.ss-step:last-child { margin-bottom: 0; }
.ss-fig { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0b0a; }
.ss-fig img, .ss-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Round 4: each scene has its own mood, like the home dimmer: a light level plus a solid tint laid over the photo
   (multiply, no gradient). Welcome bright and neutral, dinner warm amber, movie dark and blue, good night near-black
   and cool. Filter and tint crossfade between scenes; reduced motion shows each scene still. */
.ss-fig, .ss-photo { position: relative; --lv: 1.14; --sat: 1.06; --con: 1; --tint: rgba(255, 246, 232, 0); }
.ss-photo { position: absolute; }
.ss-fig img, .ss-photo img { filter: brightness(var(--lv)) saturate(var(--sat)) contrast(var(--con)); }
.ss-fig::after, .ss-photo::after { content: ""; position: absolute; inset: 0; background-color: var(--tint); mix-blend-mode: multiply; pointer-events: none; transition: background-color 1.1s var(--inout); }
.ss-step[data-ss="dinner"] .ss-fig, .ss[data-scene-now="dinner"] .ss-photo { --lv: .86; --sat: 1.15; --tint: rgba(255, 150, 60, .44); }
.ss-step[data-ss="movie"] .ss-fig, .ss[data-scene-now="movie"] .ss-photo { --lv: .46; --sat: .9; --con: 1.05; --tint: rgba(40, 78, 200, .55); }
.ss-step[data-ss="night"] .ss-fig, .ss[data-scene-now="night"] .ss-photo { --lv: .2; --sat: .55; --tint: rgba(34, 44, 92, .55); }
.ss-n { display: block; margin-bottom: 14px; font: 600 2.2rem/1 var(--serif); color: #d8cab7; }
.ss-card h3 { margin: 0 0 10px; font-size: clamp(1.8rem, 2.6vw, 2.5rem); color: var(--cream); }
.ss-card p { margin: 0; color: var(--cream2); }
@media (max-width: 900px) { .ss-step { grid-template-columns: 1fr; gap: 22px; } .ss-fig { aspect-ratio: 4 / 3; } }

.ss-on .ss-stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ss-photo { position: absolute; inset: 0; background: #0d0b0a; }
.ss-photo img { transition: filter 1.1s var(--inout); }
/* Round 3: the scene track sits on a solid plate pinned to the foot of the screen, painted above the cards, so a card
   scrolling past slides under it and never covers the labels. */
.ss-pin, .ss-mtrack { display: none; }
.ss-on .ss-pin { display: block; position: sticky; bottom: 0; z-index: 2; padding: 18px 0 20px; background: #181411; }
.ss-fader { color: var(--cream); }
.ss-on .ss-fader .fader-l { margin-top: 14px; }
.ss-fader .fader i { transition: left 1.1s var(--inout); }
.ss-fader .fader-l li { color: #d9d0c4; transition: color .4s; }
.ss[data-scene-now="dinner"] .ss-fader .fader i { left: 37.5%; }
.ss[data-scene-now="movie"] .ss-fader .fader i { left: 62.5%; }
.ss[data-scene-now="night"] .ss-fader .fader i { left: 87.5%; }
.ss-on .ss-steps { position: relative; margin-top: -100vh; margin-top: -100svh; padding-bottom: 0; }
.ss-on .ss-step { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; margin-bottom: 0; padding-bottom: 12vh; }
.ss-on .ss-fig { display: none; }
.ss-on .ss-card { width: min(430px, 100%); padding: clamp(26px, 3vw, 40px); background: rgba(29, 26, 23, .88); }
@media (max-width: 640px) { .ss-fader .fader-l { font-size: .62rem; letter-spacing: .08em; } .ss-on .ss-pin { bottom: 128px; padding: 0; background: none; } }
/* Round 4, phones: the room fills the top of the screen only (a wider, sharper crop, TV and sofa in view); the card
   and the scene track sit on the dark floor below it instead of over the TV. */
/* Round 5, phones: three fixed bands. Room photo on top, the scene track on its own solid band right under it, the
   card held (sticky) just below the track. The stage is painted above the cards, so a card arriving or leaving slides
   under the photo and the track and never shows through them; the card band ends above the bubble and call bar. */
@media (max-width: 640px) {
  .ss { --ph: 50vh; --tb: 76px; }
  @supports (height: 1svh) { .ss { --ph: 50svh; } }
  .ss-on .ss-stage { z-index: 2; pointer-events: none; }
  .ss-on .ss-steps { z-index: 1; }
  .ss-on .ss-photo { bottom: auto; height: var(--ph); }
  .ss-on .ss-photo img { object-position: 50% 62%; }
  .ss-on .ss-pin { display: none; }
  .ss-on .ss-mtrack { display: block; position: absolute; left: 0; right: 0; top: var(--ph); height: var(--tb); padding-top: 12px; background: #181411; }
  .ss-on .ss-fader .fader-l { margin-top: 10px; }
  .ss-on .ss-steps .ss-step { align-items: flex-start; padding: 0; }
  /* room after the last card so it lets go about when the stage does */
  .ss-on .ss-steps { padding-bottom: calc(var(--ph) - var(--tb) - 144px); }
  .ss-on .ss-steps .ss-card { position: sticky; top: calc(var(--ph) + var(--tb) + 14px); padding: 16px 18px; }
  .ss-on .ss-steps .ss-card h3 { font-size: 1.5rem; margin-bottom: 6px; }
  .ss-on .ss-steps .ss-n { display: inline; font-size: 1.1rem; margin: 0; }
}

/* Service pages: one full-bleed room photo, labelled as an example */
.band { margin: 0; background: var(--espresso); }
.band-img { aspect-ratio: 21 / 9; max-height: 88vh; overflow: hidden; }
.band-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band-cap { padding: 16px 0 18px; font-size: .84rem; color: #c9bfb2; }
.band-cap span { margin-right: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; color: var(--cream); }
@media (max-width: 700px) { .band-img { aspect-ratio: 4 / 3; } }

/* ---------- Round 1: room feature (climate, networking, security) ---------- */
.rf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.rf-fig, figure.story-img, figure.feature-img { margin: 0; }
.feature-img figcaption { position: static; }
.rf-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rf-fig figcaption, .story-img figcaption, .feature-img figcaption { margin-top: 10px; font-size: .8rem; color: var(--ink3); }
.sec-dark .story-img figcaption { color: #b9afa3; }
.rf-body h2 { margin-bottom: .6em; }
.rf-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line2); }
.rf-list li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line2); }
.rf-n { font: 400 2rem/1 var(--serif); color: var(--red); }
.rf-list h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: 0; }
.rf-list p { margin: 0; color: var(--ink2); }
@media (max-width: 900px) { .rf { grid-template-columns: 1fr; } }

/* ---------- Round 1: sector pages, each with its own layout ---------- */
.sx-sub { margin: 34px 0 14px; font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.sx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sx-chips li { padding: 9px 16px; border: 1px solid var(--line2); border-radius: 999px; font-weight: 600; font-size: .92rem; }
.sx-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sx-tile a { display: flex; flex-direction: column; gap: 22px; height: 100%; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; font: 400 1.45rem/1.2 var(--serif); transition: border-color .2s, color .2s; }
.sx-tile a:hover { border-color: var(--red); color: var(--red); }
.sx-tile .ico { width: 32px; height: 32px; color: var(--red); }
@media (max-width: 900px) { .sx-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sx-tiles { grid-template-columns: 1fr; } }
.sx-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line2); }
.sx-timeline li { position: relative; padding: 0 0 34px; }
.sx-timeline li::before { content: ""; position: absolute; left: -34px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.sx-timeline .tl-n { display: block; font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; color: var(--ink3); margin-bottom: 6px; }
.sx-timeline h3 { margin: 0 0 .3em; }
.sx-timeline p { margin: 0; color: var(--ink2); }
.sx-sol { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: sx; border-top: 1px solid var(--dline); }
.sx-sol a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--dline); text-decoration: none; font: 400 1.5rem/1.25 var(--serif); color: var(--cream); }
.sx-sol a::before { counter-increment: sx; content: "0" counter(sx); font: 600 .74rem/1 var(--sans); letter-spacing: .2em; color: #e9746a; }
.sx-sol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.sx-big { list-style: none; margin: 0; padding: 0; }
.sx-big li { padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line2); font: 400 clamp(2rem, 4.6vw, 3.6rem)/1.08 var(--serif); }
.sx-big li:last-child { border-bottom: 1px solid var(--line2); }
.sx-rows { list-style: none; margin: 0; padding: 0; }
.sx-rows li { display: grid; grid-template-columns: 70px 1fr; column-gap: 18px; padding: 24px 0; border-top: 1px solid var(--line2); }
.sx-rows .sr-n { grid-row: span 2; font: 400 2.4rem/1 var(--serif); color: var(--red); }
.sx-rows h3 { margin: 0 0 .3em; }
.sx-rows p { margin: 0; color: var(--ink2); }

/* ---------- Round 1: about page promises ---------- */
.proms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.prom { border-top: 1px solid var(--line2); padding-top: 22px; }
.prom-n { display: block; font: 400 2.2rem/1 var(--serif); color: var(--red); margin-bottom: 14px; }
.prom h3 { font-size: 1.4rem; margin: 0 0 .4em; }
.prom p { margin: 0; color: var(--ink2); }
@media (max-width: 1000px) { .proms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proms { grid-template-columns: 1fr; } }
.about-area { margin: 26px 0 0; font-weight: 600; color: var(--ink2); }

/* ---------- Round 1: guide next step ---------- */
.art-next { margin: 56px 0 0; padding: clamp(28px, 4vw, 44px); background: var(--espresso); color: var(--cream); border-radius: var(--radius); }
.art-next h2 { margin: 0 0 .4em; color: var(--cream); }
.art-next p { color: #d9d0c4; }
.art-next .eyebrow { color: #e9746a; }
.art-next .btn-ghost { color: var(--cream); border-color: rgba(246, 241, 234, .5); }

/* ---------- Round 1: logo grids at one visual weight, no ragged rows ---------- */
.logos { justify-content: center; }
.logos.logos-all, .brand-grid-sm .logos.logos-all { gap: 30px 0; }
.logos-all li { flex: 0 0 calc(100% / var(--cols, 8)); justify-content: center; padding: 0 12px; }
.logos-all img { max-width: 100%; height: auto; }
@media (max-width: 640px) { .logos-all li { flex-basis: calc(100% / var(--cols-m, 3)); padding: 0 8px; } }

/* ---------- Simple to use (2026-10-12): one step per screen, plain words, big targets ---------- */
/* Footer: the plan link is a text link (the page's closing band already carries the button). */
.site-footer .foot-plan { color: #f2a59c; min-height: 48px; font-size: .9rem; }
.site-footer .foot-plan:hover { color: #fff; }
/* On the planner itself the header quote button would only point back at the page. */
.hdr-quote[aria-current] { display: none; }

/* Planner page: a short title band so step 1 is on the first screen. */
.is-planner .page-hero { padding: clamp(28px, 3vw, 44px) 0 clamp(24px, 2.6vw, 36px); }
.is-planner .page-hero h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); max-width: none; }
.is-planner .page-hero .crumbs ol { margin-bottom: 12px; }
.is-planner .page-hero + .sec { padding-top: clamp(24px, 3vw, 44px); }

/* Service pages: a plain way back to the list. */
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: -10px 0 14px; font: 600 1rem/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.back-link span { font-size: 1.2rem; color: var(--red); transition: transform .2s; }
.back-link:hover span { transform: translateX(-4px); }
.has-img .back-link, .has-img .back-link span { color: #fff; }
.has-img .back-link { display: flex; width: max-content; }

/* Gallery: arrows and position dots under the rooms, on every screen size. */
.show-nav { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin: clamp(26px, 3vw, 40px) auto 0; }
.show-nav[hidden] { display: none; }
.show-dots { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.show-dots li { width: 9px; height: 9px; border-radius: 50%; background: rgba(246, 241, 234, .3); transition: background .3s, transform .3s; }
.show-dots li.is-on { background: var(--cream); transform: scale(1.3); }
.show-track { position: relative; }
@media (max-width: 700px) {
  .show-nav { display: flex; justify-content: space-between; gap: 10px; }
  .show-btn { width: 54px; height: 54px; }
  .show-dots { gap: 8px; }
}

/* Scroll story: say plainly that the page scrolls through the scenes. */
.ss-cue { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 600 1rem/1.3 var(--sans); color: var(--cream); }
.ss-cue-a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(246, 241, 234, .5); border-radius: 50%; font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .ss-cue-a { animation: cue 1.8s var(--inout) infinite; }
  @keyframes cue { 50% { transform: translateY(6px); } }
}

/* Planner: an obvious step count, big tiles with icons, plain labels. */
.planner-count { font: 700 1.05rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--red-d); margin-bottom: 14px; }
.planner-progress { height: 6px; border-radius: 3px; }
.opt span { min-height: 66px; padding: 14px 18px; font-size: 1.06rem; gap: 14px; }
.opt span .ico { display: block; width: 26px; height: 26px; flex: none; color: var(--red); }
.opt-sm span { min-height: 52px; padding: 10px 20px; }
.fld > span { font: 600 1rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.fld input, .fld select, .fld textarea { min-height: 56px; font-size: 1.06rem; }
.form-err { font-size: 1.05rem; }
.planner-nav .btn { min-height: 56px; }

/* Phones and tablets: every link that is not inside a sentence is a 48px target. */
@media (max-width: 900px) {
  .foot ul { gap: 0; }
  .foot ul a, .foot-base a, .sources li a, .show-slide .more, .foot-phone { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
  .foot ul a { font-size: 1.05rem; }
  .crumbs ol { align-items: center; row-gap: 0; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
  .crumbs li[aria-current] { display: inline-flex; align-items: center; min-height: 48px; }
  .foot-base { flex-wrap: wrap; }
  a.more, .or-call a, .feature h3 a, .feature-h a { display: inline-flex; align-items: center; min-height: 48px; }
  .big-phone { display: inline-flex; align-items: center; min-height: 56px; }
}
.hero-note { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 10px; z-index: 2; margin: 0; font-size: .78rem; color: rgba(246, 241, 234, .82); }
/* Feature rows (services hub, sectors): the whole row is one link target (stretched title link). */
.feature { position: relative; }
.feature h3 a::after, .feature-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.feature .more { position: relative; z-index: 2; }
.feature:has(h3 a:hover, .feature-h a:hover) .more { gap: 14px; }

/* Helper bubble: hidden while the menu is open, and on phones it steps aside while a page's main buttons sit
   at the bottom of the screen (site.js sets .is-away), so it never covers the next step. */
.nav-open .hx { display: none; }
.hx-fab { transition: background .2s, opacity .25s, visibility 0s; }
.hx.is-away:not(.is-open) .hx-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; }

/* Helper bubble: its label stays visible on phones too ("Ask a question"). */
@media (max-width: 700px) {
  .hx-fab { width: auto; padding: 0 18px 0 4px; justify-content: flex-start; letter-spacing: .08em; }
  .hx-fab span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hx-disc { background: rgba(246, 241, 234, .1); }
  .hx-dot { top: 2px; left: 34px; right: auto; }
}