/* ============================================================
   "Handover Index" — LIGHT variant (v3)
   Layered over redesign.css. Warm-paper canvas, navy ink,
   orange accent. Keeps all editorial structure; only 2 dark bands.
   Uses CSS custom-property inheritance to re-theme dark accent
   bands (redeclare tokens on their scope → descendants follow).
   ============================================================ */

body.light {
  --ink: #f5f6f7;          /* page canvas (cool near-white) */
  --ink-2: #ffffff;        /* raised */
  --fg: #16181d;           /* ink text */
  --fg-dim: #5b616b;       /* muted ink */
  --line: rgba(18,22,30,.13);
  --line-strong: rgba(18,22,30,.22);
  --orange: #cf5a15;       /* restrained burnt orange (less neon) */
  --orange-deep: #a8480c;  /* deeper still, for small text on light */
  /* Blueprint grid: faint site-plan graph paper instead of a blank canvas.
     Minor lines every 44px, a stronger rule every 220px. */
  background:
    linear-gradient(rgba(18,22,30,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,22,30,.055) 1px, transparent 1px),
    linear-gradient(rgba(18,22,30,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,22,30,.028) 1px, transparent 1px),
    var(--ink);
  background-size: 220px 220px, 220px 220px, 44px 44px, 44px 44px, auto;
}
/* grain reads as subtle paper tooth on light */
body.light::after { opacity: .028; mix-blend-mode: multiply; }

/* Header → light */
body.light .site-header { border-bottom-color: var(--line); }
body.light .site-header::before { background: rgba(245,246,247,.85); }

/* Ticker → soft cool band */
body.light .ticker { background: #eceef1; border-bottom-color: var(--line); }

/* Stat band → big navy numerals on paper (tokens already handle text) */
body.light .statband { background: transparent; }
body.light .statband .cell { border-color: var(--line); }

/* Paper-modifier sections → gentle cool break with the same plan grid */
body.light .sec--paper {
  background:
    linear-gradient(rgba(18,22,30,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,22,30,.05) 1px, transparent 1px),
    linear-gradient(rgba(18,22,30,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,22,30,.025) 1px, transparent 1px),
    #eceef1;
  background-size: 220px 220px, 220px 220px, 44px 44px, 44px 44px, auto;
  color: var(--fg-ink); border-bottom-color: var(--line);
}

/* SECOND dark accent band → the on-site work/video band */
body.light .workband {
  background:
    radial-gradient(1000px 560px at 85% -8%, rgba(255,106,19,.08), transparent 60%),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
    #12151d;
  background-size: auto, 44px 44px, 44px 44px, auto;
  border-bottom-color: rgba(255,255,255,.1);
  --fg: #ecebe7; --fg-dim: #9aa0ac; --orange: #ff8a3d;
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.24);
}
body.light .workband .kicker, body.light .workband .work-tile .cap b { color: var(--orange); }
body.light .workband .kicker::before { background: var(--orange); }

/* Cinematic hero sits on a dark photo scrim → force bright accent + light chip */
body.light .v2hero .kicker { color: #ff8a3d; }
body.light .v2hero .kicker::before { background: #ff8a3d; }
body.light .v2hero h1 .accent { color: #ff8a3d; }

/* ---- The two intentional DARK accent bands ---- */
/* Redeclaring tokens here makes every descendant switch to light-on-dark.
   Layered bg: soft orange glow top-right, faint grid, navy base — lit, not void. */
body.light .quoteband {
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(255,106,19,.10), transparent 62%),
    radial-gradient(900px 500px at 0% 110%, rgba(88,120,190,.08), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    #141a26;
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
  --fg: #ecebe7; --fg-dim: #9aa0ac; --orange: #ff8a3d;
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.24);
}
body.light .ctaband {
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(255,106,19,.10), transparent 62%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    #141a26;
  background-size: auto, 44px 44px, 44px 44px, auto;
  --fg: #ecebe7; --fg-dim: #9aa0ac; --orange: #ff8a3d;
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.24);
}
body.light .ctaband .kicker, body.light .ctaband .kicker::before { color: var(--orange); background: var(--orange); }
body.light .ctaband .kicker { background: transparent; }
body.light .site-footer {
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(255,106,19,.06), transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    #10141c;
  background-size: auto, 44px 44px, 44px 44px, auto;
  border-top-color: rgba(255,255,255,.1);
  --fg: #ecebe7; --fg-dim: #9aa0ac;
}

/* Mobile CTA bar stays dark for contrast against paper */
body.light .mobile-cta-bar { --fg: #ecebe7; }

/* Work tiles: mono on paper, caption sits on its own dark gradient */
body.light .work-tile { border-color: var(--line-strong); }
body.light .work-tile .cap { color: #f3f1ec; }

/* Enquiry form card → white on paper, dark ink fields */
body.light .quote-card { background: var(--ink-2); border-color: var(--line-strong); }
body.light .quote-form input,
body.light .quote-form select,
body.light .quote-form textarea { background: #f7f4ee; color: var(--fg); border-color: var(--line-strong); }
body.light .quote-form input:focus,
body.light .quote-form select:focus,
body.light .quote-form textarea:focus { border-color: var(--orange-deep); }
body.light .quote-card-sub, body.light .quote-form label { color: var(--fg-dim); }
body.light .quote-form .form-consent a { color: var(--orange-deep); }

/* Orange text on light needs the deeper orange for contrast */
body.light .kicker, body.light .index-row .rnum, body.light .work-tile .cap b { color: var(--orange-deep); }
body.light .kicker::before { background: var(--orange-deep); }
body.light .quoteband .kicker, body.light .quoteband .kicker::before { color: var(--orange); background: var(--orange); }
body.light .quoteband .kicker { background: transparent; color: var(--orange); }
body.light .index-row:hover .rgo, body.light .index-row:hover .rname { color: var(--orange-deep); }

/* Dropdown + mobile nav panel → light */
body.light .dropdown { background: var(--ink-2); border-color: var(--line); }
@media (max-width: 1100px) {
  body.light .site-nav { background: var(--ink); }
  body.light .nav-toggle-bar { background: var(--fg); }
}