/* ═══════════════════════════════════════════════
   RCSP CSR 2026 — HOAG · Shared stylesheet
   Single source of truth (ported from Design System v1)
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand greens */
  --green-700: #1F8A60;
  --green-600: #2BAA72;
  --green-500: #3DC489;   /* primary */
  --green-300: #8FE0BD;
  --green-100: #DFF6EC;
  --green-50:  #F0FBF6;

  /* Sun accent (solar) — used sparingly */
  --sun: #FFC24B;
  --sun-ink: #B97E12;

  /* Campaign brand ("Illuminate Today, Empower Tomorrow" logo) */
  --navy: #22387A;
  --navy-deep: #16245A;
  --yolk: #FFD93D;
  --rose: #C8202F;

  /* Blue accent (technical / PC) */
  --blue: #4F80C4;
  --blue-ink: #2C5A95;

  /* Neutrals */
  --ink:    #16261F;
  --ink-2:  #4A5B54;
  --ink-3:  #7C8C85;
  --line:   #E3EBE7;
  --surface:#FFFFFF;
  --bg:     #F6FAF8;

  /* Status */
  --warn-bg:#FFF6E2; --warn-line:#F2D98A; --warn-ink:#8A6516;
  --ok-bg:#E7F7EE;   --ok-line:#A9DCBA;   --ok-ink:#1E6B3A;
  --bad-bg:#FCF3F3;  --bad-line:#E7B4B4;  --bad-ink:#9A2A2A;

  /* Type scale (mobile-first, fluid) */
  --fs-display: clamp(2.1rem, 7vw, 3.6rem);
  --fs-h1: clamp(1.7rem, 5vw, 2.4rem);
  --fs-h2: clamp(1.3rem, 4vw, 1.7rem);
  --fs-h3: 1.1rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 100px;

  /* Shadow */
  --sh-1: 0 1px 3px rgba(22,38,31,0.06), 0 1px 2px rgba(22,38,31,0.04);
  --sh-2: 0 6px 18px rgba(22,38,31,0.08);
  --sh-3: 0 16px 40px rgba(22,38,31,0.12);

  /* Fonts */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  line-height:1.55; font-size:var(--fs-body); -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; letter-spacing:-0.02em; }
a { color:inherit; }
img { max-width:100%; }
.wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 var(--sp-4); }
@media (min-width:768px){ .wrap{ padding:0 var(--sp-6);} }

/* ─── Sticky top nav ─── */
.nav {
  position:sticky; top:0; z-index:50; background:rgba(246,250,248,0.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--green-700); text-decoration:none; }
.brand .logo { width:34px; height:34px; border-radius:9px; background:#fff; display:grid; place-items:center; padding:2px; box-shadow:var(--sh-1); overflow:hidden; }
.brand .logo img { display:block; width:100%; height:100%; object-fit:contain; }
.nav-tabs { display:flex; gap:var(--sp-1); background:var(--surface); padding:4px; border-radius:var(--r-pill); border:1px solid var(--line); box-shadow:var(--sh-1); }
.nav-tabs a {
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm); color:var(--ink-2);
  text-decoration:none; padding:7px 15px; border-radius:var(--r-pill); transition:all .18s;
}
.nav-tabs a.active { background:var(--green-500); color:#fff; box-shadow:var(--sh-1); }
.nav-tabs a:not(.active):hover { color:var(--green-700); }
@media (max-width:760px){
  .nav-inner { gap:var(--sp-2); }
  .nav-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; }
  .nav-tabs::-webkit-scrollbar { display:none; }
  .nav-tabs a { padding:7px 11px; font-size:var(--fs-xs); white-space:nowrap; }
  .brand span { display:none; }
}

/* ═══════════ Motion hero (homepage reel) ═══════════ */
.reel-hero { position:relative; background:#16245A; line-height:0; }
.reel-hero canvas { display:block; width:100%; height:min(72vh, 56.25vw); min-height:220px; }
.reel-toggle { position:absolute; right:14px; bottom:14px; line-height:1; font-family:var(--font-body); font-size:var(--fs-xs); font-weight:700;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:7px 13px; cursor:pointer; }
.reel-toggle:hover { background:rgba(255,255,255,.24); }
.reel-toggle:focus-visible { outline:2px solid #FFD93D; outline-offset:2px; }

/* ═══════════ Campaign homepage (logo palette) ═══════════ */
.brand-hero { background:var(--navy-deep); color:#fff; padding:var(--sp-6) 0 var(--sp-7); border-top:1px solid rgba(255,255,255,.08); }
.bh-eyebrow { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--yolk); }
.brand-hero h1 { font-size:var(--fs-display); font-weight:800; line-height:1.05; margin:var(--sp-3) 0; letter-spacing:-.02em; }
.brand-hero h1 span { color:var(--yolk); }
.bh-sub { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:58ch; margin-bottom:var(--sp-5); }
.bh-btn { background:var(--yolk); color:var(--navy-deep); }
.bh-btn:hover { background:#FFE369; }
.bh-btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.bh-btn-ghost:hover { border-color:#fff; }
.bh-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-6); align-items:center; }
.bh-logo { background:#fff; border-radius:24px; padding:var(--sp-4); width:clamp(200px,24vw,300px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.bh-logo img { display:block; width:100%; height:auto; }
@media (max-width:760px) {
  .bh-grid { grid-template-columns:1fr; gap:var(--sp-5); }
  .bh-logo { order:-1; width:min(220px,60%); padding:var(--sp-3); border-radius:20px; }
}

.impact { background:var(--navy); color:#fff; padding:var(--sp-6) 0; position:relative; }
.impact::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--rose); }
.impact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
@media (min-width:860px){ .impact-grid{ grid-template-columns:repeat(4,1fr); } }
.imp-n { font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,4.5vw,2.6rem); color:var(--yolk); line-height:1.1; }
.imp-l { font-size:var(--fs-sm); color:rgba(255,255,255,.85); margin-top:4px; }

.video-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; }
.video-frame { position:relative; aspect-ratio:16/9; background:var(--navy-deep); }
.video-frame iframe, .video-frame video { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--navy-deep); object-fit:contain; }
.video-body { padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.video-vol { font-size:var(--fs-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--navy); padding:3px 10px; border-radius:var(--r-pill); }
.video-body h3 { font-size:1.25rem; font-weight:800; }
.video-body p { font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:6px; }

.journey { display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
@media (min-width:860px){ .journey{ grid-template-columns:1fr 1.6fr; align-items:start; } }
.journey-copy p { color:var(--ink-2); margin-bottom:var(--sp-3); max-width:62ch; }
.journey-copy b { color:var(--ink); }
.journey-sign { font-family:var(--font-display); font-weight:700; color:var(--navy) !important; border-left:4px solid var(--yolk); padding-left:var(--sp-3); }

.credits { margin-top:var(--sp-4); }
.credit h3 { color:var(--navy); }
.credit-dealers { margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-5); background:var(--navy); color:#fff; border-radius:var(--r-md); font-size:var(--fs-sm); }
.credit-dealers b { color:var(--yolk); font-size:1.05rem; }
.collab-h { font-size:var(--fs-h3); margin:var(--sp-5) 0 var(--sp-3); }
.committee { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--sp-2); }
.committee li { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--yolk); border-radius:var(--r-md); padding:10px 14px; }
.committee b { display:block; color:var(--navy); font-size:var(--fs-sm); line-height:1.3; }
.committee span { display:block; font-size:var(--fs-xs); color:var(--muted, #5b6478); margin-top:2px; }
.collab { list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.collab li { font-size:var(--fs-sm); font-weight:600; color:var(--navy); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; }
footer .tags { display:inline-block; margin-top:6px; font-size:var(--fs-xs); color:var(--ink-3); }

/* ═══════════ HERO ═══════════ */
.hero { position:relative; overflow:hidden; padding:var(--sp-7) 0 var(--sp-6); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 85% 0%, var(--green-100) 0%, transparent 55%),
    linear-gradient(180deg, var(--green-50), var(--bg) 70%);
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-700);
  background:var(--surface); border:1px solid var(--green-300); padding:6px 13px; border-radius:var(--r-pill); box-shadow:var(--sh-1);
}
.hero h1 { font-size:var(--fs-display); font-weight:800; margin:var(--sp-4) 0 var(--sp-3); max-width:18ch; }
.hero h1 .hl { color:var(--green-600); position:relative; white-space:nowrap; }
.hero h1 .hl::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:8px; background:var(--green-300); opacity:.5; border-radius:4px; z-index:-1; }
.hero p.sub { font-size:1.05rem; color:var(--ink-2); max-width:54ch; margin-bottom:var(--sp-5); }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.hero-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }

/* ─── Buttons ─── */
.btn { font-family:var(--font-body); font-weight:600; font-size:var(--fs-body); border:none; border-radius:var(--r-pill); padding:12px 22px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .12s, box-shadow .18s, background .18s; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green-500); color:#fff; box-shadow:0 4px 12px rgba(61,196,137,0.35); }
.btn-primary:hover { background:var(--green-600); box-shadow:0 6px 16px rgba(61,196,137,0.45); }
.btn-ghost { background:var(--surface); color:var(--green-700); border:1px solid var(--line); box-shadow:var(--sh-1); }
.btn-ghost:hover { border-color:var(--green-300); }
.btn-sm { padding:8px 15px; font-size:var(--fs-sm); }
.btn-danger { background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-line); }
.btn-danger:hover { background:#F8E6E6; }

/* ═══════════ SECTIONS ═══════════ */
.section { padding:var(--sp-7) 0; }
.section.tight { padding:var(--sp-6) 0; }
.section.alt { background:var(--surface); border-block:1px solid var(--line); }
.section.greenwash { background:var(--green-50); border-top:1px solid var(--line); }
.section-label { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-600); margin-bottom:var(--sp-2); }
.section h2 { font-size:var(--fs-h2); font-weight:700; margin-bottom:var(--sp-2); }
.section .lead { color:var(--ink-2); max-width:60ch; margin-bottom:var(--sp-5); }

/* card grids */
.grid { display:grid; gap:var(--sp-4); }
.grid-2 { grid-template-columns:1fr; }
.grid-3 { grid-template-columns:1fr; }
@media (min-width:640px){ .grid-2{ grid-template-columns:1fr 1fr;} .grid-3{ grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr);} }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); transition:transform .16s, box-shadow .16s; }
.card.lift { display:block; text-decoration:none; color:inherit; }
.card.lift:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.card .ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:var(--sp-3); color:#fff; font-size:1.3rem; }
.ico.g { background:linear-gradient(135deg,var(--green-500),var(--green-700)); }
.ico.s { background:linear-gradient(135deg,var(--sun),var(--sun-ink)); }
.ico.b { background:linear-gradient(135deg,var(--blue),var(--blue-ink)); }
.card h3 { font-size:var(--fs-h3); font-weight:700; margin-bottom:6px; }
.card p { font-size:var(--fs-sm); color:var(--ink-2); }

/* stat pills */
.stat-row { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.stat { flex:1 1 140px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); box-shadow:var(--sh-1); }
.stat .n { font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--green-600); }
.stat .l { font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

/* badges */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; padding:5px 11px; border-radius:var(--r-pill); }
.badge.ok { background:var(--ok-bg); color:var(--ok-ink); border:1px solid var(--ok-line); }
.badge.warn { background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-line); }
.badge.bad { background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-line); }
.badge.info { background:var(--green-100); color:var(--green-700); }

/* note boxes */
.note-box { padding:var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-sm); }
.note-box.warn { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); }
.note-box.ok { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-ink); }
.note-box b { font-weight:800; }

/* ═══════════ Budget banner ═══════════ */
.budget-band { padding:var(--sp-5) 0 0; }
.bb-card {
  background:linear-gradient(135deg, var(--green-600), var(--green-700));
  color:#fff; border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5);
  text-align:center; box-shadow:var(--sh-2); position:relative; overflow:hidden;
}
.bb-card::after { content:""; position:absolute; right:-30px; top:-40px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, var(--sun) 0%, transparent 68%); opacity:.4; }
.bb-eyebrow { position:relative; display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); padding:6px 14px; border-radius:var(--r-pill); }
.bb-amount { position:relative; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 7.5vw, 3.3rem); margin:var(--sp-3) 0 var(--sp-2); letter-spacing:-.02em; }
.bb-sub { position:relative; font-size:var(--fs-sm); color:rgba(255,255,255,.94); max-width:62ch; margin:0 auto; }

/* ═══════════ SOLAR — spec cards ═══════════ */
.spec-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.spec-card .card-tag { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-sm); margin-bottom:var(--sp-3); }
.tag-street { background:#FFF1D0; color:#946200; }
.tag-flood  { background:var(--green-100); color:var(--green-700); }
.spec-card h3 { font-size:1.25rem; font-weight:800; margin-bottom:2px; }
.spec-card .my { font-size:var(--fs-sm); color:var(--ink-3); font-style:italic; margin-bottom:var(--sp-3); }
.spec-card .where { font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--sp-4); }
.spec-card .where b { color:var(--ink); }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.spec-grid > div { background:var(--surface); padding:10px 13px; }
.spec-grid dt { font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.spec-grid dd { font-size:1rem; font-weight:700; color:var(--ink); margin-top:1px; }
.qty-note { margin-top:var(--sp-4); font-size:var(--fs-sm); background:var(--green-50); padding:10px 14px; border-radius:var(--r-md); color:var(--green-700); }
.qty-note b { font-weight:800; }
.split-flag { margin-top:var(--sp-3); display:flex; gap:10px; align-items:flex-start; background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--r-md); padding:11px 13px; font-size:var(--fs-sm); color:var(--ok-ink); }
.split-flag svg { flex-shrink:0; margin-top:2px; }
.split-flag b { font-weight:800; }

/* ═══════════ Split-type explainer ═══════════ */
.splitdiag { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.splitdiag h3 { font-size:var(--fs-h3); margin-bottom:3px; }
.splitdiag p.sd-sub { font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--sp-4); }
.sd-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:560px){ .sd-grid{ grid-template-columns:1fr 1fr; } }
.sd-col { border-radius:var(--r-md); padding:var(--sp-4); border:2px solid; }
.sd-bad { border-color:var(--bad-line); background:var(--bad-bg); }
.sd-good { border-color:var(--ok-line); background:var(--green-50); }
.sd-tag { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-sm); margin-bottom:var(--sp-3); }
.sd-tag.bad { background:#F4D4D4; color:var(--bad-ink); }
.sd-tag.good { background:#CDEDD8; color:var(--ok-ink); }
.sd-art { width:100%; height:150px; display:block; margin:2px 0 var(--sp-3); }
.sd-col p { font-size:var(--fs-sm); color:var(--ink); line-height:1.45; }
.sd-col p b { font-weight:800; }

/* ═══════════ Product video ═══════════ */
.product-video { width:100%; display:block; border-radius:var(--r-md); background:#000; box-shadow:var(--sh-1); border:1px solid var(--line); }

/* ═══════════ Plan figure ═══════════ */
.plan-figure { display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-1); position:relative; text-decoration:none; }
.plan-figure img { width:100%; display:block; }
.plan-hint { position:absolute; right:12px; bottom:12px; background:rgba(22,38,31,0.82); color:#fff; font-size:var(--fs-xs); font-weight:600; padding:6px 11px; border-radius:var(--r-pill); backdrop-filter:blur(3px); }
.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--sp-4); font-size:var(--fs-sm); }
.legend span { display:flex; align-items:center; gap:7px; }
.legend .dot { width:13px; height:13px; border-radius:50%; flex-shrink:0; }
.legend .sq { width:13px; height:13px; border-radius:3px; flex-shrink:0; }
.legend .blue { background:var(--blue); }
.legend .yellow { background:var(--sun); }
.legend .strike { text-decoration:line-through; color:var(--ink-3); }

/* ═══════════ Supplier contact cards (section 06) ═══════════ */
.contact-grid { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:640px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:var(--sp-3); }
.cc-head { display:flex; align-items:flex-start; gap:var(--sp-3); }
.cc-prio { font-size:var(--fs-sm); font-weight:800; color:#fff; background:linear-gradient(135deg,var(--green-500),var(--green-700)); width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; }
.cc-head h3 { font-size:var(--fs-h3); font-weight:800; flex:1; }
.cc-star { font-size:var(--fs-xs); font-weight:700; color:var(--sun-ink); background:#FFF1D0; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.cc-meta { font-size:var(--fs-sm); color:var(--ink-2); }
.cc-contacts { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cc-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; text-decoration:none; padding:8px 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg); color:var(--green-700); transition:border-color .15s, background .15s; }
.cc-btn:hover { border-color:var(--green-300); background:var(--green-50); }
.cc-btn.mail { color:var(--ink-2); }
.cc-note { font-size:var(--fs-sm); color:var(--ink-2); background:var(--bg); padding:9px 12px; border-radius:var(--r-md); }
.cc-pic { display:flex; flex-direction:column; gap:5px; margin-top:auto; padding-top:var(--sp-3); border-top:1px dashed var(--line); }
.cc-pic label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.cc-pic select { font-family:var(--font-body); font-size:var(--fs-body); padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); color:var(--ink); }
.cc-pic select:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }
.cc-pic.assigned select { border-color:var(--green-300); background:var(--green-50); font-weight:700; color:var(--green-700); }

/* ═══════════ Interactive checklist ═══════════ */
.check-list { display:flex; flex-direction:column; gap:var(--sp-2); }
.check-item { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); cursor:pointer; transition:border-color .15s, background .15s; }
.check-item:hover { border-color:var(--green-300); }
.check-item.done { background:var(--green-50); border-color:var(--green-300); }
.check-box { width:24px; height:24px; border:2px solid var(--green-500); border-radius:7px; flex-shrink:0; display:grid; place-items:center; transition:all .15s; margin-top:1px; }
.check-item.done .check-box { background:var(--green-500); }
.check-box svg { opacity:0; transition:opacity .15s; }
.check-item.done .check-box svg { opacity:1; }
.check-item.done .ci-title { text-decoration:line-through; color:var(--ink-3); }
.ci-title { font-weight:600; font-size:var(--fs-body); }
.ci-sub { font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; }
.progress { height:10px; background:var(--green-100); border-radius:var(--r-pill); overflow:hidden; margin:var(--sp-3) 0 var(--sp-5); }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--green-500),var(--green-600)); width:0%; border-radius:var(--r-pill); transition:width .4s ease; }

/* ═══════════ Vendor quote tracker ═══════════ */
.qt-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.qt-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:560px){ .qt-grid{ grid-template-columns:1fr 1fr; } }
.qt-field { display:flex; flex-direction:column; gap:5px; }
.qt-field.full { grid-column:1 / -1; }
.qt-field label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.qt-field input, .qt-field select, .qt-field textarea {
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink);
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg);
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.qt-field input:focus, .qt-field select:focus, .qt-field textarea:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); background:var(--surface); }
.qt-field textarea { resize:vertical; min-height:62px; }
.qt-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); }
.qt-toolbar { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.qt-toolbar .count { font-size:var(--fs-sm); color:var(--ink-3); font-weight:600; }

.qt-empty { text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--ink-3); border:2px dashed var(--line); border-radius:var(--r-lg); background:var(--surface); }
.qt-empty .ico { font-size:2.2rem; margin-bottom:var(--sp-2); }

.qt-cards { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:760px){ .qt-cards{ grid-template-columns:1fr 1fr; } }
.qt-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.qt-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.qt-card-head h3 { font-size:var(--fs-h3); font-weight:800; }
.qt-card .contact { font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--sp-3); }
.qt-card .meta-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-3); }
.qt-price-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-3); }
.qt-price-grid > div { background:var(--surface); padding:9px 11px; text-align:center; }
.qt-price-grid dt { font-size:10px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.qt-price-grid dd { font-size:1rem; font-weight:800; color:var(--green-700); margin-top:2px; }
.qt-card .qt-notes { font-size:var(--fs-sm); color:var(--ink-2); background:var(--bg); padding:9px 12px; border-radius:var(--r-md); margin-bottom:var(--sp-3); white-space:pre-wrap; }
.qt-card-actions { display:flex; gap:var(--sp-2); }

/* ═══════════ Example placement cards (street / flood) ═══════════ */
.place-grid { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:640px){ .place-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .place-grid{ grid-template-columns:repeat(3,1fr); } }
.place-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .16s, box-shadow .16s; }
.place-card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.place-card > img { width:100%; display:block; aspect-ratio:4/3; object-fit:cover; background:var(--green-50); cursor:zoom-in; }
.place-card figcaption { padding:var(--sp-4); display:flex; flex-direction:column; gap:8px; flex:1; }
.place-card h3 { font-size:var(--fs-h3); font-weight:800; }
.place-card .pl-loc { font-size:var(--fs-sm); color:var(--ink-2); }
.place-card .pl-note { font-size:var(--fs-sm); padding:9px 12px; border-radius:var(--r-md); margin-top:auto; }
.place-card .pl-note.flag { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); }
.place-card .pl-note.good { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-ink); }

/* prepared placeholder (waiting on photos) */
.coming-soon { text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--ink-3); border:2px dashed var(--line); border-radius:var(--r-lg); background:var(--surface); }
.coming-soon .ico { font-size:2.2rem; margin-bottom:var(--sp-2); }
.coming-soon b { color:var(--ink-2); }

/* ═══════════ Site reference photo groups (section 05) ═══════════ */
.site-group { margin-bottom:var(--sp-6); }
.site-group:last-child { margin-bottom:0; }
.site-group h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-3); display:flex; align-items:center; gap:8px; }
.site-group h3::before { content:""; width:6px; height:18px; background:var(--green-500); border-radius:3px; }
.site-group h3 .ct { font-size:var(--fs-xs); font-weight:700; color:var(--ink-3); }
.site-grid { display:grid; gap:var(--sp-2); grid-template-columns:repeat(2,1fr); }
@media (min-width:560px){ .site-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .site-grid{ grid-template-columns:repeat(4,1fr); } }
.site-grid a { display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1); }
.site-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--green-50); cursor:zoom-in; transition:transform .2s; }
.site-grid a:hover img { transform:scale(1.05); }

/* ═══════════ SDH budget calculator ═══════════ */
.sdh-group { margin-bottom:var(--sp-6); }
.sdh-group:last-child { margin-bottom:0; }
.sdh-group > h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-3); display:flex; align-items:center; gap:8px; }
.sdh-group > h3::before { content:""; width:6px; height:18px; background:var(--green-500); border-radius:3px; }
.sdh-group > h3 .ct { font-size:var(--fs-xs); font-weight:700; color:var(--ink-3); }
.sdh-grid { display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:680px){ .sdh-grid{ grid-template-columns:1fr 1fr; } }

.sdh-card { display:grid; grid-template-columns:84px 1fr; gap:var(--sp-3); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-3); box-shadow:var(--sh-1); transition:border-color .15s, box-shadow .15s; }
.sdh-card.picked { border-color:var(--green-500); box-shadow:0 0 0 2px var(--green-100); }
.sdh-img { width:84px; height:84px; border-radius:var(--r-md); overflow:hidden; background:var(--green-50); display:grid; place-items:center; color:var(--green-600); }
.sdh-img img { width:100%; height:100%; object-fit:cover; }
.sdh-img svg { width:42px; height:42px; }
.sdh-info { min-width:0; }
.sdh-name { font-weight:800; font-size:var(--fs-body); }
.sdh-keg { font-size:var(--fs-xs); color:var(--ink-3); margin:2px 0 6px; }
.sdh-specs { list-style:none; margin:0 0 8px; display:flex; flex-direction:column; gap:2px; }
.sdh-specs li { font-size:11.5px; color:var(--ink-2); padding-left:13px; position:relative; }
.sdh-specs li::before { content:"•"; position:absolute; left:2px; color:var(--green-500); }
.sdh-link { display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--green-700); text-decoration:none; background:var(--green-50); border:1px solid var(--green-300); padding:4px 10px; border-radius:var(--r-pill); margin-bottom:8px; }
.sdh-link:hover { background:var(--green-100); }
.sdh-controls { grid-column:1 / -1; display:flex; flex-direction:column; gap:var(--sp-2); border-top:1px dashed var(--line); padding-top:var(--sp-3); }
.sdh-field { display:flex; flex-direction:column; gap:3px; }
.sdh-field span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.sdh-field input { font-family:var(--font-body); font-size:var(--fs-sm); padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); width:100%; }
.sdh-field input:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }
.sdh-inc { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-sm); color:var(--green-700); cursor:pointer; }
.sdh-inc input { width:20px; height:20px; accent-color:var(--green-500); }
.sdh-row2 { display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap; }
.sdh-qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:var(--bg); }
.sdh-qty button { width:34px; height:34px; border:none; background:transparent; font-size:1.3rem; font-weight:700; color:var(--green-700); cursor:pointer; line-height:1; }
.sdh-qty button:active { background:var(--green-100); }
.sdh-qty button:disabled { opacity:.3; cursor:not-allowed; }
.sdh-max { font-size:11px; font-weight:600; color:var(--warn-ink); margin-top:2px; }
.sdh-qty .qv { width:52px; min-width:52px; text-align:center; font-weight:800; font-family:var(--font-display); font-size:1rem; color:var(--ink);
  border:none; background:transparent; padding:4px 0; appearance:textfield; -moz-appearance:textfield; }
.sdh-qty .qv::-webkit-outer-spin-button, .sdh-qty .qv::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.sdh-qty .qv:focus { outline:none; background:var(--surface); border-radius:var(--r-sm); box-shadow:0 0 0 2px var(--green-300); }
.sdh-field.price { flex:1; min-width:110px; }
.sdh-tiedqty { font-size:var(--fs-sm); color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 14px; }
.sdh-tiedqty b { color:var(--green-700); font-weight:800; }
.sdh-card.dimmed { opacity:.5; }

/* street-light option selector (A/B/C) */
.mode-select { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.mode-select button { flex:1 1 150px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px 15px; border:2px solid var(--line); border-radius:var(--r-md); background:var(--surface); cursor:pointer; font-family:var(--font-body); text-align:left; transition:border-color .15s, background .15s, box-shadow .15s; }
.mode-select button b { font-weight:800; font-size:var(--fs-sm); color:var(--ink); }
.mode-select button span { font-size:var(--fs-xs); color:var(--ink-3); }
.mode-select button.active { border-color:var(--green-500); background:var(--green-50); box-shadow:0 0 0 3px var(--green-100); }
.mode-select button.active b { color:var(--green-700); }
.sdh-line { font-size:var(--fs-sm); color:var(--ink-2); }
.sdh-line b { color:var(--green-700); font-weight:800; }

.sdh-total-bar { position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--green-700); color:#fff; box-shadow:0 -6px 20px rgba(22,38,31,0.18); }
.sdh-total-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:12px 0; min-height:60px; }
.sdh-total-label { font-size:var(--fs-sm); font-weight:600; display:flex; flex-direction:column; }
.sdh-total-label .sdh-count { font-size:var(--fs-xs); color:rgba(255,255,255,.75); font-weight:600; }
.sdh-total-amount { font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem, 5vw, 2rem); letter-spacing:-.02em; }
.sdh-total-amount.over { color:var(--sun); }

/* ═══════════ Total budget page ═══════════ */
.tb-card { text-align:left; }
.tb-amount { font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--green-700); margin:2px 0 4px; }
.tb-grand { margin-top:var(--sp-5); background:linear-gradient(135deg,var(--green-600),var(--green-700)); color:#fff; border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5); text-align:center; box-shadow:var(--sh-2); position:relative; overflow:hidden; }
.tb-grand::after { content:""; position:absolute; right:-30px; top:-40px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, var(--sun) 0%, transparent 68%); opacity:.35; }
.tb-grand.over::after { background:radial-gradient(circle,#F97316 0%, transparent 68%); opacity:.45; }
.tb-grand-label { position:relative; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.tb-grand-amount { position:relative; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,7.5vw,3.2rem); letter-spacing:-.02em; margin:var(--sp-2) 0; }
.tb-eq { position:relative; font-size:var(--fs-sm); color:rgba(255,255,255,.9); }
.tb-pool { margin-top:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.tb-formula { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); }
.tb-formula .f-field { display:flex; flex-direction:column; gap:4px; }
.tb-formula .f-field span { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.tb-formula .f-field input { width:130px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); font-family:var(--font-body); font-size:var(--fs-body); font-weight:700; color:var(--ink); }
.tb-formula .f-field input:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); background:var(--surface); }
.tb-formula .f-op { font-size:1.3rem; font-weight:800; color:var(--ink-3); padding-bottom:7px; }
.tb-formula .f-result { margin-left:auto; text-align:right; }
.tb-formula .f-result span { display:block; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.tb-formula .f-result b { font-family:var(--font-display); font-size:1.35rem; color:var(--green-700); }
@media (max-width:520px){ .tb-formula .f-result { margin-left:0; width:100%; text-align:left; } }

.tb-pool-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); }
.tb-pool-row b { font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.tb-pool-row.good b { color:var(--green-700); }
.tb-pool-row.bad { color:var(--bad-ink); } .tb-pool-row.bad b { color:var(--bad-ink); }

/* ═══════════ Gallery ═══════════ */
.gallery { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:560px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.photo-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }
.photo-card img { width:100%; display:block; aspect-ratio:4/3; object-fit:cover; background:var(--green-50); }
.photo-card .pc-body { padding:var(--sp-4); }
.photo-card .pc-cat { display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--green-700); background:var(--green-100); padding:3px 9px; border-radius:var(--r-pill); margin-bottom:6px; }
.photo-card .pc-cap { font-size:var(--fs-sm); color:var(--ink); font-weight:600; }
.photo-card .pc-date { font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; }

/* ═══════════ Auth (login gate) ═══════════ */
body:not(.authed) .auth-only { display:none !important; }
body.authed .guest-only { display:none !important; }
body.no-supabase .authbar { display:none; }
body.no-supabase .up-form { display:none; }

.authbar { background:var(--green-700); color:#fff; }
.authbar-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:48px; flex-wrap:wrap; padding:8px 0; }
.authbar .ab-label { font-size:var(--fs-sm); font-weight:600; display:flex; align-items:center; gap:6px; }
.authbar .ab-out, .authbar .ab-in { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.authbar form { display:flex; gap:var(--sp-2); }
.authbar input { padding:8px 13px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff; font-family:var(--font-body); font-size:var(--fs-sm); }
.authbar input::placeholder { color:rgba(255,255,255,.7); }
.authbar input:focus { outline:none; border-color:#fff; background:rgba(255,255,255,.22); }
.authbar .btn-ghost { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.3); }
.authbar .btn-ghost:hover { background:rgba(255,255,255,.26); }

.lock-note { display:flex; align-items:center; gap:10px; padding:var(--sp-4); background:var(--green-50); border:1px dashed var(--green-300); border-radius:var(--r-md); color:var(--green-700); font-size:var(--fs-sm); font-weight:600; }
.cc-pic .lock-note { padding:9px 11px; }

/* ═══════════ Upload form (gallery) ═══════════ */
.up-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); margin-bottom:var(--sp-5); }
.up-grid { display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:560px){ .up-grid{ grid-template-columns:1fr 1fr; } }
.up-field { display:flex; flex-direction:column; gap:5px; }
.up-field.full { grid-column:1 / -1; }
.up-field label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.up-field input, .up-field select { font-family:var(--font-body); font-size:var(--fs-body); padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); color:var(--ink); }
.up-field input:focus, .up-field select:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }

/* ═══════════ Lightbox (enlarge image) ═══════════ */
img.zoomable { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(16,38,31,0.92); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.show { display:flex; animation:lbfade .2s ease; }
@keyframes lbfade { from{opacity:0;} to{opacity:1;} }
.lightbox img { max-width:100%; max-height:88vh; border-radius:var(--r-md); box-shadow:var(--sh-3); }
.lb-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,0.16); color:#fff; font-size:1.3rem; cursor:pointer; transition:background .15s; }
.lb-close:hover { background:rgba(255,255,255,0.3); }

/* ═══════════ Printable buy list ═══════════ */
.print-only { display:none; }
@media print {
  .nav, .authbar, .hero, .section, .budget-band, footer,
  .sdh-total-bar, .toast, .lightbox { display:none !important; }
  .print-only { display:block !important; }
  html, body { background:#fff !important; color:#000; }
  @page { size:A4; margin:14mm; }
  .bl-h1 { font-family:var(--font-display); font-size:18pt; font-weight:800; margin:0 0 2mm; }
  .bl-meta { font-size:9pt; color:#444; margin-bottom:6mm; }
  .bl-sec { font-size:11pt; font-weight:800; margin:6mm 0 2mm; border-bottom:1.5pt solid #000; padding-bottom:1mm; }
  table.bl { width:100%; border-collapse:collapse; font-size:9.5pt; }
  table.bl th, table.bl td { border:0.5pt solid #888; padding:1.8mm 2mm; text-align:left; vertical-align:top; }
  table.bl th { background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; font-weight:700; }
  table.bl { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.bl .num { text-align:right; white-space:nowrap; }
  table.bl .chk { width:7mm; text-align:center; font-size:13pt; line-height:1; }
  table.bl th.bl-img { width:24mm; }
  table.bl td.bl-img { width:24mm; padding:1.5mm; }
  table.bl td.bl-img img { width:21mm; height:21mm; object-fit:contain; display:block; margin:0 auto; background:#fff; }
  table.bl tr, .bl-sec { page-break-inside:avoid; }
  .bl-link { font-size:8pt; color:#555; word-break:break-all; }
  .bl-total { margin-top:5mm; font-size:14pt; font-weight:800; text-align:right; border-top:1.5pt solid #000; padding-top:2mm; }
  .bl-note { margin-top:3mm; font-size:8.5pt; color:#444; }
  .bl-sign { margin-top:14mm; display:flex; gap:16mm; font-size:9pt; }
}

/* ═══════════ Footer + toast ═══════════ */
footer { border-top:1px solid var(--line); padding:var(--sp-6) 0; color:var(--ink-3); font-size:var(--fs-sm); text-align:center; background:var(--surface); }
footer b { color:var(--ink-2); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:99; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* nav wordmark (RCSP CSR 2026) — colour version on light headers, white version on the homepage */
.brand-logo { display: block; height: 44px; width: auto; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.brand:hover .brand-logo { transform: translateY(-1px) scale(1.03); }
@media (max-width: 760px) { .brand-logo { height: 36px; } }