/* ===================================================================
   BLINKSO ENERGY - public website
   Electric blue and amber 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{
  color-scheme:light;

  /* ---- brand ------------------------------------------------------
     Electric blue carries the brand; amber is the sun, used sparingly.
     The two gradients are the only place a brand colour is ever mixed,
     so a button, a mark and a chip can never drift apart. */
  --royal:#1D4ED8; --royal-600:#2563EB; --royal-700:#1E40AF;
  --royal-900:#172554;
  --royal-50:#EFF4FF; --royal-100:#DBE6FE; --royal-200:#BFD3FE;
  --gold:#F59E0B; --gold-600:#D97706; --gold-50:#FFFBEB; --gold-200:#FDE68A;
  --brand-grad:linear-gradient(135deg,#2E6BF0 0%,#1D4ED8 52%,#1B3FAE 100%);
  --sun-grad:linear-gradient(135deg,#FBBF24 0%,#F59E0B 58%,#D97706 100%);
  --brand-solid:#1D4ED8;          /* a flat blue that always takes white type */

  /* ---- ink and rules --------------------------------------------- */
  --ink:#0B1226; --ink-2:#37405C; --ink-3:#6B7392; --ink-4:#9AA1BA;
  --line:#E4E7F0; --line-2:#EFF1F7;

  /* ---- surfaces ---------------------------------------------------
     bg is the page, surface is anything raised off it. Every card,
     field and panel uses --surface, which is what lets the whole site
     turn dark by swapping this block and nothing else. */
  --bg:#FFFFFF; --bg-soft:#F7F8FC; --bg-warm:#FBFAF6;
  --surface:#FFFFFF; --surface-2:#FAFBFE; --surface-3:#F1F5FE;
  --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.9);
  --glass-line:rgba(255,255,255,.85);
  --on-brand:#FFFFFF;

  /* ---- depth ------------------------------------------------------
     Two shadows per card, never one: a tight contact shadow that says
     the card is touching the page, and a wide soft one that says how
     far above it the card sits. One shadow alone always reads as a
     sticker. */
  --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);
  --shadow-card:0 1px 2px rgba(11,18,38,.045),0 10px 24px -14px rgba(11,18,38,.22);
  --shadow-card-h:0 2px 6px rgba(11,18,38,.06),0 30px 56px -22px rgba(23,37,84,.34);
  --shadow-glass:0 34px 90px -34px rgba(23,37,84,.5),inset 0 1px 0 rgba(255,255,255,.92);
  --ring:0 0 0 3.5px rgba(29,78,216,.14);
  --mesh-1:rgba(29,78,216,.07); --mesh-2:rgba(245,158,11,.08);

  --radius:10px; --radius-lg:16px; --radius-xl:22px; --maxw:1240px;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Sora',var(--font);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
   DARK
   The same site after dark, not a second design. Every value below is a
   swap of a token the light theme already uses, so nothing downstream
   needs to know which theme is running.

   Two rules were worth the trouble: the page never goes to pure black
   (a solar site at #000 looks switched off, and pure black against
   white type buzzes), and the brand blue is LIFTED for text while
   buttons keep the saturated gradient - a mid-blue that is right on
   white is unreadable on navy, and the same blue on a button would lose
   its white label.
   ===================================================================== */
[data-theme="dark"]{
  color-scheme:dark;

  --royal:#6A9BFF; --royal-600:#5B8DEF; --royal-700:#84B0FF;
  --royal-900:#070B16;
  --royal-50:#141D33; --royal-100:#1E2A48; --royal-200:#2C3E68;
  --gold:#FBBF24; --gold-600:#FCD34D; --gold-50:#231C0C; --gold-200:#4C3B14;

  --ink:#EBEFFA; --ink-2:#BCC7E0; --ink-3:#8D99B8; --ink-4:#6C7896;
  --line:#232C46; --line-2:#1A2138;

  --bg:#080C18; --bg-soft:#0B1120; --bg-warm:#090E1B;
  --surface:#101728; --surface-2:#141C31; --surface-3:#18223B;
  --glass:rgba(10,15,28,.7); --glass-strong:rgba(10,15,28,.88);
  --glass-line:rgba(255,255,255,.08);

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 12px 38px rgba(0,0,0,.5);
  --shadow-lg:0 34px 80px rgba(0,0,0,.62);
  --shadow-card:0 1px 2px rgba(0,0,0,.45),0 12px 26px -16px rgba(0,0,0,.8);
  --shadow-card-h:0 2px 8px rgba(0,0,0,.5),0 34px 60px -26px rgba(0,0,0,.9);
  --shadow-glass:0 40px 100px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  --ring:0 0 0 3.5px rgba(106,155,255,.2);
  --mesh-1:rgba(70,120,255,.11); --mesh-2:rgba(245,158,11,.07);
}

*,*::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:#1D4ED81f}

/* --------------------------------------------------- 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:var(--glass);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
header.site.scrolled{border-bottom-color:var(--line);background:var(--glass-strong)}
.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:var(--surface);
  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:var(--surface)}
.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:var(--surface)}
/* 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:var(--surface);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:var(--surface);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(29,78,216,.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:var(--surface);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:var(--surface);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:var(--surface)}
.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:var(--surface);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:var(--surface);
  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:var(--surface);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:var(--surface);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:var(--surface)}
.calc-box input:focus,.calc-box select:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(29,78,216,.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:var(--surface);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:var(--surface);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:var(--surface);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:var(--surface)}
.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(29,78,216,.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:250;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(29,78,216,.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:var(--surface);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(29,78,216,.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:var(--surface);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}
}

/* ===================================================================
   Instant quotation (quote.php)
   The visitor is filling a form that ends in a real document, so the
   page shows him where he is and then shows him the paper itself.
   =================================================================== */
.q-steps{display:flex;gap:8px;flex-wrap:wrap;font-size:12.6px;color:var(--ink-3)}
.q-steps span{display:inline-flex;align-items:center;gap:7px;background:var(--royal-50);
  border:1px solid var(--royal-100);border-radius:999px;padding:6px 13px 6px 6px}
.q-steps b{width:20px;height:20px;border-radius:50%;background:var(--royal);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700}

.q-items{margin-top:8px}
.q-table{width:100%;border-collapse:collapse;font-size:14.4px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.q-table th,.q-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.q-table thead th{background:var(--bg-soft);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.q-table .num{text-align:right;white-space:nowrap}
.q-table tfoot td{background:var(--bg-soft);font-weight:600;border-bottom:none}
.q-table tfoot tr.grand td{font-size:16px;color:var(--royal);border-top:2px solid var(--royal-100)}
.q-table .small{font-size:12.4px}
@media (max-width:640px){
  .q-table thead{display:none}
  .q-table tbody tr{display:block;border-bottom:1px solid var(--line)}
  .q-table tbody td{display:flex;justify-content:space-between;gap:14px;border:none;padding:7px 12px}
  .q-table tbody td:first-child{padding-top:13px}
  .q-table tfoot tr{display:flex;align-items:center;justify-content:space-between}
  .q-table tfoot td{padding:9px 12px}
  .q-table tfoot td:first-child{flex:1}
}

/* ===================================================================
   THE PREMIUM LAYER
   ===================================================================
   Everything above this line is the site's structure and was already
   right. What follows is finish: the materials the structure is made
   of - glass, depth, gradient hairlines - the dark theme's few special
   cases, and the two pieces of furniture that came with it, the theme
   switch and the photograph lightbox.

   It is kept in one block, after everything, on purpose. A designer
   coming to this file can read the layout first and the finish second,
   and can delete this entire block to get a plainer site back without
   breaking a single layout rule.
   =================================================================== */

/* ---------------------------------------------------------- 1. basics */

/* Headings set to balance wrap far better than a hand-placed <br>, which
   is only ever right at one window width. */
h1,h2,h3{text-wrap:balance}
.sec-head p,.hero p.lead,.breadcrumbs p{text-wrap:pretty}

::selection{background:color-mix(in srgb,var(--royal) 22%,transparent);color:var(--ink)}

/* A visible focus ring for keyboard users, and none of the ugly one for
   mouse users - the two needs that :focus alone cannot tell apart. */
:focus-visible{outline:2.5px solid var(--royal);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline-offset:4px}

/* The scrollbar is part of the page on a long site like this one. */
*{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* A film of grain over the whole page. At 3% it is invisible as texture
   and very visible as the difference between "a web page" and "a
   printed thing" - it stops the big flat gradients from banding. Desktop
   only: a fixed full-screen layer is not worth the scroll cost on a
   phone, where nobody will see it anyway. */
@media (min-width:861px){
  body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.032;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  [data-theme="dark"] body::after{opacity:.05;mix-blend-mode:screen}
}

/* ------------------------------------------------- 2. header and rail */

header.site{backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:0;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
/* The line under the header fades in from nothing at both ends, so it
   reads as a shadow's edge rather than as a drawn rule. */
header.site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
  opacity:0;transition:opacity .3s}
header.site.scrolled::after{opacity:1}
header.site.scrolled{box-shadow:0 18px 40px -34px rgba(11,18,38,.6)}
.nav{transition:height .32s var(--ease)}
header.site.scrolled .nav{height:64px}
.menu a{transition:color .2s,background .2s}
.menu a:hover{background:var(--surface-3)}
[data-theme="dark"] .menu a:hover{background:rgba(255,255,255,.05)}

.brand-mark{background:var(--brand-grad);box-shadow:0 6px 16px -8px rgba(29,78,216,.7)}
.brand img{transition:transform .32s var(--ease)}
.brand:hover img{transform:scale(1.03)}

/* the light / dark switch, in the thin bar with the other page controls */
.theme-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:#C3CDE8;border-radius:999px;padding:3px 11px 3px 4px;
  font:inherit;font-size:12.4px;cursor:pointer;line-height:1;transition:background .2s,color .2s,border-color .2s}
.theme-btn:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.theme-btn .tb-ic{width:20px;height:20px;border-radius:50%;background:var(--sun-grad);display:grid;
  place-items:center;color:#3B2405;transition:background .3s,color .3s,transform .5s var(--ease)}
.theme-btn svg{width:12px;height:12px}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .tb-ic{background:linear-gradient(135deg,#5B8DEF,#1D4ED8);color:#fff;
  transform:rotate(-360deg)}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}

/* ------------------------------------------------------- 3. buttons */

.btn{border-radius:11px;letter-spacing:-.005em;
  transition:background .2s,border-color .2s,color .2s,transform .22s var(--ease),box-shadow .26s var(--ease)}
.btn-primary{background:var(--brand-grad);color:var(--on-brand);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 24px -14px rgba(29,78,216,.9)}
.btn-primary:hover{background:var(--brand-grad);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 18px 34px -16px rgba(29,78,216,.95)}
.btn-accent{background:var(--sun-grad);color:#3B2405;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px -14px rgba(217,119,6,.9)}
.btn-accent:hover{background:var(--sun-grad);color:#3B2405;transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 34px -16px rgba(217,119,6,.95)}
.btn-ghost{box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(11,18,38,.6)}
.btn-wa{background:linear-gradient(135deg,#26CB68,#12A54C);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -14px rgba(18,165,76,.9)}
.btn-wa:hover{background:linear-gradient(135deg,#26CB68,#12A54C);transform:translateY(-2px)}
.btn-lg{border-radius:13px}

/* -------------------------------------------- 4. cards, lifted off the page

   The hairline grid the cards used to sit in was honest but flat: every
   card was the same distance from the reader as the page itself. They
   are separate objects now, each with its own contact shadow, its own
   soft one, and a lit top edge - the three things that make a surface
   look like it is above another surface rather than drawn on it. */

.cards{background:transparent;border:0;border-radius:0;overflow:visible;gap:20px}
.card,.proj,.quote,.stat-band>div{position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
/* the lit top edge */
.card::after,.proj::after,.quote::after,.stat-band>div::after{content:"";position:absolute;
  left:14px;right:14px;top:0;height:1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--glass-line),transparent);pointer-events:none}
.card:hover,.quote:hover,.stat-band>div:hover{transform:translateY(-6px);
  box-shadow:var(--shadow-card-h);border-color:var(--royal-200);background:var(--surface)}
.proj:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-h);border-color:var(--royal-200)}
.card .ico{background:var(--royal-50);border-color:var(--royal-100);border-radius:12px}
.card:hover .ico{background:var(--brand-grad);border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -12px rgba(29,78,216,.85)}

.stat-band{background:transparent;border:0;border-radius:0;overflow:visible;gap:20px}
.stat-band>div{padding:26px 24px}

.proj{overflow:hidden}
.proj .ph{border-bottom:0}
.proj .ph img{transition:transform .7s var(--ease)}
.proj:hover .ph img{transform:scale(1.05)}
.proj .ph .kw{backdrop-filter:blur(10px);background:var(--glass-strong);box-shadow:var(--shadow-sm)}

.quote::before{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote .av{background:var(--brand-grad);color:#fff}

.price-tag{background:var(--gold-50);border-color:var(--gold-200);color:var(--gold-600)}

/* -------------------------------------------------- 5. the first screen

   The estimate panel is the one thing on the page a visitor is meant to
   touch within five seconds, so it is the one piece of real glass:
   blurred, saturated, lit along its top edge and floating well clear of
   the photograph behind it. */

.hero-card{background:var(--glass-strong);backdrop-filter:blur(26px) saturate(1.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);border-color:var(--glass-line);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-glass);padding:28px}
.mini-out{border-radius:13px;background:var(--line-2);border-color:var(--line)}
.mini-out div{background:var(--surface-3)}
.mini-out b{font-size:19px}
.trust span{border-radius:999px;background:var(--surface-3);border-color:var(--line)}

.hero h1 em::after{background:var(--sun-grad);opacity:.85;height:.09em;border-radius:99px}
.hero-stats div b{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
[data-theme="dark"] .hero-stats div b{background:linear-gradient(135deg,#8FB6FF,#5B8DEF);
  -webkit-background-clip:text;background-clip:text}

.chapters{border-top-color:var(--line)}
.chapters a{transition:background .25s,box-shadow .25s}
.chapters a:hover{box-shadow:inset 0 3px 0 var(--royal)}

/* --------------------------------------------- 6. light in the sections

   Two very soft coloured pools, one blue and one amber, behind the
   quieter sections. They do nothing you can name and everything to stop
   a long page reading as a stack of grey boxes. */
.sec.soft,.breadcrumbs,.sec.dark{position:relative;isolation:isolate}
.sec.soft::before,.breadcrumbs::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 420px at 8% -12%,var(--mesh-1),transparent 62%),
    radial-gradient(620px 380px at 94% 112%,var(--mesh-2),transparent 62%)}
.sec.soft>*,.breadcrumbs>*{position:relative}

.breadcrumbs{padding:74px 0 62px}
.breadcrumbs h1{letter-spacing:-.04em}

.sec-head .numeral{background:linear-gradient(180deg,var(--royal-200),transparent 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}
.kicker::before,.chapter::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}

/* ------------------------------------------------------ 7. the CTA band */
.cta-band{border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,#16224A 0%,#0F1A3C 55%,#1B2E63 100%);
  box-shadow:0 40px 90px -40px rgba(11,18,38,.8)}
.cta-band::after{background:var(--sun-grad);opacity:.22;filter:blur(8px)}
.cta-band h2{letter-spacing:-.04em}

.sec.dark{background:linear-gradient(160deg,#0D1631 0%,#111C3E 60%,#0A1129 100%)}
.sec.dark::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(700px 360px at 50% -10%,rgba(245,158,11,.14),transparent 62%)}

/* ------------------------------------------------------- 8. the footer */
footer.site{position:relative;background:linear-gradient(180deg,#0E1732 0%,#0A1129 100%)}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),rgba(29,78,216,.55),transparent)}
.foot-contact svg{color:var(--gold)}
.wa-float{background:linear-gradient(135deg,#26CB68,#12A54C);
  box-shadow:0 10px 30px rgba(18,165,76,.45);transition:transform .3s var(--ease),box-shadow .3s}
.wa-float:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 16px 40px rgba(18,165,76,.55)}

/* --------------------------------------------------------- 9. forms */
.field input,.field select,.field textarea,
.calc-box input,.calc-box select,.mini-calc input,.mini-calc select{border-radius:11px;
  transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus,
.calc-box input:focus,.calc-box select:focus,
.mini-calc input:focus,.mini-calc select:focus{border-color:var(--royal);box-shadow:var(--ring)}
.seg span{border-radius:11px}
.seg input:checked + span{border-color:var(--royal);background:var(--royal-50);color:var(--royal);
  box-shadow:var(--ring)}
.form-card,.calc-box,.result{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.result{background:linear-gradient(165deg,var(--royal-50),var(--surface) 78%)}
.res-grid{border-radius:13px}
.alert{border-radius:12px}
.q-steps span{background:var(--surface-3);border-color:var(--line)}
.q-steps b{background:var(--brand-grad)}
.q-table{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.q-table thead th{background:var(--surface-3)}
.q-table tfoot td{background:var(--surface-3)}

/* ==================================================================
   10. DARK: the handful of places a token swap cannot reach
   ================================================================== */

/* The hero wash is a white veil painted over a photograph so black type
   can be read across it. After dark the type is white, so the veil has
   to become the opposite - a deep navy one - or the headline sits on a
   bright sky and disappears. */
[data-theme="dark"] .hero{background:var(--bg-warm);border-bottom-color:var(--line)}
[data-theme="dark"] .hero-shot{opacity:.42;filter:saturate(.85) brightness(.85)}
[data-theme="dark"] .hero-wash{background:
  linear-gradient(104deg,rgba(8,12,24,.96) 0%,rgba(8,12,24,.9) 26%,rgba(8,12,24,.6) 44%,
                  rgba(8,12,24,.12) 62%,rgba(8,12,24,0) 78%),
  linear-gradient(to bottom,rgba(8,12,24,.5) 0%,rgba(8,12,24,0) 24%,
                  rgba(8,12,24,0) 68%,rgba(9,14,27,.9) 100%)}
@media (max-width:1024px){
  [data-theme="dark"] .hero-wash{background:linear-gradient(to bottom,rgba(8,12,24,.94) 0%,
    rgba(8,12,24,.9) 44%,rgba(8,12,24,.86) 74%,rgba(9,14,27,.94) 100%)}
}
[data-theme="dark"] .hero-ghost{color:#7FA6FF}
[data-theme="dark"] .hero-sky .grid-lines{background-image:linear-gradient(to right,rgba(122,160,255,.06) 1px,transparent 1px)}
[data-theme="dark"] .hero-sky .beam{background:linear-gradient(101deg,rgba(255,255,255,0) 42%,
  rgba(180,205,255,.14) 50%,rgba(255,255,255,0) 58%)}

/* Solid-blue chips carry white type. The lifted blue that is right for a
   link on navy is too pale to do that, so they keep the saturated one. */
[data-theme="dark"] .brand-mark,[data-theme="dark"] .cu-mark,
[data-theme="dark"] .q-steps b,[data-theme="dark"] .quote .av{background:var(--brand-grad);color:#fff}
[data-theme="dark"] #progBar{background:var(--gold)}
[data-theme="dark"] .card:hover .ico{color:#fff}
[data-theme="dark"] .proj .ph .kw{color:var(--royal-700)}
[data-theme="dark"] .pic,[data-theme="dark"] .proj .ph{background:var(--surface-2)}
[data-theme="dark"] .btn-ghost{background:var(--surface-2)}
[data-theme="dark"] .btn-accent{color:#291800}
[data-theme="dark"] .alert-bad{background:#2A1416;border-color:#5C2327;color:#FCA5A5}
[data-theme="dark"] .alert-ok{background:var(--royal-50);border-color:var(--royal-100);color:#BBD0FF}
[data-theme="dark"] .fmsg{color:#FCA5A5}
[data-theme="dark"] .field input.bad,[data-theme="dark"] .field select.bad,
[data-theme="dark"] .field textarea.bad,[data-theme="dark"] .calc-box input.bad{background:#231316;border-color:#7F1D1D}
[data-theme="dark"] .result{background:linear-gradient(165deg,var(--royal-50),var(--surface-2) 78%)}
[data-theme="dark"] ::selection{color:#fff}
/* the marquee and the ticker are white strips by design; after dark they
   are simply another surface */
[data-theme="dark"] .marquee,[data-theme="dark"] .ticker{background:var(--surface)}
[data-theme="dark"] .cta-band{background:linear-gradient(135deg,#131D3F 0%,#0C1531 55%,#16255180 100%);
  border-color:rgba(255,255,255,.07)}
[data-theme="dark"] .sec.dark{background:linear-gradient(160deg,#0A1129 0%,#0D1836 60%,#080D1F 100%)}
[data-theme="dark"] .logos span{color:var(--ink-4)}

/* ==================================================================
   11. The photograph lightbox, and the filter above it
   ================================================================== */
.filterbar{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:0 0 36px}
.filterbar button{font:inherit;font-size:13.6px;font-weight:600;cursor:pointer;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  box-shadow:var(--shadow-sm);transition:.22s var(--ease)}
.filterbar button:hover{border-color:var(--royal-200);color:var(--royal);transform:translateY(-2px)}
.filterbar button.on{background:var(--brand-grad);border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -12px rgba(29,78,216,.9)}
.filterbar button .n{opacity:.62;margin-left:6px;font-weight:500}
/* A card on its way out of the filter shrinks rather than vanishing, so
   the grid re-flows as a movement instead of a jump. */
.js .proj.is-out{display:none}
.js .proj.is-in{animation:filterIn .42s var(--ease) both}
@keyframes filterIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.proj .ph{cursor:zoom-in}
.proj .ph .zoom{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:linear-gradient(180deg,rgba(9,14,27,.1),rgba(9,14,27,.55));transition:opacity .3s}
.proj:hover .ph .zoom{opacity:1}
.proj .ph .zoom i{width:46px;height:46px;border-radius:50%;background:var(--glass-strong);
  backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--ink);
  box-shadow:var(--shadow);transform:scale(.86);transition:transform .34s var(--ease)}
.proj:hover .ph .zoom i{transform:none}
.proj .ph .zoom svg{width:19px;height:19px}

#lightbox{position:fixed;inset:0;z-index:300;display:none;place-items:center;
  background:rgba(6,9,18,.86);backdrop-filter:blur(18px) saturate(1.2);padding:28px}
#lightbox.open{display:grid}
#lightbox figure{margin:0;max-width:min(1100px,94vw);width:100%;
  animation:lbIn .4s var(--ease) both}
@keyframes lbIn{from{opacity:0;transform:scale(.97) translateY(12px)}to{opacity:1;transform:none}}
#lightbox img{width:100%;max-height:76vh;object-fit:contain;border-radius:var(--radius-lg);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
#lightbox figcaption{color:#DCE4F7;text-align:center;margin-top:18px;font-size:15px;line-height:1.55}
#lightbox figcaption b{display:block;font-family:var(--display);font-size:18px;color:#fff;margin-bottom:4px;
  letter-spacing:-.02em}
#lightbox .lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.22s;backdrop-filter:blur(8px)}
#lightbox .lb-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.06)}
#lightbox .lb-prev{left:22px}#lightbox .lb-next{right:22px}
#lightbox .lb-close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;display:grid;
  place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:.22s}
#lightbox .lb-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
#lightbox .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#9FB0D6;
  font-size:12.6px;letter-spacing:.18em;text-transform:uppercase}
body.lb-open{overflow:hidden}
@media (max-width:700px){
  #lightbox{padding:16px}
  #lightbox .lb-btn{width:42px;height:42px}
  #lightbox .lb-prev{left:8px}#lightbox .lb-next{right:8px}
}

/* ------------------------------------------------- 12. quieter motion */
@media (prefers-reduced-motion:reduce){
  .js .proj.is-in{animation:none}
  #lightbox figure{animation:none}
  .card:hover,.proj:hover,.quote:hover,.stat-band>div:hover,
  .btn-primary:hover,.btn-accent:hover,.btn-ghost:hover,.wa-float:hover{transform:none}
  .theme-btn .tb-ic{transition:none}
}

/* --------------------------------------------------- 13. small screens */
@media (max-width:860px){
  .cards,.stat-band{gap:14px}
  .card,.proj,.quote,.stat-band>div{border-radius:14px}
  .hero-card{padding:22px;border-radius:18px}
  .breadcrumbs{padding:52px 0 44px}
  .theme-btn span.lbl{display:none}
  .theme-btn{padding:3px 4px}
}

/* ---------------------------------------------------- 14. the theme swap
   A third of a second of colour transition, only while the theme is
   actually changing. Left on permanently it would put a lag behind every
   hover on the site; left off entirely the swap is a hard snap. */
.theming,.theming *,.theming *::before,.theming *::after{
  transition:background-color .34s var(--ease),border-color .34s var(--ease),
             color .34s var(--ease),box-shadow .34s var(--ease)!important}
@media (prefers-reduced-motion:reduce){
  .theming,.theming *,.theming *::before,.theming *::after{transition:none!important}
}

/* Without JavaScript the filter buttons do nothing, so the ?category=
   link keeps doing the filtering on the server instead. */
html:not(.js) .proj.srv-out{display:none}
html:not(.js) .filterbar{display:none}

/* ------------------------------------------- 15. photographs that arrive
   A picture that fades in with its card is a card fading in. A picture
   that wipes up from its own bottom edge reads as the photograph
   arriving, which is what the eye is waiting for on a page whose whole
   argument is "look at the work we have done".

   Only the clip is animated. The zoom on hover lives on transform, and
   two rules fighting over one property is how hover effects quietly
   stop working. */
.js .reveal .ph img,.js .pic.reveal img,.js .reveal .pic img{
  clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease) .1s}
.js .reveal.in .ph img,.js .pic.reveal.in img,.js .reveal.in .pic img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .js .reveal .ph img,.js .pic.reveal img,.js .reveal .pic img{clip-path:none;transition:none}
}

/* --------------------------------------------------------------------------
   THE QUOTATION SECTION ON THE HOME PAGE
   The script offsets in-page jumps, but a link arriving from another page -
   index.php#ch4 - has no script behind it, so the sections keep themselves
   clear of the sticky header. The panel beside the form is much shorter than
   the form, so on a wide screen it travels with the reader instead of leaving
   a column of empty white. */
section[id]{scroll-margin-top:96px}
@media (min-width:981px){
  .calc-wrap>.q-aside{position:sticky;top:96px}
}

/* --------------------------------------------------------------------------
   BRAND PACKAGES
   The visitor's first question is whose panels, not how much, so the cards are
   readable before they are clickable: name, what kind of package it is, roughly
   what it costs, and three things the office wants said about it. The radio
   itself is off-screen - the whole card is the control. */
.brandgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.brandcard{position:relative;display:block;cursor:pointer}
.brandcard>input{position:absolute;opacity:0;width:0;height:0}
.bc-in{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px 16px 14px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.brandcard:hover .bc-in{border-color:var(--royal-200);transform:translateY(-2px)}
.brandcard>input:focus-visible+.bc-in{outline:2px solid var(--royal);outline-offset:2px}
.brandcard>input:checked+.bc-in{border-color:var(--royal);background:var(--royal-50);
  box-shadow:0 0 0 3px rgba(29,78,216,.10)}
.bc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bc-name{font-weight:700;font-size:15.4px;color:var(--ink);line-height:1.25}
.bc-tier{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink-3)}
.bc-tier.t-premium{background:#FEF3C7;color:#92400E}
.bc-tier.t-economy{background:#DCFCE7;color:#166534}
.bc-tag{font-size:13.2px;color:var(--ink-3);line-height:1.45}
.bc-rate{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.bc-rate b{font-size:17px;color:var(--ink)}
.bc-rate span{font-size:12px;color:var(--ink-3)}
.bc-marks{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.bc-marks span{position:relative;padding-left:17px;font-size:12.6px;color:var(--ink-2);line-height:1.4}
.bc-marks span::before{content:"";position:absolute;left:1px;top:6px;width:6px;height:3.5px;
  border-left:1.8px solid var(--royal);border-bottom:1.8px solid var(--royal);
  transform:rotate(-45deg)}
.bc-pick{display:none;align-items:center;gap:6px;margin-top:auto;padding-top:9px;
  font-size:12.4px;font-weight:600;color:var(--royal)}
.bc-pick svg{width:14px;height:14px}
.brandcard>input:checked+.bc-in .bc-pick{display:flex}
@media (max-width:520px){ .brandgrid{grid-template-columns:1fr} }

/* the package named on the result screen and in the panel */
.brandline{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  background:var(--royal-50);border:1px solid var(--royal-200);font-size:13px;font-weight:600;color:var(--royal)}

/* the build credit in the footer bar - present, not shouting */
.foot-bottom .built-by{color:#8C9BC4}
.foot-bottom .built-by a{color:#C9D6F5;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(201,214,245,.35);padding-bottom:1px}
.foot-bottom .built-by a:hover{color:#fff;border-bottom-color:#fff}

/* --------------------------------------------------------------------------
   A CARD THAT LEADS WITH A PHOTOGRAPH
   The picture sits flush to the card's top corners rather than floating inside
   the padding - a photograph with a margin around it reads as an attachment,
   not as part of the card. */
.card.card-shot{padding-top:0;overflow:hidden}
.card-pic{margin:0 -28px 18px;aspect-ratio:4/3;overflow:hidden;background:var(--surface-3)}
.card-pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
a.card:hover .card-pic img{transform:scale(1.045)}
@media (max-width:640px){ .card-pic{margin-left:-20px;margin-right:-20px} }