/* LuxGrid design system: header, homepage hero and callback bar.
   Built to design/homepage-hero-mockup-v1.webp. Rules: CLAUDE.md "LUXGRID DESIGN SYSTEM". */
:root {
  --lux-navy: #0E2A47;
  --lux-teal: #00B5B8;
  --lux-light: #E8F6F6;
  --lux-white: #FFFFFF;
  --lux-deep: #041824;
  --lux-head: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  --lux-body: "DM Sans", Helvetica, Arial, sans-serif;
  /* Sitewide side spacing (matches the hero): content max width and left/right padding */
  --lux-max: 1680px;
  --lux-gutter: clamp(16px, 4.2vw, 80px);
  --lux-header-h: 76px;
}

.lux-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lux-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lux-header a:focus-visible, .lux-header button:focus-visible, .lux-hero a:focus-visible, .lux-cta:focus-visible,
.lux-callback input:focus-visible, .lux-callback select:focus-visible, .lux-callback button:focus-visible {
  outline: 2px solid var(--lux-teal); outline-offset: 3px;
}

/* Header */
.lux-header { position: sticky; top: 0; z-index: 1000; background: var(--lux-white); box-shadow: 0 1px 0 rgba(14, 42, 71, .08); font-family: var(--lux-body); }
.lux-header__inner { display: flex; align-items: center; gap: 24px; height: var(--lux-header-h); padding: 0 var(--lux-gutter); max-width: var(--lux-max); margin: 0 auto; box-sizing: border-box; }
.lux-logo { display: block; flex: none; line-height: 0; }
.lux-logo img { width: 200px; height: auto; }
.lux-nav { margin: 0 auto; }
.lux-nav ul { display: flex; list-style: none; gap: clamp(20px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.lux-nav a { display: block; white-space: nowrap; padding: 8px 0; color: var(--lux-navy); font-size: 16px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.lux-nav a:hover { border-bottom-color: var(--lux-teal); }
.lux-phone { display: flex; align-items: center; gap: 10px; margin-left: 0; color: var(--lux-navy); font-family: var(--lux-head); font-size: 21px; font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Header phone (Ryan, 18 Oct 2026): teal circle, outlined handset with call waves, a short ring every 4 s and a soft pulse; fills on hover */
.lux-phone__badge { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--lux-light); box-shadow: inset 0 0 0 1.5px rgba(0, 181, 184, .55); }
.lux-phone__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 181, 184, .45); }
.lux-phone .lux-phone__badge .lux-icon { width: 22px; height: 22px; fill: none; stroke: var(--lux-teal); stroke-width: 1.8; transform-origin: 50% 60%; }
.lux-phone__text { display: flex; flex-direction: column; line-height: 1.1; }
.lux-phone__text small { font-family: var(--lux-body); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lux-teal); }
.lux-phone:hover { color: var(--lux-teal); }
.lux-phone:hover .lux-phone__badge { background: var(--lux-teal); }
.lux-phone:hover .lux-phone__badge .lux-icon { stroke: var(--lux-white); }
@media (prefers-reduced-motion: no-preference) {
  .lux-phone__badge { transition: background-color .2s ease; }
  .lux-phone__badge .lux-icon { animation: lux-ring 4s ease-in-out infinite; }
  .lux-phone__badge::after { animation: lux-ring-pulse 4s ease-out infinite; }
}
@keyframes lux-ring { 0%, 76%, 100% { transform: rotate(0); } 79% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 85% { transform: rotate(-10deg); } 88% { transform: rotate(8deg); } 91% { transform: rotate(-4deg); } 94% { transform: rotate(0); } }
@keyframes lux-ring-pulse { 0%, 76% { box-shadow: 0 0 0 0 rgba(0, 181, 184, .45); } 100% { box-shadow: 0 0 0 12px rgba(0, 181, 184, 0); } }
.lux-nav-toggle { display: none; margin-left: auto; padding: 10px; background: none; border: 0; color: var(--lux-navy); cursor: pointer; }
.lux-nav-toggle .lux-icon { width: 28px; height: 28px; stroke-width: 2; }

@media (max-width: 1099px) {
  :root { --lux-header-h: 68px; }
  .lux-logo img { width: 150px; }
  .lux-nav-toggle { display: block; }
  .lux-phone { order: 2; margin-left: 0; font-size: 18px; }
  .lux-nav-toggle { order: 3; margin-left: 0; }
  .lux-header__inner { gap: 16px; justify-content: space-between; }
  .lux-header__inner > .lux-logo { margin-right: auto; }
  .lux-nav { display: none; position: absolute; top: var(--lux-header-h); left: 0; right: 0; margin: 0; background: var(--lux-white); box-shadow: 0 12px 24px rgba(4, 24, 36, .15); }
  .lux-nav.is-open { display: block; }
  .lux-nav ul { flex-direction: column; gap: 0; padding: 8px var(--lux-gutter) 16px; }
  .lux-nav a { padding: 14px 0; border-bottom: 1px solid var(--lux-light); }
}
@media (max-width: 479px) {
  .lux-logo img { width: 128px; }
  .lux-header__inner { gap: 10px; }
  .lux-nav-toggle { padding: 6px; margin-right: -6px; }
  .lux-phone__text { font-size: 16px; }
  .lux-phone__text small { display: none; }
  .lux-phone__badge { width: 36px; height: 36px; }
  .lux-phone .lux-phone__badge .lux-icon { width: 19px; height: 19px; }
}
@media (max-width: 379px) {
  .lux-logo img { width: 112px; }
  .lux-phone { gap: 6px; }
  .lux-phone__text { font-size: 15px; }
  .lux-phone__badge { width: 32px; height: 32px; }
}

@media (min-width: 1440px) {
  :root { --lux-header-h: 88px; }
  .lux-logo img { width: 240px; }
  .lux-nav a { font-size: 17px; }
  .lux-phone { font-size: 23px; }
}

/* Hero */
.lux-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--lux-deep); color: var(--lux-white); font-family: var(--lux-body); }
.lux-hero__media, .lux-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lux-hero__media { z-index: -1; }
.lux-hero__media img { object-fit: cover; object-position: right center; }
.lux-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 24, 36, .82) 0%, rgba(4, 24, 36, .76) 40%, rgba(4, 24, 36, .7) 54%, rgba(4, 24, 36, .52) 62%, rgba(4, 24, 36, .26) 72%, rgba(4, 24, 36, .08) 80%, rgba(4, 24, 36, 0) 86%); } /* reaches past "Battery" in the H1 (Ryan, 18 Oct 2026) */
.lux-hero__inner { box-sizing: border-box; max-width: var(--lux-max); min-height: clamp(560px, 44.3vw, 760px); margin: 0 auto; padding: clamp(48px, 4.6vw, 80px) var(--lux-gutter) clamp(48px, 5vw, 88px); }
.lux-hero__content { max-width: min(840px, 54vw); }
.lux-eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 0; font-size: 13px; line-height: 1.6; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--lux-white); }
.lux-eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--lux-teal); flex: none; }
.lux-hero h1 { margin: 0 0 24px; padding: 0; font-family: var(--lux-head); font-size: clamp(34px, 3.85vw, 64px); font-weight: 800; line-height: 1.06; letter-spacing: -.015em; color: var(--lux-white); }
.lux-hero h1 span { color: var(--lux-teal); }
/* Same diagonal gradient as the hero icons: teal corners, light in the middle */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lux-hero h1 span { background: linear-gradient(135deg, var(--lux-teal) 0%, var(--lux-light) 50%, var(--lux-teal) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; filter: drop-shadow(0 0 10px rgba(0, 181, 184, .35)); }
}
.lux-hero__lead { max-width: 36em; /* two lines on desktop (Ryan, 18 Oct 2026) */ margin: 0 0 30px; padding: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; letter-spacing: .01em; color: var(--lux-white); }
.lux-hero ul.lux-services { display: flex; margin: 0 0 34px; padding: 0; list-style: none; }
.lux-services li { list-style: none; margin: 0; padding: 0 clamp(14px, 1.6vw, 28px); border-left: 1px solid rgba(255, 255, 255, .35); }
.lux-services li:first-child { padding-left: 0; border-left: 0; }
.lux-services a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; color: var(--lux-white); font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.lux-services .lux-icon { width: 42px; height: 42px; color: var(--lux-teal); stroke-width: 1.4; }
/* Sitewide icon effect (Ryan, 18 Oct 2026): the hero's diagonal gradient and soft glow on every content icon.
   Dark or photo backgrounds: teal > light blue > teal (#lux-grad-light). White or light backgrounds: navy > teal > navy (#lux-grad-dark).
   Gradients live in src/partials/callback-bar.html (installed on every page). Small control icons (button arrows, form fields,
   chevrons, menu, phone) stay solid. New icons: add .lux-icon--light or .lux-icon--dark, or a context selector below. */
.lux-icon--light, .lux-hero .lux-services .lux-icon, .lux-card__body > .lux-icon, .lux-outcomes .lux-icon, .lux-process__assure > .lux-icon { stroke: url(#lux-grad-light); filter: drop-shadow(0 0 6px rgba(0, 181, 184, .35)); }
.lux-icon--dark, .lux-benefits .lux-icon, .lux-features .lux-icon, .lux-step__icon .lux-icon { stroke: url(#lux-grad-dark); filter: drop-shadow(0 0 4px rgba(0, 181, 184, .25)); }
.lux-hero .lux-services .lux-icon { stroke-width: 1.6; }

/* Standard CTA button, sitewide (approved 17 Oct 2026, option B2): glass pill, glowing teal edge, teal halo icon.
   Markup: <a class="lux-cta" href="…">Label <span class="lux-cta__icon"><svg class="lux-icon" aria-hidden="true"><use href="#lux-i-…"/></svg></span></a>
   Designed for dark or photo backgrounds. */
.lux-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 9px 9px 9px 30px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(rgba(4, 24, 36, .45), rgba(4, 24, 36, .45)) padding-box, linear-gradient(120deg, var(--lux-teal), rgba(255, 255, 255, .85) 45%, var(--lux-teal)) border-box; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 28px rgba(0, 181, 184, .35), inset 0 1px 0 rgba(255, 255, 255, .25); color: var(--lux-white); font-size: clamp(17px, 1.2vw, 19px); font-weight: 700; text-decoration: none; }
.lux-cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none; }
.lux-cta__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lux-deep); box-shadow: 0 0 0 4px rgba(4, 24, 36, .55), 0 0 14px rgba(0, 181, 184, .35); flex: none; }
.lux-cta .lux-icon { width: 20px; height: 20px; color: var(--lux-teal); stroke-width: 2.4; }
.lux-cta:hover { box-shadow: 0 0 36px rgba(0, 181, 184, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: no-preference) {
  .lux-nav a, .lux-phone, .lux-services a, .lux-cta, .lux-services .lux-icon, .lux-callback__form button { transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .lux-services a:hover .lux-icon { transform: translateY(-2px); }
  .lux-cta:hover { transform: translateY(-2px); }
  .lux-cta:hover::after { left: 130%; transition: left .7s ease; }
  .lux-cta:hover .lux-icon { transform: translateX(3px); }
  .lux-hero .lux-cta:hover .lux-icon { transform: translateY(2px); }
  .lux-cta .lux-icon { transition: transform .2s ease; }
}
.lux-services a:hover { color: var(--lux-light); }

/* Tablets: the photo's dark band is narrower than the text, so darken more of it */
@media (min-width: 768px) and (max-width: 1279px) {
  .lux-hero__media::after { background: linear-gradient(90deg, rgba(4, 24, 36, .88) 0%, rgba(4, 24, 36, .7) 50%, rgba(4, 24, 36, .2) 85%, rgba(4, 24, 36, 0) 100%); }
  .lux-hero__content { max-width: 640px; }
}
@media (max-width: 767px) {
  .lux-hero__content { max-width: none; }
}
@media (max-width: 767px) {
  .lux-hero__media::after { background: linear-gradient(180deg, rgba(4, 24, 36, .82) 0%, rgba(4, 24, 36, .7) 55%, rgba(4, 24, 36, .45) 100%); }
  .lux-hero__media img { object-position: center; }
  .lux-hero__inner { min-height: 0; padding-top: 40px; padding-bottom: 44px; }
  .lux-eyebrow { font-size: 11px; letter-spacing: .22em; gap: 12px; margin-bottom: 16px; }
  .lux-eyebrow::before { width: 28px; }
  .lux-hero h1 { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 18px; }
  .lux-hero ul.lux-services { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .lux-services li { padding: 0 8px; }
  .lux-services li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Callback bar: sitewide (approved 17 Oct 2026, option 2: solid teal band). Markup lives in src/partials/callback-bar.html */
.lux-callback { position: relative; z-index: 1; background: var(--lux-teal); font-family: var(--lux-body); color: var(--lux-navy); }
.lux-callback__card { box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; max-width: var(--lux-max); margin: 0 auto; padding: 26px var(--lux-gutter); }
.lux-callback__intro { display: flex; align-items: center; gap: 18px; padding-right: 24px; border-right: 1px solid rgba(14, 42, 71, .25); }
.lux-callback__badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lux-navy); flex: none; }
.lux-callback__badge .lux-icon { width: 26px; height: 26px; fill: none; stroke: var(--lux-white); stroke-width: 1.8; }
.lux-callback h2 { margin: 0 0 2px; padding: 0; font-family: var(--lux-head); font-size: 23px; font-weight: 700; line-height: 1.25; color: var(--lux-navy); }
.lux-callback__intro p { margin: 0; padding: 0; font-size: 14px; line-height: 1.4; color: var(--lux-navy); }
.lux-callback__form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 14px; margin: 0; position: relative; }
.lux-field { position: relative; display: flex; align-items: center; }
.lux-field > .lux-icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--lux-navy); opacity: .75; pointer-events: none; }
.lux-field input, .lux-field select { box-sizing: border-box; width: 100%; height: 54px; margin: 0; padding: 0 16px 0 46px; border: 1px solid var(--lux-white); border-radius: 6px; background: var(--lux-white); color: var(--lux-navy); font: 400 15px/1 var(--lux-body); -webkit-appearance: none; appearance: none; }
.lux-field input::placeholder { color: rgba(14, 42, 71, .65); opacity: 1; }
.lux-field select { padding-right: 40px; cursor: pointer; }
.lux-field select:invalid { color: rgba(14, 42, 71, .65); }
.lux-field .lux-chevron { position: absolute; left: auto; right: 14px; width: 18px; height: 18px; color: var(--lux-navy); pointer-events: none; }
.lux-field input:hover, .lux-field select:hover { border-color: var(--lux-navy); box-shadow: 0 0 0 3px rgba(14, 42, 71, .2); }
.lux-field [aria-invalid="true"] { border-color: #C0392B; }
.lux-callback__form button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 28px; border: 0; border-radius: 6px; background: var(--lux-navy); color: var(--lux-white); font: 700 17px/1 var(--lux-body); cursor: pointer; white-space: nowrap; }
.lux-callback__form button:hover { background: var(--lux-deep); }
.lux-callback__form button[disabled] { opacity: .7; cursor: wait; }
.lux-callback__form button .lux-icon { width: 20px; height: 20px; stroke-width: 2; }
.lux-callback__msg { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--lux-light); font-size: 14px; color: var(--lux-navy); }
.lux-callback__msg:empty { display: none; }
.lux-callback__msg.is-error { border-left: 4px solid #C0392B; }
.lux-callback input:focus-visible, .lux-callback select:focus-visible, .lux-callback button:focus-visible { outline-color: var(--lux-navy); }
.lux-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 1359px) {
  .lux-callback__card { grid-template-columns: 1fr; gap: 16px; }
  .lux-callback__intro { padding-right: 0; border-right: 0; }
}
@media (max-width: 899px) {
  .lux-callback__form { grid-template-columns: 1fr 1fr; }
  .lux-callback__form button { grid-column: 1 / -1; }
}
@media (max-width: 539px) {
  .lux-callback__card { padding-top: 26px; padding-bottom: 28px; }
  .lux-callback__form { grid-template-columns: 1fr; gap: 12px; }
  .lux-callback__badge { width: 48px; height: 48px; }
}

/* "Explore Solutions" target: clear the sticky header */
#solar-solutions { scroll-margin-top: calc(var(--lux-header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Homepage Sections 2 & 3: Our Solar Solutions + Why Choose LuxGrid (approved mockup, 17 Oct 2026) */
.lux-wrap { box-sizing: border-box; max-width: var(--lux-max); margin: 0 auto; padding: 0 var(--lux-gutter); }
.lux-solutions, .lux-why { background: var(--lux-white); color: var(--lux-navy); font-family: var(--lux-body); }
.lux-solutions ul, .lux-why ul { margin: 0; padding: 0; list-style: none; }
.lux-solutions li, .lux-why li { list-style: none; margin: 0; padding: 0; }
.lux-solutions h2, .lux-solutions h3, .lux-why h2, .lux-why h3, .lux-solutions p, .lux-why p { margin: 0; padding: 0; }
.lux-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--lux-navy); }
.lux-h2 { font-family: var(--lux-head); font-size: clamp(30px, 3.4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; color: var(--lux-navy); }
.lux-h2 span { color: var(--lux-teal); }
.lux-h2--sm { font-size: clamp(26px, 2.45vw, 38px); }
.lux-solutions .lux-lead, .lux-why .lux-lead { margin-top: 20px; max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(14, 42, 71, .85); }

.lux-solutions { position: relative; z-index: 2; padding: clamp(32px, 2.6vw, 44px) 0 0; }
.lux-solutions__head { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.lux-solutions__intro { flex: 0 1 600px; }
.lux-solutions .lux-benefits { display: flex; flex: 0 1 620px; }
.lux-benefits li { flex: 1; padding: 0 clamp(16px, 2.2vw, 36px); border-left: 1px solid rgba(14, 42, 71, .14); }
.lux-benefits li:first-child { border-left: 0; padding-left: 0; }
.lux-benefits .lux-icon { display: block; width: 50px; height: 50px; margin-bottom: 12px; color: var(--lux-teal); stroke-width: 1.5; }
.lux-solutions .lux-benefits h3 { font-family: var(--lux-head); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--lux-navy); }
.lux-solutions .lux-benefits p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(14, 42, 71, .78); }

.lux-solutions .lux-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.3vw, 20px); margin-top: clamp(28px, 2.4vw, 40px); }
.lux-card { position: relative; display: block; overflow: hidden; aspect-ratio: 471 / 438; border-radius: 6px; background: var(--lux-deep); color: var(--lux-white); text-decoration: none; isolation: isolate; }
.lux-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lux-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 24, 36, 0) 30%, rgba(4, 24, 36, .5) 55%, rgba(14, 42, 71, .96) 100%); opacity: .95; }
.lux-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0 clamp(22px, 2.7vw, 42px) clamp(22px, 2.3vw, 36px); }
.lux-card .lux-icon { width: 54px; height: 54px; color: var(--lux-teal); stroke-width: 1.4; }
.lux-solutions .lux-card h3 { margin-top: 12px; font-family: var(--lux-head); font-size: clamp(20px, 1.65vw, 26px); font-weight: 700; line-height: 1.2; color: var(--lux-white); }
.lux-card__text { display: block; margin-top: 12px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; color: var(--lux-white); }
.lux-card__more { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--lux-white); }
.lux-card__arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--lux-teal); border-radius: 50%; }
.lux-card__arrow .lux-icon { width: 18px; height: 18px; stroke-width: 2; }
.lux-card:focus-visible { outline: 3px solid var(--lux-teal); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .lux-card img { transition: transform .25s ease; }
  .lux-card::after { transition: opacity .2s ease; }
  .lux-card__arrow .lux-icon { transition: transform .2s ease; }
}
.lux-card:hover img, .lux-card:focus-visible img { transform: scale(1.03); }
.lux-card:hover::after, .lux-card:focus-visible::after { opacity: 1; }
.lux-card:hover .lux-card__arrow .lux-icon, .lux-card:focus-visible .lux-card__arrow .lux-icon { transform: translateX(3px); }

.lux-why { position: relative; z-index: 1; margin-top: -90px; padding: 140px 0 clamp(56px, 5vw, 84px); overflow: hidden; }
.lux-why__media { position: absolute; left: 0; bottom: 0; width: 37%; height: 78%; }
.lux-why__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lux-why__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 45%, #fff 100%), linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 32%); }
.lux-why__content { margin-left: 45%; }
.lux-why .lux-lead { max-width: 41em; margin-top: 16px; } /* two lines on desktop (Ryan, 18 Oct 2026) */
.lux-why .lux-features { display: flex; margin-top: 36px; }
.lux-features li { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 auto; padding: 0 clamp(10px, 1vw, 16px); border-left: 1px solid rgba(14, 42, 71, .14); }
.lux-features li:first-child { padding-left: 0; border-left: 0; }
.lux-features .lux-icon { flex: none; width: 32px; height: 32px; color: var(--lux-teal); stroke-width: 1.5; }
.lux-why .lux-features h3 { font-family: var(--lux-head); font-size: 13px; white-space: nowrap; font-weight: 700; line-height: 1.3; color: var(--lux-navy); }
.lux-why .lux-features p { margin-top: 5px; font-size: 12px; line-height: 1.45; color: rgba(14, 42, 71, .78); }

@media (max-width: 1199px) {
  .lux-solutions__head { flex-direction: column; align-items: flex-start; gap: 32px; padding: 0; }
  .lux-solutions__intro { flex: none; }
  .lux-solutions .lux-benefits { flex: none; width: 100%; }
  .lux-why__content { margin-left: 42%; }
}
@media (max-width: 1359px) {
  .lux-why .lux-features { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .lux-features li:nth-child(3) { padding-left: 0; border-left: 0; }
  .lux-why .lux-features h3 { white-space: normal; }
}
@media (max-width: 1023px) {
  .lux-solutions .lux-cards { grid-template-columns: 1fr 1fr; }
  .lux-solutions .lux-cards li:last-child { grid-column: 1 / -1; }
  .lux-solutions .lux-cards li:last-child .lux-card { aspect-ratio: 2.1 / 1; }
  .lux-why { margin-top: 0; padding-top: 0; }
  .lux-why__media { position: relative; width: 100%; height: 300px; }
  .lux-why__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%); }
  .lux-why__content { margin-left: 0; padding-top: 8px; }
}
@media (max-width: 767px) {
  .lux-solutions .lux-cards { grid-template-columns: 1fr; }
  .lux-solutions .lux-cards li:last-child .lux-card { aspect-ratio: 471 / 438; }
  .lux-solutions .lux-benefits { flex-direction: column; gap: 22px; }
  .lux-benefits li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 0; border-left: 0; }
  .lux-benefits .lux-icon { grid-row: span 2; margin: 0; }
  .lux-solutions .lux-benefits p { margin-top: 2px; }
  .lux-benefits h3 br, .lux-h2 br { display: none; }
  .lux-why__media { height: 240px; }
}
@media (max-width: 539px) {
  .lux-why .lux-features { grid-template-columns: 1fr; gap: 18px; }
  .lux-features li { padding: 0; border-left: 0; }
}

/* Sitewide side spacing: older Divi rows (header, page sections, footer) follow the hero's edges.
   Blog article text (.container in posts) keeps its narrower reading width. */
.et-l .et_pb_row { width: calc(100% - 2 * var(--lux-gutter)) !important; max-width: calc(var(--lux-max) - 2 * var(--lux-gutter)) !important; }

/* Homepage Section 4: Our Process (approved mockup 18 Oct 2026) */
.lux-process { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(115deg, var(--lux-deep) 0%, var(--lux-navy) 60%, var(--lux-navy) 100%); color: var(--lux-white); font-family: var(--lux-body); }
.lux-process__media { position: absolute; top: 0; right: 0; z-index: -2; width: 52%; height: 62%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, #000 45%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, #000 45%, transparent 100%); mask-composite: intersect; }
.lux-process__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 66%; filter: brightness(.78) saturate(.9) contrast(1.05); }
.lux-process__wedge { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(232, 246, 246, .07), rgba(232, 246, 246, 0) 70%); clip-path: polygon(47% 0, 56% 0, 64% 62%, 40% 100%, 0 100%, 0 100%); pointer-events: none; }
.lux-process__swoosh { position: absolute; right: 0; bottom: 0; z-index: -1; width: 58%; height: 170px; fill: none; stroke: var(--lux-teal); pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 181, 184, .7)); }
.lux-process__swoosh path:nth-child(1) { stroke-width: 2.5; opacity: .9; }
.lux-process__swoosh path:nth-child(2) { stroke-width: 1.5; opacity: .5; }
.lux-process__swoosh path:nth-child(3) { stroke-width: 1; opacity: .35; }
.lux-process__inner { position: relative; padding-top: clamp(48px, 4.6vw, 80px); padding-bottom: clamp(48px, 5.4vw, 92px); }
.lux-process .lux-process__eyebrow { margin-bottom: 18px; color: var(--lux-white); }
.lux-process .lux-process__title { margin: 0; padding: 0; max-width: 880px; font-family: var(--lux-head); font-size: clamp(34px, 4.3vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; color: var(--lux-white); }
.lux-process__title span { color: var(--lux-teal); }
.lux-process .lux-process__lead { margin: 18px 0 0; padding: 0; max-width: 760px; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.5; color: var(--lux-white); }

.lux-process ol.lux-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 2.7vw, 46px); margin: clamp(36px, 3.4vw, 56px) 0 0; padding: 0; list-style: none; }
.lux-step { --lux-step-icon: clamp(72px, 6.4vw, 110px); position: relative; list-style: none; margin: 0; padding: calc(var(--lux-step-icon) + 18px) clamp(18px, 1.8vw, 30px) clamp(20px, 1.8vw, 30px); }
.lux-step::before { content: ""; position: absolute; top: calc(var(--lux-step-icon) / 2); right: 0; bottom: 0; left: 0; z-index: -1; border: 1px solid rgba(0, 181, 184, .35); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 42, 71, .72), rgba(4, 24, 36, .88)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 -12px 24px -14px rgba(0, 181, 184, .45); }
.lux-step__head { position: absolute; top: 0; left: clamp(14px, 1.3vw, 22px); right: calc(clamp(28px, 2.7vw, 46px) * -1); display: flex; align-items: center; gap: clamp(10px, .9vw, 16px); height: var(--lux-step-icon); }
.lux-step:last-child .lux-step__head { right: 0; }
.lux-step__num { flex: none; padding-right: .06em; margin-top: -.08em; font-family: var(--lux-head); font-size: calc(var(--lux-step-icon) * 1.02); font-style: italic; font-weight: 800; line-height: 1; letter-spacing: -.05em; background: linear-gradient(180deg, rgba(0, 181, 184, .85), rgba(0, 181, 184, .25)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lux-step__icon { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--lux-step-icon) * .78); height: calc(var(--lux-step-icon) * .78); box-sizing: border-box; border: 3px solid var(--lux-teal); border-radius: 50%; background: var(--lux-white); box-shadow: 0 0 0 6px rgba(0, 181, 184, .16), 0 0 26px rgba(0, 181, 184, .5); }
.lux-step__icon .lux-icon { width: 74%; height: 74%; color: var(--lux-teal); stroke-width: 1.6; }
.lux-step__line { flex: 1 1 auto; height: 2px; margin-left: calc(clamp(10px, .9vw, 16px) * -1); background: linear-gradient(90deg, var(--lux-teal), rgba(0, 181, 184, .6)); box-shadow: 0 0 8px rgba(0, 181, 184, .6); }
.lux-step:last-child .lux-step__line { display: none; }
.lux-process .lux-step h3 { margin: 0; padding: 0; font-family: var(--lux-head); font-size: clamp(20px, 1.8vw, 30px); font-weight: 700; line-height: 1.2; color: var(--lux-white); }
.lux-process .lux-step p { margin: 12px 0 0; padding: 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.5; color: var(--lux-light); }
.lux-process .lux-step p::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 20px; border-radius: 2px; background: var(--lux-teal); }

.lux-process .lux-process__assure { display: flex; align-items: center; justify-content: center; text-align: left; gap: 24px; margin: clamp(28px, 3vw, 48px) 0 0; padding: 16px clamp(20px, 2.8vw, 46px); border: 0; border-radius: 0; background: none; font-size: clamp(15px, 1.2vw, 20px); font-weight: 700; line-height: 1.4; color: var(--lux-white); }
.lux-process__assure .lux-icon { flex: none; width: 42px; height: 42px; color: var(--lux-teal); stroke-width: 1.8; }
.lux-process__assure span { padding-left: 24px; border-left: 1px solid rgba(0, 181, 184, .5); }

/* Confidence check: draw-in once when visible, then a single soft glow (Ryan, 18 Oct 2026). Path length is about 24. */
.lux-process__assure > .lux-icon.is-pending { stroke-dasharray: 24; stroke-dashoffset: 24; }
.lux-process__assure > .lux-icon.is-drawn { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1) .15s; animation: lux-check-glow 1.2s ease-out .9s 1; }
@keyframes lux-check-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 181, 184, .35)); } 40% { filter: drop-shadow(0 0 14px rgba(0, 181, 184, .9)); } }

@media (prefers-reduced-motion: no-preference) {
  .lux-step__icon { transition: box-shadow .25s ease, transform .25s ease; }
  .lux-step:hover .lux-step__icon { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(0, 181, 184, .22), 0 0 32px rgba(0, 181, 184, .65); }
}

@media (max-width: 1199px) {
  .lux-process ol.lux-steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .lux-step:nth-child(2) .lux-step__head { right: 0; }
  .lux-step:nth-child(2) .lux-step__line { display: none; }
  .lux-process__media { width: 70%; height: 46%; }
}
@media (max-width: 767px) {
  .lux-process__media { width: 100%; height: 300px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 100%); }
  .lux-process__title br { display: none; }
  .lux-process ol.lux-steps { grid-template-columns: 1fr; row-gap: 28px; }
  .lux-step { --lux-step-icon: 64px; padding: 0 18px 22px calc(var(--lux-step-icon) + 30px); min-height: calc(var(--lux-step-icon) + 36px); }
  .lux-step::before { top: 0; }
  .lux-step__head { display: contents; }
  .lux-step__line { display: none !important; }
  .lux-step__icon { position: absolute; top: calc(18px + var(--lux-step-icon) * .11); left: calc(12px + var(--lux-step-icon) * .11); }
  .lux-step__num { position: absolute; top: 6px; left: auto; right: 14px; margin: 0; font-size: 52px; opacity: .55; }
  .lux-process .lux-step h3 { padding-top: 24px; padding-right: 64px; }
  .lux-step:not(:last-child)::after { content: ""; position: absolute; top: calc(18px + var(--lux-step-icon)); left: calc(12px + var(--lux-step-icon) / 2 - 1px); bottom: -28px; width: 2px; background: var(--lux-teal); box-shadow: 0 0 8px rgba(0, 181, 184, .6); }
  .lux-process .lux-process__assure { gap: 14px; }
  .lux-process__assure span { padding-left: 14px; }
}

/* Homepage Section 5: Real Results & testimonials (approved mockup 18 Oct 2026). Content: src/data/real-results.json */
.lux-results { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--lux-white) 0%, var(--lux-light) 70%); color: var(--lux-navy); font-family: var(--lux-body); }
/* Mockup composition: the house photo at about two-thirds width, top right; the portrait photo (with the house behind her) fills the lower right */
.lux-results__media { position: absolute; top: 0; left: 36.8%; z-index: -1; width: 65%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 78%, transparent 100%); mask-composite: intersect; }
.lux-results__media img { display: block; width: 100%; height: auto; filter: saturate(.92) contrast(.97); }
.lux-results__top { position: relative; z-index: 1; padding-top: clamp(20px, 1.2vw, 22px); }
.lux-results__intro { max-width: 680px; }
.lux-results .lux-results__eyebrow { margin-bottom: 12px; }
.lux-results .lux-voice__eyebrow { margin-bottom: 14px; }
.lux-results .lux-results__eyebrow { color: var(--lux-navy); }
.lux-results h2 { margin: 0; padding: 0; font-family: var(--lux-head); font-size: clamp(32px, 3.3vw, 55px); font-weight: 800; line-height: 1.03; letter-spacing: -.015em; color: var(--lux-navy); }
.lux-results h2 span { color: var(--lux-teal); }
.lux-results .lux-results__lead { margin: 12px 0 0; padding: 0; max-width: 600px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.42; color: rgba(14, 42, 71, .88); }
.lux-results__intro.is-pending { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: no-preference) { .lux-results__intro { transition: opacity .45s ease-out, transform .45s ease-out; } }

.lux-tabs { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.lux-tab { display: inline-flex; align-items: center; gap: 12px; padding: 8px 30px; border: 0; border-radius: 999px; background: transparent; color: var(--lux-navy); font: 600 16px/1 var(--lux-body); cursor: pointer; }
.lux-tab .lux-icon { width: 26px; height: 26px; stroke-width: 1.5; }
.lux-tab[aria-selected="true"] { background: var(--lux-teal); color: var(--lux-white); }
.lux-tab:focus-visible { outline: 2px solid var(--lux-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .lux-tab { transition: background-color .2s ease, color .2s ease; } }

.lux-results__row { display: grid; grid-template-columns: minmax(0, 854fr) minmax(0, 624fr); align-items: end; gap: clamp(24px, 2.9vw, 48px); margin-top: 10px; margin-bottom: -64px; }
.lux-cases { display: grid; }
.lux-case { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 474fr); overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px rgba(4, 24, 36, .12); opacity: 0; visibility: hidden; }
.lux-case.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .lux-case { transition: opacity .22s ease, visibility 0s linear .22s; }
  .lux-case.is-active { transition: opacity .22s ease; }
  .lux-case__media img { transition: transform .28s ease; }
  .lux-case__arrow .lux-icon { transition: transform .2s ease; }
}
.lux-case__media { position: relative; overflow: hidden; min-height: 220px; }
.lux-case__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lux-case:hover .lux-case__media img { transform: scale(1.02); }
.lux-case__body { padding: clamp(12px, 1vw, 16px) clamp(20px, 2vw, 32px) clamp(10px, .8vw, 14px); }
.lux-results .lux-case__eyebrow { margin: 0; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lux-teal); }
.lux-results .lux-case h3 { margin: 4px 0 0; padding: 0; font-family: var(--lux-head); font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; line-height: 1.15; color: var(--lux-navy); }
.lux-results .lux-case__summary { margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 1.45; color: rgba(14, 42, 71, .85); }
.lux-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; }
.lux-metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 0 clamp(10px, 1.2vw, 22px); border-left: 1px solid rgba(14, 42, 71, .15); }
.lux-metric:first-child { padding-left: 0; border-left: 0; }
.lux-metric dd { margin: 0; font-family: var(--lux-head); font-size: clamp(20px, 1.6vw, 26px); font-weight: 800; line-height: 1.1; color: var(--lux-teal); white-space: nowrap; }
.lux-metric dt { margin-top: 4px; font-size: 14px; line-height: 1.3; color: rgba(14, 42, 71, .8); }
.lux-case__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--lux-navy); text-decoration: none; }
.lux-case__arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--lux-teal); border-radius: 50%; }
.lux-case__arrow .lux-icon { width: 18px; height: 18px; color: var(--lux-teal); stroke-width: 2; }
a.lux-case__more:hover .lux-case__arrow .lux-icon, a.lux-case__more:focus-visible .lux-case__arrow .lux-icon { transform: translateX(3px); }

.lux-results ul.lux-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; padding: clamp(22px, 2vw, 32px) clamp(18px, 1.6vw, 26px); list-style: none; border: 1px solid rgba(0, 181, 184, .25); border-radius: 16px; align-self: end; background: rgba(4, 24, 36, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--lux-white); }
.lux-outcomes li { position: relative; list-style: none; margin: 0; padding: 0 clamp(14px, 1.6vw, 26px); border-left: 1px solid rgba(255, 255, 255, .22); }
.lux-outcomes li:first-child { border-left: 0; padding-left: clamp(8px, 1vw, 20px); }
.lux-outcomes .lux-icon { display: block; width: 40px; height: 40px; color: var(--lux-teal); stroke-width: 1.5; }
.lux-results .lux-outcomes p { margin: 12px 0 0; padding: 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.35; color: var(--lux-white); }
.lux-outcomes strong { display: block; font-family: var(--lux-head); font-size: clamp(19px, 1.45vw, 24px); font-weight: 700; }

.lux-results__voice { position: relative; isolation: isolate; margin-top: -120px; padding: 148px 0 clamp(20px, 1.2vw, 22px); color: var(--lux-white); }
/* One navy layer, faded in from the top so the light area flows into the testimonial without an edge */
.lux-results__voice::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--lux-deep) 0%, rgba(4, 24, 36, .92) 30%, rgba(4, 24, 36, .6) 42%, rgba(4, 24, 36, .15) 52%, rgba(4, 24, 36, 0) 58%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 30%, #000 52%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 30%, #000 52%); }
.lux-results .lux-voice__eyebrow { color: var(--lux-white); font-size: 13px; }
.lux-voice__quote { position: relative; max-width: 660px; margin: 0; padding-left: 78px; }
.lux-voice__mark { position: absolute; left: 0; top: -14px; font-family: var(--lux-head); font-size: 96px; font-weight: 800; line-height: 1; color: var(--lux-teal); }
.lux-voice__quote blockquote { margin: 0; padding: 0; border: 0; }
.lux-results .lux-voice__quote p { margin: 0; padding: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--lux-light); }
.lux-results .lux-voice__quote .lux-voice__headline { margin-bottom: 12px; font-family: var(--lux-head); font-size: clamp(22px, 1.9vw, 31px); font-style: italic; font-weight: 700; line-height: 1.15; color: var(--lux-white); }
.lux-voice__quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; font-size: 15px; }
.lux-voice__quote figcaption > span + span { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .3); }
.lux-stars { display: inline-flex; gap: 4px; }
.lux-stars .lux-icon { width: 20px; height: 20px; fill: var(--lux-teal); stroke: var(--lux-teal); stroke-width: 1; }
.lux-voice__name { font-weight: 600; }
.lux-voice__context { color: var(--lux-light); }

/* Visible marker on unapproved staging content (blocked from production by scripts/build-real-results.js --check) */
.lux-sample { display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 99px; background: var(--lux-teal); color: var(--lux-deep); font: 700 10px/1.2 var(--lux-body); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.lux-outcomes .lux-sample { position: absolute; top: -12px; right: 8px; margin: 0; }
.lux-voice__quote figcaption > .lux-sample { padding-left: 8px; border-left: 0; margin-left: 0; white-space: nowrap; }
.lux-voice__quote figcaption { flex-wrap: nowrap; }

@media (max-width: 1199px) {
  .lux-results__row { grid-template-columns: 1fr; align-items: stretch; }
  .lux-results ul.lux-outcomes { margin-bottom: 80px; }
}
@media (max-width: 899px) {
  .lux-case { grid-template-columns: 1fr; }
  .lux-case__media { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 767px) {
  .lux-results__media { position: relative; left: 0; width: 100%; height: 260px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .lux-results__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
  .lux-results__top { padding-top: 0; margin-top: -40px; }
  .lux-results h2 br { display: none; }
  .lux-tabs { display: flex; }
  .lux-tab { flex: 1; justify-content: center; padding: 12px 14px; }
  .lux-metrics { grid-template-columns: repeat(3, 1fr); }
  .lux-metric { padding: 0 10px; }
  .lux-results ul.lux-outcomes { grid-template-columns: 1fr; gap: 18px; }
  .lux-outcomes li, .lux-outcomes li:first-child { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 16px; padding: 0; border-left: 0; }
  .lux-results .lux-outcomes p { margin: 0; }
  .lux-outcomes strong { display: inline; }
  .lux-results__voice::before { background: var(--lux-deep); }
  .lux-voice__quote { padding-left: 0; padding-top: 56px; }
  .lux-voice__mark { top: -6px; font-size: 80px; }
}

/* Portrait blended into the testimonial area (sample only until a real customer photo with permission exists) */
/* One clean photo layer in the lower right (Ryan, 18 Oct 2026: no stacked, ghosted images). Fades only on its left edge and at its top, which sits behind the outcome panel */
/* Scene fills the testimonial area by height at every desktop width, right-aligned; soft left/top edges are baked into the image */
.lux-results__portrait { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; width: 100%; }
.lux-results__portrait img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; filter: saturate(.92); }
@media (max-width: 1199px) { .lux-results__portrait { display: none; } .lux-results__voice::before { background: var(--lux-deep); } }

/* Section 5 testimonial slideshow (Ryan, 18 Oct 2026): slides share one grid cell (no height jump), crossfade; nav as in the mockup */
.lux-voice__slides { display: grid; max-width: 760px; }
.lux-voice__slides > .lux-voice__quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.lux-voice__slides > .lux-voice__quote.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .lux-voice__slides > .lux-voice__quote { transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; transform: translateX(6px); }
  .lux-voice__slides > .lux-voice__quote.is-active { transition: opacity .25s ease .1s, transform .25s ease .1s; transform: none; }
}
.lux-voice__nav { display: flex; gap: 12px; margin-top: 18px; padding-left: 78px; }
.lux-voice__nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--lux-white); border-radius: 50%; background: transparent; color: var(--lux-white); cursor: pointer; }
.lux-voice__nav .lux-icon { width: 18px; height: 18px; stroke-width: 2; }
.lux-voice__prev .lux-icon { transform: scaleX(-1); }
.lux-voice__next { border-color: var(--lux-teal) !important; color: var(--lux-teal) !important; }
.lux-voice__pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.lux-voice__pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.lux-voice__nav button:hover { background: rgba(0, 181, 184, .15); }
.lux-voice__nav button:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 3px; }
@media (max-width: 767px) { .lux-voice__nav { padding-left: 0; } }

/* Homepage FAQ (approved mockup 18 Oct 2026, design/homepage-faq-mockup-v1.webp). Content: src/data/home-faq.json */
.lux-faq { --faq-colgap: clamp(32px, 4vw, 80px); --faq-num: clamp(32px, 2.9vw, 50px); --faq-gap: clamp(18px, 2vw, 34px); position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 45% 60% at 8% 30%, rgba(0, 181, 184, .14), transparent 70%), radial-gradient(ellipse 40% 50% at 20% 0%, var(--lux-light), transparent 70%), linear-gradient(180deg, #f7fbfd 0%, var(--lux-white) 30%, var(--lux-light) 100%); color: var(--lux-navy); font-family: var(--lux-body); }
/* Photo placed as in the mockup at 1672px: 67% wide, 76px from left, 364px from top (measured); fades into the sky above and out to the right */
/* Photo (Ryan, 18 Oct 2026): flush to the left edge, clipped just before the FAQ numbers column so it never sits behind them */
.lux-faq__media { position: absolute; left: 0; top: min(20vw, 335px); bottom: 0; z-index: -1; overflow: hidden; width: calc(max(0px, (100% - var(--lux-max)) / 2) + var(--lux-gutter) + (min(100%, var(--lux-max)) - 2 * var(--lux-gutter) - var(--faq-colgap)) * 40 / 92 + var(--faq-colgap) - 20px); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%); mask-composite: intersect; }
.lux-faq__media img { position: absolute; left: 0; top: 0; display: block; width: min(80vw, 1338px); max-width: none; height: auto; }
/* Faint line work in the top-left corner, as in the mockup */
.lux-faq::before { content: ""; position: absolute; left: 0; top: 14%; z-index: -2; width: 9vw; height: 30vw; max-height: 330px; background: linear-gradient(118deg, transparent 49.6%, rgba(14, 42, 71, .12) 50%, transparent 50.4%) 0 0 / 100% 60% no-repeat, linear-gradient(118deg, transparent 49.6%, rgba(14, 42, 71, .09) 50%, transparent 50.4%) 0 30% / 100% 60% no-repeat, linear-gradient(90deg, transparent 13%, rgba(14, 42, 71, .1) 13.4%, transparent 13.8%, transparent 62%, rgba(14, 42, 71, .08) 62.4%, transparent 62.8%) 0 40% / 100% 70% no-repeat; pointer-events: none; }
@media (max-width: 1199px) { .lux-faq::before { display: none; } }
.lux-faq__inner { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 52fr); gap: var(--faq-colgap); min-height: clamp(560px, 56.3vw, 941px); box-sizing: border-box; padding-top: clamp(40px, 3.3vw, 56px); padding-bottom: clamp(40px, 3.5vw, 60px); }
.lux-faq__intro { position: static; padding-left: 0; } /* left edge = hero left edge (--lux-gutter), Ryan 18 Oct 2026 */
.lux-faq .lux-faq__eyebrow { margin-bottom: 18px; color: var(--lux-navy); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.lux-faq h2 { margin: 0; padding: 0; font-family: var(--lux-head); font-size: clamp(34px, 3.75vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.015em; color: var(--lux-navy); }
.lux-faq h2 span { color: var(--lux-teal); }
.lux-faq .lux-faq__lead { margin: 22px 0 0; padding: 0; max-width: 545px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--lux-navy); }
.lux-faq__topics { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.lux-faq__topics a { padding: 4px 0 4px 14px; border-left: 3px solid rgba(14, 42, 71, .15); color: var(--lux-navy); font-size: 16px; font-weight: 500; text-decoration: none; }
.lux-faq__topics a[aria-current="true"] { border-left-color: var(--lux-teal); color: var(--lux-teal); font-weight: 600; }
.lux-faq__topics a:hover { color: var(--lux-teal); }
.lux-faq__topics a:focus-visible, .lux-faq__q button:focus-visible, a.lux-faq__more:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 3px; }

.lux-faq__list { border-top: 1px solid rgba(14, 42, 71, .12); }
.lux-faq__item { border-bottom: 1px solid rgba(14, 42, 71, .12); }
.lux-faq .lux-faq__q { margin: 0; padding: 0; }
.lux-faq__q button { display: grid; grid-template-columns: auto 1px 1fr 24px; align-items: center; column-gap: var(--faq-gap); width: 100%; min-height: 44px; padding: clamp(16px, 1.45vw, 24px) 0; border: 0; background: none; color: var(--lux-navy); font: 700 clamp(16px, 1.27vw, 21px)/1.3 var(--lux-head); text-align: left; cursor: pointer; scroll-margin-top: calc(var(--lux-header-h) + 16px); }
.lux-faq__q button::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; margin: -6px 0; background: rgba(14, 42, 71, .18); }
.lux-faq__num { grid-column: 1; grid-row: 1; min-width: calc(var(--faq-num) * 1.6); font-family: var(--lux-head); font-size: var(--faq-num); font-weight: 800; line-height: 1; color: rgba(46, 108, 140, .32); }
.lux-faq__text { grid-column: 3; }
.lux-faq__sign { grid-column: 4; position: relative; width: 22px; height: 22px; }
.lux-faq__sign::before, .lux-faq__sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--lux-teal); }
.lux-faq__sign::after { transform: rotate(90deg); }
.lux-faq__item.is-open .lux-faq__sign::before { background: var(--lux-navy); }
.lux-faq__item.is-open .lux-faq__sign::after { transform: rotate(0); opacity: 0; }
.lux-faq__a { display: grid; grid-template-rows: 0fr; }
.lux-faq__a > div { overflow: hidden; }
.lux-faq__item.is-open .lux-faq__q button { padding-bottom: clamp(8px, .7vw, 12px); }
.lux-faq__item.is-open .lux-faq__a { grid-template-rows: 1fr; }
.lux-faq .lux-faq__a p { margin: 0; padding: 0 0 clamp(18px, 1.6vw, 26px) calc(var(--faq-num) * 1.6 + 2 * var(--faq-gap) + 1px); font-size: clamp(15px, .97vw, 16.5px); line-height: 1.58; color: rgba(14, 42, 71, .88); }
.lux-faq__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--lux-teal); font-weight: 600; font-size: 17px; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat; padding-bottom: 3px; }
.lux-faq__more .lux-icon { width: 20px; height: 20px; stroke-width: 2; }
.lux-faq__more.is-pending { cursor: default; opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .lux-faq__a { transition: grid-template-rows .28s ease-out; }
  .lux-faq__a > div { transition: opacity .24s ease-out, transform .28s ease-out; }
  .lux-faq__item:not(.is-open) .lux-faq__a > div { opacity: 0; transform: translateY(-5px); }
  .lux-faq__sign::before, .lux-faq__sign::after { transition: transform .2s ease, opacity .2s ease, background-color .2s ease; }
  .lux-faq__more .lux-icon { transition: transform .2s ease; }
  a.lux-faq__more:hover .lux-icon { transform: translateX(3px); }
  .lux-faq.is-pending .lux-faq__intro > :not(.lux-faq__media) { opacity: 0; transform: translateY(12px); }
  .lux-faq.is-pending .lux-faq__media { opacity: 0; }
  .lux-faq.is-pending .lux-faq__item, .lux-faq.is-pending .lux-faq__more { opacity: 0; transform: translateY(8px); }
  .lux-faq.is-in .lux-faq__intro > :not(.lux-faq__media) { transition: opacity .45s ease-out, transform .45s ease-out; }
  .lux-faq.is-in .lux-faq__media { transition: opacity .55s ease-out; }
  .lux-faq.is-in .lux-faq__item, .lux-faq.is-in .lux-faq__more { transition: opacity .35s ease-out, transform .35s ease-out; }
  .lux-faq.is-in .lux-faq__item:nth-child(2) { transition-delay: 55ms; }
  .lux-faq.is-in .lux-faq__item:nth-child(3) { transition-delay: 110ms; }
  .lux-faq.is-in .lux-faq__item:nth-child(4) { transition-delay: 165ms; }
  .lux-faq.is-in .lux-faq__item:nth-child(5) { transition-delay: 220ms; }
  .lux-faq.is-in .lux-faq__item:nth-child(6) { transition-delay: 275ms; }
  .lux-faq.is-in .lux-faq__more { transition-delay: 330ms; }
}

@media (max-width: 1199px) {
  .lux-faq__inner { grid-template-columns: 1fr; }
  .lux-faq__inner { min-height: 0; }
  .lux-faq__intro { padding-left: 0; }
  .lux-faq__media img { position: static; width: 100%; }
  .lux-faq__media { position: relative; left: 0; top: 0; bottom: auto; overflow: visible; width: 100%; max-width: 760px; margin: 24px 0 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
}
@media (max-width: 767px) {
  .lux-faq h2 br { display: none; }
  .lux-faq { --faq-num: 28px; --faq-gap: 14px; }
  .lux-faq__q button { grid-template-columns: auto 1px 1fr 20px; }
  .lux-faq .lux-faq__a p { padding-right: 0; }
  .lux-faq__sign, .lux-faq__sign::before, .lux-faq__sign::after { width: 18px; }
}

/* Section 5 desktop proportions, measured from the mockup at 1672px and scaled with the screen (vw), so 1366px laptops get
   the same layout as the design instead of a taller, roomier version (Ryan, 18 Oct 2026: "nowhere looking like the design") */
@media (min-width: 1200px) {
  .lux-results__top { padding-top: 2.4vw; }
  .lux-results .lux-results__eyebrow { margin-bottom: .9vw; font-size: max(11px, .78vw); }
  .lux-results h2 { font-size: 3.3vw; line-height: 1.02; }
  .lux-results .lux-results__lead { margin-top: .9vw; max-width: 36vw; font-size: max(13px, 1.06vw); line-height: 1.45; }
  .lux-tabs { margin-top: 1.6vw; padding: .25vw; }
  .lux-tab { padding: .55vw 1.9vw; gap: .7vw; font-size: max(13px, .92vw); }
  .lux-tab .lux-icon { width: 1.5vw; height: 1.5vw; }
  .lux-results__row { grid-template-columns: 49.5vw minmax(0, 1fr); gap: 4.8vw; align-items: center; margin-top: 1vw; margin-bottom: 0; padding-right: calc(3.4vw - var(--lux-gutter)); }
  .lux-case { grid-template-columns: 22vw minmax(0, 1fr); border-radius: .9vw; }
  .lux-case__media { min-height: 15.8vw; }
  .lux-case__body { padding: 1vw 2vw .9vw; }
  .lux-results .lux-case__eyebrow { font-size: max(10px, .7vw); }
  .lux-results .lux-case h3 { margin-top: .3vw; font-size: max(17px, 1.5vw); font-weight: 800; line-height: 1.12; }
  .lux-results .lux-case__summary { margin-top: .6vw; font-size: max(12px, .84vw); line-height: 1.4; }
  .lux-metrics { margin-top: .8vw; }
  .lux-metric { padding: 0 1.1vw; }
  .lux-metric dd { font-size: max(17px, 1.55vw); }
  .lux-metric dt { margin-top: .2vw; font-size: max(11px, .78vw); }
  .lux-case__more { margin-top: .6vw; gap: .7vw; font-size: max(12px, .84vw); }
  .lux-case__arrow { width: 2vw; height: 2vw; }
  /* outcome panel: translucent blue, centred on the case card as in the mockup */
  .lux-results ul.lux-outcomes { margin: 0 0 1vw; padding: 1.6vw 1.4vw; border-radius: 1vw; background: rgba(14, 42, 71, .82); border-color: rgba(0, 181, 184, .3); }
  .lux-outcomes li { padding: 0 1.5vw; }
  .lux-outcomes .lux-icon { width: 2.3vw; height: 2.3vw; }
  .lux-results .lux-outcomes p { margin-top: .7vw; font-size: max(12px, .95vw); }
  .lux-outcomes strong { font-size: max(15px, 1.45vw); }
  /* testimonial: compact, deep-blue navy, starts just under the case card */
  .lux-results__voice { margin-top: -6vw; padding: calc(6vw + 2.5vw) 0 2.7vw; } /* visible gap below the caption row = gap above the eyebrow: symmetrical (Ryan, 18 Oct 2026) */
  .lux-results__voice::before { background: radial-gradient(70% 90% at -14% 8%, rgba(232, 246, 246, 0) 52%, rgba(232, 246, 246, .5) 58%, rgba(232, 246, 246, 0) 66%), linear-gradient(90deg, var(--lux-navy) 0%, rgba(14, 42, 71, .96) 30%, rgba(14, 42, 71, .66) 42%, rgba(14, 42, 71, .18) 52%, rgba(14, 42, 71, 0) 58%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .85) 22%, #000 32%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .85) 22%, #000 32%); }
  .lux-results .lux-voice__eyebrow { margin-bottom: .8vw; font-size: max(10px, .72vw); }
  .lux-voice__quote { max-width: 38vw; padding-left: 4.4vw; }
  .lux-voice__mark { top: -.6vw; font-size: 5vw; }
  .lux-results .lux-voice__quote .lux-voice__headline { margin-bottom: .6vw; font-size: max(18px, 1.9vw); }
  .lux-results .lux-voice__quote p { font-size: max(12px, .96vw); line-height: 1.45; }
  .lux-voice__quote figcaption { margin-top: .8vw; font-size: max(12px, .84vw); }
  .lux-stars .lux-icon { width: 1.1vw; height: 1.1vw; }
  /* slideshow controls sit under the testimonial, lined up with the quote text (Ryan, 18 Oct 2026) */
  .lux-results__voice .lux-wrap { position: relative; }
  .lux-voice__nav { margin-top: 1.2vw; padding-left: 4.4vw; gap: .6vw; }
  .lux-voice__nav button { width: 2.4vw; height: 2.4vw; min-width: 34px; min-height: 34px; }
  .lux-results__portrait { top: -3.5vw; }
  .lux-voice__slides { max-width: 42.4vw; }
}

/* Section 5: ONE background image for the whole section on desktop (Ryan, 18 Oct 2026: "that design is one full section").
   Built by scripts/build-results-background.js from the mockup's two photos. Content sits on top as real HTML. */
.lux-results__bg { display: none; }
@media (min-width: 1200px) {
  .lux-results { background: #0E2A47; }
  .lux-results__bg { display: block; position: absolute; inset: 0; z-index: -3; }
  .lux-results__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .lux-results__media, .lux-results__portrait { display: none; }
  .lux-results__voice::before { content: none; }
}

/* Section 5: slideshow controls on the caption row, right after the name and role, the same height as that row
   (Ryan, 18 Oct 2026: "put it next to the homeowner and make it the same size"). Captions sit on one shared bottom row
   so the controls never jump; scripts/build-real-results.js sets the left offset (after the longest caption) and adds .is-inline. */
@media (min-width: 1200px) {
  .lux-voice__slides > .lux-voice__quote { display: flex; flex-direction: column; }
  .lux-voice__quote blockquote { margin-bottom: .8vw; }
  .lux-results .lux-voice__quote figcaption { margin-top: auto; min-height: 1.5vw; }
  .lux-voice__nav.is-inline { position: absolute; bottom: 0; align-items: center; height: 1.5vw; margin: 0; padding: 0 0 0 18px; border-left: 1px solid rgba(255, 255, 255, .3); gap: .45vw; }
  .lux-voice__nav.is-inline button { width: 1.5vw; height: 1.5vw; min-width: 20px; min-height: 20px; border-width: 1px; }
  .lux-voice__nav.is-inline .lux-icon { width: .8vw; height: .8vw; min-width: 10px; min-height: 10px; }
  .lux-voice__nav.is-inline .lux-voice__pause span { width: .55vw; height: .65vw; min-width: 6px; min-height: 8px; border-left-width: 2px; border-right-width: 2px; }
  .lux-voice__nav.is-inline .lux-voice__pause[aria-pressed="true"] span { width: 0; height: 0; min-width: 0; min-height: 0; border-width: 4px 0 4px 7px; }
}

/* FAQ photo: anchored to the bottom of the topic labels instead of a fixed top, so the roof and the installers
   always start just below and to the right of the labels, as in the mockup, and never sit behind them (Ryan, 18 Oct 2026).
   top:auto keeps the photo at its place in the flow (right after the labels); the negative margin lifts the sky up beside them. */
@media (min-width: 1200px) {
  .lux-faq__media { top: auto; bottom: auto; margin-top: -16vw; height: min(48.5vw, 811px); } /* moved up 3.5vw; roof behind "Business solar" accepted by Ryan (Ryan, 18 Oct 2026) */
}

/* ===== Homepage Next Step CTA (after the FAQ, before the footer). Approved mockup supplied by Ryan, 18 Oct 2026.
   Sizes are the mockup's at 1672px, scaling down with the viewport. No new form: Continue prefills and scrolls to the callback bar. */
.lux-next { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 3.3vw, 55px) 0; background: linear-gradient(112deg, transparent 52%, rgba(232, 246, 246, .75) 52.2%, transparent 64%), linear-gradient(112deg, transparent 70%, rgba(232, 246, 246, .6) 70.2%, transparent 84%), linear-gradient(180deg, var(--lux-white) 0%, rgba(232, 246, 246, .55) 100%); color: var(--lux-navy); font-family: var(--lux-body); }
.lux-next__inner { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 42fr); gap: clamp(32px, 4.3vw, 72px); align-items: center; }
.lux-next .lux-next__eyebrow { margin: 0 0 clamp(10px, 1vw, 17px); color: var(--lux-navy); font-size: clamp(12px, .9vw, 15px); font-weight: 700; letter-spacing: .12em; }
.lux-next .lux-next__eyebrow::before { width: clamp(36px, 3.4vw, 56px); }
.lux-next h2 { margin: 0; padding: 0; font-family: var(--lux-head); font-size: clamp(34px, 4.8vw, 80px); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--lux-navy); }
.lux-next h2 span { color: var(--lux-teal); }
.lux-next .lux-next__lead { margin: clamp(14px, 1.8vw, 30px) 0 0; padding: 0; max-width: 41vw; font-size: clamp(16px, 1.4vw, 23px); line-height: 1.32; color: var(--lux-navy); }
.lux-next ul.lux-next__benefits { display: flex; margin: clamp(22px, 2vw, 34px) 0 0; padding: 0; list-style: none; }
.lux-next ul.lux-next__benefits li { flex: none; margin: 0; padding: 0 clamp(14px, 2.3vw, 38px); list-style: none; border-left: 1px solid rgba(14, 42, 71, .14); }
.lux-next ul.lux-next__benefits li:first-child { padding-left: 0; border-left: 0; }
.lux-next__badge { display: grid; place-items: center; width: clamp(48px, 4.1vw, 68px); height: clamp(48px, 4.1vw, 68px); border-radius: 50%; background: var(--lux-light); }
.lux-next__badge .lux-icon { width: 53%; height: 53%; stroke-width: 1.6; }
.lux-next .lux-next__benefits h3 { margin: clamp(10px, .9vw, 15px) 0 0; padding: 0; font-family: var(--lux-head); font-size: clamp(14px, 1vw, 17px); font-weight: 700; line-height: 1.3; color: var(--lux-navy); }
.lux-next .lux-next__benefits p { margin: clamp(6px, .55vw, 9px) 0 0; padding: 0; max-width: 8.7em; font-size: clamp(13px, .93vw, 15.5px); line-height: 1.36; color: rgba(14, 42, 71, .8); }
.lux-next__panel { padding: clamp(24px, 2.65vw, 44px); border: 1px solid rgba(14, 42, 71, .08); border-radius: clamp(12px, 1vw, 18px); background: rgba(255, 255, 255, .9); box-shadow: 0 20px 50px rgba(14, 42, 71, .07); }
.lux-next__choose { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.lux-next .lux-next__q { float: left; width: 100%; margin: 0 0 clamp(18px, 2.1vw, 35px); padding: 0; font-size: clamp(12px, .9vw, 15px); font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--lux-navy); }
.lux-next .lux-next__step { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); margin: 0; padding: 0; font-size: clamp(12px, .9vw, 15px); line-height: 1.4; color: var(--lux-navy); }
.lux-next__bar { display: block; width: clamp(80px, 8.3vw, 138px); height: 4px; border-radius: 2px; background: rgba(14, 42, 71, .08); overflow: hidden; }
.lux-next__bar i { display: block; width: 31%; height: 100%; border-radius: 2px; background: var(--lux-teal); }
.lux-next__options { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 20px); }
.lux-next__opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(18px, 1.75vw, 29px); border: 1.5px solid rgba(14, 42, 71, .1); border-radius: clamp(10px, .9vw, 15px); background: var(--lux-white); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.lux-next__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lux-next__opt:hover { border-color: rgba(0, 181, 184, .55); }
.lux-next__opt:has(input:checked) { border-color: var(--lux-teal); box-shadow: inset 0 0 0 .5px var(--lux-teal); }
.lux-next__opt:has(input:focus-visible) { outline: 2px solid var(--lux-teal); outline-offset: 3px; }
.lux-next__opt-icon { width: clamp(34px, 2.75vw, 46px); height: clamp(34px, 2.75vw, 46px); stroke-width: 1.5; }
.lux-next__opt-title { margin-top: clamp(12px, 1.3vw, 22px); font-family: var(--lux-head); font-size: clamp(17px, 1.27vw, 21px); font-weight: 700; line-height: 1.25; color: var(--lux-navy); }
.lux-next__opt-text { margin-top: clamp(6px, .55vw, 9px); max-width: 11.6em; font-size: clamp(14px, 1vw, 16.5px); line-height: 1.45; color: rgba(14, 42, 71, .8); }
.lux-next__radio { position: absolute; top: clamp(14px, 1.4vw, 24px); right: clamp(14px, 1.4vw, 24px); display: grid; place-items: center; width: clamp(22px, 1.7vw, 28px); height: clamp(22px, 1.7vw, 28px); box-sizing: border-box; border: 1.5px solid rgba(14, 42, 71, .22); border-radius: 50%; background: var(--lux-white); }
.lux-next__radio .lux-icon { width: 70%; height: 70%; stroke: var(--lux-white); stroke-width: 2.6; opacity: 0; }
.lux-next__opt input:checked ~ .lux-next__radio { border-color: var(--lux-teal); background: var(--lux-teal); }
.lux-next__opt input:checked ~ .lux-next__radio .lux-icon { opacity: 1; }
.lux-next__cta { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(52px, 4.4vw, 73px); margin-top: clamp(18px, 1.7vw, 28px); padding: 0 clamp(52px, 5vw, 84px); border-radius: 999px; background: linear-gradient(90deg, var(--lux-teal) 0%, var(--lux-navy) 118%); color: var(--lux-white); font-family: var(--lux-head); font-size: clamp(16px, 1.27vw, 21px); font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 181, 184, .18); transition: box-shadow .25s ease, filter .25s ease; }
.lux-next__cta .lux-icon { position: absolute; right: clamp(20px, 2.6vw, 44px); width: clamp(20px, 1.6vw, 26px); height: clamp(20px, 1.6vw, 26px); stroke-width: 2; transition: transform .25s ease; }
.lux-next__cta:hover { color: var(--lux-white); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(0, 181, 184, .32); }
.lux-next__cta:hover .lux-icon { transform: translateX(3px); }
.lux-next__cta:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 3px; }
.lux-next .lux-next__privacy { display: flex; align-items: center; justify-content: center; gap: 10px; margin: clamp(14px, 1.6vw, 26px) 0 0; padding: 0; font-size: clamp(12px, .84vw, 14px); line-height: 1.4; color: rgba(14, 42, 71, .72); text-align: center; }
@media (min-width: 1440px) { .lux-next .lux-next__privacy { white-space: nowrap; } }
.lux-next__privacy .lux-icon { width: 1.25em; height: 1.25em; color: rgba(14, 42, 71, .72); }
@media (prefers-reduced-motion: reduce) { .lux-next__opt, .lux-next__cta, .lux-next__cta .lux-icon { transition: none; } .lux-next__cta:hover .lux-icon { transform: none; } }
@media (max-width: 1099px) {
  .lux-next__inner { grid-template-columns: 1fr; }
  .lux-next .lux-next__lead { max-width: 640px; }
  .lux-next__panel { max-width: 720px; }
}
@media (max-width: 767px) {
  .lux-next ul.lux-next__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .lux-next ul.lux-next__benefits li { padding: 0; border-left: 0; }
  .lux-next .lux-next__benefits p { max-width: none; }
}
@media (max-width: 560px) {
  .lux-next__options { grid-template-columns: 1fr; }
  .lux-next .lux-next__step { position: static; clear: both; margin: -8px 0 16px; }
}

/* FAQ answers may cite one outside source (src/data/home-faq.json "link") */
.lux-faq .lux-faq__a a { color: var(--lux-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lux-faq .lux-faq__a a:hover { color: var(--lux-navy); }
.lux-faq .lux-faq__a a:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 2px; }

/* ===== Sitewide footer (approved mockup design/homepage-footer-mockup-v1.webp, Ryan 18 Oct 2026). Markup only in
   src/partials/site-footer.html, installed by scripts/install-footer.js. Sizes are the mockup's (2000px canvas) in vw. */
.lux-footer { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--lux-navy) -60%, var(--lux-deep) 75%); color: var(--lux-white); font-family: var(--lux-body); }
.lux-footer__bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .45) 48%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .45) 48%, #000 72%); }
.lux-footer__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.lux-footer ul { margin: 0; padding: 0; list-style: none; }
.lux-footer li { margin: 0; padding: 0; list-style: none; }
.lux-footer p { margin: 0; padding: 0; }
.lux-footer a { color: var(--lux-white); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
.lux-footer a:hover { color: var(--lux-teal); }
.lux-footer a:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 3px; border-radius: 2px; }
/* 1. contact strip */
.lux-footer__top { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lux-footer__contact { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; padding-top: clamp(16px, 1.35vw, 27px); padding-bottom: clamp(14px, 1.25vw, 25px); }
.lux-footer__contact::before, .lux-footer__contact::after { content: none; }
.lux-footer__group:nth-child(2) { grid-column: 3; }
.lux-footer__group:nth-child(3) { grid-column: 5; }
.lux-footer__contact > .lux-footer__group + .lux-footer__group { position: relative; }
.lux-footer__contact { background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)), linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)); background-repeat: no-repeat; background-size: 1px clamp(32px, 2.3vw, 46px), 1px clamp(32px, 2.3vw, 46px); background-position: 31.5% 55%, 67.5% 55%; }
.lux-footer .lux-footer__label { margin-bottom: clamp(8px, .7vw, 14px); font-size: clamp(10px, .6vw, 12px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.lux-footer__value { font-size: clamp(14px, .86vw, 17px); }
.lux-footer__social { display: flex; gap: clamp(26px, 2.5vw, 50px); }
.lux-footer__social a { display: grid; place-items: center; width: clamp(22px, 1.35vw, 27px); height: clamp(22px, 1.35vw, 27px); }
.lux-footer__social svg { width: 100%; height: 100%; }
/* 2. main */
.lux-footer__main { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 2vw, 40px); padding-top: clamp(36px, 3vw, 60px); padding-bottom: clamp(28px, 1.9vw, 38px); }
.lux-footer__logo { display: inline-block; }
.lux-footer__logo img { display: block; width: clamp(220px, 17.75vw, 355px); height: auto; }
.lux-footer .lux-footer__about { margin-top: clamp(16px, 1.55vw, 31px); max-width: 24em; font-size: clamp(14px, .86vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.lux-footer__values { display: flex; margin-top: clamp(20px, 1.5vw, 30px) !important; padding-top: clamp(18px, 1.35vw, 27px) !important; position: relative; }
.lux-footer__values::before { content: ""; position: absolute; top: 0; left: 0; width: clamp(40px, 3vw, 60px); height: 3px; border-radius: 2px; background: var(--lux-teal); }
.lux-footer__values li { padding: 0 clamp(18px, 1.9vw, 38px); border-left: 1px solid rgba(255, 255, 255, .25); font-size: clamp(12px, .74vw, 15px); line-height: 1.5; color: rgba(255, 255, 255, .9); }
.lux-footer__values li:first-child { padding-left: 0; border-left: 0; }
.lux-footer__col h3 { margin: 0; padding: 0 0 clamp(14px, 1.35vw, 27px); position: relative; font-family: var(--lux-head); font-size: clamp(16px, 1.02vw, 20px); font-weight: 700; line-height: 1.25; color: var(--lux-white); }
.lux-footer__col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: clamp(36px, 2.25vw, 45px); height: 3px; border-radius: 2px; background: var(--lux-teal); }
.lux-footer__col ul { margin-top: clamp(16px, 1.4vw, 28px); }
.lux-footer__col li + li { margin-top: clamp(8px, .55vw, 11px); }
.lux-footer__col li a { font-size: clamp(14px, .82vw, 16px); line-height: 1.4; color: rgba(255, 255, 255, .92); }
.lux-footer__hours { width: clamp(150px, 9vw, 180px); margin: clamp(16px, 1.4vw, 28px) 0 0; padding: 0; }
.lux-footer__hours div { padding: clamp(8px, .8vw, 16px) 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.lux-footer__hours div:first-child { padding-top: 0; }
.lux-footer__hours div:last-child { border-bottom: 0; }
.lux-footer__hours dt, .lux-footer__hours dd { margin: 0; font-weight: 400; font-size: clamp(14px, .82vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, .92); }
/* 3. legal */
.lux-footer__legal { border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(4, 24, 36, .82); }
.lux-footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: clamp(16px, 1.9vw, 38px); padding-bottom: clamp(16px, 1.9vw, 38px); font-size: clamp(12px, .74vw, 15px); color: rgba(255, 255, 255, .88); }
.lux-footer__legal-inner ul { display: flex; align-items: center; }
.lux-footer__legal-inner li { padding: 0 clamp(14px, 1.3vw, 26px); border-left: 1px solid rgba(255, 255, 255, .3); line-height: 1.2; }
.lux-footer__legal-inner li:first-child { border-left: 0; }
.lux-footer__legal-inner li:last-child { padding-right: 0; }
.lux-footer__legal-inner a, .lux-footer__legal-inner .is-pending { color: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: reduce) { .lux-footer a { transition: none; } }
/* laptops: columns sit closer, so the photo stays faded until well past the Opening Hours text */
@media (min-width: 1100px) and (max-width: 1599px) { .lux-footer__bg { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, rgba(0, 0, 0, .3) 74%, #000 94%); mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, rgba(0, 0, 0, .3) 74%, #000 94%); } }
@media (max-width: 1099px) {
  .lux-footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .lux-footer__brand { grid-column: 1 / -1; }
  .lux-footer__bg { width: 70%; }
}
@media (max-width: 767px) {
  .lux-footer__contact { grid-template-columns: 1fr; gap: 18px; background-image: none; }
  .lux-footer__group:nth-child(n) { grid-column: 1; }
  .lux-footer__main { grid-template-columns: 1fr; gap: 32px; }
  .lux-footer__values li { padding: 0 14px; }
  .lux-footer__legal-inner { flex-direction: column; align-items: flex-start; }
  .lux-footer__legal-inner li:first-child { padding-left: 0; }
  .lux-footer__bg { top: auto; width: 100%; height: 460px; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%); }
}

/* Footer v2 (Ryan, 18 Oct 2026): contact strip moved under Opening Hours, one hours line (Mon to Sat) */
.lux-footer__hours div { display: flex; gap: .6em; padding: 0; border-bottom: 0; }
.lux-footer__reach { margin-top: clamp(18px, 1.5vw, 28px); padding-top: clamp(14px, 1.2vw, 22px); border-top: 1px solid rgba(255, 255, 255, .18); }
.lux-footer__reach .lux-footer__group + .lux-footer__group { margin-top: clamp(12px, 1vw, 18px); }
.lux-footer__reach .lux-footer__label { margin-bottom: 6px; }
.lux-footer__reach .lux-footer__social { gap: 18px; align-items: center; }
.lux-footer__social li { display: flex; }

/* Footer v3 (Ryan, 18 Oct 2026): five columns, contact details in their own 5th column */
.lux-footer__main { grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); }
.lux-footer__reach { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 1099px) { .lux-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .lux-footer__main { grid-template-columns: 1fr; } }
/* Footer hours (Ryan, 18 Oct 2026): back to two rows, day above time, divider between */
.lux-footer__hours div { display: block; padding: clamp(8px, .8vw, 16px) 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.lux-footer__hours div:first-child { padding-top: 0; }
.lux-footer__hours div:last-child { border-bottom: 0; }

/* ===== Legal pages (/privacy-policy/, /terms-and-conditions/), built by scripts/build-legal-pages.js. No mockup:
   site tokens only, a navy title band like the hero, and a narrow reading column. */
.lux-page { margin: 0; background: var(--lux-white); color: var(--lux-navy); font-family: var(--lux-body); }
.lux-legal__banner { position: relative; overflow: hidden; padding: clamp(40px, 4.4vw, 76px) 0 clamp(36px, 3.8vw, 64px); background: radial-gradient(60% 120% at 100% 0%, rgba(0, 181, 184, .22), transparent 60%), linear-gradient(120deg, var(--lux-deep) 0%, var(--lux-navy) 100%); color: var(--lux-white); }
.lux-legal__banner .lux-eyebrow { margin-bottom: 14px; }
.lux-legal__banner h1 { margin: 0; padding: 0; font-family: var(--lux-head); font-size: clamp(34px, 3.6vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; color: var(--lux-white); }
.lux-legal__updated { margin: 14px 0 0; padding: 0; font-size: 15px; color: rgba(255, 255, 255, .8); }
.lux-legal__crumbs { margin: 0 0 22px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.lux-legal__crumbs a { color: var(--lux-white); text-decoration: none; }
.lux-legal__crumbs a:hover { color: var(--lux-teal); }
.lux-legal { padding-top: clamp(36px, 3.6vw, 64px); padding-bottom: clamp(48px, 4.8vw, 88px); }
.lux-legal__body { max-width: 780px; font-size: 17px; line-height: 1.7; color: rgba(14, 42, 71, .92); }
.lux-legal__body h2 { margin: 2.2em 0 .6em; padding: 0; scroll-margin-top: 110px; font-family: var(--lux-head); font-size: clamp(22px, 1.6vw, 27px); font-weight: 700; line-height: 1.25; color: var(--lux-navy); }
.lux-legal__body p { margin: 0 0 1em; padding: 0; }
.lux-legal__body ul { margin: 0 0 1.2em; padding: 0 0 0 1.3em; }
.lux-legal__body li { margin: 0 0 .5em; padding: 0; }
.lux-legal__body a { color: var(--lux-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lux-legal__body a:hover { color: var(--lux-navy); }
.lux-legal__body a:focus-visible, .lux-legal__crumbs a:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 2px; }
.lux-legal__intro { font-size: 19px; color: var(--lux-navy); }
.lux-legal__toc { margin: 28px 0 8px; padding: 22px 26px; border-left: 3px solid var(--lux-teal); border-radius: 0 12px 12px 0; background: var(--lux-light); }
.lux-legal__toc > p { margin: 0 0 8px; font-family: var(--lux-head); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lux-navy); }
.lux-legal__toc ol { margin: 0; padding: 0 0 0 1.3em; columns: 2; column-gap: 32px; font-size: 16px; }
.lux-legal__toc li { margin: 0 0 4px; break-inside: avoid; }
.lux-legal__toc a { font-weight: 500; text-decoration: none; color: var(--lux-navy); }
.lux-legal__toc a:hover { color: var(--lux-teal); text-decoration: underline; }
@media (max-width: 767px) {
  .lux-legal__body { font-size: 16px; }
  .lux-legal__intro { font-size: 17px; }
  .lux-legal__toc { padding: 18px 18px; }
  .lux-legal__toc ol { columns: 1; }
}

/* Footer credit (Ryan, 18 Oct 2026) */
.lux-footer__credit { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
.lux-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .lux-footer__credit { display: block; margin: 8px 0 0; padding: 0; border: 0; } }

/* FAQ: no fixed minimum height, same space above and below the content (Ryan, 18 Oct 2026: "too much dead space ... make this section symmetrical") */
.lux-faq__inner { min-height: 0; padding-bottom: clamp(40px, 3.3vw, 56px); }
@media (max-width: 1199px) { .lux-faq__inner { padding-bottom: 52px; } }
@media (min-width: 1100px) and (max-width: 1365px) { .lux-why .lux-lead { font-size: 16px; } }

/* 404 page (scripts/build-404.js) */
.lux-404 { padding-top: clamp(32px, 3.2vw, 56px); padding-bottom: clamp(48px, 4.8vw, 88px); }
.lux-404__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lux-404__links li { margin: 0; padding: 0; list-style: none; }
.lux-404__links a { box-sizing: border-box; display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid rgba(14, 42, 71, .12); border-left: 3px solid var(--lux-teal); border-radius: 10px; background: var(--lux-white); color: var(--lux-navy); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.lux-404__links a:hover { background: var(--lux-light); border-color: var(--lux-teal); }
.lux-404__links a:focus-visible { outline: 2px solid var(--lux-teal); outline-offset: 3px; }
.lux-404__links strong { font-family: var(--lux-head); font-size: 17px; font-weight: 700; }
.lux-404__links span { font-size: 15px; color: rgba(14, 42, 71, .75); }
.lux-404__call { margin: 28px 0 0; font-size: 17px; color: var(--lux-navy); }
.lux-404__call a { color: var(--lux-teal); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .lux-404__links a { transition: none; } }