/* ===================================================================
   SOLARNIX - public website
   Royal blue and gold on a light page, laid out as numbered chapters:
   a cinematic opening that reads like the start of a story, then an
   editorial page of hairline rules, oversized numerals and white space.
   Mobile first, no framework, nothing loaded from anywhere but fonts.
   =================================================================== */
:root{
  /* Royal blue carries the brand; gold is the sun, used sparingly. */
  --royal:#1E3A8A; --royal-600:#24439E; --royal-700:#172E6E;
  --royal-900:#0E1D47;
  --royal-50:#F2F5FD; --royal-100:#DFE7FA; --royal-200:#C3D2F5;
  --gold:#C98A16; --gold-600:#A9730F; --gold-50:#FDF7EA; --gold-200:#F2DFB4;

  --ink:#0B1226; --ink-2:#37405C; --ink-3:#6B7392; --ink-4:#9AA1BA;
  --line:#E4E7F0; --line-2:#EFF1F7;
  --bg:#FFFFFF; --bg-soft:#F7F8FC; --bg-warm:#FBFAF6;

  --radius:10px; --radius-lg:14px; --maxw:1240px;
  --shadow-sm:0 1px 2px rgba(11,18,38,.05);
  --shadow:0 10px 34px rgba(11,18,38,.08);
  --shadow-lg:0 30px 70px rgba(11,18,38,.14);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Sora',var(--font);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--royal);text-decoration:none}
svg{width:18px;height:18px;flex:0 0 auto}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.035em;line-height:1.07;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:600}
h2{font-size:clamp(1.8rem,3.6vw,3.1rem);font-weight:600}
h3{font-size:1.16rem;letter-spacing:-.02em;line-height:1.3;font-weight:600}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.sec{padding:110px 0}
.sec-sm{padding:56px 0}
.soft{background:var(--bg-soft)}
.dark{background:var(--royal-900);color:#C3CDE8}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:#A7B4D6}
.muted{color:var(--ink-3)}
.small{font-size:13.6px}
::selection{background:#1E3A8A1f}

/* --------------------------------------------------- chapter devices
   A tiny tracked-out label with a gold dot marks each chapter, and the
   chapter's number is set oversized behind the heading. Together they give
   the page a spine you can feel while scrolling. */
.chapter{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--royal);margin-bottom:20px}
.chapter::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 6px}
.numeral{font-family:var(--display);font-size:clamp(3.2rem,7vw,5.6rem);font-weight:600;line-height:.8;
  letter-spacing:-.06em;color:var(--royal-200);display:block;pointer-events:none;user-select:none}
.rule{height:1px;background:var(--line);border:0;margin:0}
.split .numeral,.wrap>div>.numeral{margin:0 0 -2px;opacity:.75}
.edge-label{position:absolute;right:20px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-4);pointer-events:none}

/* ------------------------------------------------------------- header */
.topbar-thin{background:var(--royal-900);color:#9AACD4;font-size:13px}
.topbar-thin .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;height:36px}
.topbar-thin a{color:#C3CDE8}
.topbar-thin a:hover{color:#fff}
.topbar-thin .tb-right{display:flex;gap:18px;align-items:center}
.topbar-thin svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px}

header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
header.site.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.96)}
.nav{display:flex;align-items:center;gap:14px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mark{width:38px;height:38px;border-radius:9px;background:var(--royal);
  display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.brand-mark::after{content:"";position:absolute;inset:auto -6px -8px auto;width:22px;height:22px;
  border-radius:50%;background:var(--gold);opacity:.9}
.brand-mark svg{width:20px;height:20px;position:relative;z-index:2}
.brand b{display:block;font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.04em;
  line-height:1.15;color:var(--ink)}
.brand span{display:block;font-size:9.6px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.brand img{max-height:42px;width:auto}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu .nav-cta{display:none}
.menu a{padding:9px 13px;border-radius:7px;color:var(--ink-2);font-weight:500;font-size:14.4px;
  white-space:nowrap;position:relative}
.menu a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;background:var(--royal);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.menu a.on{color:var(--royal);font-weight:600}
.nav-cta{display:flex;gap:8px;align-items:center}
.burger{display:none;width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:#fff;
  align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.burger svg{width:20px;height:20px;color:var(--ink)}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:8px;
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap;line-height:1.2}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--royal);color:#fff}
.btn-primary:hover{background:var(--royal-700);color:#fff;transform:translateY(-1px)}
.btn-accent{background:var(--gold);color:#fff}
.btn-accent:hover{background:var(--gold-600);color:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-light:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-wa{background:#1FBE5B;color:#fff}
.btn-wa:hover{background:#17A44C;color:#fff}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:7px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-block{width:100%}

/* ---------------------------------------------------------------- hero
   Chapter 00. A dawn scene runs the full width with the wordmark ghosted
   across it, the way a title card sits over a film's first shot. */
.hero{position:relative;background:var(--bg-warm);overflow:hidden;padding:64px 0 0;
  border-bottom:1px solid var(--line)}
/* The wordmark is set enormous and low, so the hero text reads over its
   shoulders rather than across its middle. Clipped by the section on purpose. */
.hero-ghost{position:absolute;left:50%;bottom:-3.5%;transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:min(27vw,23rem);letter-spacing:-.075em;line-height:.78;
  color:var(--royal);opacity:.05;white-space:nowrap;pointer-events:none;user-select:none;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;
  position:relative;z-index:3;padding-bottom:40px}
.hero h1{margin-bottom:22px;max-width:13em;font-weight:600}
/* The highlighted phrase is kept on one line so its gold underline stays a
   single stroke instead of breaking across two. */
.hero h1 em{font-style:normal;color:var(--royal);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.075em;background:var(--gold);
  opacity:.55;border-radius:3px}
@media (max-width:520px){.hero h1 em{white-space:normal}}
.hero p.lead{font-size:18px;color:var(--ink-2);max-width:31em;margin-bottom:32px;line-height:1.6}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:46px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.hero-stats div b{display:block;font-family:var(--display);font-size:31px;color:var(--ink);letter-spacing:-.05em;
  line-height:1.05;font-weight:600}
.hero-stats div span{font-size:12.6px;color:var(--ink-3);margin-top:4px;display:block;letter-spacing:.02em}
.hero-art{position:relative;z-index:3}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);padding:0 0 26px;position:relative;z-index:2}
.scroll-cue i{display:block;width:64px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;width:22px;background:var(--royal);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-24px)}100%{transform:translateX(66px)}}

/* the chapter strip that closes the hero - Kage's numerals, doing a job */
.chapters{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  position:relative;z-index:3}
.chapters a{padding:22px 20px 26px;border-right:1px solid var(--line);color:var(--ink);
  transition:background .2s;min-width:0}
.chapters a:last-child{border-right:0}
.chapters a:hover{background:#fff}
/* These numbers are the page's own contents list, so they have to be read,
   not just sensed - a tint light enough to be decorative fails that. */
.chapters b{display:block;font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.05em;
  color:var(--royal);line-height:1;transition:color .2s}
.chapters a:hover b{color:var(--gold-600)}
.chapters span{display:block;font-size:12.6px;color:var(--ink-2);margin-top:9px;line-height:1.4}

/* the quick estimate panel */
.hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
  box-shadow:var(--shadow)}
.hero-card h3{font-size:17px;margin-bottom:4px}
.hero-card p{font-size:13.6px;color:var(--ink-3);margin-bottom:18px}
.mini-calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-calc label{font-size:12.4px;color:var(--ink-3);font-weight:600;display:block;margin-bottom:5px}
.mini-calc input,.mini-calc select{width:100%;height:46px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink);padding:0 13px;font-family:inherit;font-size:15px;outline:none}
.mini-calc input::placeholder{color:var(--ink-4)}
.mini-calc input:focus,.mini-calc select:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(30,58,138,.1)}
.mini-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:18px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mini-out div{background:var(--royal-50);padding:13px 10px;text-align:center}
.mini-out b{display:block;font-family:var(--display);font-size:18px;color:var(--royal);letter-spacing:-.03em}
.mini-out span{font-size:10.4px;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.trust{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.trust span{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;
  padding:5px 11px;font-size:12.2px;color:var(--ink-2)}

/* --------------------------------------------------- live numbers strip */
.ticker{border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:3;overflow:hidden}
.ticker .wrap{display:flex;align-items:stretch;padding:0 26px}
.ticker .tk-label{display:flex;align-items:center;gap:8px;padding:14px 22px 14px 0;
  font-size:10.6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  border-right:1px solid var(--line);flex:0 0 auto}
.ticker .tk-label i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:block;
  animation:tkpulse 2.4s ease-in-out infinite}
@keyframes tkpulse{0%,100%{opacity:1}50%{opacity:.2}}
.ticker .tk-items{display:flex;overflow-x:auto;scrollbar-width:none;flex:1}
.ticker .tk-items::-webkit-scrollbar{display:none}
.ticker .tk-items>div{padding:13px 24px;border-right:1px solid var(--line-2);white-space:nowrap;flex:0 0 auto}
.ticker .tk-items>div span{display:block;font-size:10.6px;color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase}
.ticker .tk-items>div b{font-size:15px;font-weight:700;letter-spacing:-.02em;font-family:var(--display)}
.ticker .up{color:var(--royal)}.ticker .down{color:#B91C1C}.ticker .flat{color:var(--ink)}

/* ------------------------------------------------------------- headings */
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center;position:relative}
.sec-head.left{margin-left:0;text-align:left}
/* The chapter number sits above its heading, not behind the words - large
   enough to mark the section, faint enough to stay out of the reading. */
.sec-head .numeral{position:relative;left:auto;top:auto;transform:none;z-index:0;opacity:.75;
  margin:0 0 -2px;font-size:clamp(3.2rem,7vw,5.6rem)}
.sec-head.left .numeral{left:auto}
.sec-head h2,.sec-head p,.sec-head .chapter{position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--royal);margin-bottom:16px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.sec-head p{color:var(--ink-3);font-size:17px;margin:18px 0 0;line-height:1.62}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden}
.cards>*,.split>*,.calc-wrap>*,.foot-grid>*,.stat-band>*{min-width:0}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;padding:32px 28px;transition:background .2s;position:relative}
.card:hover{background:var(--royal-50)}
.card .ico{width:40px;height:40px;border-radius:9px;background:var(--royal-50);color:var(--royal);
  display:grid;place-items:center;margin-bottom:20px;border:1px solid var(--royal-100)}
.card:hover .ico{background:#fff}
.card .ico svg{width:20px;height:20px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-3);font-size:14.8px;margin:0;line-height:1.62}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:14.2px}
.card .more svg{width:15px;height:15px;transition:transform .18s}
.card:hover .more svg{transform:translateX(3px)}
.feat-list{list-style:none;padding:0;margin:16px 0 0}
.feat-list li{position:relative;padding-left:24px;margin-bottom:9px;font-size:14.8px;color:var(--ink-2)}
.feat-list li::before{content:"";position:absolute;left:1px;top:8px;width:7px;height:4px;
  border-left:1.8px solid var(--royal);border-bottom:1.8px solid var(--royal);transform:rotate(-45deg)}

/* --------------------------------------------------------------- stats */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stat-band div{background:#fff;padding:30px 26px}
.stat-band b{display:block;font-family:var(--display);font-size:15.5px;color:var(--ink);letter-spacing:-.025em;
  margin-bottom:6px;font-weight:600}
.stat-band span{font-size:13.4px;color:var(--ink-3);line-height:1.55;display:block}

/* ------------------------------------------------------------ projects */
.proj{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#fff;
  transition:border-color .2s,transform .2s}
.proj:hover{border-color:var(--royal-200);transform:translateY(-3px)}
.proj .ph{aspect-ratio:16/10;background:var(--royal-50);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
.proj .ph img{width:100%;height:100%;object-fit:cover}
.proj .ph .kw{position:absolute;left:14px;bottom:14px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:4px 11px;font-weight:700;font-size:13px;color:var(--royal);font-family:var(--display)}
.proj .bd{padding:20px 22px}
.proj h3{font-size:16.5px;margin-bottom:4px}
.proj .meta{font-size:13.2px;color:var(--ink-3)}
.proj p{font-size:14.2px;color:var(--ink-3);margin:10px 0 0}

/* -------------------------------------------------------------- pricing */
.price-tag{display:inline-block;background:var(--gold-50);border:1px solid var(--gold-200);color:var(--gold-600);
  padding:4px 11px;border-radius:6px;font-weight:700;font-size:13px}

/* ---------------------------------------------------------- calculator */
.calc-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:start}
.calc-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.calc-box .field{margin-bottom:18px}
.calc-box label{display:block;font-size:13.6px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.calc-box input,.calc-box select{width:100%;height:50px;border:1px solid var(--line);border-radius:8px;
  padding:0 14px;font-family:inherit;font-size:15.6px;color:var(--ink);outline:none;background:#fff}
.calc-box input:focus,.calc-box select:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(30,58,138,.1)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:block;margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:12px 10px;border:1px solid var(--line);border-radius:8px;
  font-weight:600;font-size:14.6px;color:var(--ink-2);cursor:pointer;transition:.15s}
.seg input:checked + span{border-color:var(--royal);background:var(--royal-50);color:var(--royal)}

.result{background:var(--royal-50);border:1px solid var(--royal-100);border-radius:var(--radius-lg);padding:30px}
.result h3{font-size:18px;margin-bottom:6px}
.result .sub{color:var(--ink-3);font-size:14px;margin-bottom:24px}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--royal-100);
  border:1px solid var(--royal-100);border-radius:10px;overflow:hidden}
.res-grid>*{min-width:0}
.res-grid.res-3{grid-template-columns:repeat(3,1fr)}
.res-grid div{background:#fff;padding:18px 20px}
.res-grid .lb{font-size:11px;color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.res-grid .vl{font-family:var(--display);font-size:25px;letter-spacing:-.045em;margin-top:4px;color:var(--ink);
  font-weight:600}
.res-grid .vl.amber{color:var(--gold-600)}
.res-grid .vl.green{color:var(--royal)}
.res-note{font-size:12.8px;color:var(--ink-3);margin-top:18px;line-height:1.6}

/* ----------------------------------------------------------- testimonial */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.quote::before{content:"\201C";font-family:var(--display);font-size:54px;line-height:.6;color:var(--royal-200);
  display:block;margin-bottom:10px}
.stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.quote p{font-size:15.4px;color:var(--ink-2);line-height:1.7}
.quote .by{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.quote .av{width:38px;height:38px;border-radius:9px;background:var(--royal);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13.4px;font-family:var(--display)}
.quote .by b{display:block;font-size:14.6px}
.quote .by span{font-size:12.8px;color:var(--ink-3)}

/* ------------------------------------------------------------------ faq */
.faq{border-bottom:1px solid var(--line);background:transparent}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{padding:24px 4px;font-weight:600;font-size:16.6px;cursor:pointer;list-style:none;display:flex;
  gap:16px;align-items:flex-start;color:var(--ink);letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--ink-4);line-height:1;font-weight:300}
.faq[open] summary::after{content:"\2013";color:var(--royal)}
.faq[open] summary{color:var(--royal)}
.faq .ans{padding:0 4px 24px;color:var(--ink-3);font-size:15.2px;max-width:62em}

/* ----------------------------------------------------------------- form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fgrid .full{grid-column:1/-1}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.6px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field .req{color:#DC2626}
.field input,.field select,.field textarea{width:100%;height:48px;border:1px solid var(--line);border-radius:8px;
  padding:0 14px;font-family:inherit;font-size:15.4px;color:var(--ink);outline:none;background:#fff}
.field textarea{height:auto;min-height:120px;padding:13px 14px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--royal);
  box-shadow:0 0 0 3px rgba(30,58,138,.1)}
.field .hint{font-size:12.8px;color:var(--ink-3);margin-top:6px}
.alert{padding:14px 16px;border-radius:8px;font-size:14.8px;margin-bottom:22px;display:flex;gap:10px;line-height:1.55}
.alert svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.alert-ok{background:var(--royal-50);border:1px solid var(--royal-100);color:var(--royal-700)}
.alert-bad{background:#FEF4F4;border:1px solid #F3CDCD;color:#98211F}

/* a message under the field that is wrong, matching the panel */
.field input.bad,.field select.bad,.field textarea.bad,
.calc-box input.bad,.calc-box select.bad,
.mini-calc input.bad,.mini-calc select.bad{border-color:#DC2626;background:#FEF6F6}
.fmsg{font-size:12.6px;color:#B91C1C;margin-top:6px;display:flex;gap:6px;align-items:flex-start;line-height:1.45}
.fmsg::before{content:"!";flex:0 0 15px;width:15px;height:15px;border-radius:50%;background:#DC2626;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;margin-top:1px}

/* ----------------------------------------------------------------- misc */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pic{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cta-band{background:var(--royal-900);border-radius:var(--radius-lg);padding:56px 48px;color:#fff;
  display:grid;grid-template-columns:1.4fr auto;gap:34px;align-items:center;position:relative;overflow:hidden}
/* a real array under the navy, dark enough that white type still wins */
.cta-band::before{content:"";position:absolute;inset:0;
  background:url('../img/photos/array-sky.jpg') center 58%/cover no-repeat;
  opacity:.28;mix-blend-mode:luminosity}
.cta-band::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;
  background:var(--gold);opacity:.14}
.cta-band .chapter{position:relative;z-index:2;margin-bottom:14px}
.cta-band h2{color:#fff;margin-bottom:10px;position:relative;z-index:2}
.cta-band p{color:#A7B4D6;margin:0;max-width:44em;position:relative;z-index:2}
.cta-band .acts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.logos{display:flex;gap:30px;flex-wrap:wrap;align-items:center;justify-content:center}
.logos span{font-family:var(--display);font-weight:700;color:var(--ink-4);font-size:18px;letter-spacing:-.03em}
.breadcrumbs{background:var(--bg-warm);border-bottom:1px solid var(--line);padding:66px 0 56px;
  position:relative;overflow:hidden}
.breadcrumbs h1{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:14px}
.breadcrumbs p{color:var(--ink-3);font-size:17px;max-width:50em;margin:0;line-height:1.6}
.crumb-links{font-size:13.2px;color:var(--ink-3);margin-bottom:16px}
.crumb-links a{color:var(--ink-3)}
.crumb-links a:hover{color:var(--royal)}

/* --------------------------------------------------------------- footer */
footer.site{background:var(--royal-900);color:#A7B4D6;padding:70px 0 0}
footer.site h4{color:#fff;font-family:var(--display);font-size:12.6px;margin-bottom:18px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}
footer.site a{color:#A7B4D6;font-size:14.6px}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:11px}
.foot-brand .brand b{color:#fff}
.foot-brand .brand span{color:#8C9BC4}
.foot-brand .brand-mark{background:rgba(255,255,255,.12)}
.foot-brand p{font-size:14.4px;color:#93A2CB;margin-top:18px;line-height:1.65}
.foot-brand .trust span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#C3CDE8}
.foot-contact div{display:flex;gap:10px;margin-bottom:14px;font-size:14.4px;align-items:flex-start}
.foot-contact svg{width:16px;height:16px;color:var(--gold);flex:0 0 16px;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.2px;color:#8C9BC4}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;width:52px;height:52px;border-radius:50%;
  background:#1FBE5B;display:grid;place-items:center;box-shadow:0 8px 24px rgba(31,190,91,.35)}
.wa-float svg{width:26px;height:26px;color:#fff}

/* ===================================================================
   MOTION
   Nothing here hides content until motion.js has marked the document, so a
   blocked script leaves a complete, readable page. Everything switches off
   under prefers-reduced-motion.
   =================================================================== */

/* ---- the curtain: a short hold, with the progress it is really waiting on */
#curtain{position:fixed;inset:0;z-index:200;background:var(--bg-warm);display:grid;place-items:center;
  transition:opacity .7s ease,visibility .7s}
.curtain-up #curtain{opacity:0;visibility:hidden}
.cu-in{width:min(320px,72vw);text-align:center}
.cu-mark{width:52px;height:52px;border-radius:13px;background:var(--royal);display:grid;place-items:center;
  margin:0 auto 26px;position:relative;overflow:hidden;animation:cuPulse 2.4s ease-in-out infinite}
.cu-mark::after{content:"";position:absolute;inset:auto -8px -10px auto;width:28px;height:28px;border-radius:50%;
  background:var(--gold)}
.cu-mark svg{width:26px;height:26px;color:#fff;position:relative;z-index:2}
@keyframes cuPulse{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
.cu-bar{height:1.5px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:14px}
.cu-bar i{display:block;height:100%;background:var(--royal);transform:scaleX(0);transform-origin:left}
.cu-row{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.cu-pct{font-family:var(--display);font-weight:600;color:var(--royal);letter-spacing:.06em}

/* ---- reading progress across the very top */
#progBar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);
  transform-origin:left;z-index:90;pointer-events:none;transition:transform .08s linear}

/* ---- blocks rising into place */
.js .reveal,.js .stagger > *{opacity:0;transform:translateY(22px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in,.js .stagger > *.in{opacity:1;transform:none}

/* ---- headings whose lines wipe up one after another */
.js .split-lines .ln{display:block;overflow:hidden}
.js .split-lines .ln i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.19,1,.22,1)}
/* Both classes sit on <html>, so this has to be one compound selector -
   a descendant one would never match and the heading would stay hidden. */
.js.entered .split-lines .ln i,.js .split-lines.in .ln i{transform:none}
.js .split-lines .ln:nth-child(2) i{transition-delay:.09s}
.js .split-lines .ln:nth-child(3) i{transition-delay:.18s}
.js .split-lines .ln:nth-child(4) i{transition-delay:.27s}

/* ---- the hero's own entrance, once the curtain is up */
.js .hero .chapter,.js .hero p.lead,.js .hero-cta,.js .hero-stats,.js .hero-art,
.js .scroll-cue,.js .chapters{opacity:0;transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.js.entered .hero .chapter{opacity:1;transform:none;transition-delay:.05s}
.js.entered .hero p.lead{opacity:1;transform:none;transition-delay:.34s}
.js.entered .hero-cta{opacity:1;transform:none;transition-delay:.42s}
.js.entered .hero-stats{opacity:1;transform:none;transition-delay:.5s}
.js.entered .hero-art{opacity:1;transform:none;transition-delay:.26s}
.js.entered .scroll-cue{opacity:1;transform:none;transition-delay:.62s}
.js.entered .chapters{opacity:1;transform:none;transition-delay:.7s}
.js .hero-ghost{opacity:0;transition:opacity 1.4s ease .15s}
.js.entered .hero-ghost{opacity:.04}
/* the photograph settles in rather than appearing: it starts a touch closer and
   a touch flatter, and comes to rest as the curtain lifts */
.js .hero-shot{opacity:0;transform:scale(1.06);
  transition:opacity 1.5s ease,transform 2.2s cubic-bezier(.22,.61,.36,1)}
.js.entered .hero-shot{opacity:1;transform:none}

/* ---- the dawn behind the hero */
.hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* ---- the photograph behind the hero
   It is deliberately held back: over-exposed to near-white at the top left
   where the headline sits, full strength at the bottom right where there is
   nothing to read. The words have to win, and a photograph at full contrast
   under black type wins instead. The layer is taller than the hero so it can
   drift as the page scrolls without ever showing an edge. */
.hero-strip{display:none}
.hero-shot{position:absolute;left:0;right:0;top:-8%;height:118%;
  background-size:cover;background-position:60% 58%;background-repeat:no-repeat;
  opacity:1;will-change:transform}
.hero-wash{position:absolute;inset:0;
  background:
    linear-gradient(104deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 24%,
                    rgba(255,255,255,.58) 40%,rgba(255,255,255,.12) 58%,rgba(255,255,255,0) 74%),
    linear-gradient(to bottom,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 22%,
                    rgba(255,255,255,0) 72%,rgba(251,250,246,.82) 100%)}
@media (max-width:1024px){
  /* One column: the words now run down the middle of the frame, so the wash
     fades top to bottom instead of across. It stays heavy behind the headline
     and clears below the buttons, which is the only band of the photograph a
     phone has room to show anyway. The decorative sun disc comes out - against
     a real sunrise it reads as a smudge. */
  /* on a tall narrow crop "cover" shows mostly sky, so anchor low: the array
     has to be the part of the photograph a phone actually sees */
  .hero-shot{opacity:1;background-position:62% 88%}
  .hero-wash{background:
    linear-gradient(to bottom,rgba(255,255,255,.94) 0%,rgba(255,255,255,.9) 38%,
                    rgba(255,255,255,.58) 58%,rgba(255,255,255,.2) 78%,rgba(251,250,246,.55) 100%)}
  .hero-sky .sun,.hero-sky .glow{display:none}
  /* the photograph, shown properly rather than hinted at */
  .hero-strip{display:block;margin:30px 0 0;border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow);position:relative;z-index:2}
  .hero-strip img{width:100%;height:210px;object-fit:cover;object-position:center 62%}
  /* with a real picture on the page the backdrop only has to carry the warmth */
  .hero-shot{opacity:.55}
  .hero-wash{background:linear-gradient(to bottom,rgba(255,255,255,.93) 0%,rgba(255,255,255,.9) 46%,
                    rgba(255,255,255,.86) 74%,rgba(251,250,246,.92) 100%)}
}
.hero-sky .glow{position:absolute;left:50%;top:-46%;width:min(1100px,120vw);height:min(1100px,120vw);
  transform:translateX(-50%);border-radius:50%;opacity:.25;
  background:radial-gradient(circle,rgba(201,138,22,.5) 0%,rgba(201,138,22,.16) 38%,transparent 66%)}
.hero-sky .sun{position:absolute;left:78%;top:20%;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,#F6D48A,#E0A93C 55%,rgba(201,138,22,0) 72%);
  opacity:.55;filter:blur(.4px);transition:opacity .4s linear}
.hero-sky .beam{position:absolute;left:52%;top:-14%;width:58%;height:135%;
  background:linear-gradient(101deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 58%);
  transform-origin:top center;opacity:.6}
.hero-sky .grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(30,58,138,.045) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%}
@media (max-width:860px){.hero-sky .sun{width:130px;height:130px;left:70%}.hero-sky .beam{display:none}}

/* ---- the chapter rail down the right edge */
#chapterRail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;display:flex;
  flex-direction:column;gap:2px;opacity:0;transition:opacity .6s ease .9s}
.js.entered #chapterRail{opacity:1}
#chapterRail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:5px 0;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
#chapterRail .lbl{opacity:0;transform:translateX(6px);transition:opacity .28s,transform .28s;white-space:nowrap}
#chapterRail a:hover .lbl{opacity:1;transform:none}
#chapterRail .pip{width:22px;height:2px;border-radius:2px;background:var(--line);flex:0 0 22px;
  transition:background .3s,width .3s}
#chapterRail a:hover .pip{background:var(--royal-200)}
#chapterRail a.on .pip{background:var(--royal);width:34px}
#chapterRail a.on{color:var(--royal)}
#chapterRail a.on .lbl{opacity:1;transform:none}
@media (max-width:1180px){#chapterRail{display:none}}

/* ---- the marquee strip */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;padding:15px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:12px;padding:0 30px;font-size:13.2px;
  color:var(--ink-2);white-space:nowrap;font-weight:500}
.marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  display:block;flex:0 0 5px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- buttons that lean, and a sheen that crosses on hover */
.btn-primary,.btn-accent{position:relative;overflow:hidden;
  transition:background .18s,color .18s,transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s}
.btn-primary::after,.btn-accent::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);
  transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after,.btn-accent:hover::after{left:130%}
.btn-primary:hover{box-shadow:0 10px 26px rgba(30,58,138,.26)}
.btn-accent:hover{box-shadow:0 10px 26px rgba(201,138,22,.3)}

/* ---- the hero estimate card tips towards the pointer */
.hero-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s;transform-style:preserve-3d}
.hero-art:hover .hero-card{box-shadow:var(--shadow-lg)}

/* ---- cards lift, and their icon turns, on hover */
.card{transition:background .24s,transform .24s cubic-bezier(.22,.61,.36,1)}
.card:hover{transform:translateY(-3px)}
.card .ico{transition:background .24s,transform .4s cubic-bezier(.34,1.3,.5,1)}
.card:hover .ico{transform:rotate(-7deg) scale(1.06)}
.chapters a b{transition:color .2s,transform .35s cubic-bezier(.34,1.3,.5,1)}
.chapters a:hover b{transform:translateY(-3px)}

/* ---- a quiet underline that draws itself under section headings */
.sec-head h2,.split h2{position:relative}

/* ---- everything above, switched off */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger > *{opacity:1;transform:none;transition:none}
  .js .split-lines .ln i{transform:none;transition:none}
  .js .hero .chapter,.js .hero p.lead,.js .hero-cta,.js .hero-stats,.js .hero-art,
  .js .scroll-cue,.js .chapters,.js .hero-ghost{opacity:1;transform:none;transition:none}
  .js.entered .hero-ghost{opacity:.04}
  .js .hero-shot{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .scroll-cue i::after,.ticker .tk-label i,.cu-mark{animation:none}
  html{scroll-behavior:auto}
  #curtain{display:none}
}

@media (max-width:1024px){
  .hero-grid,.calc-wrap,.split{grid-template-columns:1fr;gap:38px}
  .c4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta-band{grid-template-columns:1fr;padding:38px 30px}
  .ticker .tk-label{display:none}
  .chapters{grid-template-columns:repeat(3,1fr)}
  .chapters a:nth-child(3){border-right:0}
  .chapters a:nth-child(n+4){border-top:1px solid var(--line)}
  .edge-label{display:none}
}
@media (max-width:860px){
  .menu{position:fixed;inset:74px 0 auto;background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:14px 26px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  body.menu-open .menu{display:flex}
  .menu a{padding:13px 12px;border-radius:8px;font-size:16px}
  .menu a::after{display:none}
  .burger{display:inline-flex}
  .nav-cta{display:none}
  .menu .nav-cta{display:flex;margin-top:12px}
  .menu .nav-cta .btn{flex:1}
  .c3,.c2,.stat-band{grid-template-columns:1fr 1fr}
  .sec{padding:72px 0}
  .topbar-thin .tb-left{display:none}
  .hero{padding-top:44px}
  .hero-ghost{font-size:44vw;top:44%}
}
@media (max-width:600px){
  .c3,.c2,.c4,.stat-band,.fgrid,.res-grid,.mini-out{grid-template-columns:1fr}
  .mini-calc .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .chapters{grid-template-columns:repeat(2,1fr)}
  .chapters a{border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .chapters a:nth-child(2n){border-right:0}
  .hero{padding-top:34px}
  .hero-stats{gap:28px}
  .card{padding:24px 22px}
  .res-grid,.res-grid.res-3{grid-template-columns:1fr 1fr}
  .mini-out{grid-template-columns:repeat(3,1fr)}
  .wrap{padding:0 18px}
  .cta-band{padding:30px 22px}
  .sec-head .numeral{top:-24px}
}

/* Page layouts written inline collapse to one column on small screens. */
@media (max-width:1024px){
  .wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .wrap[style*="grid-template-columns"]>*{min-width:0}
}

/* ---- the real logo, in the header and in the navy footer
   The supplied artwork is a wide lockup, so it is sized by height and left to
   find its own width; the header row already reserves the space. */
.brand img{max-height:50px;width:auto}
.brand-foot img{max-height:64px;width:auto;margin-bottom:8px}
@media (max-width:860px){
  .brand img{max-height:40px}
  .brand-foot img{max-height:52px}
}

/* ------------------------------------------------------------- gallery
   A masonry-ish grid that does not need JavaScript. Photographs off a phone
   arrive in whatever shape they were taken, so each tile keeps its own ratio
   rather than cropping somebody's roof out of the frame. */
.gallery-grid{columns:3;column-gap:18px}
.gallery-item{break-inside:avoid;margin:0 0 18px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-soft)}
.gallery-item a{display:block;line-height:0}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-item figcaption{padding:13px 15px;line-height:1.5;background:var(--card)}
.gallery-item figcaption b{display:block;font-size:14.4px;color:var(--ink);font-weight:600}
.gallery-item figcaption span{display:block;font-size:12.8px;color:var(--ink-3);margin-top:3px}

@media (max-width:980px){ .gallery-grid{columns:2} }
@media (max-width:620px){ .gallery-grid{columns:1} }

/* Pictures are the point of this page, so they load before they are scrolled
   to rather than fading in late on a slow phone. */
@media (prefers-reduced-motion:reduce){
  .gallery-item img{transition:none}
  .gallery-item:hover img{transform:none}
}

/* The three steps of raising a complaint, so somebody can see where they are
   and how much is left. */
.steps{display:flex;gap:0;list-style:none;margin:0 0 20px;padding:0;counter-reset:s}
.steps li{flex:1 1 0;position:relative;padding:8px 6px 0;text-align:center;
  font-size:12.6px;color:var(--ink-3, #64748B);counter-increment:s}
.steps li::before{content:counter(s);display:block;width:24px;height:24px;margin:0 auto 6px;
  border-radius:50%;background:#E7EBF0;color:#64748B;font-weight:700;font-size:12px;line-height:24px}
.steps li::after{content:"";position:absolute;top:19px;left:-50%;width:100%;height:2px;
  background:#E7EBF0;z-index:-1}
.steps li:first-child::after{display:none}
.steps li.on{color:var(--brand, #1E3A8A);font-weight:650}
.steps li.on::before{background:var(--brand, #1E3A8A);color:#fff}
.steps li.done::before{background:#047857;color:#fff;content:"\2713"}
.steps li.done::after{background:#A7F3D0}

/* "Send it again" / "Use a different number" under the code box. */
.step-alts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* Who we have decided you are, before you type the complaint. */
.known-as{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
  padding:11px 14px;margin-bottom:18px;border-radius:12px;
  background:#ECFDF5;border:1px solid #A7F3D0}
.known-as b{display:block;font-size:14.6px;color:#065F46}
.known-as span{display:block;font-size:12.6px;color:#047857}