/* Permanent lighting page. Loaded only on /permanent-lighting/ through page(extra_css). Mobile first; breakpoints 768 and 1024.
   Night body. The price section is the one paper-deep section; its resets undo the body-level night rules. Hex values below
   are the color swatches only: flat rectangles with no effects. */

html:has(body.page-lighting) { scroll-padding-top: calc(var(--header-h) + 64px); }

/* ------------------------------------------------ hero: copy 6, house figure 6 */
.lt-hero h1 { max-width: 20ch; }
.lt-hero .lede { max-width: 52ch; }
.lt-hero .hero-facts-list { margin-top: 36px; max-width: 480px; }
.lt-hero .hero-side { justify-items: stretch; width: 100%; }
@media (min-width: 1024px) {
  .lt-hero .page-hero-grid.has-side { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
  .lt-hero .hero-side { justify-items: stretch; }
}

/* ------------------------------------------------ sticky section strip under the header */
.lt-jump { position: sticky; top: var(--header-h); z-index: 40; background: var(--night); border-block: 1px solid var(--night-hair); }
.lt-jump .jump-nav { margin: 0; position: static; }
.lt-jump .jump-title { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.lt-jump ol { display: flex; gap: 28px; border: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.lt-jump ol::-webkit-scrollbar { display: none; }
.lt-jump a { margin: 0; padding: 14px 0 12px; border-left: 0; border-bottom: 2px solid transparent; color: var(--paper-78); font-size: 15px; }
.lt-jump a:hover { color: var(--paper); }
.lt-jump a.is-active, .lt-jump a[aria-current="true"] { color: var(--paper); border-left: 0; border-bottom-color: var(--paper); }

/* ------------------------------------------------ section rhythm: grounds alternate night and pine-deep; site.css closes any same-ground gap */

.lt-row { display: grid; gap: 8px; }
.lt-row-head .section-head { margin-bottom: 16px; }
.lt-row-body > * + * { margin-top: 24px; }
.lt-row-body > p { max-width: 64ch; }
.lt-row-body > p + p { margin-top: 16px; }
@media (min-width: 1024px) {
  .lt-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .lt-row-head .section-head { margin-bottom: 0; }
}
.lt-what .lt-row-body > p:first-child { font-size: var(--fs-lede); line-height: 1.45; }

/* ------------------------------------------------ card grids: how 4-up, scenes 4-up, colors 3-up, why 3-up */
.lt-grid { display: grid; gap: var(--gap); margin-top: clamp(32px, 24px + 2vw, 56px); }
@media (min-width: 768px) { .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .lt-grid.lt-how, .lt-grid.lt-scenes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lt-grid.lt-colors, .lt-grid.lt-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lt-grid h3 { font-size: var(--fs-h4); line-height: 1.2; }
.lt-grid p { margin-top: 8px; color: var(--paper-78); font-size: 16px; }
.lt-how li, .lt-why li { padding-top: 20px; border-top: 1px solid var(--night-hair); }
.lt-how { column-gap: 32px; row-gap: 32px; }
.lt-why { column-gap: 40px; row-gap: 36px; }
.lt-scenes li, .lt-colors li { padding: 24px; background: var(--pine-deep); border-radius: var(--radius-card); }
.surface-pine-deep :is(.lt-scenes, .lt-colors) li { background: var(--night); }
.surface-pine-deep :is(.lt-how, .lt-why) li { border-top-color: var(--paper-hair); }
.lt-scenes .lt-when { margin-top: 6px; color: var(--paper); font-size: 14px; font-weight: 600; }
.lt-scenes .lt-when + p { margin-top: 12px; }
#how .split, #why .split { align-items: center; }
#how .section-head, #why .section-head { margin-bottom: 0; }

/* color swatches: plain rectangles, one flat fill per segment */
.lt-swatch { display: flex; height: 56px; margin-bottom: 18px; border-radius: var(--radius); overflow: clip; }
.lt-swatch .sw { flex: 1 1 0; }
.sw-warm { background: #FFD6A0; }
.sw-cool { background: #EEF2FF; }
.sw-red { background: #D62828; }
.sw-green { background: #1E8E3E; }
.sw-white { background: #F4F4F4; }
.sw-blue { background: #1F4FBF; }
.sw-orange { background: #F07F1A; }
.sw-purple { background: #7B3FBF; }
.sw-teal { background: #14A3A3; }
.sw-pink { background: #E0488B; }
.sw-lime { background: #9BC53D; }
.sw-violet { background: #5B5BD6; }

/* ------------------------------------------------ price: the one light section */
.page-lighting .lt-price { color: var(--ink); --focus: var(--pine); }
.page-lighting .lt-price .section-head p { color: var(--muted); }
.page-lighting .lt-price .price-anchor { border-color: var(--hair); }
.page-lighting .lt-price .price-anchor-n { color: var(--pine); font-size: clamp(28px, 22px + 1.5vw, 42px); max-width: 22ch; }
.page-lighting .lt-price .price-anchor-note { color: var(--muted); font-size: 16px; max-width: 60ch; }
.page-lighting .lt-price :is(.inc-list, .exc-list, .inc-list li, .exc-list li) { border-color: var(--hair); }
.page-lighting .lt-price :is(.exc-list li, .exc h3) { color: var(--muted); }
.page-lighting .lt-price .note { border-color: var(--pine); }
.page-lighting .lt-price .note-label { color: var(--pine); }
.lt-market { font-weight: 600; }
.lt-price .inc-exc { padding-top: 16px; }

/* ------------------------------------------------ HOA, daytime, warranty */
#hoa .split-a > p, #hoa .split-b > p { max-width: 60ch; }
#hoa .split p + p { margin-top: 16px; }
.lt-warranty { margin-top: var(--section-tight); padding-top: var(--section-tight); border-top: 1px solid var(--night-hair); }
.lt-warranty .facts-panel { margin-top: 24px; }
.lt-warranty .facts-panel dl { grid-template-columns: minmax(0, 1fr); }
.lt-warranty .facts-panel dd { font-size: 17px; font-weight: 500; line-height: 1.5; }

/* ------------------------------------------------ compare on night */
.lt-compare .compare { width: 100%; }
.page-lighting .lt-compare .compare thead th { color: var(--paper-78); border-bottom-color: var(--paper-hair); }
.page-lighting .lt-compare .compare td { color: var(--paper-78); }
.page-lighting .lt-compare .compare td:first-of-type { color: var(--paper); font-weight: 600; }
@media (min-width: 768px) { .lt-compare .compare tbody th { width: 22%; } }
@media (max-width: 767px) {
  .page-lighting .lt-compare .compare tr { border-top-color: var(--paper-hair); }
  .page-lighting .lt-compare .compare td::before { color: var(--paper-78); }
}

/* ------------------------------------------------ gallery: one line until install photos exist */
.lt-calm { font-size: var(--fs-lede); line-height: 1.45; color: var(--paper-78); max-width: 52ch; }

/* ------------------------------------------------ generated scenes: one per band, captions in small type */
.page-lighting figure.photo { display: grid; gap: 0; }
.page-lighting figure.photo figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; max-width: 60ch; }
.lt-hero .hero-side .photo-frame { max-width: none; }
.lt-hero .photo-frame img { aspect-ratio: 16 / 10; object-fit: cover; }
:is(#how, #why, #process) .photo-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
#process .split { align-items: center; }
#process .section-head { margin-bottom: 0; }
#process .timeline-wrap { margin-top: clamp(40px, 32px + 2vw, 64px); }

/* same house, four scenes: 2-up on phones, 4-up from 1024 */
.lt-scene-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 32px; list-style: none; padding: 0; }
@media (min-width: 1024px) { .lt-scene-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.lt-scene-strip .photo-frame img { aspect-ratio: 16 / 10; object-fit: cover; }
.lt-scene-strip figcaption { font-weight: 600; color: var(--paper); font-size: 15px; }
.surface-pine-deep .lt-scene-strip figcaption { color: var(--paper); }
.lt-scene-strip + .lt-grid { margin-top: 40px; }

/* day and night of one house: the range input drives --split (site.js) */
.slider { position: relative; --split: 50%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); overflow: clip; background: var(--pine-deep); }
.slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider img.after { clip-path: inset(0 0 0 var(--split)); }
.slider input[type="range"] { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.slider .handle { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 1; width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.slider .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border: 2px solid var(--paper); border-radius: 50%; background: rgba(11, 20, 17, .55); transform: translate(-50%, -50%); }
.slider:has(input:focus-visible) .handle::after { outline: 3px solid var(--amber); outline-offset: 2px; }
.slider-labels { display: flex; justify-content: space-between; margin-top: 10px; color: var(--paper-78); font-weight: 600; }
.lt-daynight figcaption { margin-top: 6px; }
#hoa .split-b .lt-daynight { margin-bottom: 24px; }
.page-lighting .surface-paper-deep .slider-labels { color: var(--muted); }

/* ------------------------------------------------ booking form on paper inside the night body */
.lt-book .closer-copy h2 { max-width: 16ch; }
.lt-price .lt-deposit { max-width: 60ch; }
.lt-price .inc h3 { color: var(--ink); }

/* ------------------------------------------------ partial hooks without a site.css rule yet */
.page-lighting .page-hero-copy, .page-lighting .cta-band-copy { min-width: 0; }

/* Horizontal timeline: keep every step's number and heading on the same line */
.page-lighting .timeline.horizontal .tl-step { align-content: start; }
.page-lighting .timeline-wrap .steps-close { max-width: 44ch; }

/* ------------------------------------------------ paper sections inside the night body: undo the body-level night rules */
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) { color: var(--ink); --focus: var(--pine); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) :is(.muted, .section-head p, .lede, .lt-calm, .price-anchor-note, .price-anchor-label, .exc-list li, .tl-body p:not(.tl-get), .faq-a, figcaption, .review-platform, .gallery-caption, .mosaic-cap) { color: var(--muted); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) :is(.eyebrow, .section-head p.eyebrow, .text-link, .tl-n, .tl-when, .price-anchor-n, .stars) { color: var(--pine); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) .tl-body .tl-get { color: var(--ink); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) .btn-outline { color: var(--pine); border-color: var(--pine); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) .btn-outline:hover { background: var(--pine); color: var(--paper); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) :is(.checklist, .checklist li, .inc-list, .exc-list, .inc-list li, .exc-list li, .tl-step, .faq-item, .facts-panel dl, .facts-panel dl > div, .price-anchor, .lighting-lines, .lighting-lines li) { border-color: var(--hair); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) :is(.figure svg, .fig) { color: var(--ink); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) .figure-art { background: var(--paper-light); }
.page-lighting :is(.surface-paper, .surface-paper-deep, .surface-paper-light) .review { background: var(--paper-light); }
.lt-sec, .lt-gallery { position: relative; }

/* PHONE PASS 2026-11-06. Phone-only (under 768px). The hero is not touched. */
@media (max-width: 767px) {
  .lt-jump { position: static; }
  html:has(body.page-lighting) { scroll-padding-top: calc(var(--header-h) + 16px); }
  .lt-grid { margin-top: 24px; }
  .lt-how li, .lt-why li { padding-top: 14px; }
  .lt-scenes li, .lt-colors li { padding: 16px; }
  .lt-scene-strip { margin-top: 24px; gap: 16px 12px; }
  .lt-scene-strip + .lt-grid { margin-top: 24px; }
  .lt-grid.lt-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lt-colors .lt-swatch { height: 40px; margin-bottom: 12px; }
  .lt-colors h3 { font-size: 17px; }
  .lt-colors p { font-size: 15px; line-height: 1.45; }
  .lt-row-body > * + * { margin-top: 16px; }
  .page-lighting .lt-warranty .facts-panel dd { font-size: 16px; font-weight: 500; line-height: 1.5; }
}