/* ==========================================================================
   JANARIX ENERGY SOLUTIONS
   Design system — "The night the street went dark"

   The page runs one night → day → night cycle from top to bottom.
   Night is the brownout. Day is the sun doing the work. Gold is live power,
   and gold is never decoration.

   Order of this file:
     1  Tokens
     2  Reset and base
     3  Typography
     4  Layout
     5  Header and navigation
     6  Buttons and links
     7  The endurance line  ← the signature component
     8  Cards
     9  Figures and stats
    10  Calculator
    11  Accordion
    12  Forms
    13  Catalogue
    14  Footer
    15  Motion
    16  Utilities

   You do not normally need to edit this file. Wording lives in the HTML,
   marked with a pencil ✏️.
   ========================================================================== */

/* ============================== 1. TOKENS ============================== */

:root {
  /* --- night: the brownout, and the hours you sleep through it --- */
  --night-900: #050F1D;
  --night-800: #0A1B33;
  --night-700: #12294A;
  --night-600: #1D3A63;
  --night-500: #2C5089;

  /* --- day: the sun doing the work --- */
  --day-000: #FFFFFF;
  --day-050: #F7F6F2;
  --day-100: #EDEBE4;
  --day-200: #DFDCD2;
  --dawn:    #FFE9C4;

  /* --- power. Gold means live. Never decoration. --- */
  --volt:      #FFB81C;
  --volt-hi:   #FFD166;
  --volt-deep: #925C00;   /* gold as TEXT, light surfaces only. Darkened
                             from #B87400, which only reached 3.6:1 on paper. */

  /* --- ink --- */
  --ink:      #0A1729;
  --ink-2:    #45566F;
  --ink-3:    #58677F;
  --on-night:   #E8EEF8;
  --on-night-2: #9DB0CE;
  --on-night-3: #7C90B2;

  /* --- lines --- */
  --rule-day:   rgba(10, 23, 41, .10);
  --rule-day-2: rgba(10, 23, 41, .18);
  --rule-night:   rgba(232, 238, 248, .12);
  --rule-night-2: rgba(232, 238, 248, .24);

  /* --- type --- */
  --display: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.75rem, 6.2vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-h2:      clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h3:      clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .75rem;

  /* --- shape --- */
  --r-lg: 18px;
  --r:    14px;
  --r-sm: 10px;
  --r-xs: 7px;
  --r-pill: 999px;

  /* --- depth. Barely there, and only on things that genuinely lift. --- */
  --lift-1: 0 1px 2px rgba(10,23,41,.04), 0 8px 24px -14px rgba(10,23,41,.18);
  --lift-2: 0 2px 6px rgba(10,23,41,.05), 0 22px 48px -24px rgba(10,23,41,.28);
  --lift-night: 0 24px 64px -28px rgba(0,0,0,.8);

  /* --- rhythm --- */
  --gutter: clamp(20px, 5vw, 56px);
  --max:    1280px;
  --max-text: 68ch;
  --sec:    clamp(52px, 5.6vw, 90px);
  --sec-sm: clamp(36px, 4vw, 64px);

  /* --- motion --- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t:      280ms;
  --t-slow: 620ms;
}

/* ========================== 2. RESET AND BASE ========================== */

*, *::before, *::after { box-sizing: border-box; }
/* An explicit display value silently beats the browser's default
   [hidden] rule. This keeps the attribute meaning what it says. */
[hidden] { display: none !important; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--day-050);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--volt-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.night :focus-visible,
.hero :focus-visible { outline-color: var(--volt); }

::selection { background: var(--volt); color: var(--night-900); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--night-800); color: var(--on-night);
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600; font-size: var(--fs-sm);
}
.skip:focus { left: 0; }

/* ============================ 3. TYPOGRAPHY ============================ */

/* Tracking and leading are set per level, not once for the whole scale.

   Letters look further apart the bigger they get, so large type needs
   pulling in and small type needs letting out; leading works the other way,
   tight on a headline and loose on a caption. A single letter-spacing
   across a scale that runs from 84px down to 20px is therefore wrong at one
   end or the other.

   The scale was already graded at the two extremes — .display at -.032em
   and h3 at -.014em — but h1 and h2 shared one value despite sitting 14px
   apart at desktop size. These fill that gap so both curves move in one
   direction the whole way down:

        84px  .display   -.032em / 0.98      tight, set as a picture
        60px  h1         -.026em / 1.04
        46px  h2         -.020em / 1.10
        24px  h3         -.014em / 1.20
        small h4, h5     -.010em / 1.25      nearly neutral, read as text  */

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  font-optical-sizing: auto;
}

.display {
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.032em;
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.026em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.10; letter-spacing: -.020em; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: -.014em; }
h4, h5  { line-height: 1.25; letter-spacing: -.010em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.night .lead, .hero .lead { color: var(--on-night-2); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

/* Eyebrow. A label, not an ornament — it says which part of the story
   you are in. Inter in caps with wide tracking, never a mono face. */
.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; flex: none; align-self: center;
  background: var(--volt-deep); border-radius: 2px;
}
.night .eyebrow, .hero .eyebrow { color: var(--on-night-2); }
.night .eyebrow::before, .hero .eyebrow::before { background: var(--volt); }

/* Numbers are this brand's language, so they get their own register. */
.num {
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: .9;
}

.tabular { font-variant-numeric: tabular-nums; }

.small { font-size: var(--fs-sm); color: var(--ink-2); }
.night .small, .hero .small { color: var(--on-night-2); }

.fine {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 74ch;
}
.night .fine, .hero .fine { color: var(--on-night-3); }

/* ============================== 4. LAYOUT ============================== */

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

.section { padding-block: var(--sec); position: relative; }
.section-sm { padding-block: var(--sec-sm); }

/* Surfaces. The cycle: night → dawn → day → night. */
.night { background: var(--night-800); color: var(--on-night); }
/* Modifier, always used as class="night night-deep". Keeping it a
   separate class meant none of the .night rules applied to it. */
.night-deep { background: var(--night-900); }
.day { background: var(--day-050); color: var(--ink); }
.day-white { background: var(--day-000); color: var(--ink); }
.day-inset { background: var(--day-100); color: var(--ink); }

.night h1, .night h2, .night h3, .night h4,
.night-deep h1, .night-deep h2, .night-deep h3, .night-deep h4 { color: var(--on-night); }

/* ------------------------------------------------------------------
   DARK SURFACES REDEFINE THE TOKENS.

   Rather than writing `.night .thing { color: ... }` for every component
   — which is how the old site ended up with gold-on-gold buttons and
   dark ink on navy — any dark surface simply reassigns the ink and rule
   tokens. Every component underneath then flips on its own, including
   ones written later that nobody remembered to override.
   ------------------------------------------------------------------ */
.night,
.hero,
.answer,
.beyond,
.sys.is-pick,
.card-dark,
.site-footer,
.nav-panel,
.float-panel {
  --ink: var(--on-night);
  --ink-2: var(--on-night-2);
  --ink-3: var(--on-night-3);
  --rule-day: var(--rule-night);
  --rule-day-2: var(--rule-night-2);
  --volt-deep: var(--volt);
  --day-100: var(--night-700);
  --day-000: var(--night-700);
}

/* Dawn: the one gradient on the site, marking the moment the sun arrives
   and the page turns from night to day. The glow is a sun cresting the
   horizon — the same event the endurance line marks with its sunrise dot. */
.dawn-break {
  position: relative;
  height: clamp(76px, 8vw, 124px);
  background: linear-gradient(180deg,
    var(--night-800) 0%, #0E2247 18%, #1B3059 44%,
    #3E3A55 68%, #9A7A5B 88%, var(--day-050) 100%);
  overflow: hidden;
}
.dawn-break::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  translate: -50% 0;
  width: min(860px, 78%); height: clamp(64px, 7vw, 104px);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,209,102,.62) 0%, rgba(255,184,28,.24) 42%, transparent 72%);
}

/* Section head. Two columns on wide screens so the intro sits beside the
   heading rather than under it — stops every section starting the same way. */
.head { margin-bottom: clamp(26px, 3vw, 44px); }
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.head-split .lead { margin-bottom: 4px; }

.grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rule { height: 1px; background: var(--rule-day); border: 0; }
.night .rule, .hero .rule { background: var(--rule-night); }

.stack-sm > * + * { margin-top: 10px; }
.stack   > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 32px; }

/* ====================== 5. HEADER AND NAVIGATION ====================== */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(5, 15, 29, .94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-stuck { border-bottom-color: var(--rule-night); }

/* Pages that open on a light surface get the header filled in from the
   start. Without this its light text sat on cream and disappeared. */
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid { border-bottom-color: var(--rule-night); }

.header-inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  height: 82px;
}

.brand { display: flex; align-items: center; gap: 13px; flex: none; text-decoration: none; }
.brand img { width: auto; height: 34px; }
.brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.25;
  color: var(--on-night-2); padding-left: 13px;
  border-left: 1px solid var(--rule-night-2);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--on-night-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--on-night); background: rgba(255,255,255,.06); }
.nav-link[aria-current="page"] { color: var(--on-night); }
.nav-link .chev {
  width: 9px; height: 9px; flex: none; opacity: .6;
  transition: transform var(--t-fast) var(--ease);
}
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Dropdown */
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  translate: -50% 0;
  min-width: 300px;
  background: var(--night-700);
  border: 1px solid var(--rule-night-2);
  border-radius: var(--r);
  box-shadow: var(--lift-night);
  padding: 8px;
  /* Anchored to the nav item above it, so it grows out of the thing you
     pointed at rather than fading in from nowhere. The scale is tiny and
     paired with the existing lift; without an origin it would balloon from
     its own middle, which reads as unrelated to the button. */
  transform-origin: top center;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.nav-item.is-open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-panel a {
  display: block; padding: 11px 13px; border-radius: var(--r-sm);
  text-decoration: none; transition: background var(--t-fast) var(--ease);
}
.nav-panel a:hover { background: rgba(255,255,255,.07); }
.nav-panel .t { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--on-night); }
.nav-panel .d { display: block; font-size: var(--fs-xs); color: var(--on-night-3); margin-top: 2px; line-height: 1.45; }

.nav-cta { flex: none; margin-left: 8px; }

.burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-xs);
}
.burger span {
  display: block; width: 21px; height: 1.5px; background: var(--on-night);
  border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile sheet. Fills the screen and scrolls inside itself, so the primary
   action can never fall below a short phone's fold. */
.sheet {
  position: fixed; inset: 0; z-index: 99;
  background: var(--night-900);
  padding: 88px var(--gutter) 40px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
  display: flex; flex-direction: column;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-foot { margin-top: auto; padding-top: 32px; }

/* ========================= 6. BUTTONS AND LINKS ========================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------
   PRESS FEEDBACK

   Everything you can press now answers the instant you touch it, rather
   than waiting for you to lift your finger. Before this only .btn did;
   every card, dot, rung and menu row felt dead on a phone, because a tap
   produced nothing at all until the next page started loading.

   :active fires on pointer-DOWN, so no JavaScript is involved. The press
   is quick (90ms) and the release is slower (--t-fast), which is what a
   real button does — it gives way at once and comes back at its own pace.

   TWO RULES ABOUT WHAT GETS THIS.

   Only things that actually do something. A plain .card <div> in the
   "Which one is you" grids is not a link, so it must NOT depress: a
   surface that reacts to a press and then does nothing is a lie about
   what will happen. Hence a.card rather than .card.

   And the browser's own grey tap flash is turned off ONLY on elements
   that have been given a real press state here, never generally — that
   flash is the only feedback anything else has.
   --------------------------------------------------------------------- */
:is(
  a.card, .card-link, .door, .prod, .proj-card, .post, .post-row,
  .sheet-link, .sheet-single, .foot a, .nav-panel a
),
:is(button, summary):is(.rail-dot, .lad-rung, .lad-route, .opt, .q-head, .burger, .pick button) {
  -webkit-tap-highlight-color: transparent;
}

/* Cards give way slightly. The scale is deliberately small — a card is a
   big surface, and the same percentage that reads as a nudge on a button
   reads as a lurch on something this size. */
:is(a.card, .card-link, .door, .prod, .proj-card, .post, .post-row):active {
  transform: scale(.988);
  transition: transform 90ms var(--ease-out);
}

/* Rows in the menu and the footer are text, not objects, so they dim
   rather than move. Moving a line of text under a finger reads as a
   glitch; a change in weight of colour reads as a press. */
:is(.sheet-link, .sheet-single, .nav-panel a, .foot a):active {
  opacity: .55;
  transition: opacity 90ms var(--ease-out);
}

/* Small controls take a firmer squeeze, because at this size a subtle
   one is invisible. */
:is(.rail-dot, .lad-rung, .lad-route, .opt, .q-head, .burger):active {
  transform: scale(.94);
  transition: transform 90ms var(--ease-out);
}
/* The rail dot draws its visible circle in ::before, so the press has to
   compose with the scale that marks the current card rather than replace it. */
.rail-dot:active::before { transform: scale(1.4); }

/* A press must never be the thing that hides text or breaks a layout, so
   nothing here touches anything but transform and opacity. */
@media (prefers-reduced-motion: reduce) {
  :is(a.card, .card-link, .door, .prod, .proj-card, .post, .post-row,
      .rail-dot, .lad-rung, .lad-route, .opt, .q-head, .burger):active {
    transform: none;
    opacity: .7;
  }
}
.btn svg { width: 15px; height: 15px; flex: none; }

/* Primary. Gold means live power, so the one action that starts the
   relationship is the one thing lit up. */
.btn-primary { background: var(--volt); color: var(--night-900); }
.btn-primary:hover { background: var(--volt-hi); box-shadow: 0 0 0 4px rgba(255,184,28,.22); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-day-2);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(10,23,41,.04); }

.night .btn-ghost, .hero .btn-ghost, .btn-ghost-night {
  color: var(--on-night); border-color: var(--rule-night-2); background: rgba(255,255,255,.04);
}
.night .btn-ghost:hover, .hero .btn-ghost:hover, .btn-ghost-night:hover {
  background: rgba(255,255,255,.11); border-color: var(--rule-night-2);
}

.btn-solid { background: var(--night-800); color: var(--on-night); }
.btn-solid:hover { background: var(--night-700); }

.btn-sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-xs); }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Text link with a moving underline. The default secondary action —
   quieter than a button, which keeps the gold rare. */
.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; color: var(--ink);
  padding-block: 3px;
  position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(0);
  transition: transform var(--t) var(--ease);
}
.tlink:hover::after { transform-origin: left; transform: scaleX(1); }
.tlink svg { width: 15px; height: 15px; flex: none; }
.tlink .arrow { transition: transform var(--t) var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }
.night .tlink, .hero .tlink { color: var(--volt); }

/* ==================== 7. THE ENDURANCE LINE (signature) ================
   A 24-hour axis. Gold fill means you still have power. Where the fill
   stops is the hour you go dark. Same component in the hero, on every
   system card, and in the calculator — always driven by real figures.
   ====================================================================== */

.endur { --pct: 0%; --sunrise: 50%; width: 100%; }

.endur-track {
  position: relative;
  height: 44px;
  border-radius: var(--r-xs);
  background: rgba(10,23,41,.06);
  overflow: hidden;
}
.night .endur-track, .hero .endur-track { background: rgba(255,255,255,.07); }

/* Night band sits under the fill, so you read "the dark hours" behind it. */
.endur-night {
  position: absolute; inset: 0 0 0 0;
  background: linear-gradient(90deg, rgba(10,23,41,.10) 0%, rgba(10,23,41,.10) var(--sunrise), transparent var(--sunrise));
}
.night .endur-night, .hero .endur-night {
  background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.34) var(--sunrise), transparent var(--sunrise));
}

.endur-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct);
  background: linear-gradient(90deg, var(--volt) 0%, var(--volt-hi) 78%, var(--volt-hi) 100%);
  border-radius: var(--r-xs) 2px 2px var(--r-xs);
  transform-origin: left;
  transition: width 1100ms var(--ease-out);
  box-shadow: 0 0 24px -4px rgba(255,184,28,.5);
}
.endur-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: var(--day-000); opacity: .9;
}
.endur.is-full .endur-fill::after { display: none; }

/* Hour ticks. Every 3 hours, with 12-hour marks taller. */
.endur-ticks { position: absolute; inset: 0; display: flex; }
.endur-ticks i {
  flex: 1 1 0; position: relative;
}
.endur-ticks i::before {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 7px;
  background: currentColor; opacity: .28;
}
.endur-ticks i.maj::before { height: 100%; opacity: .16; }

/* Sunrise marker: the moment the roof takes over again. */
.endur-sun {
  position: absolute; top: 0; bottom: 0; left: var(--sunrise);
  width: 1.5px; background: var(--volt-hi); opacity: .85;
}
.endur-sun::after {
  content: ''; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px;
  translate: -50% 0; border-radius: 50%;
  background: var(--volt-hi); box-shadow: 0 0 10px 2px rgba(255,209,102,.7);
}

.endur-scale {
  position: relative;
  height: 15px;
  margin-top: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.endur-scale span {
  position: absolute; top: 0; left: var(--at); translate: -50% 0;
  white-space: nowrap;
}
.endur-scale span.first { translate: 0 0; }
.endur-scale span.last  { translate: -100% 0; }
.night .endur-scale, .hero .endur-scale { color: var(--on-night-3); }

.endur-caption {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.endur-caption .v {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.endur-caption .l { font-size: var(--fs-sm); color: var(--ink-2); }
.endur-sm .endur-scale { height: 14px; }
.night .endur-caption .l, .hero .endur-caption .l { color: var(--on-night-2); }

/* Compact variant for cards */
.endur-sm .endur-track { height: 26px; }
.endur-sm .endur-scale { font-size: 10.5px; margin-top: 7px; }

/* ============================== 7b. HERO ============================== */
/* The photograph is the hero. No frosted panel over it — the old site put
   a blurred pane between the reader and a good golden-hour image, then
   spent ten rounds of fixes trying to make that readable. Instead the
   photo is anchored right, the type sits on clean night to its left, and
   a single soft gradient joins them. */

.hero {
  position: relative;
  background: var(--night-900);
  color: var(--on-night);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute; inset: 0; z-index: 0;
}
/* The two frames are wrapped in <picture> so a phone can be sent a 960px
   webp instead of the full 1920px jpg — 174 KB of hero down to 21 KB. A
   <picture> is an inline box by default, so it has to be told to fill the
   layer the <img> used to fill on its own. */
.hero-media picture { display: block; position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 48% 62%;
  /* A touch of warmth back into the golden hour the darkening takes out. */
  filter: saturate(1.12) contrast(1.04) brightness(1.03);
  animation: heroDrift 44s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

/* DAY AND NIGHT.
   Two photographs of the same house at the same crop: the daylight frame
   underneath, the night render on top. Crossfading between them is the
   whole effect — nothing is painted over the picture, so the windows that
   light up are the real windows, and it lines up at every screen size.
   ✏️ --hero-cycle sets how long one full day takes. */
.hero { --hero-cycle: 22s; }
.hero-media .night-frame {
  position: absolute; inset: 0;
  opacity: 0;
  animation: heroNight var(--hero-cycle) var(--ease) infinite;
}
@keyframes heroNight {
  0%, 30%  { opacity: 0; }   /* midday */
  50%      { opacity: 1; }   /* dusk falls */
  80%      { opacity: 1; }   /* the long night */
  100%     { opacity: 0; }   /* dawn */
}

/* One gradient, doing all the legibility work. Opaque at the left where
   the words are, clear at the right where the house is. */
/* Two scrims, crossfading with the photographs beneath them. Both keep the
   same weight on the left, where the words are, so legibility never
   changes. What changes is the colour: warm at midday, deep blue at
   night. That is what carries the effect on a phone, where the scrim has
   to be heavy and the picture alone cannot show it. */
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }
.hero-scrim.is-day {
  background:
    linear-gradient(97deg,
      rgba(12,18,26,.94) 0%, rgba(14,20,28,.86) 22%, rgba(18,24,30,.56) 40%,
      rgba(24,26,28,.18) 56%, rgba(30,28,24,.00) 70%, rgba(30,28,24,.00) 100%),
    linear-gradient(180deg, rgba(10,16,26,.52) 0%, rgba(10,16,26,.08) 18%, transparent 40%);
  animation: scrimDay var(--hero-cycle) var(--ease) infinite;
}
.hero-scrim.is-night {
  background:
    linear-gradient(97deg,
      rgba(3,10,26,.96) 0%, rgba(4,13,34,.92) 22%, rgba(5,17,45,.72) 40%,
      rgba(6,21,54,.42) 56%, rgba(7,24,60,.22) 70%, rgba(7,24,60,.20) 100%),
    linear-gradient(180deg, rgba(3,10,26,.62) 0%, rgba(3,10,26,.16) 18%, transparent 40%);
  opacity: 0;
  animation: scrimNight var(--hero-cycle) var(--ease) infinite;
}

/* A low sun sitting behind the roofline. It sets, and it comes back. */
.hero-sun {
  position: absolute; right: 16%; top: 34%;
  width: min(46vw, 620px); aspect-ratio: 1;
  translate: 50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255,214,140,.50) 0%, rgba(255,184,28,.20) 34%, rgba(255,150,20,.06) 56%, transparent 72%);
  pointer-events: none;
  animation: sunSet var(--hero-cycle) var(--ease) infinite;
}

@keyframes scrimDay   { 0%,32% { opacity: 1; } 50%,80% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scrimNight { 0%,32% { opacity: 0; } 50%,80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sunSet {
  0%, 26%  { opacity: 1; transform: translateY(0); }
  48%      { opacity: 0; transform: translateY(90px); }
  82%      { opacity: 0; transform: translateY(90px); }
  100%     { opacity: 1; transform: translateY(0); }
}

.hero-inner {
  position: relative; z-index: 1;
  padding-top: clamp(120px, 15vh, 178px);
  padding-bottom: clamp(56px, 8vh, 96px);
  min-height: min(94vh, 900px);
  display: flex; flex-direction: column; justify-content: center;
}

.hero-copy { max-width: 640px; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: .97;
  letter-spacing: -.034em;
  font-weight: 600;
}
.hero h1 .lit { color: var(--volt); }

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--on-night-2);
  max-width: 44ch;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.hero-actions { margin-top: clamp(28px, 3.2vw, 40px); }

/* The endurance line, sitting under the words, drawing itself once. */
.hero-endur {
  margin-top: clamp(36px, 5vw, 62px);
  max-width: 620px;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule-night);
}
.hero-endur-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.hero-endur-head .k {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-night-3);
}
.hero-endur-head .v { font-size: var(--fs-sm); color: var(--on-night-2); }
.hero-endur-head .v b { color: var(--volt); font-weight: 600; }

/* The quiet line under the hero: real facts, not fake buttons. */
.hero-meta {
  margin-top: clamp(30px, 4vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 3vw, 38px);
  font-size: var(--fs-xs);
  color: var(--on-night-2);
}
.hero-meta > div { display: flex; align-items: center; gap: 9px; }
.hero-meta strong { color: var(--on-night); font-weight: 600; display: block; }
.hero-meta span { display: block; color: var(--on-night-3); }
.hero-meta img { height: 21px; width: auto; opacity: .9; }
.hero-meta .sep { width: 1px; height: 26px; background: var(--rule-night); }

/* ============================== 8. CARDS ============================== */
/* Cards are separated by surface tone and space, not by outlines. The old
   site drew a 1px border around forty different things, which is the
   loudest "template" signal a page can send. */

.card {
  background: var(--day-000);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 32px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.day-white .card { background: var(--day-100); }
/* A card that inverts. Listed with the dark surfaces above, so every
   token inside it flips without anything being restated. */
.card-dark, .day-white .card-dark { background: var(--night-800); color: var(--on-night); }
.night .card, .night-deep .card { background: var(--night-700); }

.card-link { text-decoration: none; display: block; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.night .card-link:hover, .night-deep .card-link:hover { box-shadow: var(--lift-night); }

/* --- System card. The endurance line is drawn to scale, so JANARIX 15
       and 45 are visibly different lengths instead of two numbers in
       identical boxes. --- */
.sys {
  display: flex; flex-direction: column;
  background: var(--day-000);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 32px);
  position: relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sys:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

.sys.is-pick { background: var(--night-800); color: var(--on-night); }
.sys.is-pick h3 { color: var(--on-night); }

.sys-tag {
  position: absolute; top: -11px; left: clamp(24px, 2.4vw, 32px);
  background: var(--volt); color: var(--night-900);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}

.sys-cap {
  display: flex; align-items: baseline; gap: 7px;
  color: var(--ink-3);
}
.sys.is-pick .sys-cap { color: var(--on-night-3); }
.sys-cap .n { font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.5rem); font-weight: 600; letter-spacing: -.045em; line-height: .85; color: var(--ink); }
.sys.is-pick .sys-cap .n { color: var(--volt); }
.sys-cap .u { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }

.sys h3 { margin-top: 16px; }
.sys-note { min-height: 2.9em; }
.sys-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 7px; }
.sys.is-pick .sys-note { color: var(--on-night-2); }

.sys-price { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-day); min-height: 104px; }
.sys.is-pick .sys-price { border-top-color: var(--rule-night); }
.sys-price .p {
  font-family: var(--display); font-weight: 600; font-size: 1.6rem;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sys-price .q { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.sys.is-pick .sys-price .q { color: var(--on-night-3); }

.sys .endur { margin-top: 20px; }

.sys-list { margin-top: 20px; display: grid; gap: 9px; }
.sys-list li { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); list-style: none; line-height: 1.5; }
.sys.is-pick .sys-list li { color: var(--on-night-2); }
.sys-list svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--volt-deep); }
.sys.is-pick .sys-list svg { color: var(--volt); }

.sys-foot { margin-top: auto; padding-top: 24px; }

/* --- Door card: "which one is you" --- */
.door {
  display: flex; flex-direction: column;
  background: var(--day-000);
  border-radius: var(--r);
  padding: clamp(22px, 2.2vw, 30px);
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.door:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.door .who {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--volt-deep);
}
.door h3 { margin-top: 12px; }
.door p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 10px; }
.door .go {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600;
}
.door .go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.door:hover .go svg { transform: translateX(4px); }

/* --- Step card: how it works --- */
.step { position: relative; padding-top: 26px; }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--rule-day-2);
}
.step.is-lit::before { background: var(--volt); }
.step .k {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.step h3 { margin-top: 14px; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 10px; max-width: 38ch; }

/* --- Editorial figure: a photograph allowed to be a photograph --- */
.figure { border-radius: var(--r); overflow: hidden; position: relative; background: var(--day-100); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.figure-zoom:hover img { transform: scale(1.04); }
.figure-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 24px 18px;
  background: linear-gradient(180deg, rgba(5,15,29,0) 0%, rgba(5,15,29,.74) 38%, rgba(5,15,29,.94) 100%);
  color: #FFFFFF; font-size: var(--fs-xs);
}

/* --- Split: image one side, words the other --- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}
.split-media { min-height: 340px; border-radius: var(--r-lg); overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ========================= 9. FIGURES AND STATS ========================= */
/* Four checkable equipment facts. Big numerals, small labels, hairline
   dividers — no boxes. */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.facts > div {
  padding: clamp(24px, 2.6vw, 34px) clamp(16px, 2vw, 30px);
  border-left: 1px solid var(--rule-night);
}
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts .v {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: .9;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--volt);
}
.facts .l {
  margin-top: 12px; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--on-night-2); max-width: 22ch;
}

/* Promise strip: what we put in writing */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.promises > div { padding: clamp(22px,2.4vw,30px) clamp(16px,2vw,28px); border-left: 1px solid var(--rule-night); }
.promises > div:first-child { border-left: 0; padding-left: 0; }
.promises h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.promises .l { margin-top: 9px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--volt); }

/* Upgrade rungs */
.rung {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: 20px 0; border-top: 1px solid var(--rule-day);
}
.rung:last-child { border-bottom: 1px solid var(--rule-day); }
.rung .p {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  flex: none; min-width: 148px; color: var(--volt-deep);
}
.rung .t { font-size: var(--fs-sm); }
.rung .t b { font-weight: 600; }
.rung .t span { color: var(--ink-2); }

/* Care list */
.care-list { display: grid; gap: 0; }
.care-list li {
  list-style: none; display: flex; gap: 16px; align-items: flex-start;
  padding: 17px 0; border-top: 1px solid var(--rule-day);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.care-list li:last-child { border-bottom: 1px solid var(--rule-day); }
.care-list svg { width: 16px; height: 16px; flex: none; color: var(--volt-deep); margin-top: 3px; }

/* Marstek proof points */
.proof { display: grid; gap: 0; }
.proof li {
  list-style: none; padding: 16px 0; border-top: 1px solid var(--rule-day);
  display: flex; gap: 14px; align-items: baseline;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.proof li:last-child { border-bottom: 1px solid var(--rule-day); }
.proof .n {
  font-family: var(--display); font-weight: 600; color: var(--volt-deep);
  font-variant-numeric: tabular-nums; flex: none; min-width: 92px;
  letter-spacing: -.02em;
}

/* ============================ 10. CALCULATOR ============================ */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: stretch;
}
/* The questions column is shorter than the answer panel, so the fine
   print is pushed to the foot rather than leaving a hole. */
.calc-qs { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }
.calc-qs .fine { margin-top: auto; padding-top: 8px; }

.q .q-label {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 11px;
}
.q-opts { display: grid; gap: 7px; }
.q-opts.n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.q-opts.n3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.q-opts.n4 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.opt {
  min-height: 46px; padding: 0 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: var(--r-sm);
  background: var(--day-000);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--rule-day);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  line-height: 1.25;
}
.opt:hover { border-color: var(--rule-day-2); color: var(--ink); }
.opt[aria-pressed="true"] {
  background: var(--night-800); color: var(--on-night); border-color: var(--night-800);
  font-weight: 600;
}

/* Answer panel */
.answer {
  background: var(--night-800); color: var(--on-night);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 36px);
}
.answer .k {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-night-3);
}
.answer .sys-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -.03em;
  color: var(--volt); margin-top: 12px; line-height: 1;
}
.answer .headline { font-size: var(--fs-lead); margin-top: 14px; line-height: 1.35; }
.answer .sub { font-size: var(--fs-sm); color: var(--on-night-2); margin-top: 10px; }
.answer .endur { margin-top: 24px; }
.answer .price {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-night);
  font-size: var(--fs-sm); color: var(--on-night-2);
}
.answer .price b {
  display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  color: var(--on-night); letter-spacing: -.025em; margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.answer .btn-row { margin-top: 22px; }

/* System picker in the full calculator */
.picker { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.pick {
  text-align: left; padding: 16px 15px; border-radius: var(--r-sm);
  background: var(--day-000); border: 1px solid var(--rule-day);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pick:hover { transform: translateY(-2px); border-color: var(--rule-day-2); }
.pick[aria-pressed="true"] { border-color: var(--volt-deep); box-shadow: inset 0 0 0 1px var(--volt-deep); }
.pick { display: flex; flex-direction: column; gap: 4px; }
.pick .nm {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.2;
}
.pick .hr {
  display: block; font-size: var(--fs-sm); color: var(--ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.pick .pr { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.pick .best {
  display: inline-block; align-self: flex-start; margin-top: 6px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(255,184,28,.16); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--volt-deep);
}
.pick[aria-pressed="true"] .best { background: rgba(255,184,28,.24); }

/* ============================ 11. ACCORDION ============================ */

.acc { border-top: 1px solid var(--rule-day); }
.acc-item { border-bottom: 1px solid var(--rule-day); }
.acc-btn {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2.2vw, 28px) 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em;
  line-height: 1.3; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.acc-btn:hover { color: var(--volt-deep); }
.acc-ico {
  flex: none; width: 22px; height: 22px; margin-top: 2px; position: relative;
}
.acc-ico::before, .acc-ico::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  translate: -50% -50%; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.acc-ico::before { width: 13px; height: 1.5px; }
.acc-ico::after  { width: 1.5px; height: 13px; }
.acc-btn[aria-expanded="true"] .acc-ico::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height var(--t) var(--ease); }
.acc-inner { padding-bottom: clamp(20px, 2.2vw, 28px); max-width: 66ch; }
.acc-inner p { font-size: var(--fs-sm); color: var(--ink-2); }
.acc-inner a { color: var(--volt-deep); font-weight: 600; }

/* Details fallback used for "show the numbers" */
.reveal-note summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 0;
}
.reveal-note summary::-webkit-details-marker { display: none; }
.reveal-note summary::after {
  content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.reveal-note[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ============================== 12. FORMS ============================== */

.field { display: block; }
.field + .field { margin-top: 18px; }
.field .lb {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.field .hint { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 7px; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-day-2);
  background: var(--day-000); color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--night-600);
  box-shadow: 0 0 0 3px rgba(29,58,99,.14);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.select { appearance: none; background-image: none; cursor: pointer; }
.field-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.field-2 .field + .field { margin-top: 0; }

/* Contact tiles on the dark consultation panel: glass, not white blocks. */
.contact-tile {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--rule-night);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.contact-tile:hover { background: rgba(255,255,255,.11); }
.contact-tile svg { width: 18px; height: 18px; color: var(--volt); flex: none; margin-top: 3px; }
.contact-tile > span { display: block; min-width: 0; }
.contact-tile .k { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-3); }
.contact-tile .v { display: block; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--on-night); margin-top: 3px; font-weight: 500; }

/* ============================ 13. CATALOGUE ============================ */

.cat-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-bottom: 26px; border-bottom: 1px solid var(--rule-day);
}
.cat-search {
  flex: 1 1 260px; min-height: 46px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--rule-day-2);
  background: var(--day-000); font-size: var(--fs-sm);
}
.cat-search:focus { outline: none; border-color: var(--night-600); box-shadow: 0 0 0 3px rgba(29,58,99,.14); }
.chip {
  min-height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--rule-day-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--night-800); border-color: var(--night-800); color: var(--on-night); }

.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,26px); }
.prod {
  display: flex; flex-direction: column; background: var(--day-000);
  border-radius: var(--r); overflow: hidden; text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.prod-img {
  aspect-ratio: 4 / 3; background: var(--day-100);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.prod-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.prod-img .ph { font-size: var(--fs-xs); color: var(--ink-3); }
.prod-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.prod .sku { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prod :is(h2, h3) { font-size: 1.0625rem; margin-top: 8px; }
.prod .bl { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 9px; line-height: 1.55; }
.prod-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod .pr { font-size: var(--fs-sm); font-weight: 600; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
}
.badge-in { background: #E4F3E9; color: #1B6135; }
.badge-pre { background: #E6EDFA; color: #22437F; }
.badge-ask { background: var(--day-100); color: var(--ink-2); }

/* Spec table */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--rule-day); font-size: var(--fs-sm); vertical-align: top; }
.spec th { font-weight: 500; color: var(--ink-3); width: 44%; padding-right: 20px; }
.spec td { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Gallery */
.gallery { display: grid; gap: 10px; }
.gallery-main { aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: var(--day-100); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-in; }
.gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 8px; }
.gallery-thumbs button { aspect-ratio: 1; border-radius: var(--r-xs); overflow: hidden; background: var(--day-100); padding: 6px; border: 1px solid transparent; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--night-600); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(5,15,29,.94); padding: 5vh 5vw;
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 22px; right: 22px; font-size: 22px; line-height: 1; }
.lightbox-nav.prev { left: 18px; top: 50%; translate: 0 -50%; }
.lightbox-nav.next { right: 18px; top: 50%; translate: 0 -50%; }
.lightbox-count { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; color: var(--on-night-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* Post / project lists */
.post-row {
  display: flex; align-items: baseline; gap: clamp(14px,2.4vw,32px);
  padding: 22px 0; border-top: 1px solid var(--rule-day);
  text-decoration: none;
}
.post-row:last-child { border-bottom: 1px solid var(--rule-day); }
.post-row .dt { font-size: var(--fs-xs); color: var(--ink-3); flex: none; min-width: 106px; font-variant-numeric: tabular-nums; }
.post-row h3 { font-size: 1.125rem; flex: 1; transition: color var(--t-fast) var(--ease); }
.post-row:hover h3 { color: var(--volt-deep); }
.post-row .ar { flex: none; width: 15px; height: 15px; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.post-row:hover .ar { transform: translateX(4px); }

.proj-card { text-decoration: none; display: block; }
.proj-card .figure { aspect-ratio: 16/10; margin-bottom: 16px; }
.proj-card :is(h2, h3) { font-size: 1.25rem; }
.proj-card .meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 8px; }

/* Empty state */
.empty {
  padding: clamp(40px,6vw,72px); text-align: center;
  background: var(--day-100); border-radius: var(--r);
}
.empty :is(h1, h2, h3) { font-size: 1.25rem; }
.empty p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 10px; max-width: 44ch; margin-inline: auto; }

/* ============================== 14. FOOTER ============================== */

.site-footer { background: var(--night-900); color: var(--on-night-2); padding-top: clamp(56px,6vw,88px); }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(28px,4vw,56px);
  padding-bottom: clamp(40px,5vw,64px);
}
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { font-size: var(--fs-sm); margin-top: 18px; max-width: 32ch; color: var(--on-night-2); }
.foot-brand .areas { font-size: var(--fs-xs); color: var(--on-night-3); margin-top: 12px; }
.foot .foot-h {
  font-family: var(--body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--volt);
  margin-bottom: 16px;
}
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { font-size: var(--fs-sm); color: var(--on-night-2); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.foot a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--volt); }
.foot-contact .k { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-3); margin-bottom: 3px; }
.foot-contact li + li { margin-top: 14px; }
.foot-contact .v { display: block; font-size: var(--fs-sm); color: var(--on-night); overflow-wrap: anywhere; }

.foot-legal { border-top: 1px solid var(--rule-night); padding: 26px 0; }
.foot-legal p { font-size: 12px; line-height: 1.6; color: var(--on-night-3); max-width: 76ch; }
.foot-legal p + p { margin-top: 9px; }
.foot-copy { border-top: 1px solid var(--rule-night); padding: 20px 0 30px; font-size: 12px; color: var(--on-night-3); }

/* ============================== 15. MOTION ============================== */
/* Everything below is transform and opacity only, so nothing triggers
   layout. All of it switches off for prefers-reduced-motion. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Hero entrance: one orchestrated sequence rather than scattered effects. */
.hero-copy > *, .hero-endur, .hero-meta {
  opacity: 0; transform: translateY(18px);
  animation: heroIn 900ms var(--ease-out) forwards;
}
.hero h1        { animation-delay: 100ms; }
.hero-lead      { animation-delay: 200ms; }
.hero-actions   { animation-delay: 290ms; }
.hero-endur     { animation-delay: 400ms; }
.hero-meta      { animation-delay: 500ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.progress {
  position: fixed; top: 0; left: 0; z-index: 101;
  height: 2px; width: 100%;
  background: var(--volt);
  transform: scaleX(0); transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-copy > *, .hero-endur, .hero-meta { opacity: 1; transform: none; }
  .hero-media img, .hero-scrim, .hero-sun { animation: none; }
  .hero-scrim.is-night { opacity: 0; }
  /* The endurance line still shows its final state — it carries data, so
     it must not disappear just because motion is off. */
  .endur-fill { transition: none; }
}

/* ============================= 16. UTILITIES ============================= */

.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 52px; }
.measure { max-width: var(--max-text); }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* ============================= RESPONSIVE ============================= */

@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .picker { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .facts, .promises { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .facts > div:nth-child(3), .promises > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(-n+2), .promises > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-night); }
}

@media (max-width: 960px) {
  .nav, .nav-cta { display: none; }
  .burger { display: flex; }
  .head-split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-media { min-height: 260px; order: -1; }
  .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .g-3, .g-2 { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { min-height: auto; padding-top: 116px; padding-bottom: 56px; }
  .hero-media img { object-position: 54% 62%; }
  /* On a phone the photo is cropped hard, so the gradient goes vertical:
     words on clean night at the top, house visible below. */
  .hero-scrim.is-day {
    background: linear-gradient(180deg,
      rgba(12,18,26,.93) 0%, rgba(14,20,28,.88) 36%,
      rgba(20,24,28,.44) 58%, rgba(26,26,24,.10) 76%, rgba(20,20,22,.46) 100%);
  }
  .hero-scrim.is-night {
    background: linear-gradient(180deg,
      rgba(3,10,26,.95) 0%, rgba(4,13,34,.90) 36%,
      rgba(5,17,45,.50) 58%, rgba(6,21,54,.16) 76%, rgba(5,15,40,.55) 100%);
  }
  .hero-sun { right: 4%; top: 46%; width: min(96vw, 560px); }
  .hero-meta .sep { display: none; }
  .hero-meta { gap: 14px 24px; }
  .prod-grid { grid-template-columns: minmax(0, 1fr); }
  .prod { flex-direction: row; }
  .prod-img { aspect-ratio: 1; width: 116px; flex: none; padding: 12px; }
  .prod-body { padding: 16px 18px; }
  .rung { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rung .p { min-width: 0; }
  .post-row { flex-wrap: wrap; gap: 6px 16px; }
  .post-row .dt { min-width: 0; width: 100%; order: -1; }
  .field-2 { grid-template-columns: minmax(0, 1fr); }
  .field-2 .field + .field { margin-top: 18px; }
}

@media (max-width: 560px) {
  .facts, .promises { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .promises > div {
    border-left: 0; padding-left: 0; padding-block: 20px;
    border-bottom: 1px solid var(--rule-night);
  }
  .facts > div:last-child, .promises > div:last-child { border-bottom: 0; }
  .q-opts.n3, .q-opts.n4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .picker { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(58px,1fr)); }
}

@media print {
  .site-header, .float-btn, .sheet, .progress { display: none !important; }
  body { background: #fff; color: #000; }
  .night, .night-deep, .hero { background: #fff !important; color: #000 !important; }
}

/* --- Beyond band: 45+ is not a fourth size, it is a different kind of
       answer (a site visit, not a catalogue pick), so it gets its own
       shape rather than pretending to be a comparable card. --- */
.beyond {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  background: var(--night-800); color: var(--on-night);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 38px) clamp(24px, 3vw, 44px);
  margin-top: clamp(16px, 1.8vw, 26px);
}
.beyond .cap {
  display: flex; align-items: baseline; gap: 8px;
}
.beyond .cap .n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.045em;
  line-height: .85; color: var(--volt);
}
.beyond .cap .u {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-night-3); line-height: 1.2;
}
.beyond h3 { color: var(--on-night); }
.beyond p { font-size: var(--fs-sm); color: var(--on-night-2); margin-top: 8px; max-width: 62ch; }
.beyond .act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.beyond .act .pr { font-size: var(--fs-xs); color: var(--on-night-3); }

@media (max-width: 860px) {
  .beyond { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: left; }
  .beyond .act { align-items: flex-start; }
  .beyond .act .btn { width: 100%; }
}

/* --- Endurance comparison rows (systems page) --- */
.cmp-row {
  display: grid; grid-template-columns: 190px minmax(0,1fr) 84px;
  gap: clamp(14px, 2vw, 28px); align-items: center;
  padding: 20px 0; border-top: 1px solid var(--rule-day);
}
.cmp-row:last-of-type { border-bottom: 1px solid var(--rule-day); }
.cmp-row .nm { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.cmp-row .nm span { display: block; font-family: var(--body); font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.cmp-row .cmp-v {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--day-100); border-radius: var(--r-pill); flex-wrap: wrap; }
.toggle button {
  min-height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toggle button[aria-pressed="true"] { background: var(--night-800); color: var(--on-night); }

@media (max-width: 680px) {
  .cmp-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .cmp-row .endur { grid-column: 1 / -1; }
}

/* --- Note block: an aside that carries a caveat or an honest limit.
       Janarix's brand asset is saying the awkward thing out loud, so it
       gets a real component instead of being buried in fine print. --- */
.note {
  border-left: 2px solid var(--volt);
  padding: 4px 0 4px 20px;
  max-width: 72ch;
}
.note h3 { font-size: 1.0625rem; margin-bottom: 7px; }
.note p { font-size: var(--fs-sm); color: var(--ink-2); }
.note p + p { margin-top: 8px; }
.note-night p, .night .note p { color: var(--on-night-2); }

/* Plain list, used where items are not promises (so no gold ticks). */
.plain-list { list-style: none; display: grid; gap: 0; }
.plain-list li {
  padding: 13px 0; border-top: 1px solid var(--rule-day);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.plain-list li:last-child { border-bottom: 1px solid var(--rule-day); }
.night .plain-list li { border-color: var(--rule-night); color: var(--on-night-2); }

/* Sector chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips span {
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--day-100); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 600;
}
.night .chips span { background: var(--night-700); color: var(--on-night-2); }

/* --- Numbered sequence. Numbered only where order genuinely carries
       information: these are real processes with a first and a last. --- */
.seq { list-style: none; counter-reset: none; }
.seq li {
  display: grid; grid-template-columns: 56px minmax(0,1fr);
  gap: clamp(14px, 2vw, 26px);
  padding: 22px 0; border-top: 1px solid var(--rule-day);
}
.seq li:last-child { border-bottom: 1px solid var(--rule-day); }
.seq .n {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  color: var(--volt-deep); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; padding-top: 2px;
}
.seq h3 { font-size: 1.125rem; }
.seq p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 7px; max-width: 62ch; }
.night .seq li { border-color: var(--rule-night); }
.night .seq .n { color: var(--volt); }
.night .seq p { color: var(--on-night-2); }

/* --- Growth bars (Marstek sales record) --- */
.growth-row {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto auto;
  gap: clamp(10px, 1.6vw, 20px); align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--rule-day);
}
.growth-row:last-of-type { border-bottom: 1px solid var(--rule-day); }
.growth-row .yr { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.growth-row .bar {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--volt), var(--volt-hi));
  width: var(--w); max-width: 100%;
  transform-origin: left; animation: growIn 900ms var(--ease-out) both;
}
@keyframes growIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.growth-row .v {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}
.growth-row .q { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }

@media (max-width: 680px) {
  .growth-row { grid-template-columns: 52px minmax(0,1fr); }
  .growth-row .v, .growth-row .q { grid-column: 2; }
  .seq li { grid-template-columns: 40px minmax(0,1fr); }
}

/* --- Prose: long-form article body (guides and project write-ups) --- */
.prose { max-width: var(--max-text); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2em; margin-bottom: .5em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; margin-bottom: .4em; }
.prose p { margin-bottom: 1.1em; }
.prose ul { margin-bottom: 1.1em; color: var(--ink-2); }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--volt-deep); font-weight: 500; }
.prose blockquote {
  border-left: 2px solid var(--volt); padding-left: 22px;
  margin: 1.6em 0; color: var(--ink);
}
.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .9em; background: var(--day-100); padding: 2px 6px; border-radius: 4px;
}
.prose img { border-radius: var(--r); margin: 1.6em 0; }

/* An article cover with nothing in it should not leave a grey box. */
.figure:empty { display: none; }

/* The spam honeypot is visually hidden, but a bare <input> still carries a
   browser default intrinsic width (~375px) which pushed the page sideways
   at 320px. Constrain the controls, not just the wrapper. */
.vh input, .vh textarea, .vh select { width: 1px; min-width: 0; }

/* On the narrowest phones a long button label has nowhere to go, so let it
   wrap rather than push the page sideways. */
@media (max-width: 430px) {
  .btn { padding-inline: 18px; white-space: normal; text-align: center; line-height: 1.3; }
  .btn-lg { padding-inline: 20px; min-height: 54px; }
  .btn-row { gap: 10px; }
  .btn-row .btn { width: 100%; }
}

/* "Brownout-proof" is set as one unbreakable word, so on small screens the
   display size has to come down to meet it rather than the other way round.
   Measured: it overflowed at 320, 360 and 390px before this. */
@media (max-width: 430px) {
  :root { --fs-display: clamp(1.95rem, 9.6vw, 2.75rem); }
}

/* ==================== 17. GUIDE CARDS (boxes, not a list) ==============
   These went to a plain ruled list, which lost the box treatment. Boxes,
   just compact: tag, title, date. A cover shows if one is set. */

.guide {
  display: flex; flex-direction: column;
  background: var(--day-000);
  border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 26px);
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.day-white .guide { background: var(--day-100); }
.guide:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.guide .tag {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--volt-deep);
}
.guide h3 { margin-top: 12px; font-size: 1.125rem; }
.guide .meta { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.guide .go {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600;
}
.guide .go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.guide:hover .go svg { transform: translateX(4px); }
.guide-cover { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 16px; }
.guide-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ============ 18. FLOATING CONTACT BUTTON (restored original) ==========
   Pill in the corner that opens quick ways to reach us. The label, the
   actions and the on/off switch all live in js/site-config.js.

   ⚠️ pointer-events. The wrapper is a tall flex column, so its box covers
   a large part of the bottom-right corner of every page. Left alone it
   swallows every click in that area. The wrapper stays transparent to the
   mouse and only the real controls inside it take clicks. */

.jfab {
  position: fixed; right: clamp(14px, 2.4vw, 22px); bottom: clamp(14px, 2.4vw, 22px);
  z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
  opacity: 0; transform: translateY(18px) scale(.95);
  transition: opacity .42s var(--ease), transform .42s var(--ease-out);
}
.jfab.in { opacity: 1; transform: none; }
.jfab.in .jfab-btn { pointer-events: auto; }
.jfab.open .jfab-panel { pointer-events: auto; }

.jfab-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px 15px 18px; border: 0; border-radius: var(--r-pill);
  font-family: var(--body); font-weight: 600; font-size: 14.5px; line-height: 1;
  color: var(--night-900); background: var(--volt);
  box-shadow: 0 14px 40px -12px rgba(255,184,28,.8);
  transition: transform .26s var(--ease-out), background .2s var(--ease);
}
.jfab-btn:hover { background: var(--volt-hi); transform: translateY(-2px); }
.jfab-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-pill);
  box-shadow: 0 0 0 0 rgba(255,184,28,.5);
  animation: jfabPulse 3.6s ease-out infinite; pointer-events: none;
}
.jfab.open .jfab-btn::before { animation: none; }
@keyframes jfabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,28,.5); }
  70%  { box-shadow: 0 0 0 15px rgba(255,184,28,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,184,28,0); }
}
.jfab-btn-ico { position: relative; width: 20px; height: 21px; flex: none; }
.jfab-btn-ico svg {
  position: absolute; inset: 0; width: 20px; height: 21px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.jfab-btn-ico .i-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
.jfab.open .jfab-btn-ico .i-open { opacity: 0; transform: rotate(90deg) scale(.7); }
.jfab.open .jfab-btn-ico .i-close { opacity: 1; transform: none; }

.jfab-panel {
  pointer-events: none; width: min(320px, calc(100vw - 40px));
  background: linear-gradient(168deg, var(--night-700), var(--night-900));
  border: 1px solid var(--rule-night-2); border-radius: 18px; padding: 8px;
  box-shadow: var(--lift-night);
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .26s var(--ease), transform .26s var(--ease-out), visibility .26s;
}
.jfab.open .jfab-panel { opacity: 1; visibility: visible; transform: none; }
.jfab-head { padding: 15px 15px 11px; }
.jfab-head b {
  display: block; font-family: var(--display); font-weight: 600; font-size: 16px;
  color: #fff; letter-spacing: -.018em;
}
.jfab-head span { display: block; font-size: 12.6px; line-height: 1.5; color: var(--on-night-2); margin-top: 4px; }
.jfab-item {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: 12px; text-decoration: none; border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.jfab-item:hover, .jfab-item:focus-visible {
  background: rgba(255,255,255,.06); border-color: rgba(255,184,28,.28);
}
.jfab-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,184,28,.13); border: 1px solid rgba(255,184,28,.3);
}
.jfab-ico svg {
  width: 18px; height: 19px; stroke: var(--volt-hi); stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.jfab-item b { display: block; font-size: 14.3px; font-weight: 600; color: #fff; line-height: 1.3; }
.jfab-item i { display: block; font-size: 12.2px; font-style: normal; color: var(--on-night-2); margin-top: 2px; }
.jfab-item:hover b { color: var(--volt-hi); }

/* ================ 19. MOBILE MENU: COLLAPSIBLE GROUPS ==================
   Every group used to be open at once, so the menu was a long scroll
   before you could see what the sections even were. Groups are closed
   until tapped, which puts all four headings on one screen. */

.sheet-group { border-bottom: 1px solid rgba(255,255,255,.08); }
.sheet-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px; min-height: 56px;
  font-family: var(--display); font-size: 1.125rem; font-weight: 600;
  color: var(--on-night); letter-spacing: -.015em;
}
.sheet-group > summary::-webkit-details-marker { display: none; }
.sheet-group > summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 1.8px solid var(--on-night-3); border-bottom: 1.8px solid var(--on-night-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t) var(--ease);
}
.sheet-group[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.sheet-group[open] > summary { color: var(--volt); }
.sheet-links { padding-bottom: 12px; }
.sheet-links a {
  display: block; padding: 11px 0 11px 14px; text-decoration: none;
  font-size: 1rem; font-weight: 500; color: var(--on-night-2);
  border-left: 1px solid var(--rule-night); border-bottom: 0;
}
.sheet-links a:hover, .sheet-links a:focus-visible { color: var(--on-night); border-left-color: var(--volt); }
.sheet-links a .d { display: block; font-size: var(--fs-xs); color: var(--on-night-3); font-weight: 400; margin-top: 2px; }
.sheet-single {
  display: flex; align-items: center; min-height: 56px; padding: 17px 2px;
  font-family: var(--display); font-size: 1.125rem; font-weight: 600;
  color: var(--on-night); text-decoration: none; letter-spacing: -.015em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sheet-contact {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: var(--fs-sm);
}
.sheet-contact a { color: var(--volt); text-decoration: none; font-weight: 600; border: 0; padding: 0; }

/* ======================= 20. MOBILE DENSITY ===========================
   The bands were built for a wide screen and simply scaled down, which
   left a lot of near-empty screens on a phone. */

@media (max-width: 780px) {
  :root {
    --sec: clamp(40px, 6.5vw, 90px);
    --sec-sm: clamp(28px, 4.5vw, 64px);
  }
  .head { margin-bottom: 26px; }

  /* The four figures: two across instead of one, which halves the band. */
  .facts, .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div, .promises > div {
    padding: 18px 14px 18px 0; border-left: 0; border-bottom: 0;
  }
  .facts > div:nth-child(even), .promises > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-night); }
  .facts > div:nth-child(-n+2), .promises > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-night); }
  .facts .v { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .facts .l { margin-top: 8px; font-size: 12.5px; line-height: 1.45; max-width: none; }
  .promises h3 { font-size: .9375rem; }
  .promises .l { margin-top: 6px; font-size: 11px; }
}

@media (max-width: 560px) {
  /* Footer: the four stacked columns ran to about 1,500px. Two across for
     the link lists brings it back to something you can actually pass. */
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; padding-bottom: 32px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand p { margin-top: 14px; }
  .foot-contact { grid-column: 1 / -1; }
  .foot-contact ul { gap: 14px; }
  .foot-contact li + li { margin-top: 0; }
  .foot .foot-h { margin-bottom: 12px; }
  .foot ul { gap: 8px; }
  .foot-legal { padding: 20px 0; }
  .foot-legal p { font-size: 11.5px; }
}

/* ==================== 21. ANNOUNCEMENT POP-UP =========================
   Built by js/announce.js from the "announcement" block in
   js/site-config.js. It shares the bottom-right corner with the "Get a
   quote" button, so it is told how much room to leave. */

.anpop {
  position: fixed; right: clamp(14px, 2.4vw, 22px);
  bottom: calc(clamp(14px, 2.4vw, 22px) + var(--jfab-space, 0px));
  z-index: 88;
  width: min(348px, calc(100vw - 32px));
  color: var(--on-night);
  background: linear-gradient(168deg, var(--night-700), var(--night-900));
  border: 1px solid rgba(255,184,28,.3);
  border-radius: 18px; padding: 24px;
  box-shadow: var(--lift-night);
  opacity: 0; transform: translateY(18px) scale(.98);
  pointer-events: none;   /* invisible is not harmless: it would still eat clicks */
  transition: opacity .34s var(--ease), transform .34s var(--ease-out);
}
.anpop.in { opacity: 1; transform: none; pointer-events: auto; }
/* While the contact panel is open the announcement steps aside rather
   than sitting underneath it. */
html.jfab-open .anpop { opacity: 0; pointer-events: none; transform: translateY(10px); }

.anpop-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--night-900); background: var(--volt);
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 13px;
}
.anpop h2 { font-size: 1.1875rem; line-height: 1.25; color: var(--on-night); }
.anpop p { font-size: var(--fs-sm); color: var(--on-night-2); margin-top: 9px; }
.anpop-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--volt); text-decoration: none;
}
.anpop-go svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anpop-go:hover { color: var(--volt-hi); }
.anpop-go:hover svg { transform: translateX(3px); }
.anpop-go svg { transition: transform var(--t) var(--ease); }

.anpop-x {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--on-night-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.anpop-x:hover { background: rgba(255,255,255,.08); color: var(--on-night); }
.anpop-x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }

@media (max-width: 560px) {
  .anpop { padding: 20px; }
  .anpop h2 { font-size: 1.0625rem; }
}


/* --- When the band above a divider is switched off in js/sections.js,
       the divider ends up directly under the hero and the two stacks of
       dark padding read as one long empty gap. Tighten both. --- */
.hero + .dawn-break { height: clamp(64px, 6vw, 96px); }

@supports selector(:has(*)) {
  .hero:has(+ .dawn-break) .hero-inner { padding-bottom: clamp(28px, 3.5vh, 52px); }
  /* Two dark bands back to back after a switch-off: halve the seam. */
  .night:has(+ .night) { padding-bottom: calc(var(--sec) * .5); }
  .night + .night { padding-top: calc(var(--sec) * .5); }
  /* Same for two light bands of the same tone. */
  .day:has(+ .day) { padding-bottom: calc(var(--sec) * .55); }
  .day + .day { padding-top: calc(var(--sec) * .55); }
}

/* ============== 22. CLOSING CTA: THE BAND THAT TURNS ==================
   The last thing before the footer, and the one place the day/night idea
   gets to be loud.

   Night sweeps across it from the right, holds, then day returns from the
   left. The text changes colour with it, and the reason that works is
   that there is no crossfade anywhere: the whole night side, background
   AND its own copy of the words, is clipped by one shared edge. Every
   pixel of text is fully opaque and sitting on its matching background at
   every frame, including mid-sweep. A fade between two ink colours would
   have washed out in the middle; a hard edge never does.

   ✏️ --cta-cycle sets how long one full turn takes.
   ====================================================================== */

.cta-band {
  --cta-cycle: 19s;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(152deg, var(--volt-hi) 0%, var(--volt) 52%, #F0A50E 100%);
  color: var(--night-900);
}

/* The night side. Same box, same padding, same markup underneath. */
.cta-night {
  position: absolute; inset: 0;
  padding-block: var(--sec);
  background: linear-gradient(152deg, var(--night-700) 0%, var(--night-900) 62%, #03080F 100%);
  color: var(--on-night);
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  animation: ctaTurn var(--cta-cycle) cubic-bezier(.72, .02, .28, .98) infinite;
}

/* The edge itself: a thin band of last light where the two sides meet. */
.cta-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,150,26,0) 0%, rgba(255,168,40,.30) 42%,
    rgba(255,214,140,.85) 54%, rgba(255,150,26,.18) 66%, rgba(255,150,26,0) 100%);
  background-size: 76px 100%; background-repeat: no-repeat;
  mix-blend-mode: screen;
  background-position-x: 130%;
  animation: ctaEdge var(--cta-cycle) cubic-bezier(.72, .02, .28, .98) infinite;
}

@keyframes ctaTurn {
  0%,  26% { clip-path: inset(0 0 0 100%); }   /* full day */
  48%, 74% { clip-path: inset(0 0 0 0%); }     /* night has crossed */
  96%,100% { clip-path: inset(0 0 0 100%); }   /* day returns from the left */
}
@keyframes ctaEdge {
  0%,  25% { background-position-x: 132%; opacity: 0; }
  29%      { opacity: 1; }
  48%      { background-position-x: -14%; opacity: 1; }
  52%, 72% { background-position-x: -14%; opacity: 0; }
  77%      { background-position-x: -14%; opacity: 1; }
  96%      { background-position-x: 132%; opacity: 1; }
  100%     { background-position-x: 132%; opacity: 0; }
}

/* --- day side ink --- */
.cta-band h1, .cta-band h2, .cta-band h3 { color: var(--night-900); }
.cta-band .lead { color: rgba(10,23,41,.82); }
.cta-band .eyebrow { color: rgba(10,23,41,.92); }
.cta-band .eyebrow::before { background: var(--night-900); }
.cta-band .btn-primary { background: var(--night-900); color: var(--volt); }
.cta-band .btn-primary:hover { background: var(--night-800); box-shadow: 0 0 0 4px rgba(10,23,41,.18); }
.cta-band .btn-ghost { background: transparent; color: var(--night-900); border-color: rgba(10,23,41,.36); }
.cta-band .btn-ghost:hover { background: rgba(10,23,41,.08); border-color: var(--night-900); }
.cta-band :focus-visible { outline-color: var(--night-900); }

/* --- night side ink --- */
.cta-night h1, .cta-night h2, .cta-night h3 { color: var(--on-night); }
.cta-night .lead { color: var(--on-night-2); }
.cta-night .eyebrow { color: var(--on-night-2); }
.cta-night .eyebrow::before { background: var(--volt); }
.cta-night .btn-primary { background: var(--volt); color: var(--night-900); box-shadow: none; }
.cta-night .btn-ghost { background: rgba(255,255,255,.05); color: var(--on-night); border-color: var(--rule-night-2); }

@media (prefers-reduced-motion: reduce) {
  /* Hold the day. The band still reads, it just stops turning. */
  .cta-night { animation: none; clip-path: inset(0 0 0 100%); }
  .cta-edge { animation: none; opacity: 0; }
}

/* ==================== 23. FOOTER SMALL PRINT ==========================
   Two dense paragraphs of price basis and assumptions. Every word of it
   still matters, so none of it is cut. It just no longer takes a screen
   and a half before the copyright line. */

.foot-fine { border-top: 1px solid var(--rule-night); }
.foot-fine > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 18px 0; min-height: 48px;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; color: var(--on-night-2);
  transition: color var(--t-fast) var(--ease);
}
.foot-fine > summary:hover { color: var(--on-night); }
.foot-fine > summary::-webkit-details-marker { display: none; }
.foot-fine > summary::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.foot-fine[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.foot-fine-body { padding-bottom: 22px; columns: 2; column-gap: 44px; }
.foot-fine-body p {
  font-size: 11.5px; line-height: 1.65; color: var(--on-night-3);
  break-inside: avoid; margin: 0;
}
.foot-fine-body p + p { margin-top: 10px; }

@media (max-width: 780px) {
  .foot-fine-body { columns: 1; }
}

/* ================ 24. FIGURES AND CHARTS IN ARTICLES ==================
   Charts are inline SVG written into the article itself, so they scale,
   stay sharp, weigh almost nothing and carry their own alt text. */

.fig {
  margin: 2.2em 0;
  padding: clamp(20px, 3vw, 30px);
  background: var(--day-000);
  border-radius: var(--r);
}
.day-white .fig { background: var(--day-100); }
.fig .chart { width: 100%; height: auto; display: block; }
.fig figcaption {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--rule-day);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3);
}
.prose hr.rule { margin: 2.4em 0; border: 0; height: 1px; background: var(--rule-day); }
.prose h3 { font-size: 1.125rem; }
.prose em { color: var(--ink-2); }

/* ======================= 25. BLOG CARDS ==============================
   Every article carries a cover, because a wall of text links gives a
   reader nothing to choose between. The lead post runs wide; the rest
   sit three across and drop to one on a phone. */

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }

.post {
  display: flex; flex-direction: column;
  background: var(--day-000);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.day-white .post { background: var(--day-100); }
.post:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

.post-cover {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--night-800);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.post:hover .post-cover img { transform: scale(1.04); }

.post-body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.2vw, 26px); }
.post .tag {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--volt-deep);
}
.post :is(h2, h3) { margin-top: 11px; font-size: 1.125rem; }
.post .ex { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.post .meta { display: block; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.post .go {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.post .go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.post:hover .go svg { transform: translateX(4px); }

/* The lead article: cover on one side, words on the other. */
.post-lead { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
.post-lead .post-cover { aspect-ratio: auto; height: 100%; min-height: 250px; }
.post-lead .post-body { padding: clamp(26px, 3.2vw, 44px); justify-content: center; }
.post-lead :is(h2, h3) { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.post-lead .ex { font-size: var(--fs-body); margin-top: 14px; }

.blog-cats { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(26px, 3vw, 40px); }

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .post-lead { grid-template-columns: minmax(0, 1fr); }
  .post-lead .post-cover { aspect-ratio: 16/9; min-height: 0; }
}
@media (max-width: 680px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Compact card, used on the home page. Same box, same drawn cover,
       roughly a third less height: the excerpt and the read-more line come
       off, because the whole card is already a link. --- */
.post-sm .post-body { padding: 16px 18px 18px; }
.post-sm h3 { margin-top: 9px; font-size: 1rem; line-height: 1.3; }
.post-sm .meta { margin-top: 8px; }
.post-sm .tag { font-size: 11px; }

@media (max-width: 680px) {
  /* On a phone the compact card turns sideways so three of them do not
     become three screens. */
  .post-sm { flex-direction: row; align-items: stretch; }
  .post-sm .post-cover { flex: 0 0 122px; aspect-ratio: 1; }
  .post-sm .post-body { padding: 14px 16px; justify-content: center; }
  .post-sm h3 { font-size: .9375rem; }
}

/* ==================== 26. VIDEO HERO AND LOCK-UP ======================
   A looping film behind a hero. The file already plays forward then
   backward, so the loop point never jumps. */

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 46%;
}
/* Space is always night, so this hero gets one steady scrim rather than
   the day/night pair. */
.hero-scrim.is-still {
  background:
    linear-gradient(97deg,
      rgba(3,10,26,.94) 0%, rgba(4,13,34,.88) 24%, rgba(5,17,45,.62) 44%,
      rgba(6,21,54,.30) 62%, rgba(6,21,54,.12) 100%),
    linear-gradient(180deg, rgba(3,10,26,.68) 0%, rgba(3,10,26,.12) 22%, transparent 45%);
}

/* The two-brand lock-up: our mark, a gold cross, theirs. */
.duo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.duo .j-mark { height: 38px; width: auto; }
.duo .mk-mark { height: 26px; width: auto; }
.duo .x { width: 13px; height: 13px; flex: none; position: relative; opacity: .8; transform: rotate(45deg); }
.duo .x::before, .duo .x::after {
  content: ''; position: absolute; inset: 0; margin: auto; background: var(--volt);
}
.duo .x::before { width: 100%; height: 1.5px; }
.duo .x::after { width: 1.5px; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  /* JS pauses it as well, so the poster frame is what remains. */
  .hero-video { animation: none; }
}

/* ================ 27. THE HERO ON A PHONE ============================
   The photograph stays a full-bleed background with the words over it,
   the way it is on desktop.

   The readability problem that caused was real: the endurance figures sat
   over whatever the picture happened to be doing underneath, and in
   daylight that is lit windows. The fix is in the scrim rather than the
   layout. On a phone it no longer opens a bright window in the middle;
   it holds an even weight from top to bottom, so the photograph reads as
   atmosphere behind the words instead of competing with them. Measured at
   the brightest point of the picture, that keeps text above 5.5:1.
   ==================================================================== */

@media (max-width: 780px) {
  .hero-scrim.is-day {
    background: linear-gradient(180deg,
      rgba(12,18,26,.90) 0%, rgba(14,20,28,.82) 26%,
      rgba(18,22,28,.80) 52%, rgba(20,21,24,.86) 78%, rgba(16,18,22,.92) 100%);
  }
  .hero-scrim.is-night {
    background: linear-gradient(180deg,
      rgba(3,10,26,.92) 0%, rgba(4,13,34,.85) 26%,
      rgba(5,17,45,.82) 52%, rgba(5,16,40,.88) 78%, rgba(4,12,32,.94) 100%);
  }
  .hero-scrim.is-still {
    background: linear-gradient(180deg,
      rgba(3,10,26,.72) 0%, rgba(4,13,34,.58) 30%,
      rgba(5,17,45,.62) 60%, rgba(4,12,32,.86) 100%);
  }
  .hero-media img { object-position: 54% 58%; }
  .duo { margin-bottom: 18px; }
  .duo .j-mark { height: 30px; }
  .duo .mk-mark { height: 21px; }
}

/* ============== 28. "WHICH ONE IS YOU" CARDS =========================
   A filled panel carries the option's name, who it is for, and a flat
   drawing. It takes about half the card, which is what lets somebody find
   their own situation before reading a word. The explanation sits below
   on plain card stock.

   The drawings are one stroke weight with no fills and no shading. At
   this size anything more detailed turns to mud. --------------------- */

.door {
  padding: 0; overflow: hidden;
  background: var(--day-000);
}

.door-art {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(20px, 3vw, 34px);
  min-height: clamp(158px, 15.5vw, 196px);
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--night-800);
  color: var(--on-night);
  transition: background var(--t) var(--ease);
}
.door-art-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.door-art h3 {
  color: var(--on-night);
  font-size: clamp(1.125rem, 1.55vw, 1.375rem);
  line-height: 1.15; text-wrap: balance;
}
.door-ico { flex: none; color: var(--volt); transition: color var(--t) var(--ease); }
.door-ico svg { width: clamp(42px, 4.4vw, 56px); height: auto; display: block; }
.door-art .who {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-night-2);
}

.door:hover .door-art { background: var(--night-700); }
.door:hover .door-ico { color: var(--volt-hi); }

.door-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
}
.door-body .ex { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.door .go {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.door .go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.door:hover .go svg { transform: translateX(4px); }

@media (max-width: 680px) {
  .door-art { min-height: 0; gap: 16px; }
  .door-ico svg { width: 42px; }
}

/* Two social links sharing one footer row. */
.foot-social { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 3px; }
.foot-social a { font-size: var(--fs-sm); color: var(--on-night); }

/* --- "unit only" badge. The printed figure buys the inverter and battery,
       not a finished system, and that has to be impossible to miss rather
       than something you find in the small print underneath. --- */
.unit-tag {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(146,92,0,.12);
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--volt-deep);
  white-space: nowrap;
}
.sys.is-pick .unit-tag { background: rgba(255,184,28,.16); color: var(--volt); }

/* --- Sources. Kept in full, folded away. A block of citations should not
       take a screen and a half at the foot of every article. --- */
.sources {
  margin-top: 2.6em;
  border-top: 1px solid var(--rule-day);
}
.sources > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 16px 0; min-height: 44px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.sources > summary:hover { color: var(--ink); }
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.sources[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.sources p {
  font-size: 12px; line-height: 1.65; color: var(--ink-3);
  margin-bottom: 10px; max-width: none;
}
.sources p:last-child { padding-bottom: 20px; }