/* Terrace Solar — storefront styles
   Static, dependency-free. Light palette with dark-mode support. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* One continuous Terrace Solar palette - warm charcoal at the dark end,
     warm sand at the light end, orange sunlight throughout. Nothing is pure
     black or pure white, so light and dark sections read as the same brand
     rather than different pages stitched together. */
  --charcoal-deep: #17140F;   /* darkest ground - warm near-black, film/footer */
  --charcoal: #211D17;        /* dark surfaces, product presentation stage */
  --charcoal-2: #2C271F;      /* raised dark surfaces */
  --paper: #F4F0E8;           /* page ground - warm sand, never stark white */
  --surface: #EDE6D8;         /* cards - deeper sand */
  --surface-2: #E3DAC7;       /* raised / tinted bands */
  --ink: #221D15;             /* primary text - warm near-black, not navy */
  --ink-2: #3A3327;           /* secondary text - warm charcoal */
  --muted: #7A7160;           /* secondary text - warm medium gray */
  --line: #D9CFB8;            /* hairlines and card borders - warm sand-gray */
  --terrace-orange: #FBAC32;
  --terrace-navy: #101828;
  --accent: #FBAC32;          /* Terrace Solar orange - the sunlight thread */
  --accent-graphic: #FBAC32;
  --accent-ink: #221D15;      /* dark ink on an orange fill */
  --accent-wash: #FBEFDA;     /* warm sand wash behind orange */
  --navy: #211D17;            /* dark band background (renamed role: charcoal, not navy) */
  --stage: #211D17;           /* neutral presentation surface behind product photography */
  --stage-2: #2C271F;
  --flag: #e8bb7a;
  --flag-wash: #FBEFDA;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgb(0 0 0 / 60%), 0 12px 32px rgb(0 0 0 / 45%);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 55%), 0 28px 70px rgb(0 0 0 / 60%);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --section-y: clamp(3.5rem, 6vw, 7.5rem);

  /* Two families only. Archivo carries the display voice - confident modern
     grotesque, architectural rather than futuristic. Inter carries everything
     read at length. Both degrade to strong system stacks. */
  --display: "Archivo", "Segoe UI Variable Display", "SF Pro Display",
    ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --sans: "Inter", "Segoe UI Variable Text", "SF Pro Text",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.075rem);
  line-height: 1.62;
  font-feature-settings: "cv05" 1, "ss03" 1;
  letter-spacing: -0.006em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 0.55em;
  font-weight: 600;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.6rem); letter-spacing: -0.042em; font-weight: 620; }
h2 { font-size: clamp(1.95rem, 1.35rem + 2.2vw, 3.1rem); letter-spacing: -0.036em; }
h3 { font-size: clamp(1.12rem, 1.02rem + 0.42vw, 1.35rem); letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: 1rem; letter-spacing: -0.015em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); }
.section--ink { background: var(--navy); color: #f1efe9; }
.section--ink .lede,
.section--ink .muted { color: #b6c0d4; }
.section--ink .card { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 12%); }

.lede {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.26rem);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.58;
  letter-spacing: -0.01em;
}

.muted { color: var(--muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.1rem;
  z-index: 100;
  border-radius: 0 0 10px 0;
  font-weight: 650;
}
.skip:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 560;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: var(--ink); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { filter: brightness(1.06); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn { white-space: nowrap; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- source badges ---------- */
.src {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  vertical-align: 2px;
  white-space: nowrap;
}
.section--ink .src { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 16%); color: #c4cddf; }

.src--owner { color: var(--flag); background: var(--flag-wash); border-color: color-mix(in srgb, var(--flag) 30%, transparent); }
.src--pending { color: var(--flag); background: var(--flag-wash); border-color: color-mix(in srgb, var(--flag) 30%, transparent); }

/* ---------- header ---------- */
/* The logo is the supplied lockup: sun mark over TERRACE / SOLAR.
   Two files, swapped on colour scheme, because the navy wordmark cannot be
   recoloured in a raster. The dark file carries a cream wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img {
  height: 58px;
  width: auto;
  display: block;
}
.site-footer .brand img { height: 64px; }
/* keep the header on one line on small screens */
/* ---------- hero: autoplay cinematic loop ---------- */
/* Not scroll-scrubbed. A poster image is always painted first and is what
   no-JS, reduced-motion and any autoplay-blocked visitor keeps for the
   whole visit - the video is a decorative crossfade on top (.film--ready,
   added by site.js once a frame has actually decoded), never a
   requirement for reading the hero or reaching the CTAs.

   Reusable "CinematicSection" pattern: this markup/class set
   (.film__stage / __media / __poster / __video / __scrim / __content) is
   the template for any future short clip section - duplicate the block in
   index.html with new data-hero-src/poster/copy and it works with zero
   CSS changes. */

.film {
  position: relative;
  color: #f3f1ec;
  background: var(--charcoal-deep);
  overflow: hidden;
}

.film__stage {
  position: relative;
  display: grid;
  align-items: end;
  /* true full-viewport hero, not a capped clamp - svh last so it wins on
     browsers that support it, keeping the stage stable as mobile chrome
     (address bar) shows/hides instead of the clamp shrinking the crop */
  height: 100vh;
  height: 100svh;
  min-height: 26rem;
}

/* --- media --- */
.film__media { position: absolute; inset: 0; }
.film__poster,
.film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--charcoal-deep);
}
.film__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;   /* decorative only, never interactive, no controls */
}
.film--ready .film__video { opacity: 1; }
.film--ready .film__poster { opacity: 0; transition: opacity 0.6s ease; }
.film__video::-webkit-media-controls { display: none !important; }

/* legibility scrim so the headline and CTAs stay readable over any frame */
.film__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 16%) 42%, rgb(0 0 0 / 0%) 70%),
    linear-gradient(to top, rgb(0 0 0 / 48%) 0%, rgb(0 0 0 / 4%) 55%);
}

/* --- copy --- */
.film__content { position: relative; z-index: 1; width: 100%; }
.film__copy { max-width: 44rem; padding-block: clamp(2.5rem, 7vw, 5rem); }
.film__copy .eyebrow { color: var(--accent-graphic); }
.film__copy h1 { font-family: var(--display); color: #fff; margin-bottom: 1rem; text-shadow: 0 4px 24px rgb(0 0 0 / 32%); }
.film__copy .lede { color: #faf8f3; max-width: 44ch; }

.film .actions { margin-top: 1.9rem; }
.btn--ghost {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 34%);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgb(255 255 255 / 16%); border-color: #fff; }

/* ---- opening title ---- */
.film__kicker {
  font-family: var(--display);
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0 0 0.7rem;
}

/* ---------- proof strip ---------- */
.strip {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip__item { background: var(--surface); padding: 1.4rem 1.5rem; }
.strip__item h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.strip__item p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ---------- generic layouts ---------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.split figure { margin: 0; }
.split figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.split figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--muted); }

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.95rem; color: var(--muted); }
.card ul { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.93rem; color: var(--muted); }
.card li { margin-bottom: 0.35rem; }
.card li:last-child { margin-bottom: 0; }
.card__media {
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  margin-bottom: 1rem;
  background: var(--surface-2);
}

.list-check { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.list-check li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
  color: var(--muted);
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-graphic);
}
.list-check strong { color: var(--ink); font-weight: 640; }
.section--ink .list-check strong { color: #f1efe9; }
.section--ink .list-check li { color: #b6c0d4; }

/* ---------- what you'll need (compact readiness checklist) ---------- */
.ready-check {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.ready-check__label {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.ready-check .list-check { margin-top: 0; }
.ready-check .list-check li:last-child { margin-bottom: 0; }

/* ---------- flow diagram ---------- */
.flow {
  display: grid;
  gap: 0.9rem;
  counter-reset: flow;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 860px) { .flow { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.flow li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.section--ink .flow li { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 12%); }
.flow li::before {
  counter-increment: flow;
  content: counter(flow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.flow h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.flow p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.section--ink .flow p { color: #b6c0d4; }
/* connector arrows, decorative only */
@media (min-width: 860px) {
  .flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.3rem;
    right: -0.85rem;
    width: 0.5rem; height: 0.5rem;
    border-top: 2px solid var(--line);
    border-right: 2px solid var(--line);
    transform: rotate(45deg);
  }
}

/* ---------- notes / callouts ---------- */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  font-size: 0.93rem;
  color: var(--ink);
}
.note--flag { border-left-color: var(--flag); background: var(--flag-wash); }
.note p { margin-bottom: 0.5rem; }
.note p:last-child { margin-bottom: 0; }
.note strong { font-weight: 680; }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 620px; background: var(--surface); }
caption { text-align: left; padding: 1rem 1.15rem 0; color: var(--muted); font-size: 0.9rem; }
th, td { text-align: left; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--line); font-size: 0.93rem; vertical-align: top; }
th { font-weight: 650; color: var(--ink); background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
#faq { background: var(--paper); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 640;
  position: relative;
  list-style: none;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1.3rem; color: var(--muted); max-width: 72ch; font-size: 0.96rem; }

/* ---------- CTA ---------- */
.cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  text-align: center;
  box-shadow: var(--shadow);
}
.cta .lede { margin-inline: auto; }
.cta .actions { justify-content: center; }

/* ---------- footer ---------- */
/* Bookend: the page opened in warm charcoal (the film) and closes the same
   way, so the scroll reads as one continuous piece rather than stopping on
   an arbitrary light section. The footer's cream logo lockup was always
   built for a dark ground. */
.site-footer {
  background: linear-gradient(180deg, var(--paper) 0%, var(--charcoal) 40%, var(--charcoal-deep) 100%);
  border-top: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.9rem;
  color: #B3A992;
}
.site-footer .grid { gap: 2rem; }
.site-footer h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper); margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.colophon { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 240, 232, 0.14); max-width: 80ch; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* offset anchors under the sticky header */
:target { scroll-margin-top: 24px; }
[id] { scroll-margin-top: 24px; }

/* ==========================================================================
   Below the film: consumer-product pacing. Massive negative space, one idea
   per section, headline does the work. Styling only - no content added.
   ========================================================================== */

/* section heads become the statement, centred and short-measure */
.section-head {
  max-width: 58rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.section-head h2 {
  max-width: 17ch;
  margin-inline: auto;
  margin-bottom: 0.5em;
  font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem);
  letter-spacing: -0.04em;
  line-height: 1.03;
  text-wrap: balance;
}
.section-head .lede {
  max-width: 42ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--muted);
}
.section-head .eyebrow { color: var(--accent); }
.split .section-head, .split > div > .eyebrow { text-align: left; }
.cta h2 { max-width: 18ch; margin-inline: auto; text-wrap: balance; }

/* cards: flat, quiet, generous */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.card h3 { font-size: 1.18rem; letter-spacing: -0.022em; margin-bottom: 0.6rem; }
.card p { font-size: 0.98rem; line-height: 1.6; color: var(--muted); }
.card ul { font-size: 0.9rem; line-height: 1.65; }
.grid { gap: clamp(1rem, 1.6vw, 1.4rem); }

/* the at-a-glance strip loses its boxed look */
.strip {
  background: transparent;
  border: 0;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 0;
}
.strip__item { background: transparent; padding: 0; }
.strip__item h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.strip__item p { font-size: 0.95rem; line-height: 1.6; }

/* split sections breathe and centre their imagery */
.split { gap: clamp(2rem, 4vw, 4rem); }
.split figure img { border-radius: 20px; box-shadow: none; }
.split figcaption { font-size: 0.8rem; color: #5f5c57; }

/* the how-it-works flow reads as steps, not chips */
.flow li { background: var(--surface); border-radius: 16px; padding: 1.6rem 1.5rem; }
.flow li::before { background: transparent; color: var(--accent); font-family: var(--display); font-size: 0.95rem; width: auto; height: auto; }
.flow h3 { font-size: 1.05rem; }

/* configurator + table quieten down */
.readout, .table-scroll { border-radius: 18px; }
table { background: var(--surface); }
th { background: transparent; color: var(--muted); font-weight: 560; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
td { color: var(--ink); }
caption { color: #5f5c57; }

/* FAQ: large, calm, well-spaced */
.faq summary { padding-block: 1.5rem; font-size: 1.06rem; font-weight: 560; letter-spacing: -0.015em; }
.faq details > div { font-size: 1rem; line-height: 1.7; max-width: 62ch; padding-bottom: 1.8rem; }

/* CTA reads as a statement, not a panel */
.cta {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.cta h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem); letter-spacing: -0.04em; }

/* notes: hairline, not a coloured block */
.note {
  background: transparent;
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.2rem;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.note--flag { border-left-color: var(--flag); }
.note strong { color: var(--ink); }

/* source badges below the film: recede */
.src {
  background: transparent;
  border-color: var(--line);
  color: #6b6862;
  font-weight: 500;
}

/* footer: quiet close, dark ground */
.site-footer { border-top: 0; padding-block: clamp(4rem, 8vw, 6rem); }
.site-footer h3 { font-size: 0.7rem; letter-spacing: 0.2em; color: #C9C0AE; }
.colophon { color: #8B8168; font-size: 0.82rem; line-height: 1.65; }

/* ---------- product moments ---------- */
/* Real product photography carries these. One headline, one line, one spec.
   Alternating warm/cream/light backgrounds create visual rhythm. */

.shot { position: relative; background: var(--paper); }
.shot:nth-of-type(odd) { background: var(--surface); }
.shot:nth-of-type(even) { background: var(--paper); }

/* full-bleed image with copy laid over its lower half */
.shot--full { min-height: 78vh; display: grid; }
.shot--full .shot__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 78vh;
  object-fit: cover;
  filter: brightness(1.04) saturate(1.05);
}
.shot--full .shot__copy {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  background: linear-gradient(to top, rgb(32 36 42 / 78%) 0%, rgb(32 36 42 / 0%) 100%);
  margin-inline: auto;
  width: 100%;
}
.shot--full h2 {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 0.5rem;
  max-width: 14ch;
  color: #fff;
}
.shot--full p { color: #e8e3d9; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.5; margin: 0; }

/* image beside text, image gets the larger share */
.shot--split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .shot--split { grid-template-columns: 1.15fr 0.85fr; }
  .shot--reverse .shot__media { order: 2; }
}
.shot__media img {
  width: 100%;
  border-radius: 18px;
  display: block;
  filter: brightness(1.05) saturate(1.03);
}
.shot__text h2 {
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 1.1rem;
  color: var(--ink);
}
.shot__sub {
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0;
}
.shot__spec {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.shot__spec b {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 620;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.shot__spec i { font-style: normal; color: var(--muted); font-size: 0.95rem; }

/* the four parts, isolated on alternating backgrounds */
.shot--parts { padding-block: clamp(4rem, 9vw, 8rem); background: var(--surface-2); }
.shot__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.shot__head h2 {
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 0.9rem;
  color: var(--ink);
}
.shot__head .shot__sub { margin-inline: auto; }
.parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  counter-reset: pt;
}
.parts__item { position: relative; text-align: center; }
.parts__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface);
  filter: brightness(1.04) saturate(1.02);
}
.parts__item b {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* connecting arrows between parts */
@media (min-width: 820px) {
  .parts__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34%;
    right: calc(-0.5 * clamp(0.75rem, 1.6vw, 1.25rem) - 4px);
    width: 8px; height: 8px;
    border-top: 2px solid rgb(255 255 255 / 35%);
    border-right: 2px solid rgb(255 255 255 / 35%);
    transform: rotate(45deg);
  }
}

/* ---- static corrections ---- */
/* storage section: let the battery dominate */
@media (min-width: 900px) {
  .shot--reverse { grid-template-columns: 0.9fr 1.1fr; }
  .shot--reverse .shot__media { order: 2; }
}
.shot--reverse .shot__media img { max-height: 76vh; object-fit: cover; }

/* the visible parts chain */
.parts__item i {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.84rem;
  color: var(--muted);
}
.parts__chain {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* system-size section fits one view */
#configure { padding-block: clamp(3rem, 5vw, 5rem); }
#configure .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
#configure .section-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
#configure .config { gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center; }
#configure .readout { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
#configure .readout .row { padding: 0.5rem 0; }

/* ---------- brand accents ---------- */
h1 em, h2 em { font-style: normal; color: var(--accent); }

/* horizontal spec row - the numbers carry the design, no card boxes */
.specrow {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
}
.specrow > div { position: relative; }
.specrow > div + div { padding-left: clamp(1.5rem, 4vw, 3rem); }
.specrow > div + div::before {
  content: "";
  position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
  width: 1px; background: rgb(251 172 50 / 45%);
}
.specrow b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.8rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.specrow i { font-style: normal; color: #cfcac1; font-size: 0.86rem; }

/* ---------- how it works ---------- */
/* Normal document flow - no pinning, no scroll-height track. The short
   gradient just carries the hero's dark ground into the page instead of
   cutting to it. Each .step fades/translates in on its own via
   IntersectionObserver in site.js (see initReveal), not scroll position. */
/* Plain paper background - this section no longer sits directly under the
   dark hero (the "Why Terrace Solar" section is between them now), so no
   dark-to-light fade belongs here. */
.steps { background: var(--paper); }
.steps__stage { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.steps__head { text-align: center; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.steps__head h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.03; letter-spacing: -0.04em; margin: 0;
  color: var(--ink);
}
/* mobile-first: wraps into a comfortable multi-row grid; the desktop
   breakpoint below forces one single five-across row instead */
.steps__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
}
.step {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: center;
  flex: 0 1 250px;
  max-width: 260px;
  position: relative;
}
@media (min-width: 900px) {
  .steps__list { flex-wrap: nowrap; gap: clamp(0.85rem, 1.4vw, 1.5rem); }
  .step { flex: 1 1 0; max-width: none; min-width: 0; }
}
.step.is-shown { opacity: 1; transform: none; }

/* clean premium product photography: one coordinated family via a
   consistent frame, aspect ratio and neutral background - no feathering,
   no mask, no glow. Crisp edges throughout. object-fit: contain so no
   product (notably the battery's full body and base) is ever cropped. */
.step__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(23, 20, 15, 0.10);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
}
.step__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.6rem;
  display: block;
}
/* number lives inside the frame, upper-left - a subtle detail, not a
   separate component. No pill, no container. */
.step__n {
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step b {
  display: block; font-family: var(--display);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.step__optional {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.step__d { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.step__badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- kit ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* number + unit pairs (400 W, 1 kWh, etc.) must never wrap between the
   value and its unit. Existing measurements use   inline; this class
   is available for any new value that isn't already inside a naturally
   nowrap element (a <b>, a card heading). */
.unit-value { white-space: nowrap; display: inline-block; }
.kit__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .kit__grid { grid-template-columns: 1fr 0.85fr; } }
.kit__sizes { border: 0; margin: 0; padding: 0; }
.steps-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step-chip { position: relative; }
.step-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.step-chip span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 540; transition: background-color .15s, border-color .15s, color .15s;
}
.step-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 620; }
.step-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.kit__spec { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; display: grid; gap: 0; }
.kit__spec > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.kit__spec > div:last-child { border-bottom: 0; }
.kit__spec dt { color: var(--muted); font-size: 0.92rem; }
.kit__spec dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.kit__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); }
.kit__parts img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--surface); }
.kit__parts b { display: block; margin-top: 0.55rem; font-size: 0.86rem; color: var(--muted); font-weight: 520; text-align: center; }

/* ---------- shop / configurator ---------- */
.shop { background: var(--surface); }

/* progress: 1 Solar -> 2 Storage -> 3 Review */
.shop__progress {
  list-style: none; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem;
}
.shop__progress-step {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-size: 0.88rem; font-weight: 600;
  color: var(--muted); transition: color 0.2s ease;
}
.shop__progress-n {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--paper);
  font-size: 0.76rem; font-weight: 700; color: var(--muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.shop__progress-step.is-active { color: var(--ink); }
.shop__progress-step.is-active .shop__progress-n {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.shop__progress-arrow {
  width: 20px; height: 1px; background: var(--line);
}

/* single centered vertical flow: heading -> solar -> storage -> review ->
   pricing/CTA. No visible browser-default fieldset/legend chrome anywhere. */
.shop__form {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.shop__step { border: 0; margin: 0; padding: 0; }
.shop__step legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}

/* product-option cards, not generic pills, not a form outline */
.shop__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.shop__options--storage { align-items: stretch; }
.shop__option { position: relative; flex: 1 1 130px; max-width: 170px; }
.shop__option input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.shop__option-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  height: 100%; padding: 0.95rem 1rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper);
  text-align: center;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.shop__option input:hover + .shop__option-card { border-color: rgba(251, 172, 50, 0.55); }
.shop__option input:checked + .shop__option-card {
  background: var(--accent-wash);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.shop__option input:focus-visible + .shop__option-card {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.shop__option-size {
  font-family: var(--display); font-size: 1.15rem; font-weight: 650;
  letter-spacing: -0.02em; color: var(--ink);
}
.shop__option input:checked + .shop__option-card .shop__option-size,
.shop__option input:checked + .shop__option-card b {
  color: var(--accent);
}
.shop__option-spec { font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.shop__option-card b:not(.shop__option-size) { font-family: var(--display); font-size: 1.05rem; font-weight: 640; color: var(--ink); }

/* review card - one centered card, ecommerce-feeling */
.shop__summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
}
.shop__summary-eyebrow {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.5rem;
}
.shop__summary-headline {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.shop__summary-headline b { color: var(--accent); font-weight: 700; }
.shop__summary-sep { margin: 0 0.5em; color: var(--line); }

.shop__includes {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.shop__includes-label { font-size: 0.76rem; color: var(--muted); margin: 0 0 0.7rem; }
.shop__includes-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.45rem;
  font-size: 0.94rem; color: var(--ink);
}
.shop__includes-list li {
  position: relative; padding-left: 0;
}

/* pricing / CTA - centered, prominent button, quiet helper link */
.shop__cta-block { text-align: center; }
.shop__pricing-line {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 560;
  color: var(--muted);
}
.shop__cta { display: inline-flex; min-width: 14rem; justify-content: center; }
.shop__help {
  display: block; text-align: center; margin-top: 0.9rem;
  font-size: 0.82rem; color: var(--muted); text-decoration: underline;
}
.shop__help:hover { color: var(--ink); }

/* ---------- tighter static sections ---------- */
.section { padding-block: clamp(2.75rem, 4vw, 4rem); }
.section-head { margin-bottom: clamp(1.25rem, 2.25vw, 1.85rem); }
.shot--split { padding-block: clamp(3.5rem, 5.5vw, 5.5rem); }
.faq summary { padding-block: 1.15rem; }
.faq details > div { padding-bottom: 1.35rem; }

/* ================= final consolidation pass ================= */

/* ---- 1. hero: the headline is the hero ---- */
.film__copy h1 {
  font-size: clamp(3rem, 1.6rem + 5.6vw, 6.6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.film__kicker {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0 0 0.7rem;
}
.film__copy .lede { max-width: 40ch; }

/* ---- 4. how it works: one five-across row on desktop, centred ---- */
.steps__list {
  max-width: 1450px;
  margin-inline: auto;
}
@media (max-width: 899px) {
  .step { flex-basis: 42%; }
}
.steps__branch {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 540;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.steps__branch a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgb(251 172 50 / 45%); }
.steps__branch a:hover { border-bottom-color: var(--accent); }

/* ---- 7. storage section, tight ---- */
.specrow--tight { margin-top: clamp(0.9rem, 2vh, 1.4rem); }
.specrow--tight b { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
#storage .shot__sub { margin-top: 1rem; }
#storage.shot--split { padding-block: clamp(3rem, 4.5vw, 4.5rem); }

/* ---- 8. kit: storage presented as the visible optional upgrade ---- */
.kit__storage {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.kit__storage-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.kit__storage-label em { font-style: normal; color: var(--accent); }
.kit__storage-sug { margin: 0; color: var(--muted); font-size: 0.95rem; }
.kit__storage-sug b { color: var(--accent); font-family: var(--display); font-weight: 620; font-size: 1.15rem; }
.kit__storage .btn { margin-left: auto; }

/* ---- 10. keep everything tight ---- */
.section { padding-block: clamp(2.75rem, 4vw, 4rem); }
.steps__stage { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

/* ================= centred static site ================= */

.wrap { max-width: 1240px; }

.section { padding-block: clamp(2.75rem, 4vw, 4rem); }
.section > .wrap { text-align: center; }
.section-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.section-head h2 { max-width: 18ch; margin-inline: auto; }
.section-head .lede { margin-inline: auto; }

/* product spotlight: image beside text, whole composition centred */
.spot { padding-block: clamp(3rem, 4.5vw, 4.75rem); }
.spot__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  justify-items: center;
}
@media (min-width: 900px) {
  .spot__inner { grid-template-columns: 1.05fr 0.95fr; }
  .spot--reverse .spot__media { order: 2; }
}
.spot__media { width: 100%; }
.spot__media img {
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.spot__text { width: 100%; max-width: 30rem; text-align: left; }
.spot__text h2 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 1rem;
}
.spot__sub {
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0 0 0.25rem;
}
.spot__text .specrow { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); margin-bottom: 1.1rem; }
@media (max-width: 899px) {
  .spot__text { text-align: center; max-width: 34rem; }
  .spot__sub { margin-inline: auto; }
  .spot__text .specrow { justify-content: center; }
}

/* faq centred */
.faq { max-width: 46rem; margin-inline: auto; text-align: left; }
.steps-chips { justify-content: center; }

/* how-it-works group */
.step { text-align: center; }
.step__n { text-align: center; }

.steps__stage { justify-items: center; }
.steps__stage > .wrap { width: 100%; margin-inline: auto; }

.steps, .steps__track, .steps__stage { width: 100%; }
.steps__stage > .wrap { max-width: 1500px; margin-inline: auto; }

/* ===== one visual family for product imagery ===== */
/* Scene photographs fill the frame; isolated product shots sit inside it on the
   same warm charcoal stage, so four different source photos read as one art
   direction. All product presentation surfaces share one gradient family. */
.spot__media img {
  aspect-ratio: 4 / 3;
  max-height: none;
  background: var(--stage);
  box-shadow: 0 24px 70px rgb(23 20 15 / 45%);
}
.spot__media--product img {
  object-fit: contain;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(120% 100% at 50% 15%, var(--stage-2) 0%, var(--stage) 70%);
  border: 1px solid var(--line);
}
.spot__close {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 540;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.step__glyph b {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 560;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.step__glyph i {
  display: block;
  width: 2px; height: 18px;
  margin-inline: auto;
  background: var(--accent);
  opacity: 0.9;
}

/* ===== persistent brand logo with safe zone ===== */
.logo {
  position: fixed;
  top: 30px;
  left: 40px;
  z-index: 9999;
  display: block;
  width: 165px;
  height: auto;
  text-decoration: none;
  background: none;
  /* Tight, low-opacity edge separation only - not a glow, not a box. The
     logo artwork has almost no internal transparent padding, so a wide blur
     traces its outer silhouette and reads as a rectangle; keeping the blur
     radius small keeps the effect at the letterform edge instead. */
  filter: drop-shadow(0 1px 1px rgba(244, 240, 232, 0.55))
          drop-shadow(0 0 3px rgba(244, 240, 232, 0.35));
}
.logo__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Logo safe zone: content must not enter this rectangle
   top: 30px, left: 40px, width: 230px (logo ~165px + margins), height: 140px */

/* on narrow viewports, use smaller spacing and width */
@media (max-width: 899px) {
  .logo {
    top: 20px;
    left: 20px;
    width: 120px;
  }
}

/* ===== SDG&E Solar Savings Calculator - "Find your fit." =====
   Two columns at desktop width: inputs on the left (~42%), results on the
   right (~58%), sized to fit one ~1536x730 viewport without scrolling. */

.calc {
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--surface) 40%, var(--paper) 100%);
  padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
  position: relative;
}

.calc::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at center,
                    rgba(251, 172, 50, 0.08) 0%,
                    transparent 70%);
  pointer-events: none;
}

.calc__card {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(1rem, 1.75vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow:
    inset 0 0 40px rgba(251, 172, 50, 0.04),
    0 0 40px rgba(251, 172, 50, 0.08);
}

@media (min-width: 900px) {
  .calc__card {
    position: sticky;
    top: 12px;
  }
}

.calc__head {
  text-align: center;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem);
}
.calc__head h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.calc__subhead {
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  color: var(--muted);
  max-width: 56ch;
  margin-inline: auto;
}

.calc__body {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}
@media (max-width: 999px) {
  .calc__body { grid-template-columns: 1fr; }
}

/* ---- left: inputs ---- */
.calc__inputs { display: grid; gap: clamp(0.55rem, 1vw, 0.8rem); }

.calc__field-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.calc__field-sub {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
}

.calc__field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.calc__field-head .calc__field-label { margin-bottom: 0; }

.calc__mode-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.calc__mode-btn {
  border: 0;
  background: transparent;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.calc__mode-btn.is-active { background: var(--accent); color: var(--accent-ink); }

.calc__bignum {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 0.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: var(--surface-2);
  outline: none;
  outline-offset: 6px;
  display: block;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(251, 172, 50, 0.5);
}
.calc__range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(251, 172, 50, 0.5);
}
.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 5px;
  background: linear-gradient(to right,
              var(--accent) 0%,
              var(--accent) var(--slider-percent, 50%),
              var(--surface-2) var(--slider-percent, 50%),
              var(--surface-2) 100%);
}
.calc__range::-moz-range-track { background: transparent; }
.calc__range--custom { margin-top: 0.5rem; }

.calc__select {
  width: 100%;
  padding: 0.48rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 560;
  cursor: pointer;
}
.calc__hint {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.calc__segmented {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.calc__seg-btn {
  flex: 1 1 0;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 560;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.calc__seg-btn:hover { border-color: var(--ink); }
.calc__seg-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.calc__seg-btn b { display: block; font-weight: inherit; font-size: 0.8rem; }
.calc__seg-btn i { display: block; font-style: normal; font-size: 0.68rem; opacity: 0.75; margin-top: 0.1rem; }

.calc__field--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.calc__switch { border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
.calc__switch-track {
  display: block;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  position: relative;
  transition: background-color .18s ease, border-color .18s ease;
}
.calc__switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform .18s ease;
}
.calc__switch.is-on .calc__switch-track { background: var(--accent); border-color: var(--accent); }
.calc__switch.is-on .calc__switch-thumb { transform: translateX(18px); }

/* ---- right: results ---- */
.calc__results { display: grid; gap: clamp(0.55rem, 1vw, 0.8rem); }

.calc__result-main { text-align: center; }
.calc__result-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.calc__result-hero {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3rem);
}
.calc__result-hero i {
  font-style: normal;
  font-size: 0.38em;
  font-weight: 650;
  color: var(--muted);
  margin-left: 0.15em;
}
.calc__result-annual {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.calc__compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: var(--accent-wash);
  border: 1px solid rgba(251, 172, 50, 0.25);
  border-radius: 14px;
  padding: 0.55rem 1rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.calc__compare.is-visible { opacity: 1; max-height: 70px; }
.calc__compare-item { text-align: center; }
.calc__compare-item span {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calc__compare-item b {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.08rem;
}
.calc__compare-vs { font-size: 0.74rem; color: var(--muted); font-weight: 600; }

.calc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.45rem, 0.9vw, 0.7rem);
}
.calc__stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem 0.55rem;
  text-align: center;
}
.calc__stat span {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
.calc__stat b {
  display: block;
  font-family: var(--display);
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc__stat--on { border-color: rgba(251, 172, 50, 0.4); background: var(--accent-wash); }
.calc__stat--on b { color: var(--accent); }

.calc__disclaimer {
  margin: 0;
  font-size: 0.71rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.calc__assumptions { font-size: 0.75rem; text-align: center; }
.calc__assumptions summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 650;
  list-style: none;
}
.calc__assumptions summary::-webkit-details-marker { display: none; }
.calc__assumptions ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.calc__assumptions li { position: relative; padding-left: 0.9rem; }
.calc__assumptions li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.calc__cta {
  text-align: center;
  padding-top: clamp(0.5rem, 1vw, 0.75rem);
  border-top: 1px solid var(--line);
}
.calc__cta-head {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 640;
  color: var(--ink);
}
.calc__cta .btn { min-height: 40px; padding: 0.5rem 1.25rem; font-size: 0.9rem; }
.calc__cta-sub {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 46ch;
  margin-inline: auto;
}

/* short, subtle "live update" pulse - no full numeric tween */
.is-pulsing { animation: calc-pulse 0.4s ease; }
@keyframes calc-pulse {
  0%   { opacity: 0.5; transform: translateY(-1px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 999px) {
  .calc__grid { grid-template-columns: repeat(2, 1fr); }
  .calc__card { position: static; }
}

/* ==========================================================================
   HOW THE POWER MOVES — original Terrace Solar flow diagram
   Concept only from the CraftStrom wiring reference; no supplier layout,
   icon set or copy reused.
   ========================================================================== */

.flow-diagram { background: var(--paper); }
.flow-diagram .lede { max-width: 46ch; margin-inline: auto; }

/* The one contained interactive How It Works moment: normal document
   flow, sized to roughly one viewport, no pinning and no scroll-height
   track. An IntersectionObserver in site.js (initConnReveal) triggers one
   short automatic staggered reveal - sun/panel/meter/home in sequence -
   the first time this section scrolls into view. Once shown, is-shown
   stays and the section behaves like ordinary page content from then on. */
.conn__stage {
  display: grid; align-items: center;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
.conn__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

/* the simplified four-step connection path reuses the modular-expansion
   progression's visual language (bold value + caption + arrow connector)
   for one consistent "step flow" pattern on this page, rather than a
   second bespoke diagram style. flex:1 1 0 here is a DESKTOP-ONLY choice
   (equal-width row columns) - the mobile block below replaces it with a
   plain single-column stack instead of just letting it wrap. */
.flowline__steps { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 768px) {
  .flowline__steps .modstep__item { flex: 1 1 0; min-width: 0; }
}
.flowline__steps .modstep__item b {
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
  white-space: nowrap;
}
.flowline__steps .modstep__arrow { flex: 0 0 auto; }

/* progressive reveal: each step and its leading arrow animate in via
   opacity + transform only (no bounce), the arrow's line growing in from
   the step it's leaving via a horizontal scale. Only ever adds opacity/
   transform toward the shown state - nothing here ever reduces opacity
   again once .is-shown is set except a genuine reverse-scroll removing
   the class, which is the intended deterministic behavior. */
.flowline__steps .modstep__item,
.flowline__steps .modstep__arrow {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.flowline__steps .modstep__item { transform: translateY(14px); }
.flowline__steps .modstep__item.is-shown { opacity: 1; transform: none; }
.flowline__steps .modstep__arrow {
  transform: scaleX(0);
  transform-origin: left center;
}
.flowline__steps .modstep__arrow.is-shown {
  opacity: 1;
  transform: scaleX(1);
}
.flowline__storage {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.flowline__storage.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .flowline__steps .modstep__item,
  .flowline__steps .modstep__arrow,
  .flowline__storage { transition: none; }
}

/* mobile: explicit single-column vertical stack, not the desktop row left
   to wrap. flex-wrap is force-reset to nowrap here - flex-wrap:wrap
   (inherited from the shared .modstep__list rule) combined with
   flex-direction:column is what was folding this into a multi-column
   jumble instead of one clean stack. */
@media (max-width: 767px) {
  .conn__stage { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
  .conn__head { margin-bottom: clamp(1rem, 3vw, 1.5rem); }
  .conn__head h2 { font-size: clamp(2.4rem, 1.6rem + 4vw, 3rem); }
  .conn__stage .flowline__steps {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: clamp(1.1rem, 3vw, 1.75rem);
    gap: clamp(0.4rem, 1.5vw, 0.65rem);
  }
  .conn__stage .flowline__storage { margin-top: clamp(0.9rem, 3vw, 1.5rem); }
  .conn__stage .flowline__steps .modstep__item {
    flex: none;
    width: 100%;
    max-width: 280px;
  }
  .conn__stage .flowline__steps .modstep__item b {
    font-size: clamp(1.4rem, 1rem + 3vw, 1.75rem);
  }
  .conn__stage .flowline__steps .modstep__item span {
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  }
  .conn__stage .flowline__steps .modstep__arrow {
    flex: none;
    width: 10px; height: 22px; margin-block: 0.1rem;
  }
  .conn__stage .flowline__steps .modstep__arrow::before {
    left: 50%; top: 0; width: 1.5px; height: 100%;
    transform: translateX(-50%);
  }
  .conn__stage .flowline__steps .modstep__arrow::after {
    left: 50%; right: auto; top: auto; bottom: 0;
    border-top: none; border-right: none;
    border-bottom: 1.5px solid var(--accent);
    border-left: 1.5px solid var(--accent);
    transform: translateX(-50%) rotate(-45deg);
  }
  .flowline__steps .modstep__arrow {
    transform: scaleY(0);
    transform-origin: top center;
  }
  .flowline__steps .modstep__arrow.is-shown { transform: scaleY(1); }
}

.flowline__storage {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  max-width: 30rem;
  text-align: center;
}
.flowline__storage-label {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 580;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.flowline__storage-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* modular expansion progression */
.modstep {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  max-width: 54rem;
  text-align: center;
}
.modstep__label {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.modstep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.8vw, 1.25rem);
}
.modstep__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.modstep__item b {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 650;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.modstep__item span {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.modstep__arrow {
  width: 22px;
  height: 10px;
  position: relative;
  flex: none;
}
.modstep__arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
  background: var(--line);
  transform: translateY(-50%);
}
.modstep__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}
.modstep__note {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ==========================================================================
   USE SOLAR YOUR WAY — day / night / away explainer, combined with the
   storage-help visual in one compact section. CSS-only state switching via
   :has(); no runtime or appliance-specific claims - see products.json
   "withheld_claims" for what is deliberately not shown here.
   ========================================================================== */

.useit { background: var(--surface); }

.useit__panel {
  max-width: 44rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  text-align: center;
}
.useit__modes { border: 0; margin: 0 0 clamp(1rem, 2vw, 1.5rem); padding: 0; display: flex; justify-content: center; }

.useit__modepanel { display: none; }
.useit__panel:has(input[value="day"]:checked) .useit__modepanel[data-useit-mode="day"],
.useit__panel:has(input[value="night"]:checked) .useit__modepanel[data-useit-mode="night"],
.useit__panel:has(input[value="away"]:checked) .useit__modepanel[data-useit-mode="away"] {
  display: block;
}

.useit__mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.useit__mini-node {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.useit__mini-conn {
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, transparent 50%, transparent 100%);
  background-size: 200% 100%;
  animation: flowline-travel 2.6s linear infinite;
}

.useit__modepanel h3 {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.useit__modepanel p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
  max-width: 40ch;
  margin-inline: auto;
}

.useit__storage {
  max-width: 46rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.useit__storage-label {
  font-family: var(--display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.useit__sizes { border: 0; margin: 0 0 0.6rem; padding: 0; display: flex; justify-content: center; }

/* tier label ("Everyday essentials" / "More evening flexibility" / "More
   energy, for longer") - JS-driven, changes with the selected size */
.useit__tier-label {
  margin: 0 0 clamp(0.85rem, 1.75vw, 1.25rem);
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 620;
}

.useit__loads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.useit__loads li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.83rem;
  font-weight: 560;
  color: var(--ink);
}
.useit__load-runtime {
  color: var(--accent);
  font-family: var(--display);
  font-weight: 650;
  font-size: 0.78rem;
  white-space: nowrap;
}
.useit__load-runtime::before {
  content: "· ";
  color: var(--line);
  font-weight: 400;
}
.useit__icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.useit__loads-caption {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  margin-inline: auto;
}

/* ---------- mobile hero type scale ---------- */
@media (max-width: 767px) {
  .film__copy {
    max-width: calc(100% - 2.5rem);
    padding-inline: 1.25rem;
  }
  .film__copy h1 {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    line-height: 1.02;
  }
  .film__kicker { font-size: clamp(1.05rem, 1rem + 1vw, 1.3rem); }
  .film__copy .lede { max-width: 30ch; font-size: 1rem; }
}

/* ---------- generic scroll reveal ---------- */
/* Selective, lightweight motion: a fade + slight rise, triggered once by
   IntersectionObserver (initReveal in site.js) and never repeated. Applies
   to any element carrying [data-reveal]. Reduced-motion visitors and
   no-JS visitors both just see the content - see initReveal and the
   media query below. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- placement gallery ---------- */
/* Section E: flexible placement. Plain photography grid today; each tile
   is exactly where a short Runway clip can drop in later using the same
   .film__media/.film__poster/.film__video pattern the hero uses. */
.placement__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.placement__item { text-align: left; }
.placement__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 0.9rem;
}
.placement__item b {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.placement__item span { display: block; color: var(--muted); font-size: 0.9rem; }