/* Creative Trimlight NL: shared styles.
   Gold means an action or something that's lit. Motion means lights switching on.
   Some layout is still written inline on each section. Move repeated styles here as you go. */

:root {
  --surface: #0b0f18;
  --surface-header: #0f1520;
  --surface-raised: #151b27;
  --line: #222b3a;
  --line-strong: #2a3446;
  --field-border: #6b7487;
  --ink: #f3f5f8;
  --ink-muted: #a7afbe;
  --ink-glow: #fff3d1;
  --glow: #f5c542;
  --on-glow: #1a1406;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

::selection { background: var(--glow); color: var(--on-glow); }
input, textarea { caret-color: var(--glow); }

a { color: var(--glow); }
a:hover { color: #ffd96b; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}
img { max-width: 100%; }

.wrap, .ct-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* ---------- Seasons ----------
   Set data-season on <html> in build.js (SEASON). Everything marked
   only-xmas / only-everyday swaps automatically. */
html[data-season="everyday"] .only-xmas { display: none !important; }
html[data-season="christmas"] .only-everyday { display: none !important; }

/* ---------- Header ---------- */
.ct-nav { display: flex; }
.ct-menu { display: none; }
.ct-nav a:hover { color: var(--glow) !important; }
.ct-nav a[aria-current="page"] { color: var(--glow) !important; }
@media (max-width: 900px) {
  .ct-nav { display: none; }
  .ct-menu { display: block; }
}
.ct-menu summary::-webkit-details-marker { display: none; }

/* ---------- Footer ---------- */
.ct-footer ::selection { background: var(--glow); color: var(--on-glow); }
input, textarea { caret-color: var(--glow); }

a { color: var(--glow); }
.ct-footer a:hover { color: #ffd96b; }

/* ---------- Quote form ---------- */
.ct-quote ::selection { background: var(--glow); color: var(--on-glow); }
input, textarea { caret-color: var(--glow); }

a { color: var(--glow); }
.ct-quote button[disabled] { opacity: .6; cursor: wait; }
.ct-quote [aria-invalid="true"] { border-color: #ff8a8a !important; }
.ct-quote ::placeholder { color: #a7afbe; opacity: 1; }
.ct-quote .opt { font-size: 15px; color: var(--ink-muted); }
.ct-quote input[type="file"]::file-selector-button { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 1.5px solid var(--field-border); border-radius: 4px; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.ct-quote input[type="file"]::file-selector-button:hover { border-color: var(--ink); }
.field-error { font-weight: 600; color: #ff8a8a; }
.form-status { margin: 0; font-weight: 600; color: var(--ink); text-align: center; }
.form-status:empty { display: none; }
.form-status:focus { outline: none; }
.form-status.is-sent { padding: 16px; border: 1px solid var(--glow); border-radius: 4px; font-size: 19px; }

/* ---------- Motion ----------
   Lights switching on: the house row, the hero photo, the bulbs on the steps and strings.
   All of it is off for people who ask for reduced motion. */
@keyframes ct-on { 0% { opacity: 0 } 55% { opacity: 1 } 65% { opacity: .45 } 75%, 100% { opacity: 1 } }
.ct-roof { animation: ct-on 1.1s ease-out both; }
@keyframes ct-blink { 0%, 44% { filter: none } 50%, 94% { filter: brightness(.28) } 100% { filter: none } }
.ct-blink { animation: ct-blink 16s ease-in-out infinite; }

/* ---------- Residential: Try it yourself ---------- */
.ct-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--field-border); border-radius: var(--r-btn); padding: 10px 16px; min-height: 44px; box-sizing: border-box; cursor: pointer; font-weight: 600; font-size: 15px; transition: border-color .2s; }
.ct-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ct-chip:has(input:checked) { border-color: var(--glow); background: var(--surface-raised); }
.ct-chip:has(input:focus-visible) { outline: 2px solid var(--glow); outline-offset: 2px; }
.ct-chip i { width: 10px; height: 10px; border-radius: 50%; }
.ct-cap { display: none; }
.ct-try:has(#t-warm:checked) .cap-warm, .ct-try:has(#t-xmas:checked) .cap-xmas, .ct-try:has(#t-hallo:checked) .cap-hallo,
.ct-try:has(#t-team:checked) .cap-team, .ct-try:has(#t-paddy:checked) .cap-paddy, .ct-try:has(#t-off:checked) .cap-off { display: block; }
/* The house photo: one real photo per setting, stacked, and the picked one fades in.
   The colour versions were made from the warm white photo and lined up with it, so the house never moves. */
.try-photo { position: relative; aspect-ratio: 1229 / 819; overflow: hidden; border-radius: var(--r-media); background: #141b28; }
.try-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.try-photo .l-warm { position: relative; }
.ct-try:has(#t-warm:checked) .l-warm, .ct-try:has(#t-xmas:checked) .l-xmas, .ct-try:has(#t-hallo:checked) .l-hallo,
.ct-try:has(#t-team:checked) .l-team, .ct-try:has(#t-paddy:checked) .l-paddy, .ct-try:has(#t-off:checked) .l-off { opacity: 1; }

/* ---------- Warranty table ---------- */
.wt { width: 100%; border-collapse: collapse; font-size: 16px; }
.wt th, .wt td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wt th { font-size: 15px; color: var(--ink-muted); font-weight: 600; }
.wt td:last-child { font-weight: 700; color: var(--ink-glow); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ct-roof, .ct-blink { animation: none !important; }
  .try-photo img { transition: none; }
}

/* =====================================================================
   Layout system
   Fewer boxes, more photos. Sections are separated by space and hairlines,
   not by rounded cards. Corners are small (4px media, 8px buttons).
   ===================================================================== */
:root {
  --r-media: 4px;
  --r-btn: 8px;
  --section: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

.wrap-wide { max-width: 1240px; margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); box-sizing: border-box; }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-raised { background: var(--surface-raised); }
/* Two plain sections in a row share one gap instead of stacking two. */
.section:not(.section-raised) + .section:not(.section-raised) { padding-top: 0; }
/* No single word left alone on a short paragraph's last line. */
p, li, figcaption, .h3 { text-wrap: pretty; }
/* One look for links inside text: bold and underlined. */
main p a:not(.btn):not(.link-arrow), .ticks li a:not(.btn), .ruled li a:not(.btn) { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rule-top { border-top: 1px solid var(--line); }

.h2 { margin: 0; font-weight: 800; font-size: clamp(34px, 4.9vw, 62px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.h2-quiet { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.02em; }
.h3 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.lede { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--ink-muted); max-width: 560px; text-wrap: pretty; }
.muted { color: var(--ink-muted); }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; box-sizing: border-box; border-radius: var(--r-btn); font: inherit; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; transition: box-shadow .2s, background-color .2s, border-color .2s, color .2s; }
.btn-primary { background: var(--glow); color: var(--on-glow); border: 0; box-shadow: 0 0 28px -6px rgba(245,197,66,.55); }
.btn-primary:hover { color: var(--on-glow); box-shadow: 0 0 40px -4px rgba(245,197,66,.75); }
.btn-ghost { background: rgba(11,15,24,.35); color: var(--ink); border: 1.5px solid rgba(243,245,248,.55); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: rgba(243,245,248,.08); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--glow); }

/* Photo slots. Swap the placeholder text for an <img> later; the frame stays. */
.media { position: relative; overflow: hidden; border-radius: var(--r-media); background: #141b28; }
.media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; color: var(--ink-muted); font-size: 14px; background: repeating-linear-gradient(135deg, #131a26 0 14px, #151d2a 14px 28px); }

/* ---------- Header: pinned ---------- */
:root { --header-h: 80px; }
.ct-header { position: sticky !important; top: 0; z-index: 30 !important; background: rgba(11,15,24,.96) !important; border-bottom: 1px solid #222b3a !important; }
.ct-header [data-bar] { height: var(--header-h); }
.ct-logo { height: 60px; }
.ct-header-cta { min-height: 44px; padding: 10px 20px; font-size: 15px; white-space: nowrap; }
.ct-nav a { position: relative; padding: 6px 0; }
.ct-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--glow); }
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .ct-logo { height: 44px; }
  .ct-header-cta { padding: 10px 14px; }
  .ct-header [data-bar] { gap: 8px; }
}

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; min-height: clamp(600px, 86vh, 820px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,15,24,.95) 0%, rgba(11,15,24,.88) 40%, rgba(11,15,24,.35) 66%, rgba(11,15,24,.1) 100%), linear-gradient(to top, #0b0f18 0%, rgba(11,15,24,0) 34%); }
/* Tablets: the words cover more of the photo, so the shade reaches further across. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero::before { background: linear-gradient(90deg, rgba(11,15,24,.93) 0%, rgba(11,15,24,.8) 50%, rgba(11,15,24,.45) 78%, rgba(11,15,24,.25) 100%), linear-gradient(to top, #0b0f18 0%, rgba(11,15,24,0) 34%); }
  .hero .lede { text-shadow: 0 1px 14px rgba(11,15,24,.9); }
}
.hero-inner { position: relative; width: 100%; padding-top: 56px; padding-bottom: 230px; }
.hero-copy { max-width: 600px; }
.hero h1 { margin: 0; font-weight: 800; font-size: clamp(46px, 7vw, 92px); line-height: .98; letter-spacing: -0.035em; }
.hero-glow { color: var(--ink-glow); text-shadow: 0 0 28px rgba(245,197,66,.55); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-badge { position: absolute; right: clamp(16px, 4vw, 40px); bottom: 200px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: var(--r-btn); background: rgba(15,21,32,.94); border: 1px solid rgba(245,197,66,.55); color: var(--ink); text-decoration: none; box-shadow: 0 0 26px -8px rgba(245,197,66,.5); }
.hero-badge:hover { color: var(--ink); border-color: var(--glow); }
.hero-row { position: absolute; left: 0; right: 0; bottom: 0; height: 172px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; z-index: 1; }
@media (max-width: 1100px) { .hero-badge { position: static; margin-top: 32px; } }
/* Phones: photo on top with nothing over it, then the words, then the house row. */
@media (max-width: 760px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .hero::before { display: none; }
  .hero-photo { position: relative; inset: auto; z-index: 0; height: 58vw; min-height: 210px; overflow: hidden; }
  .hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to top, #0b0f18, rgba(11,15,24,0)); }
  .hero-inner { display: contents; }
  .hero-copy { order: 2; max-width: none; padding: 20px clamp(16px, 4vw, 40px) 0; box-sizing: border-box; }
  .hero-row { order: 3; position: relative; flex: none; margin-top: 28px; }
  .hero-badge { order: 4; position: static; align-self: flex-start; margin: 20px clamp(16px, 4vw, 40px) 8px; }
  .hero-ctas { margin-top: 24px; flex-wrap: wrap; gap: 10px; }
  .hero-ctas .btn { flex: 1 1 180px; padding: 14px 16px; font-size: 16px; white-space: normal; text-align: center; }
}

/* ---------- Two-column intro with a ruled list ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled > li { position: relative; padding: 24px 0 24px 26px; border-top: 1px solid var(--line-strong); }
.ruled > li::before { content: ""; position: absolute; left: 0; top: 33px; width: 10px; height: 10px; border-radius: 50%; background: var(--glow); }
.ruled > li:last-child { border-bottom: 1px solid var(--line-strong); }
.ruled p { margin: 6px 0 0; color: var(--ink-muted); }

/* ---------- Feature columns: photo on top, words below, no box ---------- */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
@media (max-width: 900px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } }
.feature .media { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.feature p { margin: 8px 0 0; color: var(--ink-muted); }

/* Icon grid split by hairlines, like a spec sheet */
.icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.icon-grid > div { padding: 36px 32px 36px 0; border-bottom: 1px solid var(--line-strong); }
.icon-grid > div:not(:nth-child(3n+1)) { padding-left: 32px; border-left: 1px solid var(--line-strong); }
.icon-grid svg { display: block; margin-bottom: 18px; }
.icon-grid p { margin: 8px 0 0; color: var(--ink-muted); max-width: 320px; }
@media (max-width: 900px) {
  .icon-grid { grid-template-columns: minmax(0, 1fr); }
  .icon-grid > div, .icon-grid > div:not(:nth-child(3n+1)) { padding: 28px 0; border-left: 0; }
}

/* ---------- Big photo tiles with the words on the photo ---------- */
.tiles-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 760px) { .tiles-2 { grid-template-columns: minmax(0, 1fr); } }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; color: var(--ink); text-decoration: none; background: #141b28; }
.tile .ph, .tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: filter .3s; }
.tile .ph { padding-bottom: 120px; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,15,24,.96) 0%, rgba(11,15,24,.82) 34%, rgba(11,15,24,.4) 55%, rgba(11,15,24,0) 72%); pointer-events: none; }
.tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 3vw, 32px); }
.tile-text .h3 { font-size: clamp(24px, 2.4vw, 30px); }
.tile-text p { margin: 8px 0 14px; color: #c9cfda; max-width: 440px; }
.tile:hover { color: var(--ink); }
.tile:hover .ph, .tile:hover > img, .tile:focus-visible > img { filter: none; }

/* ---------- How it works: a string of lights that comes on as you scroll ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.steps::before, .steps::after { content: ""; position: absolute; left: 11px; right: 11px; top: 11px; height: 2px; background: var(--line-strong); }
.steps::after { background: var(--glow); transform-origin: left; transform: scaleX(1); }
.steps li { position: relative; padding-top: 48px; }
.bulb { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 6px var(--surface); z-index: 1; }
.steps .step-n { font-size: 14px; font-weight: 700; color: var(--glow); letter-spacing: .06em; }
.steps h3 { margin-top: 6px; }
.steps p { margin: 8px 0 0; color: var(--ink-muted); }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before, .steps::after { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .steps::after { transform-origin: top; }
  .steps li { padding: 0 0 36px 52px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ct-string-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes ct-string-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes ct-bulb { from { background: #2a3140; } to { background: var(--glow); } }
    .steps { view-timeline: --steps block; }
    .steps::after { animation: ct-string-x linear both; animation-timeline: --steps; animation-range: entry 60% cover 55%; }
    .steps .bulb { animation: ct-bulb linear both; animation-timeline: --steps; }
    .steps li:nth-child(1) .bulb { animation-range: entry 60% entry 80%; }
    .steps li:nth-child(2) .bulb { animation-range: entry 80% cover 30%; }
    .steps li:nth-child(3) .bulb { animation-range: cover 30% cover 42%; }
    .steps li:nth-child(4) .bulb { animation-range: cover 42% cover 55%; }
    @media (max-width: 900px) {
      .steps::after { animation-name: ct-string-y; animation-range: entry 20% cover 70%; }
      .steps li:nth-child(1) .bulb { animation-range: entry 20% entry 40%; }
      .steps li:nth-child(2) .bulb { animation-range: entry 40% cover 40%; }
      .steps li:nth-child(3) .bulb { animation-range: cover 40% cover 55%; }
      .steps li:nth-child(4) .bulb { animation-range: cover 55% cover 70%; }
    }
  }
}

/* ---------- Warranty promise ---------- */
.promise { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 760px) { .promise { grid-template-columns: minmax(0, 1fr); } }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; }
.ticks svg { display: none; }
/* Lit bulbs as bullets, the same marker as the ruled lists. */
.ticks li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--glow); }

/* ---------- Gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 17vw, 230px); gap: 8px; }
.mosaic > figure { display: flex; flex-direction: column; margin: 0; min-height: 0; }
.mosaic > figure:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic > figure:last-child { grid-column: 1 / -1; }
.mosaic .ph, .mosaic img { flex: 1; width: 100%; min-height: 0; object-fit: cover; border-radius: var(--r-media); }
.mosaic figcaption { padding: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
}

/* ---------- FAQ: hairline accordion ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; font-weight: 700; font-size: 19px; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--glow); }
.faq summary i { position: relative; flex: none; width: 18px; height: 18px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { margin: 0; padding: 0 48px 26px 0; color: var(--ink-muted); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
.towns { list-style: none; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 24px; }
.towns li { padding: 8px 0; border-top: 1px solid var(--line); break-inside: avoid; }

/* Footer links read as a list, not a wall of underlines */
.ct-footer footer a { color: var(--ink); text-decoration: none; transition: color .2s; }
.ct-footer footer a:hover { color: var(--glow); }
.mosaic > figure:last-child img { object-position: center 28%; }

/* Typed custom property so the slider hint can animate smoothly */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* =====================================================================
   Inner pages
   ===================================================================== */

/* Shorter photo hero for inner pages. */
.hero-sub { min-height: clamp(480px, 68vh, 660px); }
.hero-sub .hero-inner { padding-top: 48px; padding-bottom: 72px; }
.hero-sub h1 { font-size: clamp(44px, 6.4vw, 84px); }
@media (max-width: 760px) { .hero-sub .hero-inner { padding-top: 220px; padding-bottom: 56px; } }

/* Plain hero: the words beside the page's own proof */
.hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-split.lead-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero-split h1 { margin: 0; font-weight: 800; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
@media (max-width: 860px) { .hero-split, .hero-split.lead-right { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .hero-sub .hero-copy { padding-bottom: 40px; } }

/* Icon grid variants: 2 and 4 across */
.icon-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icon-grid.g2 > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
.icon-grid.g2 > div:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--line-strong); }
.icon-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icon-grid.g4 > div { padding-right: 24px; }
.icon-grid.g4 > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
.icon-grid.g4 > div:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--line-strong); }
@media (max-width: 1000px) {
  .icon-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-grid.g4 > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .icon-grid.g4 > div:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line-strong); }
}
@media (max-width: 640px) {
  .icon-grid.g2, .icon-grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .icon-grid.g2 > div, .icon-grid.g4 > div, .icon-grid.g2 > div:nth-child(2n), .icon-grid.g4 > div:nth-child(2n) { padding: 24px 0; border-left: 0; }
}

/* Ticked list used beside photos */
.ticks.light li { font-weight: 400; }
.ticks.light strong { font-weight: 700; }

/* ---------- Residential: one house, day and night ---------- */
.compare { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media); background: #141b28; --pos: 50%; user-select: none; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare .night { clip-path: inset(0 0 0 var(--pos)); }
.compare .line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.compare .knob { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--glow); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 6px 20px -6px rgba(0,0,0,.6); }
.compare-wide { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .compare-wide { aspect-ratio: 3 / 2; } }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare input:focus-visible ~ .knob { outline: 2px solid var(--ink); outline-offset: 3px; }
.compare .tag { position: absolute; top: 14px; padding: 6px 10px; border-radius: 4px; background: rgba(11,15,24,.75); font-size: 13px; font-weight: 700; pointer-events: none; }
.compare .tag.day { left: 14px; }
.compare .tag.nite { right: 14px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ct-hint { 0%, 100% { --pos: 50%; } 30% { --pos: 38%; } 65% { --pos: 62%; } }
  .compare.hint { animation: ct-hint 2.4s var(--ease-out) 1; }
}

/* Year of colours: little strings that switch on as they scroll in */
.year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.year > div { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line-strong); }
.year > div:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.year h3 { margin: 14px 0 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.year p { margin: 6px 0 0; font-size: 15px; color: var(--ink-muted); }
.string { display: flex; gap: 8px; }
.string i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
@media (max-width: 1000px) {
  .year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .year > div:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line-strong); }
}
@media (max-width: 520px) {
  .year { grid-template-columns: minmax(0, 1fr); }
  .year > div, .year > div:nth-child(2n) { padding: 22px 0; border-left: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ct-bulb-on { from { background: #2a3140; } to { background: var(--c); } }
    .string { view-timeline: --str block; }
    .string i { animation: ct-bulb-on linear both; animation-timeline: --str; }
    .string i:nth-child(1) { animation-range: entry 40% entry 60%; }
    .string i:nth-child(2) { animation-range: entry 60% entry 80%; }
    .string i:nth-child(3) { animation-range: entry 80% entry 100%; }
    .string i:nth-child(4) { animation-range: entry 100% cover 30%; }
  }
}

/* ---------- Commercial: a day on the roofline ---------- */
.day { border-radius: var(--r-media); background: #0f1520; overflow: hidden; }
.day-photo { position: relative; aspect-ratio: 3 / 2; background: #141b28; }
.day-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.day-photo .day-day { position: relative; }
.day-photo .day-white { opacity: 0; }
.day-bar { position: relative; display: grid; grid-template-columns: 3fr 9fr 20fr 16fr; height: 44px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.day-bar span { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; color: #0b0f18; }
.day-bar .off { background: #2a3140; color: var(--ink-muted); }
.day-bar .brand { background: linear-gradient(90deg, #b44cff, #ff5cc8 55%, #8fd8ff); }
.day-bar .secure { background: #f3f5f8; }
.day-bar .dayt { background: #1c2433; color: var(--ink-muted); }
.day-head { display: flex; justify-content: space-between; padding: 14px 16px; font-size: 13px; color: var(--ink-muted); }
.day-head strong { color: var(--ink); }
.day-head-side { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.day-pause { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 1px solid var(--field-border); border-radius: 4px; min-height: 32px; padding: 2px 10px; cursor: pointer; }
.day-pause:hover { border-color: var(--ink); }
.day-note { margin: 0; padding: 4px 16px 16px; font-size: 14px; }
.day-key { display: none; }
.day.is-paused .day-brand, .day.is-paused .day-white, .day.is-paused .playhead { animation-play-state: paused !important; }
.day-bar .playhead { position: absolute; top: -6px; bottom: -6px; left: 0; width: 3px; padding: 0; background: var(--glow); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ct-play { from { left: 0; } to { left: calc(100% - 3px); } }
  /* The photo follows the marker: lights off by day, brand colours from dusk, security white overnight. */
  @keyframes ct-brand { 0%, 5.3% { opacity: 0; } 7.3%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
  @keyframes ct-white { 0%, 24% { opacity: 0; } 26%, 65.7% { opacity: 1; } 67.7%, 100% { opacity: 0; } }
  .day-photo .day-brand { animation: ct-brand 12s linear infinite; }
  .day-photo .day-white { animation: ct-white 12s linear infinite; }
  .day-bar .playhead { animation: ct-play 12s linear infinite; }
}

/* ---------- Lighting solutions ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(11,15,24,.96); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; transition: color .2s; }
.subnav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--glow); transform: scaleX(0); }
.subnav a:hover, .subnav a.on { color: var(--ink); }
.subnav a.on::after { transform: scaleX(1); }
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.subnav ~ section[id] { scroll-margin-top: calc(var(--header-h) + 68px); }

.sol { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 88px); align-items: center; }
.sol.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sol.flip > :first-child { order: 2; }
@media (max-width: 900px) { .sol, .sol.flip { grid-template-columns: minmax(0, 1fr); } .sol.flip > :first-child { order: 0; } }
.sol .media { aspect-ratio: 4 / 3; }
/* A wide row: the photo runs the full width, the words sit under it */
.sol.wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sol.wide .media { aspect-ratio: 21 / 9; }
.sol.wide > div:last-child { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(40px, 5vw, 80px); align-items: start; }
.sol.wide .h2 { grid-column: 1 / -1; }
.sol.wide .lede { margin-top: 0; }
.sol.wide .ticks { margin-top: 0; }
@media (max-width: 900px) { .sol.wide .media { aspect-ratio: 4 / 3; } .sol.wide > div:last-child { grid-template-columns: minmax(0, 1fr); } }
/* Short lists with a bold lead-in */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); border-top: 1px solid var(--line-strong); }
.facts li { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line-strong); align-content: start; }
.facts strong { font-weight: 700; font-size: 19px; }
.facts span { color: var(--ink-muted); }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.also { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 32px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.also-video { position: relative; flex: 0 1 360px; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-media); background: #141b28; }
.also-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.also-video .day-pause { position: absolute; right: 10px; bottom: 10px; background: rgba(11,15,24,.7); }
@media (max-width: 760px) { .also-video { flex-basis: 100%; } }

/* ---------- Warranty ---------- */
.badge { position: relative; width: min(320px, 80vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #151b27; box-shadow: 0 0 70px -10px rgba(245,197,66,.45); }
.badge svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.badge .ring circle { fill: none; stroke: var(--glow); stroke-width: 2.5; stroke-dasharray: 302; stroke-dashoffset: 0; }
.badge small { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.badge b { font-size: clamp(36px, 5vw, 46px); font-weight: 800; line-height: 1.05; color: var(--ink-glow); text-shadow: 0 0 24px rgba(245,197,66,.55); }
.wt-wrap { overflow-x: auto; border-top: 1px solid var(--line-strong); }
.wt th, .wt td { padding-left: 0; }
.wt tbody tr { transition: background-color .2s; }
.wt tbody tr:hover { background: rgba(243,245,248,.03); }
.nope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.nope li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.nope svg { flex: none; margin-top: 4px; }

/* ---------- About ---------- */
.story { max-width: 760px; }
.story p { margin: 20px 0 0; font-size: 20px; line-height: 1.6; color: var(--ink-muted); }
.story p:first-of-type { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.45; color: var(--ink); }
.place-list { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; font-weight: 800; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; letter-spacing: -0.02em; }
.place-list li:not(:last-child)::after { content: ","; margin-right: .3em; }
.dealer { display: flex; align-items: center; justify-content: center; padding: 40px; border-radius: var(--r-media); background: #000; }
.dealer img { width: 100%; max-width: 360px; height: auto; }
.day-ticks { position: relative; height: 34px; margin: 0; font-size: 12px; color: var(--ink-muted); }
.day-ticks span { position: absolute; top: 10px; white-space: nowrap; padding-left: 6px; border-left: 1px solid var(--line-strong); }
.day-ticks span:first-child { transform: none; }
.split.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) { .split.split-7-5 { grid-template-columns: minmax(0, 1fr); } }
/* Photo that sits to the right of the headline on wide screens, fading in from the left */
@media (min-width: 900px) {
  .hero-photo.right { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
  .hero-photo.right img { object-position: 50% 45%; }
}
@media (max-width: 600px) {
  .day-bar span:not(.playhead) { font-size: 0; padding: 0; }
  .day-ticks span:nth-child(2) { display: none; }
  .day-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0 16px 10px; list-style: none; font-size: 13px; color: var(--ink-muted); }
  .day-key li { display: inline-flex; align-items: center; gap: 6px; }
  .day-key i { width: 12px; height: 12px; border-radius: 2px; }
  .day-note { display: none; }
}

/* Phones: short feature grids go two across instead of one long stack */
@media (max-width: 640px) {
  .icon-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-grid.g4 > div,
  .icon-grid.g4 > div:nth-child(2n) { padding: 20px 14px 20px 0; border-left: 0; }
  .icon-grid.g4 > div:nth-child(2n) { padding-left: 14px; padding-right: 0; border-left: 1px solid var(--line-strong); }
  .icon-grid.g4 svg { width: 26px; height: 26px; margin-bottom: 12px; }
  .icon-grid.g4 .h3 { font-size: 17px; line-height: 1.25; }
  .icon-grid.g4 p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; }
}

/* =====================================================================
   Phones only. Shorter pages without changing anything on desktop.
   ===================================================================== */
@media (max-width: 700px) {
  :root { --section: 48px; }
  .head-row { margin-bottom: 28px; }

  /* Lists with hairlines: a little tighter */
  .ruled > li { padding: 18px 0 18px 24px; }
  .ruled > li::before { top: 27px; }
  .steps li { padding-bottom: 18px; }
  .faq summary { padding: 18px 0; font-size: 17px; }
  .faq details p { padding: 0 32px 20px 0; }

  /* Holidays on Residential: two across, like the other short grids */
  .year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year > div, .year > div:not(:nth-child(4n+1)) { padding: 18px 12px 18px 0; border-left: 0; }
  .year > div:nth-child(2n) { padding-left: 14px; padding-right: 0; border-left: 1px solid var(--line-strong); }
  .year h3 { margin-top: 10px; font-size: 16px; }
  .year p { font-size: 14px; line-height: 1.45; }

  /* Three photo features on the homepage: swipe sideways instead of a tall stack */
  .swipe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
           margin-right: calc(-1 * clamp(16px, 4vw, 40px)); padding-right: clamp(16px, 4vw, 40px); }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82%; scroll-snap-align: start; }
  .swipe .feature .media { margin-bottom: 16px; }

  /* Homepage FAQ: questions first, then the town list, shown compactly */
  .faq-split { gap: 24px; }
  .faq-split > div:first-child { display: contents; }
  .faq-split > div:first-child > .h2 { order: 0; }
  .faq-split > #faq { order: 1; }
  .faq-split > div:first-child > :not(.h2) { order: 2; }
  .faq-split .h3 { margin-top: 8px !important; }
  .faq-split .towns { columns: auto; display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; }
  .faq-split .towns li { padding: 0; border: 0; }
  .faq-split .towns li:not(:last-child)::after { content: ","; margin-right: 6px; }

  /* Quote form: tighter, name and phone side by side */
  .ct-quote form { gap: 12px !important; }
  .ct-quote form > div:first-child { gap: 10px !important; }
  .ct-quote form > div:first-child > label { flex: 1 1 0 !important; min-width: 0; }
  .ct-quote fieldset label { padding: 8px 12px !important; min-height: 44px; font-size: 15px; }
  .ct-quote textarea { height: 96px; }
  .ct-quote .lede { font-size: 17px; margin-top: 12px; }
  .ct-quote > .wrap-wide { gap: 28px !important; }

  /* Footer: link groups two across */
  .ct-footer footer { padding-top: 36px !important; padding-bottom: 36px !important; }
  .ct-footer footer > .wrap-wide:first-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px !important; }
  .ct-footer footer > .wrap-wide:first-child > div:first-child, .ct-footer footer > .wrap-wide:first-child > div:last-child { grid-column: 1 / -1; }
  .ct-footer footer > .wrap-wide:first-child img { height: 60px !important; }
  .ct-footer footer > .wrap-wide:last-child { margin-top: 24px !important; }
}

/* Pick a colour on phones: the photo sits between the intro and the buttons, so you see it change as you tap */
@media (max-width: 860px) {
  .ct-try > div:first-child { display: contents; }
  .ct-try > div:first-child > .h2 { order: 0; }
  .ct-try > div:first-child > .lede { order: 1; margin: 0; }
  .ct-try > .try-photo { order: 2; }
  .ct-try > div:first-child > fieldset { order: 3; margin-top: 0 !important; }
  .ct-try > div:first-child > [aria-live] { order: 4; margin-top: 0 !important; }
  .ct-try > div:first-child > .hero-ctas { order: 5; margin-top: 0 !important; }
  .ct-try { gap: 18px !important; }
}

/* ---------- Residential: the app on an iPhone, built in code so it stays sharp ----------
   Everything inside is sized in em, and the em follows the phone's width. */
.iphone { position: relative; margin: 0 auto; width: min(300px, 100%); aspect-ratio: 9 / 19.5; container-type: inline-size; }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 1.2%; border-radius: 2px; background: #2b2f38; }
.iphone::before { left: -1.1%; top: 18%; height: 7%; box-shadow: 0 9cqw 0 #2b2f38, 0 19cqw 0 #2b2f38; }
.iphone::after { right: -1.1%; top: 25%; height: 11%; }
.iphone-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 15cqw; border: 3.2cqw solid #050608;
  box-shadow: 0 0 0 0.8cqw #3b404b, 0 30px 60px -20px rgba(0,0,0,.8);
  background: radial-gradient(120% 60% at 50% 0%, #6c3ad8 0%, #4520a8 45%, #2c1475 100%);
  font: 600 4.1cqw/1.25 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #fff; }
.ios-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 11cqw; padding: 0 7cqw 0 9cqw; font-size: 4.4cqw; }
.ios-bar .island { position: absolute; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.4cqw; margin-left: -15cqw; border-radius: 6cqw; background: #000; }
.ios-icons { display: inline-flex; align-items: center; gap: 1.4cqw; }
.ios-icons svg { fill: currentColor; height: auto; }
.app { padding: 1cqw 4.5cqw 0; }
.app-top { display: flex; justify-content: space-between; align-items: center; font-size: 6cqw; font-weight: 400; padding: 1cqw 1cqw 2cqw; }
.app-top svg { width: 5.6cqw; height: 5.6cqw; }
.app-label { margin: 2.6cqw 0 1.4cqw 1cqw; font-size: 3.1cqw; font-weight: 500; color: rgba(255,255,255,.75); }
.app-card { position: relative; padding: 2.6cqw 2.6cqw 4.6cqw; border-radius: 3cqw; background: rgba(20,8,60,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.6cqw; margin-bottom: 1.8cqw; }
.dots i { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-size: 2.7cqw; font-weight: 700; box-shadow: inset 0 0 0 0.5cqw rgba(255,255,255,.18); }
.dots i.none { position: relative; }
.dots i.none::before, .dots i.none::after { content: ""; position: absolute; width: 55%; height: 0.8cqw; border-radius: 1cqw; background: #ff3b2f; transform: rotate(45deg); }
.dots i.none::after { transform: rotate(-45deg); }
.dots.pattern { grid-template-columns: repeat(6, 1fr); gap: 3cqw; padding: 0 1.5cqw; margin-top: 3cqw; }
.dots.pattern i { font-size: 3cqw; }
.chev { position: absolute; left: 50%; bottom: 1.4cqw; width: 2.2cqw; height: 2.2cqw; margin-left: -1.1cqw; border-right: 0.6cqw solid rgba(255,255,255,.6); border-bottom: 0.6cqw solid rgba(255,255,255,.6); transform: rotate(45deg); }
.app-select { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 1cqw 2cqw; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 4.3cqw; font-weight: 500; letter-spacing: .02em; }
.app-card:has(> .app-select:only-child) { padding-bottom: 2.6cqw; }
.caret { width: 0; height: 0; border-left: 1.6cqw solid transparent; border-right: 1.6cqw solid transparent; border-top: 1.8cqw solid #d6a6ff; }
.sliders { padding: 3cqw 2.6cqw; display: grid; gap: 4.4cqw; }
.slider { display: grid; grid-template-columns: 4.4cqw 1fr 4.4cqw; align-items: center; gap: 2.4cqw; }
.track { position: relative; height: 1.6cqw; border-radius: 2cqw; background: rgba(255,255,255,.18); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #8a4dff, #e04fd8); }
.fill.dim { background: rgba(255,255,255,.4); }
.thumb { position: absolute; top: 50%; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sun { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.6cqw #fff, 0 0 0 0.8cqw rgba(255,255,255,.0); outline: 0.5cqw dotted #fff; outline-offset: 0.5cqw; }
.sun.small { transform: scale(.75); }
.turtle, .gauge { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.6cqw rgba(255,255,255,.75); }
.gauge { border-radius: 50% 50% 0 0; height: 2.4cqw; }
.app-bottom { position: absolute; left: 0; right: 0; bottom: 6cqw; display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 5.4cqw; font-weight: 400; }
.app-bottom span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.6cqw; height: 9cqw; }
.app-bottom small { font-size: 2.9cqw; color: rgba(255,255,255,.85); }
.home-bar { position: absolute; left: 50%; bottom: 1.8cqw; width: 36cqw; height: 1.4cqw; margin-left: -18cqw; border-radius: 1cqw; background: rgba(255,255,255,.85); }
@media (max-width: 700px) { .iphone { width: 230px; } }

/* What sets us apart: a store kit next to ours, one row per difference.
   The kit's bulb is off, ours is on. */
.vs { border-top: 1px solid var(--line-strong); }
.vs-head, .vs-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(24px, 3vw, 48px); }
.vs-head { padding: 16px 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink-muted); border-bottom: 1px solid var(--line-strong); }
.vs-head span:last-child { color: var(--ink-glow); }
.vs-row { padding: 22px 0; border-bottom: 1px solid var(--line-strong); align-items: baseline; }
.vs-row .h3 { font-size: 19px; }
.vs-row p { position: relative; margin: 0; padding-left: 22px; }
.vs-row p::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; }
.vs-kit { color: var(--ink-muted); }
.vs-kit::before { background: #2a3140; box-shadow: inset 0 0 0 1px #3a4357; }
.vs-us { color: var(--ink); font-weight: 600; }
.vs-us::before { background: var(--glow); }
.vs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .vs-head { display: none; }
  .vs-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .vs-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
  .vs-us .vs-label { color: var(--ink-glow); }
}
/* The warranty badge, smaller, beside the Home warranty section. */
.badge.badge-sm { width: clamp(180px, 20vw, 240px); margin: 0; }
.badge.badge-sm b { font-size: clamp(30px, 3.4vw, 38px); }
.badge.badge-sm small { font-size: 13px; }
.vs { margin-top: clamp(28px, 3vw, 44px); }

/* ---------- Homepage refinement: the photograph, then the light ---------- */
.hero-home { min-height: clamp(660px, 87svh, 860px); }
.hero-home .hero-inner { padding-top: 80px; padding-bottom: 230px; }
.hero-home .hero-copy { width: 100%; max-width: 740px; margin-inline: auto; text-align: center; }
.hero-home h1 { font-size: clamp(48px, 5.7vw, 82px); line-height: 1.04; letter-spacing: -.035em; }
.hero-line { display: block; }
.hero-home .lede { max-width: 510px; margin: 26px auto 0; font-size: 20px; line-height: 1.6; }
.hero-location { margin: 14px auto 0; font-size: 14px; color: var(--ink-muted); }
.hero-home .hero-ctas { justify-content: center; margin-top: 30px; }
.hero-home .hero-badge { position: static; display: flex; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 32px auto 0; box-shadow: none; }
.hero-home .hero-row { height: 180px; }
.home .ct-roof, .home .ct-blink { animation: none; }
.hero-home .hero-photo img { object-position: 66% 42%; filter: brightness(1.1) contrast(1.04) saturate(1.08); }
.hero-home::before { background: linear-gradient(90deg, rgba(11,15,24,.38), rgba(11,15,24,.68) 50%, rgba(11,15,24,.38)), linear-gradient(0deg, #0b0f18, transparent 38%); }
.proof-heading { align-items: flex-end; }
.home-proof .h2 { max-width: 600px !important; }
.proof-intro { max-width: 340px; }
.proof-intro .lede { margin: 0; color: var(--ink); }
.proof-intro .muted { margin: 10px 0 0; font-size: 15px; }
.home-proof .compare-wide { aspect-ratio: 2 / 1; }
.image-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
/* Keep the statement and its explanation together. The hidden seasonal block
   between these sections means the generic adjacent-section rule cannot apply. */
html[data-season="everyday"] .home-proof { padding-bottom: clamp(40px, 5vw, 64px); }
.home-statement { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 6vw, 88px); }
.statement-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.home-statement .h2 { max-width: 900px; font-size: clamp(32px, 3.3vw, 44px); line-height: 1.12; text-wrap: balance; }
.home-statement .lede { max-width: 58ch; margin: 24px 0 0; font-size: 18px; line-height: 1.65; }
.statement-photo { width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 1; }
.statement-photo > img { object-position: 54% center; }
@media (max-width: 900px) {
  .statement-layout { grid-template-columns: minmax(0, 1fr); }
  .home-statement .h2 { max-width: 760px; font-size: clamp(32px, 4.5vw, 40px); }
  .statement-photo { max-width: none; }
}
.home-benefits { padding-block: clamp(56px, 7vw, 96px); }
.home-benefits .head-row { margin-bottom: clamp(28px, 4vw, 48px); }
/* User-directed roof-peak motif: broad angled geometry that fades into the
   existing navy, behind content. The clipped layer never adds page width. */
.roof-peak { position: relative; isolation: isolate; overflow: clip; }
.roof-peak::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 112%; min-width: 900px;
  translate: -50% 0;
  background: url('/images/roof-peak.svg') center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 62%, transparent);
}
.roof-peak-reverse::before { transform: scaleX(-1); opacity: .7; }
.roof-peak-quiet::before { opacity: .5; }
@media (max-width: 700px) {
  .roof-peak::before { opacity: .7; }
  .roof-peak-quiet::before { opacity: .4; }
}
.home-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start; }
/* A roofline silhouette: the centre is the peak, with equal eaves either side. */
.home-features .feature .media { aspect-ratio: 4 / 3; }
.home-features .feature:nth-child(2) { padding-top: 0; }
.home-features .feature:first-child, .home-features .feature:last-child { padding-top: 64px; }
.home-gallery .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 22vw, 300px); gap: 32px 24px; }
.home-gallery .mosaic > figure:first-child { grid-column: span 2; grid-row: span 2; }
.home-gallery .mosaic > figure:last-child { grid-column: auto; }
.home-gallery .mosaic > figure:last-child img { object-position: center; }
.home-gallery figcaption { padding-top: 12px; }
.home-gallery .head-row .h2 { max-width: 640px; }

/* Shared details: links and fields feel consistent with the site's palette. */
.link-arrow svg { transition: transform .2s var(--ease-out); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(4px); }
.ct-menu nav a:hover, .ct-menu nav a:focus-visible, .ct-menu nav a[aria-current="page"] { background: var(--surface); color: var(--glow) !important; }
.ct-menu[open] summary { border-color: var(--glow) !important; }
.ct-quote input, .ct-quote textarea { min-width: 0; max-width: 100%; transition: border-color .2s; }
.ct-quote input:focus, .ct-quote textarea:focus { border-color: var(--glow) !important; }
.ct-quote fieldset label:has(input:checked) { border-color: var(--glow) !important; background: var(--surface-raised); }
.ct-quote fieldset label:has(input:focus-visible) { outline: 2px solid var(--glow); outline-offset: 3px; }
.ct-quote a[href^="mailto:"], .ct-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
.swipe:focus-visible { outline: 2px solid var(--glow); outline-offset: 5px; }

@media (max-width: 1040px) {
  .ct-nav { display: none; }
  .ct-menu { display: block; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-home .hero-inner { padding-top: 60px; padding-bottom: 190px; }
  .hero-home .hero-copy { max-width: 660px; }
  .hero-home .hero-badge { margin-top: 28px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .home-features { gap: 24px; }
  .home-features .feature:first-child, .home-features .feature:last-child { padding-top: 56px; }
}
@media (max-width: 760px) {
  .hero-home { min-height: 0; }
  .hero-home .hero-copy { max-width: none; padding-top: 12px; }
  .hero-home h1 { font-size: clamp(38px, 7.8vw, 58px); line-height: 1.06; }
  .hero-home .lede { font-size: 18px; margin-top: 20px; max-width: 540px; }
  .hero-home .hero-location { max-width: 32ch; }
  .hero-home .hero-badge { order: 3; align-self: center; max-width: calc(100% - 32px); margin: 24px auto 0; }
  .hero-home .hero-row { order: 4; height: 180px; margin-top: 36px; }
  .home-proof .compare-wide { aspect-ratio: 3 / 2; }
  .proof-heading { gap: 20px; }
  .home-gallery .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 22px 14px; }
  .home-gallery .mosaic > figure:first-child { grid-row: span 2; }
  .home-gallery .mosaic > figure:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .home-features .feature:nth-child(n) { padding-top: 0; }
  .home-features .feature .media { aspect-ratio: 4 / 3; }
  .home-features { padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--field-border) var(--surface-raised); }
  .home-features::-webkit-scrollbar { display: block; height: 3px; }
  .home-features::-webkit-scrollbar-thumb { background: var(--field-border); }
}
@media (max-width: 380px) {
  .ct-logo { height: 36px; }
  .ct-header-cta { font-size: 13px; padding: 10px; }
  .ct-header [data-bar] > div { gap: 8px !important; }
  .hero-home h1 { font-size: 36px; }
  .hero-home .hero-badge { padding-right: 12px; gap: 10px; }
  .hero-home .hero-badge > span:last-child > span:last-child { font-size: 16px !important; }
  .icon-grid.g4, .year { grid-template-columns: minmax(0, 1fr); }
  .icon-grid.g4 > div:nth-child(n), .year > div:nth-child(n) { padding: 20px 0; border-left: 0; }
  .home-gallery .mosaic { grid-auto-rows: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .link-arrow svg, .ct-quote input, .ct-quote textarea { transition: none; }
  .faq details::details-content { transition: none; }
}