/* ============================================================
     DESIGN TOKENS  —  edit these to re-theme the whole site.
     Nothing below the token block uses a raw hex, px font size,
     spacing number, radius, or shadow. Change a value here and it
     propagates everywhere. To rebrand: edit the PALETTE + BRAND
     ROLES. To re-space or reshape: edit SCALE / RADII / LAYOUT.
     ------------------------------------------------------------
     QUICK THEME SWAP — paste one of these palettes over the
     PALETTE block to change the whole look:

       • Slate & Amber (corporate):
         --c-bg:#eef1f4; --c-surface:#ffffff; --c-ink:#16202b;
         --c-brand:#2b5d8a; --c-brand-deep:#1c3f5f;
         --c-accent:#f0a500; --c-accent-deep:#c98400;
         --c-hairline:#d4dae1; --c-muted:#5b6b78;

       • Charcoal & Lime (bold):
         --c-bg:#14171a; --c-surface:#1e2227; --c-ink:#f2f5f3;
         --c-brand:#9bd64a; --c-brand-deep:#6fa028;
         --c-accent:#9bd64a; --c-accent-deep:#7bb52e;
         --c-hairline:#2c3238; --c-muted:#9aa6ad;
         (also set --c-on-brand:#14171a)
     ============================================================ */
  :root{
    /* ---- PALETTE (raw brand colors — the only place hexes live) ---- */
    --c-bg:#eef1f5;          /* page background        */
    --c-surface:#ffffff;     /* cards / panels         */
    --c-ink:#0f1b2e;         /* primary text           */
    --c-muted:#5a6679;       /* secondary text         */
    --c-hairline:#d7deea;    /* borders / dividers     */
    --c-brand:#0f2347;       /* primary brand (navy)   */
    --c-brand-deep:#0a1530;  /* darker brand (deep navy)*/
    --c-accent:#13a892;      /* accent (refined teal)  */
    --c-accent-deep:#0e8576; /* darker accent (teal)   */
    --c-on-brand:#ffffff;    /* text on brand surfaces */
    --c-on-accent:#04201b;   /* text on accent surfaces*/

    /* ---- SEMANTIC ROLES (what the UI references — remap freely) ---- */
    --color-bg:var(--c-bg);
    --color-surface:var(--c-surface);
    --color-text:var(--c-ink);
    --color-text-muted:var(--c-muted);
    --color-border:var(--c-hairline);
    --color-primary:var(--c-brand);
    --color-primary-deep:var(--c-brand-deep);
    --color-accent:var(--c-accent);
    --color-accent-deep:var(--c-accent-deep);
    --color-on-primary:var(--c-on-brand);
    --color-on-accent:var(--c-on-accent);
    --color-on-dark:#e6ecf5;          /* body text on dark navy panels */
    --color-on-dark-soft:rgba(255,255,255,.9);
    --color-dark-hairline:rgba(255,255,255,.16);
    --tint-primary:rgba(15,35,71,.08);    /* derived from navy brand */
    --tint-accent:rgba(19,168,146,.16);   /* derived from teal accent */
    --color-primary-darker:#081027;       /* deepest navy stop for gradients */
    --color-primary-darker2:#0c1d3e;      /* alt deep navy stop */
    --color-accent-light:#3fd6bd;         /* light teal stop for glow/gradient */
    /* footer uses its own dark navy scheme */
    --color-footer-bg:var(--c-ink);
    --color-footer-text:#c4cedd;
    --color-footer-muted:#8f9bb0;
    --color-footer-hairline:#1d2740;
    --color-footer-faint:#6b7790;

    /* ---- TYPOGRAPHY ---- */
    --font-display:"Space Grotesk","Inter",sans-serif;
    --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
    --fw-body:400;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:800;
    /* type scale */
    --fs-xs:12px;
    --fs-sm:13.5px;
    --fs-base:15px;
    --fs-md:16.5px;
    --fs-lg:18px;
    --fs-xl:22px;
    --fs-h3:19px;
    --fs-h2:38px;
    --fs-h1:54px;
    --fs-display:46px;       /* big stat / result numbers */
    --lh-tight:1.05;
    --lh-body:1.55;
    --tracking-tight:-.02em;
    --tracking-wide:.08em;

    /* ---- SPACING SCALE (4px base) ---- */
    --sp-1:4px;
    --sp-2:8px;
    --sp-3:12px;
    --sp-4:16px;
    --sp-5:20px;
    --sp-6:24px;
    --sp-8:32px;
    --sp-10:40px;
    --sp-12:48px;
    --sp-16:64px;
    --section-y:74px;        /* vertical rhythm between sections */

    /* ---- LAYOUT ---- */
    --container:1140px;      /* max content width      */
    --gutter:24px;          /* page side padding      */
    --nav-h:66px;           /* sticky nav height      */
    --breakpoint-md:900px;  /* (reference only)       */

    /* ---- GRID TEMPLATES (column ratios — edit to re-proportion sections) ---- */
    --grid-hero:1.15fr .85fr;   /* hero: copy | art           */
    --grid-cols-2:1fr 1fr;      /* even two-column            */
    --grid-cols-3:repeat(3,1fr);/* three-up (capex, segments) */
    --grid-cols-4:repeat(4,1fr);/* four-up (trust, steps)     */
    --grid-footer:1.6fr 1fr 1fr 1fr;  /* footer: brand | qualifies | locations | company */
    --grid-val:1fr 1fr;         /* valuation: numbers | prose */
    /* tablet/mobile fallbacks (applied at --breakpoint-md and below) */
    --grid-2-md:1fr 1fr;        /* what 4-ups collapse to on tablet */
    --grid-1:1fr;               /* full single column         */

    /* ---- SECTION GAPS (spacing between grid items per section) ---- */
    --gap-hero:46px;
    --gap-grid:20px;        /* default card grid gap         */
    --gap-grid-sm:18px;     /* tighter grids (steps,timeline)*/
    --gap-wide:34px;        /* roomy two-col (geo)           */
    --gap-wider:40px;       /* valuation two-col             */
    --measure:680px;        /* ideal text line length        */

    /* ---- RADII ---- */
    --radius-sm:9px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:22px;
    --radius-pill:30px;
    --radius-round:50%;

    /* ---- SHADOWS ---- */
    --shadow-sm:0 6px 18px rgba(13,27,20,.10);
    --shadow-md:0 14px 34px rgba(13,27,20,.12);
    --shadow-lg:0 20px 50px rgba(13,27,20,.10);
    --shadow-accent:0 6px 18px rgba(226,134,10,.32);
    --shadow-accent-hover:0 10px 24px rgba(226,134,10,.42);

    /* ---- MOTION ---- */
    --ease:cubic-bezier(.2,.6,.2,1);
    --dur:.15s;
    --lift:translateY(-2px);   /* standard hover lift */

    /* ---- legacy aliases (kept so older selectors keep working) ---- */
    --ink:var(--color-text);
    --paper:var(--color-bg);
    --panel:var(--color-surface);
    --sun:var(--color-accent);
    --sun-deep:var(--color-accent-deep);
    --leaf:var(--color-primary);
    --leaf-deep:var(--color-primary-deep);
    --line:var(--color-border);
    --muted:var(--color-text-muted);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    font-weight:var(--fw-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--font-display);line-height:var(--lh-tight);letter-spacing:-.018em;font-weight:700;text-wrap:balance}
  h1{letter-spacing:-.03em}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  a{color:inherit}

  /* ---- top utility bar ---- */
  .topbar{background:var(--color-primary-deep);color:var(--color-on-dark);font-size:var(--fs-sm);letter-spacing:.02em}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:var(--sp-2)}
  .topbar .wrap > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar strong{color:var(--color-accent)}
  @media(max-width:700px){
    .topbar .wrap{justify-content:center}
    .topbar-sec{display:none}
  }

  /* ---- nav ---- */
  header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
  .brand{font-family:var(--font-display);font-weight:var(--fw-black);font-size:20px;letter-spacing:var(--tracking-tight);display:flex;align-items:center;gap:var(--sp-3)}
  .brand .mark{width:26px;height:26px;border-radius:var(--radius-round);background:radial-gradient(circle at 35% 35%,var(--color-accent),var(--color-accent-deep));box-shadow:0 0 0 4px var(--tint-accent)}
  .nav nav{display:flex;gap:26px;align-items:center}
  .nav nav a{text-decoration:none;font-size:14.5px;font-weight:var(--fw-semibold);color:var(--color-text);opacity:.8}
  .nav nav a:hover{opacity:1;color:var(--color-primary)}
  /* hamburger toggle — hidden on desktop, shown under 900px */
  .nav-toggle{display:none}
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;border-radius:var(--radius-sm);padding:10px;flex:0 0 auto}
  .nav-burger span{display:block;height:2.5px;width:100%;background:var(--color-text);border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:var(--fw-bold);border-radius:var(--radius-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);text-decoration:none}
  .btn-sun{background:var(--color-accent);color:var(--color-on-accent);padding:var(--sp-3) var(--sp-5);font-size:var(--fs-base);box-shadow:var(--shadow-accent)}
  .btn-sun:hover{transform:var(--lift);box-shadow:var(--shadow-accent-hover)}
  .btn-leaf{background:var(--color-primary);color:var(--color-on-primary);padding:14px 26px;font-size:var(--fs-md)}
  .btn-leaf:hover{transform:var(--lift);box-shadow:0 10px 24px var(--tint-primary)}
  .nav .btn-sun{padding:10px 18px;font-size:14px}

  /* ---- hero ---- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--color-primary-deep) 0%,var(--color-primary) 60%,#0a2f3e 100%);color:var(--color-on-dark)}
  .hero:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:var(--color-accent);filter:blur(110px);opacity:.28;top:-120px;right:-60px;pointer-events:none}
  .hero .wrap{padding:var(--sp-16) var(--gutter) 60px;position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:var(--grid-hero);gap:var(--gap-hero);align-items:center}
  .eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-primary-deep);background:var(--tint-primary);padding:7px 13px;border-radius:var(--radius-pill);margin-bottom:var(--sp-5)}
  .eyebrow .dot{width:7px;height:7px;border-radius:var(--radius-round);background:var(--color-accent)}
  h1{font-size:var(--fs-h1);margin-bottom:18px;color:var(--color-text)}
  h1 .hl{position:relative;color:var(--color-primary);white-space:nowrap}
  .sub{font-size:var(--fs-lg);color:var(--color-text-muted);max-width:540px;margin-bottom:26px}
  .hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  /* homepage dark hero overrides (scoped to .hero so inner pages stay dark-on-light) */
  .hero h1{color:var(--color-on-primary)}
  .hero h1 .hl{color:var(--color-accent)}
  .hero .sub{color:var(--color-on-dark);opacity:.86}
  .hero .eyebrow{color:var(--color-accent);background:rgba(19,168,146,.14)}
  .hero .btn-leaf{background:var(--color-accent);color:var(--color-on-accent)}
  .hero .btn-sun{background:transparent;color:var(--color-on-primary);border:2px solid rgba(255,255,255,.3);box-shadow:none}
  .hero .btn-sun:hover{background:rgba(255,255,255,.08);transform:var(--lift)}
  .reassure{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:14px}
  .hero .reassure{color:var(--color-on-dark);opacity:.7}
  .reassure b{color:var(--color-primary-deep)}
  .hero .reassure b{color:var(--color-accent);opacity:1}

  /* hero energy orb (was sun) */
  .sun-art{position:relative;aspect-ratio:1;max-width:380px;margin:0 auto;width:100%}
  .sun-core{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--color-accent-light),var(--color-accent) 55%,var(--color-accent-deep));box-shadow:0 14px 60px rgba(19,168,146,.5)}
  .panel-card{position:absolute;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:13px 15px;box-shadow:0 14px 34px rgba(0,0,0,.3);backdrop-filter:blur(6px)}
  .pc1{top:2%;left:-4%;}
  .pc2{bottom:6%;right:-6%;}
  .pc3{bottom:-3%;left:6%;}
  .panel-card .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .panel-card .v{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--color-on-primary);line-height:1}
  .panel-card .v small{font-size:13px;color:var(--color-accent)}

  .ray{position:absolute;top:50%;left:50%;width:50%;height:3px;background:linear-gradient(90deg,var(--color-accent),transparent);transform-origin:left center;border-radius:3px;opacity:.4}

  /* ---- trust strip ---- */
  .trust{background:var(--leaf-deep);color:var(--color-on-dark);padding:22px 0}
  .trust .wrap{display:grid;grid-template-columns:var(--grid-cols-4);gap:var(--gap-grid);text-align:center}
  .trust .num{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--color-on-primary)}
  .trust .num span{color:var(--sun)}
  .trust .lbl{font-size:12.5px;letter-spacing:.04em;opacity:.82;margin-top:3px}

  /* ---- section scaffolding ---- */
  section.block{padding:var(--section-y) 0}
  .sec-head{max-width:var(--measure);margin-bottom:var(--sp-10)}
  .sec-tag{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-deep);margin-bottom:var(--sp-3)}
  h2{font-size:var(--fs-h2);margin-bottom:14px}
  .sec-head p{font-size:var(--fs-lg);color:var(--color-text-muted)}

  /* ---- how it works ---- */
  .steps{display:grid;grid-template-columns:var(--grid-cols-4);gap:var(--gap-grid-sm);counter-reset:s}
  .step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px 22px;position:relative}
  .step:before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-base);color:var(--color-accent-deep);letter-spacing:.05em}
  .step h3{font-size:var(--fs-h3);margin:10px 0 8px}
  .step p{font-size:14.5px;color:var(--color-text-muted)}
  .step .bar{height:3px;width:34px;background:var(--color-accent);border-radius:3px;margin-top:16px}

  /* ---- the no-capex centerpiece ---- */
  .capex{background:linear-gradient(160deg,var(--color-primary-deep),var(--color-primary));color:var(--color-on-dark);border-radius:var(--radius-xl);padding:54px 48px;position:relative;overflow:hidden}
  .capex:after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:var(--radius-round);background:radial-gradient(circle,var(--tint-accent),transparent 70%)}
  .capex h2{color:var(--color-on-primary);font-size:34px;max-width:640px;position:relative;z-index:2}
  .capex .lead{font-size:var(--fs-lg);max-width:600px;margin:16px 0 30px;opacity:.92;position:relative;z-index:2}
  .capex-cols{display:grid;grid-template-columns:var(--grid-cols-3);gap:26px;position:relative;z-index:2}
  .capex-cols .c h3{color:var(--color-accent);font-size:var(--fs-lg);margin-bottom:7px}
  .capex-cols .c p{font-size:14.5px;opacity:.9}

  /* ---- estimator ---- */
  .estimator{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;display:grid;grid-template-columns:var(--grid-cols-2);box-shadow:var(--shadow-lg)}
  .est-form{padding:42px 40px}
  .est-form h3{font-size:25px;margin-bottom:6px}
  .est-form .hint{font-size:14px;color:var(--color-text-muted);margin-bottom:22px}
  .field{margin-bottom:18px}
  .field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:7px;color:var(--color-text)}
  .field input,.field select{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius);font-family:inherit;font-size:var(--fs-base);background:var(--color-surface);color:var(--color-text)}
  .field input:focus,.field select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--tint-primary)}
  .slider-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:5px}
  .sqft-val{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-xl);color:var(--color-primary-deep)}
  input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:var(--color-border);border-radius:6px;padding:0}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:var(--radius-round);background:var(--color-accent);cursor:pointer;box-shadow:0 2px 8px var(--tint-accent)}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:var(--radius-round);background:var(--color-accent);cursor:pointer}

  .est-result{background:linear-gradient(165deg,var(--leaf-deep),var(--color-primary-darker));color:var(--color-on-dark);padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
  .est-result .small{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
  .est-result .big{font-family:var(--font-display);font-weight:800;font-size:46px;color:var(--color-on-primary);line-height:1;margin:6px 0 2px}
  .est-result .big small{font-size:18px;color:var(--sun)}
  .est-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--color-dark-hairline);font-size:14.5px}
  .est-row span:last-child{font-weight:800;color:var(--color-on-primary)}
  .est-note{font-size:12px;opacity:.7;margin-top:16px;line-height:1.5}
  .est-result .btn{margin-top:18px;width:100%;text-align:center}
  .ineligible{font-size:14px;background:var(--tint-accent);border:1px solid var(--tint-accent);padding:12px 14px;border-radius:10px;margin-top:14px;color:var(--color-on-primary)}

  /* ---- segments ---- */
  .seg-grid{display:grid;grid-template-columns:var(--grid-cols-3);gap:var(--gap-grid)}
  .seg{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:transform .15s ease,box-shadow .15s ease}
  .seg:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sun)}
  .seg .ic{width:42px;height:42px;border-radius:11px;background:var(--tint-primary);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:21px}
  .seg h3{font-size:18px;margin-bottom:7px}
  .seg p{font-size:14px;color:var(--muted)}
  .seg .why{font-size:13px;color:var(--leaf-deep);font-weight:700;margin-top:12px}

  /* ---- geo / coverage ---- */
  .geo{background:var(--leaf-deep);color:var(--color-on-dark);border-radius:22px;padding:46px 44px}
  .geo h2{color:var(--color-on-primary);font-size:30px}
  .geo p{opacity:.9;max-width:620px;margin:12px 0 26px;font-size:17px}
  .geo-cols{display:grid;grid-template-columns:var(--grid-cols-2);gap:var(--gap-wide)}
  .geo-cols h3{color:var(--sun);font-size:17px;margin-bottom:12px;letter-spacing:.02em}
  .geo-cols ul{list-style:none;columns:2;font-size:14px}
  .geo-cols li{padding:4px 0;opacity:.88}
  .geo-cols li:before{content:"› ";color:var(--sun)}

  /* ---- valuation math ---- */
  .val-grid{display:grid;grid-template-columns:var(--grid-val);gap:var(--gap-wider);align-items:center}
  .val-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px}
  .val-line{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
  .val-line:last-child{border-bottom:none;font-size:19px;font-weight:800;color:var(--leaf-deep)}
  .val-line span:last-child{font-weight:800}
  .val-card .cap{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}

  /* ---- faq ---- */
  .faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .faq summary{padding:18px 22px;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:after{content:"+";font-size:22px;color:var(--sun-deep);font-weight:700}
  .faq details[open] summary:after{content:"−"}
  .faq details p{padding:0 22px 20px;color:var(--muted);font-size:15px}

  /* ---- final CTA + booking ---- */
  .booking{background:linear-gradient(160deg,var(--color-primary-darker2),var(--color-primary-deep));color:var(--color-on-dark);border-radius:var(--radius-xl);padding:50px 46px;display:grid;grid-template-columns:var(--grid-cols-2);gap:44px;align-items:start}
  .booking h2{color:var(--color-on-primary);font-size:34px}
  .booking p{opacity:.92;font-size:17px;margin:14px 0}
  .booking ul{list-style:none;margin-top:18px}
  .booking li{padding:7px 0;font-size:15px;display:flex;gap:10px;align-items:flex-start}
  .booking li:before{content:"✓";color:var(--sun);font-weight:800}
  .bform{background:var(--panel);border-radius:16px;padding:30px}
  .bform .field label{color:var(--ink)}
  .bform h3{color:var(--ink);font-size:21px;margin-bottom:5px}
  .bform .hint{color:var(--muted);font-size:13.5px;margin-bottom:18px}
  .bform .btn{width:100%;text-align:center;margin-top:6px}
  .form-success{display:none;background:var(--tint-primary);border:1px solid var(--leaf);border-radius:12px;padding:22px;text-align:center;color:var(--leaf-deep)}
  .form-success h3{color:var(--leaf-deep)}

  /* ---- footer ---- */
  footer{background:var(--color-footer-bg);color:var(--color-footer-text);padding:46px 0 30px;font-size:14px}
  footer .wrap{display:grid;grid-template-columns:var(--grid-footer);gap:30px}
  footer h4{color:var(--color-on-primary);font-size:15px;margin-bottom:12px}
  footer a{display:block;color:var(--color-footer-muted);text-decoration:none;padding:4px 0}
  footer a:hover{color:var(--sun)}
  .foot-bottom{border-top:1px solid var(--color-footer-hairline);margin-top:30px;padding-top:20px;font-size:12.5px;color:var(--color-footer-faint);line-height:1.6}

  /* ---- qualification band ---- */
  .qual-band{display:grid;grid-template-columns:var(--grid-cols-2);gap:22px;margin-top:var(--sp-6)}
  .qual-col{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 30px}
  .qual-col h3{font-size:22px;margin-bottom:16px}
  .qual-list{list-style:none;margin-bottom:14px}
  .qual-list li{font-size:15.5px;padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line)}
  .qual-list li:last-child{border-bottom:none}
  .qual-list li:before{content:"✓";position:absolute;left:0;top:9px;color:var(--color-on-primary);background:var(--leaf);width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .qual-note{font-size:13.5px;color:var(--muted)}
  .qual-col.timing{background:linear-gradient(160deg,var(--leaf-deep),var(--leaf));color:var(--color-on-dark);border:none}
  .qual-col.timing h3{color:var(--color-on-primary)}
  .qual-col.timing p{font-size:15.5px;opacity:.93;margin-bottom:12px}
  .timing-flag{display:inline-block;background:var(--sun);color:var(--color-on-accent);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:14px}
  .timing-cta-note{font-size:13px;opacity:.78!important;border-top:1px solid var(--color-dark-hairline);padding-top:13px;margin-bottom:0!important}

  /* ---- timeline ---- */
  .timeline-wrap{margin-top:34px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:42px 40px}
  .tl-head{max-width:var(--measure);margin-bottom:30px}
  .tl-head h2{font-size:30px;margin-bottom:10px}
  .tl-head h2 em{color:var(--sun-deep);font-style:italic}
  .tl-head p{color:var(--muted);font-size:16.5px}
  .timeline{display:grid;grid-template-columns:var(--grid-cols-2);gap:var(--gap-grid-sm)}
  .tl-phase .tl-bar{height:16px;border-radius:8px}
  .tl-phase.repay .tl-bar{background:repeating-linear-gradient(135deg,var(--leaf),var(--leaf) 10px,var(--leaf-deep) 10px,var(--leaf-deep) 20px)}
  .tl-phase.gravy .tl-bar{background:linear-gradient(90deg,var(--sun),var(--sun-deep));box-shadow:0 6px 18px var(--tint-accent)}
  .tl-label{margin-top:13px;display:flex;flex-direction:column;gap:5px}
  .tl-yr{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink)}
  .tl-phase.gravy .tl-yr{color:var(--sun-deep)}
  .tl-desc{font-size:14px;color:var(--muted)}
  .tl-foot{font-size:12px;color:var(--muted);margin-top:20px}

  /* ---- responsive ----
     Media-query VALUES (the 900px / 560px) can't be CSS variables in the
     query itself, but every column collapse below routes through the grid
     tokens, so re-flowing a section is a token edit, not a hunt. ---- */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:var(--grid-1);gap:32px}
    .sun-art{max-width:300px;order:-1}
    h1{font-size:40px}
    .trust .wrap{grid-template-columns:var(--grid-2-md);gap:24px}
    .steps{grid-template-columns:var(--grid-2-md)}
    .capex-cols{grid-template-columns:var(--grid-1)}
    .estimator{grid-template-columns:var(--grid-1)}
    .seg-grid{grid-template-columns:var(--grid-2-md)}
    .geo-cols,.val-grid,.booking{grid-template-columns:var(--grid-1)}
    .timeline{grid-template-columns:var(--grid-1)}
    .qual-band{grid-template-columns:var(--grid-1)}
    .timeline-wrap{padding:32px 24px}
    /* ---- mobile nav: show burger, turn links into a dropdown panel ---- */
    .nav-burger{display:flex}
    .nav .wrap{position:relative}
    .nav nav{
      position:absolute;top:calc(var(--nav-h) - 4px);left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--color-surface);
      border:1px solid var(--color-border);border-radius:var(--radius-lg);
      box-shadow:var(--shadow-lg);
      padding:var(--sp-3);
      max-height:0;overflow:hidden;opacity:0;visibility:hidden;
      transform:translateY(-8px);
      transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
      z-index:60;
    }
    .nav-toggle:checked ~ nav{
      max-height:80vh;opacity:1;visibility:visible;transform:translateY(0);
    }
    .nav nav a{padding:14px var(--sp-3);font-size:16px;opacity:1;border-bottom:1px solid var(--color-border)}
    .nav nav a:last-child{border-bottom:none}
    .nav nav .btn-sun{text-align:center;margin-top:var(--sp-3);padding:14px;font-size:15px}
    /* burger -> X when open */
    .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
    .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
    .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
    h2{font-size:30px}
    .capex{padding:38px 26px}
    footer .wrap{grid-template-columns:var(--grid-2-md)}
  }
  @media(max-width:560px){
    .trust .wrap{grid-template-columns:var(--grid-2-md)}
    .steps,.seg-grid{grid-template-columns:var(--grid-1)}
    h1{font-size:33px}
    .hero .wrap{padding:42px 20px}
    .geo-cols ul{columns:1}
    .capex h2{font-size:27px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

  /* ============================================================
     LANDING PAGE COMPONENTS (persona + city pages)
     Reuses all tokens above. Added for /personas and /locations.
     ============================================================ */
  .lp-hero{background:linear-gradient(180deg,var(--tint-primary),transparent 45%),var(--color-bg);padding:var(--sp-12) 0 var(--sp-10)}
  .lp-hero .eyebrow{margin-bottom:var(--sp-4)}
  .lp-hero h1{font-size:46px;max-width:760px;margin-bottom:var(--sp-4)}
  .lp-hero .sub{font-size:var(--fs-lg);max-width:640px}
  .lp-hero .hero-cta{margin-top:var(--sp-6)}
  .breadcrumb{font-size:var(--fs-sm);color:var(--color-text-muted);padding:var(--sp-4) 0 0}
  .breadcrumb a{color:var(--color-primary);text-decoration:none}
  .breadcrumb a:hover{text-decoration:underline}
  .lp-body{padding:var(--section-y) 0}
  .lp-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap-wider);align-items:start}
  .lp-main h2{font-size:30px;margin:var(--sp-8) 0 var(--sp-4)}
  .lp-main h2:first-child{margin-top:0}
  .lp-main h3{font-size:var(--fs-xl);margin:var(--sp-6) 0 var(--sp-3)}
  .lp-main p{font-size:var(--fs-md);color:var(--color-text);margin-bottom:var(--sp-4);line-height:1.65}
  .lp-main ul{margin:0 0 var(--sp-4) var(--sp-5)}
  .lp-main li{font-size:var(--fs-md);margin-bottom:var(--sp-2);line-height:1.6}
  .lp-aside{position:sticky;top:calc(var(--nav-h) + var(--sp-5));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
  .lp-aside h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
  .lp-aside .stat{padding:var(--sp-3) 0;border-bottom:1px solid var(--color-border)}
  .lp-aside .stat:last-of-type{border-bottom:none}
  .lp-aside .stat .v{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-xl);color:var(--color-primary-deep);line-height:1}
  .lp-aside .stat .k{font-size:var(--fs-sm);color:var(--color-text-muted)}
  .lp-aside .btn{width:100%;text-align:center;margin-top:var(--sp-4)}
  .pill-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
  .pill{background:var(--tint-primary);color:var(--color-primary-deep);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:6px 13px;border-radius:var(--radius-pill)}
  .lp-cta-band{background:linear-gradient(160deg,var(--color-primary-deep),var(--color-primary));color:var(--color-on-dark);border-radius:var(--radius-xl);padding:var(--sp-12) var(--sp-10);text-align:center;margin:var(--sp-8) 0}
  .lp-cta-band h2{color:var(--color-on-primary);font-size:32px;max-width:620px;margin:0 auto var(--sp-3)}
  .lp-cta-band p{color:var(--color-on-dark);opacity:.92;max-width:560px;margin:0 auto var(--sp-5);font-size:var(--fs-md)}
  .link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2) var(--sp-5);margin:var(--sp-4) 0}
  .link-grid a{font-size:var(--fs-sm);color:var(--color-primary);text-decoration:none;padding:var(--sp-1) 0}
  .link-grid a:hover{text-decoration:underline}
  .related{border-top:1px solid var(--color-border);padding-top:var(--sp-6);margin-top:var(--sp-8)}
  .related h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
  @media(max-width:900px){
    .lp-grid{grid-template-columns:var(--grid-1)}
    .lp-aside{position:static}
    .lp-hero h1{font-size:34px}
    .link-grid{grid-template-columns:1fr 1fr}
  }

  /* ============================================================
     IMAGE SLOTS (drop real images into /images/; until then these
     render as styled placeholders so layout is never broken).
     To move images to Cloudflare R2 later, change the src paths
     to your R2 custom-domain URL — that's the only change needed.
     ============================================================ */
  .img-slot{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,var(--color-primary-deep),var(--color-primary));box-shadow:var(--shadow-md)}
  .img-slot img{display:block;width:100%;height:100%;object-fit:cover}
  .img-slot.ratio-wide{aspect-ratio:16/9}
  .img-slot.ratio-square{aspect-ratio:1/1}
  .img-slot.ratio-portrait{aspect-ratio:4/5}
  .img-slot.ratio-tall{aspect-ratio:3/4}
  /* placeholder shown when the slot has no <img> (or it fails to load) */
  .img-slot .img-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:var(--sp-5);color:var(--color-on-dark)}
  .img-slot .img-ph svg{width:42px;height:42px;opacity:.5}
  .img-slot .img-ph .lbl{font-size:var(--fs-sm);font-weight:var(--fw-semibold);opacity:.65;letter-spacing:.02em;max-width:240px;line-height:1.4}
  .img-slot img + .img-ph{display:none}
  figure.media{margin:0}
  figure.media figcaption{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:var(--sp-2);text-align:center}