/* ==========================================================================
   BUDS WINDOW CLEANING LLC
   One stylesheet. Every rule appears once. Rewritten clean — the previous
   version had nine appended passes fighting each other, which is why the
   plan numbers kept shrinking back.

   ORDER: tokens → base → layout → components → motion → responsive
   ========================================================================== */

/* --------------------------------------------------------------- TOKENS */
:root{
  --navy:#1F3864;
  --navy-deep:#132747;
  --navy-lift:#2A4C82;
  --blue:#2E86C1;         /* decorative: rules, borders, icon strokes */
  --blue-strong:#1C6FA8;  /* anything with text on or in it (AA safe)  */
  --blue-hover:#17567F;
  --sky:#7FD0FF;          /* bright accent on navy only               */
  --pale:#EAF2FA;
  --ink:#1A1A1A;
  --ink-soft:#3F4A5C;
  --muted:#5A6472;
  --muted-navy:#C6D9EE;
  --line:#DFE7F2;
  --white:#fff;

  --sh-1:0 1px 3px rgba(31,56,100,.08);
  --sh-2:0 6px 18px rgba(31,56,100,.13);
  --sh-3:0 14px 34px rgba(31,56,100,.18);
  --sh-4:0 24px 60px rgba(10,20,40,.4);

  --wrap:1160px;
  --r:12px;
  --ease:cubic-bezier(.2,.8,.3,1);

  /* Outfit and Inter come from Google Fonts. On a network or a browser that
     blocks them the site must still look deliberate, so the fallbacks name
     real faces rather than dropping to the browser default serif. */
  --display:Outfit,Poppins,"Segoe UI Variable Display","Segoe UI",-apple-system,
    BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
}

/* ----------------------------------------------------------------- BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);font-size:16.5px;line-height:1.65;
  letter-spacing:-.006em;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,4.3vw,3.6rem);font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(1.6rem,2.7vw,2.25rem);font-weight:700;letter-spacing:-.035em;color:var(--navy)}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
p{margin:0 0 1em;max-width:68ch}
a{color:var(--blue-strong)}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:56px 0}
.section--pale{background:var(--pale)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.3)}
.section--navy p{color:#DCE7F5}
.section--navy p strong{color:#fff}

.eyebrow{
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue-strong);margin:0 0 10px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);border-radius:2px;
  flex:0 0 26px;transition:width .35s var(--ease)}
.section--navy .eyebrow{color:var(--sky)}
.section--navy .eyebrow::before{background:var(--sky)}
.wrap:hover .eyebrow::before{width:46px}

.lede{font-size:1.12rem;line-height:1.58;letter-spacing:-.012em;color:var(--ink-soft);max-width:64ch}
.section--navy .lede{color:var(--muted-navy)}
.small{font-size:.9rem;color:var(--muted)}
.section--navy .small{color:var(--muted-navy)}

/* -------------------------------------------------------- SCROLL METER */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--sky));transition:width .1s linear}

/* -------------------------------------------------------------- TOPBAR */
.topbar{background:linear-gradient(90deg,var(--navy-deep),var(--navy) 52%,var(--blue-strong));
  color:#fff;font-size:.82rem;font-weight:600;font-family:var(--body)}
.topbar__in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-top:9px;padding-bottom:9px;
  font-size:.94rem}
.topbar a,.topbar > .wrap > span,.topbar__right{
  display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.93);text-decoration:none}
.topbar a:hover{color:#fff}
.topbar__right{margin-left:auto}
.tico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;flex:0 0 24px;background:rgba(255,255,255,.16);color:#fff;
  transition:background .16s ease,color .16s ease,transform .16s ease}
.tico svg{width:14px;height:14px}
.topbar a:hover .tico{background:#fff;color:var(--navy);transform:translateY(-1px) scale(1.06)}
.only-xs{display:none}

/* -------------------------------------------------------------- HEADER */
.header{position:sticky;top:0;z-index:50;background:rgba(31,56,100,.96);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
.header__in{display:flex;align-items:center;gap:20px;max-width:var(--wrap);margin:0 auto;padding:9px 24px}
.header__logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;flex:0 0 auto}
/* The badge carries ring text. Under ~54px that text turns to mush, and the
   badge's own navy edge disappears into the navy header — so it needs both
   size and a light plate behind it to read as an emblem instead of a blob. */
.header__logo img{height:58px;width:auto;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(127,208,255,.6),0 5px 16px rgba(0,0,0,.34);
  transition:box-shadow .2s ease,transform .3s var(--ease)}
.header__logo:hover img{transform:rotate(-6deg) scale(1.05);
  box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(127,208,255,1),0 8px 22px rgba(0,0,0,.4)}
.header__logo b{font-family:var(--display);font-size:1rem;font-weight:700;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:#DCE7F5;text-decoration:none;font-size:.95rem;font-weight:600;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .24s var(--ease)}
.nav a:not(.btn):hover{color:#fff}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:10px 18px}

/* ------------------------------------------------------------- BUTTONS */
.btn{display:inline-block;padding:14px 26px;border-radius:9px;font-family:var(--display);
  font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.btn--primary{background-color:var(--blue-strong);
  background-image:linear-gradient(135deg,var(--blue),var(--blue-strong));color:#fff;
  box-shadow:0 4px 14px rgba(28,111,168,.3)}
.btn--primary:hover{background-color:var(--blue-strong);
  background-image:linear-gradient(135deg,#3FA9E0,var(--blue-strong));
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,111,168,.45)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px);
  min-height:min(76vh,620px);align-items:stretch}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);opacity:.5}
.orb--1{width:460px;height:460px;left:-120px;top:-140px;
  background:radial-gradient(circle,var(--blue) 0%,rgba(46,134,193,0) 70%);animation:drift1 17s ease-in-out infinite}
.orb--2{width:380px;height:380px;left:34%;bottom:-170px;
  background:radial-gradient(circle,#3FA9E0 0%,rgba(63,169,224,0) 70%);animation:drift2 21s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(70px,60px) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-60px,-45px) scale(1.1)}}

.hero__text{position:relative;z-index:1;
  padding:66px 24px 66px max(24px,calc((100vw - var(--wrap))/2 + 24px))}
.hero h1{color:#fff;line-height:1.0;margin-bottom:.32em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero .glow{background:linear-gradient(100deg,var(--sky) 0%,#DCF0FF 45%,var(--sky) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:220% center}}
.hero p{color:#DCE7F5;font-size:clamp(1rem,1.25vw,1.12rem);max-width:38ch}
.insured{display:inline-flex;align-items:center;gap:9px;background:var(--blue-strong);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.05em;
  padding:9px 18px;border-radius:7px;margin-bottom:24px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 6px 18px rgba(28,111,168,.4)}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.hero__badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:7px 14px;border-radius:999px;font-size:.83rem;color:#fff;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.hero__badges span:hover{transform:translateY(-3px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__img{position:relative;z-index:1;min-height:100%;max-width:860px;width:100%;
  justify-self:end;overflow:hidden;box-shadow:inset 0 0 90px rgba(31,56,100,.35)}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.hero__img::before{content:"";position:absolute;inset:0 auto 0 0;width:90px;z-index:1;
  background:linear-gradient(to right,var(--navy),rgba(31,56,100,0))}

/* ------------------------------------------------------ BEFORE / AFTER */
.band{background:var(--navy)}
.band__img{max-width:1200px;margin:0 auto;overflow:hidden}
.band__img img{width:100%;max-height:460px;object-fit:cover;object-position:50% 55%;
  transition:transform .6s var(--ease)}
.band__img:hover img{transform:scale(1.015)}
.band__cap{background:var(--navy);color:#fff;text-align:center;padding:16px 24px;
  font-family:var(--display);font-weight:600;font-size:.97rem;margin:0}

/* -------------------------------------------------------- CONTACT STRIP */
.contactstrip{background:var(--navy);border-top:1px solid rgba(255,255,255,.12);padding:6px 0 30px}
.contactstrip__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.contactstrip a,.contactstrip .nolink{display:flex;align-items:center;gap:14px;padding:17px 20px;
  border-radius:var(--r);text-decoration:none;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .2s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease}
.contactstrip a:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);
  border-color:var(--blue);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.contactstrip b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;line-height:1.25}
.contactstrip em{display:block;font-style:normal;font-size:.82rem;color:var(--muted-navy);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}

/* ------------------------------------------------------------ ICON TILES */
.tile{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;flex:0 0 32px;background:rgba(46,134,193,.18);color:var(--sky);
  transition:background .16s ease,color .16s ease,transform .16s ease}
.tile svg{width:17px;height:17px;stroke:currentColor}
.tile--lg{width:44px;height:44px;flex:0 0 44px;border-radius:13px}
.tile--lg svg{width:23px;height:23px}
.clink{display:inline-flex;align-items:center;gap:11px;font-weight:600;
  transition:color .18s ease,transform .18s ease}
.clink:hover{transform:translateX(2px);color:var(--sky)}
.clink:hover .tile,.contactstrip a:hover .tile{background:var(--blue);color:#fff;transform:translateY(-1px) scale(1.05)}
.brk{overflow-wrap:break-word;word-break:normal;hyphens:none}
.svc{width:34px;height:34px;stroke:var(--blue);margin-bottom:14px;
  transition:transform .3s var(--ease),stroke .2s ease}
.card--icon:hover .svc{transform:translateY(-3px) scale(1.12) rotate(-4deg);stroke:var(--blue-strong)}

/* ----------------------------------------------------------- SECTION BAR */
.bar{background:var(--navy);position:relative}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--sky) 42%,rgba(46,134,193,.18) 100%)}
.bar span{display:flex;align-items:center;gap:12px;max-width:var(--wrap);margin:0 auto;
  padding:15px 24px;color:#fff;font-family:var(--display);font-weight:700;font-size:.9rem;
  letter-spacing:.09em;text-transform:uppercase}
.bar span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky);flex:0 0 8px}

/* --------------------------------------------------------------- CARDS */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s ease,border-color .22s ease}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-6px) scale(1.012);
  box-shadow:var(--sh-3);border-color:var(--blue)}
.card:hover::after,.card:focus-within::after{transform:scaleX(1)}
.card:hover::before{transform:translateX(120%)}
.card h3{transition:color .22s ease,transform .22s ease}
.card:hover h3{color:var(--blue-strong);transform:translateX(2px)}
.card p{font-size:.93rem;line-height:1.62;color:var(--muted);transition:color .22s ease}
.card:hover p{color:var(--ink-soft)}
.card p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ FREE PANEL */
.free{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-lift));
  color:#fff;border:1px solid rgba(127,208,255,.3);border-radius:14px;padding:32px 34px;margin:26px 0;
  box-shadow:var(--sh-3);transition:transform .22s var(--ease),box-shadow .22s ease}
.free:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(31,56,100,.3)}
.free::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,208,255,.28) 0%,transparent 70%)}
.free h3{color:#fff;font-size:1.5rem;margin-bottom:.35em;position:relative}
.free h3::before{content:"✓ ";color:var(--sky)}
.free p{color:#DCE7F5;margin:0;font-size:.97rem;position:relative}

/* --------------------------------------------------------------- TABLES */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--sh-1)}
.table th{background:linear-gradient(90deg,var(--navy),var(--navy-lift));color:#fff;text-align:left;
  padding:15px 18px;font-family:var(--display);font-size:.8rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.table td{padding:16px 18px;border-top:1px solid var(--line);font-size:.97rem;
  transition:background .18s ease,color .18s ease,padding-left .2s var(--ease)}
.table td:last-child{text-align:right;font-family:var(--display);font-weight:700;
  font-size:1.08rem;color:var(--navy);white-space:nowrap}
.table tbody tr:hover td{background:var(--pale)}
.table tbody tr:hover td:first-child{padding-left:26px;color:var(--navy);font-weight:600}
.table tr.hl td{background:var(--pale);color:var(--blue-strong);font-weight:600}
.table tr.hl td:last-child{color:var(--blue-strong)}
.table tbody tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin:34px 0}
.stat{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.3);border-radius:15px;padding:24px 20px 22px;
  text-align:center;position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-start;
  transition:transform .26s var(--ease),background .22s ease,border-color .22s ease}
/* a soft glow that wakes up on hover */
.stat::before{content:"";position:absolute;inset:-40%;z-index:-1;opacity:0;
  background:radial-gradient(circle at 50% 0%,rgba(127,208,255,.4),transparent 60%);
  transition:opacity .3s ease}
.stat:hover::before{opacity:1}
.stat:hover{transform:translateY(-7px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.stat b{display:block;
  font-family:var(--display);font-size:clamp(2.7rem,4.8vw,3.5rem);
  font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;
  text-shadow:0 3px 26px rgba(127,208,255,.42);
  white-space:nowrap;
  transition:transform .26s var(--ease)}
.stat:hover b{transform:scale(1.05)}
/* the unit rides small and high beside the number — never the same weight */
.stat b .u{font-style:normal;display:inline-block;
  font-size:.28em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sky);text-shadow:none;
  margin-left:.32em;vertical-align:.85em}
.stat span{display:block;margin-top:11px;font-size:.88rem;line-height:1.5;color:var(--muted-navy)}

/* -------------------------------------------------------- MEDIA COLUMNS */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center}
.shot{max-width:470px;width:100%;aspect-ratio:4/5;   /* the frame, not the photo, decides the height */
  border-radius:15px;overflow:hidden;box-shadow:var(--sh-2);cursor:zoom-in;
  position:relative;transition:transform .3s var(--ease),box-shadow .3s ease}
.shot:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.02)}
.card--flat{box-shadow:none;background:transparent;border-color:var(--line)}
.shot--contain{background:var(--navy-deep);display:flex;align-items:center;justify-content:center;aspect-ratio:auto}
.shot--contain img{max-height:520px;width:auto;height:auto;object-fit:contain}

/* ==========================================================================
   SERVICE PLANS — the numbers. ONE rule for the size. Do not add another.
   ========================================================================== */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:28px}

/* The whole card is a link. Anywhere you click, you land on the form with
   that plan already chosen. Nobody should have to hunt for a small blue
   "ask about this plan" to do the obvious thing. */
.plan{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0 18px 24px;text-align:center;box-shadow:var(--sh-1);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s ease,border-color .2s ease;
}
/* the sweep of light on hover */
.plan::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s var(--ease)}
.plan:hover::before,.plan:focus-visible::before{transform:translateX(120%)}
/* a wash of colour that rises from the bottom */
.plan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,134,193,0),rgba(46,134,193,.09));
  transition:height .32s var(--ease)}
.plan:hover::after,.plan:focus-visible::after{height:100%}
.plan:hover,.plan:focus-visible{transform:translateY(-10px);box-shadow:var(--sh-3);border-color:var(--blue)}
.plan:active{transform:translateY(-4px)}

/* ---- the ribbon. ONE definition. In the flow, so it cannot overlap. ---- */
.tag{
  display:block;margin:0 -18px 18px;padding:10px 8px;
  border-radius:15px 15px 0 0;text-align:center;white-space:nowrap;
  font-family:var(--display);font-size:.63rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);
  background:var(--blue-strong);            /* solid — 5.40:1 on white text */
  position:relative;overflow:hidden;
}
/* a slow shimmer travelling along the ribbon */
.tag::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);
  transform:translateX(-100%);animation:ribbon 3.6s ease-in-out infinite}
@keyframes ribbon{0%,62%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tag--fav{background:var(--navy)}           /* 11.6:1 on white text */
/* an invisible ribbon on the untagged cards so all five tops line up */
.tag--none{background:transparent;color:transparent;pointer-events:none;animation:none}
.tag--none::after{display:none}
.tag--none::before{content:"\00a0"}

.plan h3{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;transition:color .2s ease}
.plan:hover h3{color:var(--navy)}
.plan--best h3{color:var(--blue-strong)}

.plan b{
  display:block;margin:2px 0 0;
  font-family:var(--display);
  font-size:clamp(3.6rem,6.5vw,4.6rem);   /* the ONLY font-size for this */
  font-weight:800;line-height:.9;letter-spacing:-.055em;
  color:var(--navy);font-variant-numeric:tabular-nums;
  transition:transform .28s var(--ease),color .2s ease;
}
.plan--best b{color:var(--blue-strong)}
.plan:hover b{transform:scale(1.07)}
.plan b .num{font:inherit;color:inherit;display:inline}

.plan span.off{display:block;margin-top:8px;font-size:.83rem;font-weight:600;color:var(--muted)}

/* cadence line + the "best for" line under the number */
.plan .freq{display:block;margin-top:12px;font-family:var(--display);font-size:.95rem;
  font-weight:800;color:var(--navy);letter-spacing:-.01em}
.plan .why{display:block;margin-top:6px;font-size:.8rem;line-height:1.45;color:var(--ink-soft)}
.plan--best .freq{color:var(--blue-strong)}

/* the old inline link is now a pill that fills in on hover */
.plan em{
  display:inline-block;margin-top:auto;padding-top:18px;font-style:normal;
  font-size:.82rem;font-weight:800;font-family:var(--display);
  letter-spacing:.02em;color:var(--blue-strong);
  transition:color .18s ease,transform .18s var(--ease)}
.plan em::after{content:" →";transition:margin-left .22s var(--ease)}
.plan:hover em{color:var(--navy)}
.plan:hover em::after{margin-left:5px}

.plan--best{border:2px solid var(--blue);box-shadow:0 10px 34px rgba(46,134,193,.26);
  transform:scale(1.04);z-index:2}
.plan--best:hover{transform:translateY(-12px) scale(1.07);box-shadow:0 20px 50px rgba(46,134,193,.4)}
.plan--fav{border-color:var(--navy-lift);box-shadow:0 10px 34px rgba(31,56,100,.2)}
.plan--fav:hover{border-color:var(--blue);box-shadow:0 20px 50px rgba(31,56,100,.3)}
@media(max-width:420px){
  .tag{font-size:.55rem;letter-spacing:.06em;padding:9px 4px;margin-bottom:14px}
}

.planterm{margin-top:24px;font-size:.95rem;color:var(--ink-soft);max-width:70ch;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r);
  padding:15px 19px;box-shadow:var(--sh-1)}
.planterm strong{font-family:var(--display);color:var(--navy)}

/* ------------------------------------------------------------ TICK LISTS */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{display:flex;gap:11px;align-items:flex-start;padding:9px 4px;font-size:.96rem;
  border-radius:6px;transition:transform .18s ease,color .18s ease}
.ticks li:hover{transform:translateX(5px)}
.ticks svg{flex:0 0 20px;margin-top:3px}
.ticks--yes svg{color:var(--blue-strong)}
.ticks--yes li:hover{color:var(--blue-strong)}
.ticks--no svg{color:var(--muted)}

/* ---------------------------------------------------------------- STEPS */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.step{position:relative;padding-left:58px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(31,56,100,.25)}
.step h3{margin-bottom:.3em}
.step p{font-size:.94rem;color:var(--muted);margin:0}

/* ------------------------------------------------------------ AREA LIST */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;max-width:none}
.areas span{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:.9rem;font-weight:600;color:var(--ink-soft);
  transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.areas span:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue-strong);box-shadow:var(--sh-1)}

/* ----------------------------------------------------------------- FORM */
.form{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:36px;box-shadow:0 10px 34px rgba(31,56,100,.1)}
.field{margin-bottom:20px}
.field > label{display:block;font-family:var(--display);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.req{color:#B3261E}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select,.field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:1rem;color:var(--ink);
  border:1px solid #CBD8E8;border-radius:10px;background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease}
.field textarea{min-height:96px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
  outline:2px solid var(--blue);outline-offset:0}
.hint{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 18px;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px;margin-left:-8px;
  font-size:.95rem;cursor:pointer;border-radius:8px;transition:background .16s ease}
.check:hover{background:var(--pale)}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue-strong);flex:0 0 auto}
.err{display:none;color:#B3261E;font-size:.88rem;margin-top:6px;font-weight:600}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B3261E}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.terms{margin:24px 0 20px}
.terms label{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.terms input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue-strong);flex:0 0 auto}
.form .btn{width:100%;padding:17px;font-size:1.08rem}
.done{text-align:center;padding:48px 24px}
.done h3{font-size:1.6rem;margin-bottom:.4em}

/* ------------------------------------------------------------------ FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease}
.faq details:hover{border-color:var(--blue);box-shadow:var(--sh-1)}
.faq details[open]{box-shadow:var(--sh-1)}
.faq summary{padding:18px 22px;font-family:var(--display);font-weight:700;font-size:1rem;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  color:var(--navy);border-radius:var(--r);
  transition:background .16s ease,color .16s ease,padding-left .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue-strong);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{background:var(--pale);color:var(--blue-strong);padding-left:28px}
.faq p{padding:0 22px 20px;margin:0;color:var(--muted);font-size:.95rem}

/* --------------------------------------------------------------- FOOTER */
.footer{position:relative;background:var(--navy);color:#DCE7F5;padding:56px 0 28px;font-size:.95rem}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--sky),var(--blue))}
.footer a{color:#fff;font-weight:600;transition:opacity .16s ease}
.footer a:hover{opacity:.8}
.footer__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;align-items:start}
.footer img{height:82px;width:auto;margin-bottom:16px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(127,208,255,.5)}
.footer h4{font-family:var(--display);color:var(--sky);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:5px 0;display:flex;align-items:center}
.footer__bot{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;
  font-size:.85rem;color:var(--muted-navy);display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__bot span{display:flex;align-items:center;gap:8px}

/* --------------------------------------------------------- MOBILE CTA BAR */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px;
  background:rgba(31,56,100,.97);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.18)}
.bottombar a{flex:1;text-align:center;padding:14px;border-radius:9px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1rem}
.bottombar .call{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.bottombar .quote{background:linear-gradient(135deg,var(--blue),var(--blue-strong));color:#fff}

/* -------------------------------------------------------------- LIGHTBOX */
#lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,20,40,.92);padding:24px;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:min(94vw,1100px);max-height:90vh;width:auto;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
#lightbox button{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.8rem;line-height:1;
  width:46px;height:46px;border-radius:50%;cursor:pointer}
#lightbox button:hover{background:rgba(255,255,255,.24)}

/* ------------------------------------------------------------- DOC PAGE */
.doc{max-width:720px;margin:0 auto;padding:56px 24px}
.doc h2{font-size:1.1rem;margin:2em 0 .6em}
.doc h2:first-of-type{margin-top:1em}
.doc p{font-size:1rem;color:#2C3644;max-width:none}
.doc .meta{color:var(--muted);font-size:.92rem;margin-bottom:2em}

/* --------------------------------------------------------- INLINE LINKS */
p a:not(.btn),li a:not(.btn),.doc a:not(.btn),.modal__body a:not(.btn){position:relative;text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--blue),var(--blue));background-size:0% 2px;
  background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;
  transition:background-size .28s var(--ease),color .2s ease}
p a:not(.btn):hover,li a:not(.btn):hover,.doc a:not(.btn):hover,.modal__body a:not(.btn):hover{background-size:100% 2px;color:var(--blue-hover)}
.footer a:not(.btn),.topbar a:not(.btn),.nav a:not(.btn),.plan a:not(.btn),.clink{background-image:none}

/* ------------------------------------------------------------ MODAL/TERMS */
#termsModal{border:0;padding:0;border-radius:14px;max-width:760px;width:92vw;max-height:86vh;
  box-shadow:var(--sh-4)}
#termsModal::backdrop{background:rgba(10,20,40,.62)}
.modal{display:flex;flex-direction:column;max-height:86vh}
.modal__bar{background:var(--navy);color:#fff;padding:16px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:16px}
.modal__bar strong{font-family:var(--display);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase}
.modal__bar button{background:transparent;border:0;color:#fff;font-size:1.9rem;line-height:1;
  cursor:pointer;padding:0 4px;transition:opacity .15s ease}
.modal__bar button:hover{opacity:.7}
.modal__body{overflow-y:auto;padding:28px 30px 34px}
.modal__body h2{font-size:1.02rem;margin:1.9em 0 .5em;letter-spacing:-.01em}
.modal__body h2:first-of-type{margin-top:.6em}
.modal__body p{font-size:.95rem;color:#2C3644;max-width:none}
.modal__body .meta{color:var(--muted);font-size:.88rem}

/* -------------------------------------------------------- SCROLL REVEAL */
/* The hiding class is added by JS only — nothing is ever invisible without it */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-stagger > *{opacity:0;transform:translateY(18px)}
.reveal-stagger.in > *{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-stagger.in > *:nth-child(2){transition-delay:.06s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.30s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.36s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.42s}
.reveal-stagger.in > *:nth-child(9){transition-delay:.48s}

/* ============================================================== RESPONSIVE */
@media(max-width:900px){
  .nav a:not(.btn){display:none}
  .header__logo b{display:none}
  /* the wordmark is hidden here, so the badge is the only branding left —
     it gets bigger, not smaller */
  .header__logo img{height:50px}
  .plan--best{transform:none}
}
@media(max-width:860px){
  body{font-size:16px}
  .section{padding:56px 0}
  .section--tight{padding:40px 0}
  .hero{grid-template-columns:1fr}
  .hero__img{min-height:0;aspect-ratio:4/5;order:1;max-width:none;justify-self:stretch}
  /* order was -1, which put the photo above the text. The plans live in the
     text column now and they are meant to be the first thing on the page,
     so on a phone the text goes first and the photo follows it. */
  .hero__img::before{inset:auto 0 0 0;width:auto;height:70px;
    background:linear-gradient(to bottom,rgba(31,56,100,0),var(--navy))}
  .hero__text{padding:40px 24px 48px}
  .hero p{max-width:none}
  .orb{display:none}
  .contactstrip__in{grid-template-columns:1fr}
  .contactstrip em{max-width:30ch}
  .plans{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .free{padding:24px 22px}
  .free h3{font-size:1.2rem}
  .form{padding:24px}
  .bottombar.on{display:flex}
  body{padding-bottom:74px}
  .topbar__right{display:none}
  .hide-xs{display:none}
  .only-xs{display:inline}
}
@media(max-width:420px){
  .plans{grid-template-columns:1fr 1fr}
  .plan{padding:24px 12px 20px}
  .table th,.table td{padding:12px}
}

/* ------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger > *{opacity:1;transform:none}
  .card::before,.plan::before,.orb{display:none}
  .hero .glow{background:none;-webkit-text-fill-color:#DCF0FF;color:#DCF0FF}
  p a,li a{background-size:100% 2px}
}

/* ==========================================================================
   BEFORE / AFTER SPLIT
   ========================================================================== */
.ba{max-width:1200px;margin:0 auto;padding:0}
.ba__img{position:relative;overflow:hidden;cursor:zoom-in}
.ba__img img{width:100%;max-height:520px;object-fit:cover;object-position:50% 52%;
  transition:transform .6s var(--ease)}
.ba__img:hover img{transform:scale(1.015)}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--sky),var(--navy) 50%,var(--sky));
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 26px rgba(10,20,40,.55);z-index:2}
.ba__tag{position:absolute;bottom:20px;z-index:3;font-family:var(--display);
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:9px 18px;border-radius:999px;background:rgba(31,56,100,.94);
  border:1px solid rgba(255,255,255,.28);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.ba__tag--after{left:6%;background:linear-gradient(135deg,var(--blue),var(--blue-strong))}
.ba__tag--before{right:6%}
@media(max-width:560px){
  .ba__tag{bottom:12px;font-size:.68rem;padding:7px 13px;letter-spacing:.1em}
  .ba__tag--after{left:4%} .ba__tag--before{right:4%}
}

/* ==========================================================================
   QUOTE — the two-column, three-step version
   ========================================================================== */
.quote__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:40px;align-items:start}
.quote__side{position:sticky;top:96px;background:linear-gradient(150deg,var(--navy),var(--navy-lift));
  color:#fff;border-radius:16px;padding:36px 32px;box-shadow:var(--sh-3);
  border:1px solid rgba(127,208,255,.22)}
.quote__side h2{color:#fff;font-size:clamp(1.4rem,2.1vw,1.85rem);margin-bottom:.5em}
.quote__side > p{color:#DCE7F5;font-size:.97rem}
.quote__side .eyebrow{color:var(--sky)}
.quote__side .eyebrow::before{background:var(--sky)}

.qsteps{counter-reset:q;list-style:none;margin:26px 0 0;padding:0}
.qsteps li{position:relative;padding:0 0 20px 44px;border-left:2px solid rgba(127,208,255,.28);
  margin-left:14px}
.qsteps li:last-child{border-left-color:transparent;padding-bottom:4px}
.qsteps li::before{counter-increment:q;content:counter(q);position:absolute;left:-15px;top:-2px;
  width:28px;height:28px;border-radius:50%;background:var(--sky);color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center}
.qsteps b{display:block;font-family:var(--display);font-size:1rem;color:#fff;margin-bottom:2px}
.qsteps span{display:block;font-size:.88rem;color:var(--muted-navy);line-height:1.5}

.qtrust{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 20px}
.qtrust span{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:7px 13px;border-radius:999px}
.qtrust svg{width:15px;height:15px;color:var(--sky)}

.qcall{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:14px 16px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.qcall:hover{background:rgba(255,255,255,.16);border-color:var(--sky);transform:translateY(-2px)}
.qcall svg{width:22px;height:22px;color:var(--sky);flex:0 0 22px}
.qcall em{display:block;font-style:normal;font-size:.78rem;color:var(--muted-navy)}
.qcall b{display:block;font-family:var(--display);font-size:1.05rem}

.quote__main .form{max-width:none;margin:0}
.fs{border:0;margin:0 0 28px;padding:0}
.fs legend{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.05rem;
  font-weight:700;color:var(--navy);margin-bottom:18px;padding:0;width:100%;
  border-bottom:2px solid var(--line);padding-bottom:12px}
.fs legend i{display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;font-size:.85rem;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff}

/* the two short fields sit side by side on desktop */
.fs:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fs:first-of-type legend{grid-column:1/-1}
.fs:first-of-type .field:nth-of-type(4){grid-column:1/-1}   /* address full width */

.done__tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-strong));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(28,111,168,.4)}
.done__tick svg{width:32px;height:32px}

@media(max-width:960px){
  .quote__grid{grid-template-columns:1fr;gap:26px}
  .quote__side{position:static}
}
@media(max-width:560px){
  .fs:first-of-type{grid-template-columns:1fr}
  .quote__side{padding:26px 22px}
}


/* ==========================================================================
   OUTLINED SUBMIT — white with a blue edge, fills solid blue on hover
   ========================================================================== */
.btn--outline{
  background:#fff;color:var(--blue-strong);border:2px solid var(--blue-strong);
  box-shadow:0 2px 10px rgba(31,56,100,.07);
}
.btn--outline:hover,.btn--outline:focus-visible{
  background:var(--blue-strong);color:#fff;border-color:var(--blue-strong);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,111,168,.4);
}
.btn--outline:active{transform:translateY(0)}
.btn--outline[disabled]{opacity:.65;cursor:default;transform:none;
  background:#fff;color:var(--blue-strong)}
.btn--primary[disabled]{opacity:.68;cursor:default;transform:none;box-shadow:none}

/* ==========================================================================
   THE WHOLE HOUSE BUNDLE
   ========================================================================== */
.bundle{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:linear-gradient(135deg,#fff,#F5FAFF);
  border:2px solid var(--blue);border-radius:16px;
  margin:26px 0 0;padding:30px 32px;box-shadow:var(--sh-2);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s ease;
}
.bundle:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.bundle::after{content:"";position:absolute;right:-90px;bottom:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(46,134,193,.13) 0%,transparent 70%)}
.bundle__tag{
  position:absolute;top:0;left:32px;background:linear-gradient(135deg,var(--blue),var(--blue-strong));
  color:#fff;font-family:var(--display);font-size:.63rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 14px;border-radius:0 0 8px 8px;
}
.bundle__body{position:relative;z-index:1;padding-top:10px}
.bundle__body h3{font-size:1.4rem;margin-bottom:.45em}
.bundle__body h3 span{color:var(--blue-strong)}
.bundle__body p{font-size:.96rem;color:var(--ink-soft);margin-bottom:.8em}
.bundle__list{list-style:none;margin:0 0 14px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px}
.bundle__list li{position:relative;padding-left:26px;font-size:.93rem;color:var(--ink-soft);line-height:1.9}
.bundle__list li::before{content:"";position:absolute;left:0;top:.62em;width:15px;height:8px;
  border-left:2.5px solid var(--blue-strong);border-bottom:2.5px solid var(--blue-strong);
  transform:rotate(-45deg)}
.bundle__note{font-size:.86rem !important;color:var(--muted) !important;margin:0 !important}
.bundle__num{position:relative;z-index:1;text-align:center;flex:0 0 auto;padding-left:8px}
.bundle__num b{display:block;font-family:var(--display);font-size:clamp(3.4rem,6vw,4.6rem);
  font-weight:800;line-height:.88;letter-spacing:-.055em;color:var(--blue-strong)}
.bundle__num b em{font-style:normal;font-size:.5em;letter-spacing:-.02em}
.bundle__num span{display:block;margin-top:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .bundle{grid-template-columns:1fr;padding:26px 22px;gap:14px}
  .bundle__num{text-align:left;padding-left:0;order:-1}
  .bundle__num b{font-size:3.2rem}
  .bundle__body h3{font-size:1.18rem}
}

/* the bundle option stands out in the quote form */
.check--hero{background:linear-gradient(135deg,#F2F9FF,#E7F3FC);border:1.5px solid var(--blue);
  border-radius:10px;padding:12px 14px;margin:0 0 10px;grid-column:1/-1}
.check--hero:hover{background:linear-gradient(135deg,#E7F3FC,#DBEDFA)}
.check--hero b{font-family:var(--display);color:var(--navy)}


/* ==========================================================================
   v2 POLISH — every selector below is NEW. Nothing above is redefined.
   ========================================================================== */

/* ---- service cards that actually go somewhere ---- */
.card--go{cursor:pointer;text-decoration:none;color:inherit;display:block;padding-bottom:52px;
  position:relative;isolation:isolate;transform-style:preserve-3d;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .2s ease}
.card--go:hover,.card--go:focus-visible{border-color:var(--blue);box-shadow:var(--sh-3)}
.card--go .addbar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:block;padding:11px 18px;
  font-family:var(--display);font-size:.73rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;text-align:center;
  color:#fff;background:var(--blue-strong);
  /* always visible — you should not have to hover to find out a card does
     something. It just gets brighter and the arrow moves when you point at it. */
  background:var(--navy);transition:background .22s ease,letter-spacing .22s ease;
}
.card--go .addbar__t::after{content:"  \2192";display:inline-block;
  transition:transform .22s var(--ease)}
.card--go:hover .addbar__t::after{transform:translateX(4px)}
.card--go:hover .addbar,.card--go:focus-visible .addbar{
  background:var(--blue-strong);letter-spacing:.13em}
.card--go.picked{border-color:var(--blue);background:var(--pale)}
.card--go.picked .addbar{background:#15803D}
.card--go.picked .addbar__t::after{content:"  \2713"}

/* ---- glare that follows the cursor across a card ---- */
.glare::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(46,134,193,.16),transparent 62%)}
.glare:hover::before{opacity:1}

/* ---- buttons: a shine that sweeps, and a ripple on click ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn--primary:hover::before{transform:translateX(120%)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.5);animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* ---- nav knows where you are ---- */
.nav a.here{color:#fff}
.nav a.here::after{transform:scaleX(1)!important;transform-origin:left!important;
  background:var(--sky)!important}

/* ---- back to top ---- */
#totop{position:fixed;right:18px;bottom:86px;z-index:60;width:46px;height:46px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--navy);color:#fff;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease,transform .25s var(--ease),background .18s ease}
#totop.on{opacity:1;pointer-events:auto;transform:none}
#totop:hover{background:var(--blue-strong);transform:translateY(-3px)}
#totop svg{width:20px;height:20px}
@media(min-width:861px){#totop{bottom:24px}}

/* ---- headings get a gradient on the accent word ---- */
.gr{background:linear-gradient(100deg,var(--blue-strong),var(--navy) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.section--navy .gr{background:linear-gradient(100deg,var(--sky),#fff 65%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- a quiet moving grid behind the hero ---- */
.hero__text::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.32;
  background-image:linear-gradient(rgba(127,208,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,208,255,.14) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent);
  animation:gridpan 26s linear infinite}
@keyframes gridpan{to{background-position:46px 46px,46px 46px}}

/* ---- the form flashes when something gets added from a card ---- */
@keyframes pulseIn{0%{box-shadow:0 0 0 0 rgba(46,134,193,.5)}
  100%{box-shadow:0 0 0 16px rgba(46,134,193,0)}}
.flash{animation:pulseIn .7s ease-out}

@media(prefers-reduced-motion:reduce){
  .tag::after,.hero__text::after{animation:none}
  *{scroll-behavior:auto}
}



/* ---- section headings draw their underline as they arrive ---- */
.section h2{position:relative;display:inline-block;padding-bottom:9px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .1s}
.section h2.drawn::after{transform:scaleX(1)}
.section--navy h2::after{background:linear-gradient(90deg,var(--sky),#fff)}

/* ---- navy sections get depth instead of flat colour ---- */
.section--navy{position:relative;overflow:hidden;isolation:isolate}
.section--navy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(700px 380px at 12% -10%,rgba(46,134,193,.5),transparent 62%),
    radial-gradient(560px 420px at 92% 110%,rgba(127,208,255,.24),transparent 62%)}

/* ---- the mobile bottom bar and back-to-top must never stack ---- */
@media(max-width:860px){#totop{bottom:88px}}




/* ==========================================================================
   THE ORBIT — real elements, not pseudo-elements. .plan::before is already
   the shine sweep and .plan::after is already the colour wash; reusing
   either is what made the last two bugs. Nothing here can collide.

   Only ONE property animates (transform), on an element that never changes
   size, so the browser hands it to the GPU and it runs perfectly smooth
   instead of repainting a conic gradient sixty times a second.
   ========================================================================== */
.plan--glow{border:0;background:transparent;overflow:hidden;isolation:isolate}
.plan--glow .orbit{
  position:absolute;top:50%;left:50%;
  width:230%;aspect-ratio:1;                 /* square, so rotation never clips */
  transform:translate(-50%,-50%) rotate(0deg);
  z-index:0;pointer-events:none;
  animation:spin 5.2s linear infinite;
  will-change:transform;backface-visibility:hidden;
}
.plan--glow .face{        /* the white face — the rim you see is what it leaves */
  position:absolute;inset:3px;z-index:1;pointer-events:none;
  background:#fff;border-radius:13px;
}
.plan--glow>:not(.orbit):not(.face){position:relative;z-index:2}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* blue for the best value card.
   Every degree carries colour, so the rim is lit the whole way round — the
   bright arc just travels along it. The old version was transparent for 220
   of 360 degrees, which is why it looked like the glow had gone. */
.plan--best .orbit{background:conic-gradient(from 0deg,
  #1C6FA8 0deg,
  #2E86C1 30deg,
  #5FC0F5 55deg,
  #BFE9FF 72deg,
  #FFFFFF 82deg,
  #BFE9FF 92deg,
  #5FC0F5 110deg,
  #2E86C1 145deg,
  #1C6FA8 200deg,
  #17567F 260deg,
  #1C6FA8 320deg,
  #1C6FA8 360deg)}

/* diamond-silver for the customer favourite. Slower, so the two cards never
   fall into step and start looking mechanical. Cool greys with a white
   flare — real silver is never one flat tone. */
.plan--fav .orbit{animation-duration:7.4s;background:conic-gradient(from 0deg,
  #97A9BD 0deg,
  #C3D1DF 26deg,
  #E9F0F7 48deg,
  #FFFFFF 62deg,
  #FDFEFF 70deg,
  #DDE7F0 84deg,
  #A8B9CB 110deg,
  #8496AB 150deg,
  #9FB0C4 200deg,
  #C8D5E2 250deg,
  #A3B4C7 300deg,
  #97A9BD 360deg)}
/* silver on white needs a hairline or the rim dissolves into the page */
.plan--fav .face{box-shadow:0 0 0 1px rgba(31,56,100,.10) inset}

.plan--glow:hover .orbit{animation-duration:2.2s}
@media(prefers-reduced-motion:reduce){.plan--glow .orbit{animation:none}}


/* ---- a CTA that carries weight instead of one small lonely button ---- */
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn--lg{padding:16px 30px;font-size:1.05rem}
/* .btn--outline already exists above — not redefining it. */


/* ---- a solid secondary button. The outlined one read as an empty box. ---- */
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-lift);border-color:var(--navy-lift);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,56,100,.36)}

/* ---- how the pricing stacks ---- */
.maths{display:grid;gap:10px;margin:26px 0 22px}
.maths__row{display:grid;grid-template-columns:150px 92px 1fr;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:11px;padding:13px 17px;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s ease}
.maths__row:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.maths__l{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1rem}
.maths__v{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue-strong);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.maths__n{font-size:.92rem;color:var(--muted)}
.maths__row--sum{border-left-color:#15803D;background:#F2FBF5}
.maths__row--sum .maths__v{color:#15803D}
@media(max-width:620px){
  .maths__row{grid-template-columns:1fr auto;gap:4px 12px}
  .maths__n{grid-column:1/-1}
}

/* ---- the worked example ---- */
.worked{background:var(--navy);color:#fff;border-radius:16px;padding:26px 26px 22px;
  box-shadow:var(--sh-3);max-width:560px}
.worked__t{font-family:var(--display);font-size:1.06rem;font-weight:700;margin:0 0 14px;color:#fff}
.worked__t b{color:var(--sky)}
.worked__l{list-style:none;margin:0;padding:0}
.worked__l li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.97rem;color:#DCE7F5}
.worked__l li b{font-family:var(--display);font-size:1.15rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.worked__sub{border-bottom-width:2px!important;border-bottom-color:rgba(255,255,255,.3)!important}
.worked__off b{color:#7FF0B4!important}
.worked__tot{border-bottom:0!important;padding-top:14px!important}
.worked__tot span{font-family:var(--display);font-weight:700;color:#fff;font-size:1.05rem}
.worked__tot b{font-size:1.9rem!important;color:var(--sky)!important;letter-spacing:-.035em}
.worked__f{margin:16px 0 0;font-size:.83rem;line-height:1.55;color:var(--muted-navy)}
.worked__f b{color:#fff}

/* ==========================================================================
   THE PLAN PICKER IN THE QUOTE FORM
   Radios that look and behave like the plan cards higher up the page, so
   the choice is visible instead of hidden inside a dropdown.
   ========================================================================== */
.planpick{display:grid;gap:10px;margin-top:10px}
@media(min-width:760px){.planpick{grid-template-columns:1fr 1fr}}

.pp{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.pp__in{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;border:2px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease),box-shadow .24s var(--ease),
             transform .24s var(--ease),background .2s ease;
}
.pp:hover .pp__in{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-2)}
.pp input:focus-visible+.pp__in{outline:3px solid var(--blue);outline-offset:2px}

.pp__pct{
  flex:0 0 auto;min-width:60px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;
  color:var(--blue-strong);font-variant-numeric:tabular-nums;line-height:1;
  transition:transform .28s var(--ease),color .2s ease;
}
.pp__pct em{font-style:normal;font-size:.8rem;font-weight:800;margin-left:1px;vertical-align:top}
.pp__pct--none{color:var(--muted);font-size:1.15rem}
.pp__txt{display:block;min-width:0}
.pp__txt b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;
  color:var(--navy);letter-spacing:-.01em}
.pp__txt i{display:block;font-style:normal;margin-top:2px;font-size:.82rem;
  line-height:1.4;color:var(--muted)}

/* the chosen one lights up and stays lit */
.pp input:checked+.pp__in{
  border-color:var(--blue-strong);background:linear-gradient(180deg,#fff,var(--pale));
  box-shadow:0 10px 30px rgba(28,111,168,.24);transform:translateY(-2px);
  animation:ppPop .34s var(--ease);
}
.pp input:checked+.pp__in .pp__pct{transform:scale(1.14);color:var(--blue-strong)}
.pp input:checked+.pp__in .pp__txt i{color:var(--ink-soft)}
@keyframes ppPop{
  0%{transform:translateY(-2px) scale(1)}
  45%{transform:translateY(-4px) scale(1.022)}
  100%{transform:translateY(-2px) scale(1)}
}

/* a tick that draws itself in on the selected card */
.pp__in::after{
  content:"";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
  background:var(--blue-strong);opacity:0;transform:scale(.4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>");
  background-size:16px 16px;background-repeat:no-repeat;background-position:center;
  transition:opacity .2s ease,transform .3s var(--ease);
}
.pp input:checked+.pp__in::after{opacity:1;transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .pp__in,.pp__pct,.pp__in::after{transition:none;animation:none}
}

/* radios laid out in a row rather than a grid */
.checks--row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* the second, explanatory lede under a section heading */
.lede--sub{margin-top:12px;font-size:1rem;color:var(--muted)}

/* ==========================================================================
   SERVICE PLAN SIGNATURE — plans only, never a one-off
   ========================================================================== */
.sign{
  margin:22px 0 4px;padding:20px;border-radius:var(--r);
  border:2px solid var(--blue);background:linear-gradient(180deg,#fff,var(--pale));
  box-shadow:0 10px 30px rgba(28,111,168,.16);
  opacity:0;transform:translateY(-8px);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.sign.on{opacity:1;transform:none}
.sign__head{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.sign__seal{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue-strong);color:#fff}
.sign__seal svg{width:20px;height:20px}
.sign__head b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--navy)}
.sign__head i{display:block;font-style:normal;margin-top:3px;font-size:.85rem;color:var(--muted)}
.sign__body{font-size:.92rem;line-height:1.62;color:var(--ink-soft);margin:0 0 16px}
.sign__body strong{font-family:var(--display);color:var(--navy)}

.sigwrap{position:relative;border:2px dashed var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden;transition:border-color .2s ease}
.sigwrap:hover{border-color:var(--blue)}
.sigpad{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.sigline{position:absolute;left:8%;right:8%;bottom:34px;height:1px;background:var(--line);
  pointer-events:none}
.sighint{position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none;
  font-size:.82rem;color:var(--muted);transition:opacity .2s ease}
.sighint.gone{opacity:0}
.sigbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}
.btn--tiny{width:auto!important;padding:7px 14px!important;font-size:.8rem!important;border-radius:7px;
  background:#fff;background-image:none;color:var(--blue-strong);border:2px solid var(--line);
  box-shadow:none;flex:0 0 auto}
.btn--tiny:hover{border-color:var(--blue-strong);background:var(--pale)}
.invalid .sigwrap{border-color:#C0392B}

/* ==========================================================================
   THE 24-HOUR PROMISE UNDER THE SUBMIT BUTTON
   ========================================================================== */
.guarantee{display:flex;align-items:flex-start;gap:11px;margin:16px 0 0;
  padding:13px 15px;border-radius:var(--r);background:var(--pale);
  border-left:4px solid var(--blue-strong);font-size:.9rem;line-height:1.55;
  color:var(--ink-soft)}
.guarantee svg{flex:0 0 auto;width:20px;height:20px;color:var(--blue-strong);margin-top:1px}
.guarantee b{font-family:var(--display);color:var(--navy)}

/* ==========================================================================
   REFERRALS + GOOGLE REVIEW
   ========================================================================== */
.is-hidden{display:none!important}

.reflist{list-style:none;margin:22px 0 0;padding:0;max-width:460px}
.reflist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.reflist li b{font-family:var(--display);font-size:1.02rem;font-weight:700;color:#fff}
.reflist li span{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--sky);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.refcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:26px;box-shadow:var(--sh-4)}
.refcard h3{font-family:var(--display);font-size:1.32rem;line-height:1.25;color:#fff;margin:6px 0 12px}
.refcard p{color:#DCE7F5;font-size:.96rem;line-height:1.6}
.refcard .small{color:var(--muted-navy);margin-top:14px}

/* the Google review button — Google's own gold stars, our own shape */
.btn--review{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  background-color:#fff;background-image:none;color:var(--navy);
  border:2px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.btn--review:hover{background-color:#fff;color:var(--blue-hover);
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.36)}
.gstars{color:#F4B400;letter-spacing:1px;font-size:1.02rem;line-height:1}

@media(max-width:860px){
  .refcard{margin-top:22px}
}

/* ==========================================================================
   "WHAT CHANGED" NOTE AT THE TOP OF A DOCUMENT PAGE
   ========================================================================== */
.docnote{margin:0 0 34px;padding:20px 22px;border-radius:var(--r);
  background:var(--pale);border-left:4px solid var(--blue-strong);box-shadow:var(--sh-1)}
.docnote b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--navy);
  margin-bottom:10px}
.docnote ul{margin:0;padding-left:20px}
.docnote li{margin:0 0 8px;font-size:.93rem;line-height:1.6;color:var(--ink-soft)}
.docnote li strong{color:var(--navy)}
.docnote .small{margin:12px 0 0;color:var(--muted)}

/* ==========================================================================
   THE SHAREABLE REFERRAL CARD
   ========================================================================== */
.sharegrid{display:grid;gap:30px;align-items:center;margin-top:26px}
@media(min-width:820px){.sharegrid{grid-template-columns:minmax(0,340px) 1fr;gap:44px}}

.cardwrap{perspective:1200px}
.rcard{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--navy),var(--navy-deep));
  border-radius:20px;padding:26px 24px 22px;color:#fff;
  box-shadow:0 22px 54px rgba(10,20,40,.34);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--blue),var(--sky))}
.cardwrap:hover .rcard{transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 30px 70px rgba(10,20,40,.46)}
.rcard__glow{position:absolute;inset:-40% -20% auto;height:220px;z-index:-1;
  background:radial-gradient(closest-side,rgba(127,208,255,.4),transparent);
  filter:blur(10px)}
.rcard__top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.rcard__logo{width:56px;height:56px;border-radius:50%;background:#fff;flex:0 0 auto}
.rcard__top b{display:block;font-family:var(--display);font-size:1.02rem;color:#fff}
.rcard__top i{display:block;font-style:normal;font-size:.8rem;color:var(--sky);margin-top:1px}
.rcard__hook{font-family:var(--display);font-size:1.42rem;line-height:1.25;
  font-weight:800;margin:0 0 10px;color:#fff;letter-spacing:-.02em}
.rcard__hook strong{color:var(--sky)}
.rcard__body{font-size:.88rem;line-height:1.55;color:#DCE7F5;margin:0 0 18px}
.rcard__foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.rcard__url{font-size:.84rem;color:var(--muted-navy)}
.rcard__tel{font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;
  white-space:nowrap}

.sharecol{min-width:0}
.sharebtn{display:inline-flex;align-items:center;gap:11px}
.sharebtn svg{width:20px;height:20px}
.sharenote{margin:12px 0 0;font-size:.86rem;color:var(--muted);min-height:1.3em}
.sharealt{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sharealt .btn{padding:11px 20px;font-size:.9rem}

@media(prefers-reduced-motion:reduce){
  .rcard,.cardwrap:hover .rcard{transition:none;transform:none}
}

/* ==========================================================================
   A SMALL TABLE INSIDE A DOCUMENT PAGE
   ========================================================================== */
.termtable{width:100%;max-width:420px;border-collapse:collapse;margin:14px 0 18px;
  font-size:.95rem}
.termtable th{text-align:left;padding:9px 12px;background:var(--pale);
  font-family:var(--display);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--blue)}
.termtable td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.termtable td:last-child{font-family:var(--display);font-weight:800;color:var(--navy);
  text-align:center;font-variant-numeric:tabular-nums}
/* how many cleans the plan actually buys, on the plan card */
.plan .cnt{display:block;margin-top:3px;font-size:.76rem;font-weight:700;
  letter-spacing:.02em;color:var(--blue-strong)}
.plan--best .cnt{color:var(--blue-strong)}

/* ==========================================================================
   THE WAY IN TO THE DOOR SIGN-UP
   The © in the footer. Looks exactly like a copyright symbol, because it is
   one — customers have no reason to click it, and the crew know it is there.
   Deliberately not hidden: a hidden link that only works if you know a URL is
   worse, because it gets forgotten and then somebody is typing a path into a
   phone on a driveway.
   ========================================================================== */
.footer a.crew{color:inherit;text-decoration:none;cursor:pointer;
  padding:2px 4px;margin:-2px -4px;border-radius:4px;transition:background .18s ease}
.footer a.crew:hover{background:rgba(255,255,255,.14);opacity:1}

/* ==========================================================================
   HOLIDAY LIGHTS
   The promo on the front page and everything on lights.html. Same navy, same
   type, same buttons as the rest of the site — the only new ingredient is the
   bulbs themselves, which are drawn by script (hangLights / houseLights).
   ========================================================================== */
.hl-night{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse at 50% -10%,#1d3c6e 0%,var(--navy-deep) 55%,#0b1830 100%)}
.hl-night h1,.hl-night h2,.hl-night h3{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.hl-night p{color:#DCE7F5}
.hl-night .eyebrow{color:var(--sky)}
.hl-night .eyebrow::before{background:var(--sky)}
.hl-night .lede{color:var(--muted-navy)}

/* the string of bulbs along the top of a section */
.hl-strand{position:absolute;left:0;right:0;top:0;height:84px;pointer-events:none;z-index:1}
.hl-strand svg,.hl-house svg{display:block;width:100%;height:100%;overflow:visible}
.hl-wire{fill:none;stroke:#1b2a1d;stroke-width:2.2}
.hl-sock{fill:#223326}
.hl-bulb{fill:var(--c)}
.hl-glow{fill:var(--c);opacity:.55;filter:blur(7px)}
.hl-b{animation:hl-tw 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes hl-tw{0%,100%{opacity:1}50%{opacity:.58}}
.hl-chase .hl-b{animation:hl-chase 1.6s linear infinite;animation-delay:var(--q,0s)}
@keyframes hl-chase{0%,100%{opacity:.25}12%{opacity:1}40%{opacity:.25}}

/* front page promo */
.hl-promo{padding:128px 0 84px}
.hl-promo__in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hl-ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.hl-ticks li{display:flex;gap:10px;align-items:flex-start;color:#DCE7F5;font-size:1rem}
.hl-ticks li::before{content:"";flex:0 0 10px;height:10px;margin-top:7px;border-radius:50%;
  background:#FFC24B;box-shadow:0 0 10px 2px rgba(255,194,75,.7)}
.hl-deal{background:rgba(255,255,255,.06);border:1px solid rgba(127,208,255,.28);
  border-radius:16px;padding:26px 26px 24px;box-shadow:var(--sh-4);backdrop-filter:blur(4px)}
.hl-deal__tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:#1a1a1a;background:#FFC24B;
  padding:5px 10px;border-radius:6px}
.hl-deal__big{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;margin:14px 0 6px;color:#fff;letter-spacing:-.03em}
.hl-deal__big small{font-size:.9rem;font-weight:600;color:var(--muted-navy);letter-spacing:0}
.hl-deal p{margin:0 0 18px;font-size:.95rem}
.hl-deal .btn{display:block;text-align:center;margin-top:10px}
.hl-count{font-family:var(--display);font-weight:700;color:#FFC24B}

/* lights.html hero */
.hl-hero{padding:120px 0 40px}
.hl-hero__in{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.hl-house{position:relative;aspect-ratio:800/380;width:100%}
.hl-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hl-mode{font:600 .85rem/1 var(--body);color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease}
.hl-mode:hover{background:rgba(255,255,255,.16)}
.hl-mode[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.hl-mode i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:-1px;background:var(--dot)}
.hl-phone{font-size:.82rem;color:var(--muted-navy);margin-top:10px}

/* option cards */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:26px}
.hl-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:2px solid var(--line);border-radius:var(--r);padding:22px 20px 18px;box-shadow:var(--sh-1);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.hl-card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-2px)}
.hl-card.on{border-color:var(--blue-strong);box-shadow:0 0 0 4px rgba(46,134,193,.18),var(--sh-2)}
.hl-card h3{font-size:1.1rem;color:var(--navy);margin:0 0 6px}
.hl-card p{font-size:.9rem;color:var(--muted);margin:0 0 14px;flex:1}
.hl-card__badge{position:absolute;top:-11px;left:18px;font:800 .68rem/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;background:var(--blue-strong);color:#fff;
  padding:6px 9px;border-radius:6px}
.hl-card__kind{font:700 .7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-strong);margin-bottom:8px}
.hl-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hl-price b{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl-price s{color:var(--muted);font-size:.95rem}
.hl-price span{font-size:.82rem;color:var(--muted)}
.hl-pick{width:100%;padding:11px 14px;border-radius:9px;border:2px solid var(--blue-strong);
  background:#fff;color:var(--blue-strong);font:700 .95rem/1 var(--display);cursor:pointer;
  transition:background .16s ease,color .16s ease}
.hl-pick:hover{background:var(--pale)}
.hl-card.on .hl-pick{background:var(--blue-strong);color:#fff}
.hl-sw{display:flex;gap:5px;margin-bottom:12px}
.hl-sw i{width:12px;height:12px;border-radius:50%;background:var(--c);
  box-shadow:0 0 8px var(--c)}

/* the calculator */
.hl-calc{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start;margin-top:26px}
.hl-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh-2)}
.hl-panel label{display:block;font-family:var(--display);font-weight:700;color:var(--navy);margin-bottom:8px}
.hl-feet{display:flex;align-items:center;gap:14px}
.hl-feet input[type=range]{flex:1;accent-color:var(--blue-strong);height:28px}
.hl-feet input[type=number]{width:96px;padding:10px 12px;border:2px solid var(--line);border-radius:9px;
  font:700 1.1rem var(--display);color:var(--navy);text-align:center}
.hl-feet input[type=number]:focus{border-color:var(--blue);outline:none}
.hl-help{font-size:.85rem;color:var(--muted);margin:8px 0 22px}
.hl-sel{display:grid;gap:8px;margin-bottom:22px}
.hl-panel .hl-opt{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;
  border:2px solid var(--line);border-radius:10px;cursor:pointer;font:500 .95rem var(--body);
  color:var(--ink);transition:border-color .16s ease,background .16s ease}
.hl-opt:hover{border-color:var(--blue)}
.hl-opt input{accent-color:var(--blue-strong);width:18px;height:18px;margin:0}
.hl-opt b{flex:1;font-weight:600;color:var(--ink)}
.hl-opt em{font-style:normal;font-family:var(--display);font-weight:700;color:var(--blue-strong);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hl-opt:has(input:checked){border-color:var(--blue-strong);background:var(--pale)}
.hl-ref{width:100%;padding:11px 12px;border:2px solid var(--line);border-radius:9px;font:inherit}
.hl-ref:focus{border-color:var(--blue);outline:none}
.hl-sum{position:sticky;top:18px;background:var(--navy);color:#fff;border-radius:16px;padding:26px;
  box-shadow:var(--sh-3)}
.hl-sum h3{color:#fff;font-size:1.05rem;margin:0 0 14px}
.hl-lines{list-style:none;margin:0 0 14px;padding:0;font-size:.92rem}
.hl-lines li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:#DCE7F5}
.hl-lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.hl-lines li.save{color:#FFC24B}
.hl-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 16px}
.hl-total span{color:var(--muted-navy);font-weight:600}
.hl-total b{font-family:var(--display);font-size:2.1rem;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hl-pay{background:rgba(255,255,255,.07);border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:.88rem}
.hl-pay div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:#DCE7F5}
.hl-pay div b{color:#fff;font-variant-numeric:tabular-nums}
.hl-pay div:first-child b{color:#FFC24B}
.hl-sum .btn{display:block;text-align:center}
.hl-sum .small{color:var(--muted-navy);margin:12px 0 0;font-size:.8rem}
.hl-add{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);margin-top:auto}
.hl-add input{accent-color:var(--blue-strong);width:18px;height:18px;margin:0}
.hl-sec{margin-top:56px}
.hl-sec:first-child{margin-top:0}
.hl-sec > .small{margin-top:6px}

/* product pictures, spec chips, warranty, feature grid */
.hl-art{margin:-22px -20px 16px;aspect-ratio:16/9;overflow:hidden;border-radius:10px 10px 0 0;
  background:radial-gradient(ellipse at 50% 0%,#1d3c6e 0%,var(--navy-deep) 70%)}
.hl-art svg{display:block;width:100%;height:100%}
.hl-photo{background:#fff}
/* our product photos are cut-outs on white, so show the whole thing rather
   than cropping into it */
.hl-photo{background:#fff;display:flex;align-items:center;justify-content:center}
.hl-art.hl-photo{aspect-ratio:16/7;border-bottom:1px solid var(--line)}
.hl-photo img{display:block;width:100%;height:100%;object-fit:contain;padding:8px 10px}
.hl-card__badge{z-index:2}
.hl-specs{list-style:none;margin:-4px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hl-specs li{font-size:.74rem;font-weight:600;color:var(--navy);background:var(--pale);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.hl-warr{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:#1b7a3e;margin:-2px 0 12px}
.hl-warr::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:#1b7a3e;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat}
.hl-best{margin:-2px 0 14px;padding:11px 13px;background:var(--pale);border-radius:9px;
  font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.hl-best b{font-family:var(--display);color:var(--navy)}
.hl-topcard .hl-best{background:#F3F7FC}
.hl-warranty{display:flex;flex-direction:column;gap:4px;margin:22px 0 4px;padding:16px 20px;
  border-left:4px solid #1b7a3e;background:#EEF8F1;border-radius:0 10px 10px 0;max-width:760px}
.hl-warranty b{font-family:var(--display);color:#135c2e;font-size:1.05rem}
.hl-warranty span{color:var(--ink-soft);font-size:.95rem}
.hl-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.hl-feat div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1)}
.hl-feat b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--navy);margin-bottom:6px}
.hl-feat b::before{content:"";display:block;width:26px;height:6px;border-radius:3px;margin-bottom:12px;
  background:linear-gradient(90deg,#FF3B3B,#FFC24B,#2BD66B,#3FA9FF,#B06BFF)}
.hl-feat span{font-size:.9rem;color:var(--muted);line-height:1.5}
@media(max-width:960px){.hl-feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hl-feat{grid-template-columns:1fr}}

/* the three most popular, big, at the top of lights.html */
.hl-top{display:grid;gap:22px;margin-top:28px}
.hl-topcard{display:grid;grid-template-columns:1fr 1.1fr;background:#fff;border:2px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--sh-2);transition:border-color .16s ease,box-shadow .16s ease}
.hl-topcard:hover{border-color:var(--blue);box-shadow:var(--sh-3)}
.hl-topcard.on{border-color:var(--blue-strong);box-shadow:0 0 0 4px rgba(46,134,193,.18),var(--sh-3)}
.hl-topcard__img{position:relative;min-height:260px;background:var(--navy-deep)}
.hl-topcard__img .hl-art{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto;width:100%;height:100%}
.hl-topcard__txt{padding:26px 28px}
.hl-toptag{display:inline-block;font:800 .7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:#1a1a1a;background:#FFC24B;padding:6px 9px;border-radius:6px;margin-bottom:12px}
.hl-topcard h3{font-size:1.4rem;color:var(--navy);margin:0 0 4px}
.hl-tophead{font-family:var(--display);font-weight:700;color:var(--blue-strong);margin:0 0 10px}
.hl-topcard p{color:var(--ink-soft);font-size:.96rem;margin:0 0 12px}
.hl-toplist{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.hl-toplist li{position:relative;padding-left:18px;font-size:.88rem;color:var(--ink)}
.hl-toplist li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;
  background:#FFC24B;box-shadow:0 0 8px rgba(255,194,75,.8)}
@media(max-width:760px){
  .hl-topcard{grid-template-columns:1fr}
  .hl-topcard__img{min-height:0;aspect-ratio:16/10}
  .hl-toplist{grid-template-columns:1fr}
  .hl-topcard__txt{padding:20px}
}

@media(max-width:900px){
  .hl-promo__in,.hl-hero__in,.hl-calc{grid-template-columns:1fr}
  .hl-promo{padding:112px 0 64px}
  .hl-hero{padding:104px 0 32px}
  .hl-sum{position:static}
}
@media(max-width:560px){
  .hl-strand{height:64px}
  .hl-panel,.hl-sum,.hl-deal{padding:20px}
  .hl-feet input[type=number]{width:80px}
}
@media (prefers-reduced-motion:reduce){
  .hl-b,.hl-chase .hl-b{animation:none!important;opacity:1}
}

/* ==========================================================================
   FULL SPEC SHEET, AND WHO EACH SYSTEM IS FOR
   ========================================================================== */
.hl-best{margin:-2px 0 14px;padding:11px 13px;background:var(--pale);border-radius:9px;
  font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.hl-best b{font-family:var(--display);color:var(--navy)}
.hl-topcard .hl-best{background:#F3F7FC}
.hl-spec{margin:0 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hl-spec summary{padding:11px 2px;font-family:var(--display);font-weight:700;font-size:.9rem;
  color:var(--blue-strong);cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.hl-spec summary::-webkit-details-marker{display:none}
.hl-spec summary::marker{content:""}
.hl-spec summary::after{content:"+";font-size:1.25rem;line-height:1;font-weight:400}
.hl-spec[open] summary::after{content:"\2013"}
.hl-spec dl{margin:0 0 14px;padding:0}
.hl-spec dt{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:13px}
.hl-spec dd{margin:2px 0 0}
.hl-spec dd b{display:block;font-size:.95rem;color:var(--ink)}
.hl-spec dd span{display:block;font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:3px}

/* ==========================================================================
   WHAT SEPARATES THE THREE SYSTEMS
   ========================================================================== */
.hl-comparewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)}
.hl-compare{width:100%;min-width:680px;border-collapse:collapse;font-size:.92rem}
.hl-compare th,.hl-compare td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.hl-compare thead th{background:linear-gradient(90deg,var(--navy),var(--navy-lift));color:#fff;
  font-family:var(--display);font-size:1rem;position:sticky;top:0}
.hl-compare thead th span{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sky);font-weight:700;margin-top:3px}
.hl-compare tbody th{font-weight:600;color:var(--muted);width:210px;font-size:.85rem}
.hl-compare tbody td{color:var(--ink-soft)}
.hl-compare tbody td b{font-family:var(--display);font-size:1.15rem;color:var(--navy)}
.hl-compare tbody tr:first-child td{font-family:var(--display);font-weight:700;color:var(--navy)}
.hl-compare tbody tr:hover td,.hl-compare tbody tr:hover th{background:var(--pale)}
.hl-compare tbody tr:last-child th,.hl-compare tbody tr:last-child td{border-bottom:0}
/* a picture that could not load leaves a clean panel, never a broken icon */
.hl-photo--empty{background:radial-gradient(ellipse at 50% 0%,#1d3c6e 0%,var(--navy-deep) 75%)}

/* ==========================================================================
   THE OTHER SERVICES — one slim text line, PHONES ONLY.
   At 900px and under, .nav a:not(.btn) is display:none, so the header keeps
   only the quote button and there is no way to reach the other pages. This
   is that way back. On desktop it is hidden completely, because the header
   nav already carries the same links and nothing should sit between the
   header and the hero.
   Deliberately text only: an earlier version used four icon tiles and they
   were the first thing on the page, which is not what the top of a home
   page is for.
   ========================================================================== */
.svcnav{display:none}
@media(max-width:900px){
  .svcnav{display:block;background:var(--navy-deep);
    border-bottom:1px solid rgba(255,255,255,.10)}
  .svcnav__in{max-width:var(--wrap);margin:0 auto;padding:0 14px;
    display:flex;align-items:center;justify-content:space-between;gap:4px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .svcnav__in::-webkit-scrollbar{display:none}
  .svcnav a{flex:0 0 auto;padding:9px 10px;text-decoration:none;white-space:nowrap;
    color:var(--muted-navy);font:600 .82rem/1 var(--body);letter-spacing:.2px;
    border-bottom:2px solid transparent}
  .svcnav a svg{display:none}
  .svcnav a.here{color:#fff;border-bottom-color:var(--sky)}
  .svcnav a:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
}

/* ==========================================================================
   SNOW HANDOFF — shown under the services list when someone ticks the
   Snowfall Plan on the quote form. The plan is signed, so the form cannot
   enroll them; this is where we say so and hand them the link that can.
   ========================================================================== */
.snownote{margin:14px 0 0;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,#25406e);
  border:1px solid rgba(127,208,255,.3);box-shadow:var(--sh-2);color:#fff}
.snownote b{display:block;font-family:var(--display);font-size:1.02rem;margin:0 0 6px;color:#fff}
.snownote p{margin:0 0 14px;color:#D8E6F6;font-size:.92rem;line-height:1.55}
.snownote .btn{margin:0}

/* ==========================================================================
   THE PLANS IN THE HERO
   The first thing on the page is now the choice itself: six tiles on the
   left, photo on the right. Tapping one selects that plan in the quote form
   further down, so picking and booking are the same gesture.
   Compact on purpose — the full plan cards with their reasoning still live
   in the Service plans section below, and these must not grow into them or
   the hero stops fitting on a phone screen.
   ========================================================================== */
.heroplans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 26px}
.hplan{position:relative;display:block;padding:14px 12px 13px;border-radius:13px;
  text-decoration:none;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.17);
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),box-shadow .2s var(--ease)}
.hplan::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(140deg,rgba(127,208,255,.3),rgba(46,134,193,.1) 60%,transparent);
  transition:opacity .22s var(--ease)}
.hplan:hover{transform:translateY(-3px);border-color:rgba(127,208,255,.6);
  background:rgba(255,255,255,.12);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hplan:hover::before{opacity:1}
.hplan:active{transform:translateY(-1px)}
.hplan:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.hplan__pct{display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:1.6rem;line-height:1;letter-spacing:-.5px}
.hplan__pct i{font-style:normal;font-size:.95rem;font-weight:700;color:var(--sky);margin-left:1px}
.hplan__name{display:block;font-family:var(--display);font-weight:700;color:#fff;
  font-size:.86rem;margin-top:7px;line-height:1.2}
.hplan__freq{display:block;color:#B9D2EA;font-size:.74rem;margin-top:2px;line-height:1.25}
.hplan__flag{position:absolute;top:0;right:0;padding:3px 8px;border-radius:0 12px 0 10px;
  font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:#07243f;background:var(--sky)}
.hplan--best{border-color:rgba(127,208,255,.55);background:rgba(127,208,255,.14)}
.hplan--fav{border-color:rgba(255,255,255,.32)}
.hplan--fav .hplan__flag{background:#FFD277;color:#3a2a06}
.hplan--once{border-style:dashed;border-color:rgba(255,255,255,.34)}
.hplan--once .hplan__pct{font-size:1.15rem;color:var(--sky)}
/* the two flagged tiles need headroom for the ribbon */
.hplan--best,.hplan--fav{padding-top:22px}

@media(max-width:1050px){.heroplans{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .heroplans{grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0 22px}
  .hplan{padding:13px 11px 12px}
  .hplan--best,.hplan--fav{padding-top:21px}
  .hplan__pct{font-size:1.42rem}
}
@media(max-width:360px){.hplan__name{font-size:.8rem}.hplan__freq{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.hplan,.hplan::before{transition:none}}

/* ==========================================================================
   THE GLOWING RIM ON THE HERO TILES
   Same idea as .plan--glow on the cards below: a conic gradient spinning
   behind the tile, with a face sitting on top so only a lit rim shows.
   The difference is the face — down there it is white because the section is
   pale; up here the hero is navy, so a white face would punch a hole in it.
   Each plan gets its own colour so the six read as six things, not one thing
   repeated.
   ========================================================================== */
.hplan--glow{border:0;background:transparent;overflow:hidden;isolation:isolate}
.hplan--glow .horbit{position:absolute;top:50%;left:50%;width:240%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);z-index:0;pointer-events:none;
  animation:spin 6.4s linear infinite;will-change:transform;backface-visibility:hidden}
.hplan--glow .hface{position:absolute;inset:2px;z-index:1;pointer-events:none;
  border-radius:11px;background:#1b3156;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hplan--glow > :not(.horbit):not(.hface){position:relative;z-index:2}
.hplan--glow:hover .horbit{animation-duration:2.6s}
.hplan--glow:hover .hface{background:#20395f}

/* one colour per plan, so the row reads as six choices */
.hplan--c1 .horbit{background:conic-gradient(from 0deg,#3B82F6,#8B5CF6 90deg,#1b3156 170deg,#1b3156 300deg,#3B82F6)}
.hplan--c2 .horbit{animation-duration:7.1s;
  background:conic-gradient(from 0deg,#14B8A6,#5EEAD4 90deg,#1b3156 170deg,#1b3156 300deg,#14B8A6)}
.hplan--c3 .horbit{animation-duration:5.2s;
  background:conic-gradient(from 0deg,#1C6FA8,#7FD0FF 70deg,#2E86C1 140deg,#1b3156 240deg,#1C6FA8)}
.hplan--c4 .horbit{animation-duration:7.6s;
  background:conic-gradient(from 0deg,#B4860B,#FFD277 80deg,#1b3156 170deg,#1b3156 300deg,#B4860B)}
.hplan--c5 .horbit{animation-duration:8.3s;
  background:conic-gradient(from 0deg,#15803D,#4ADE80 90deg,#1b3156 170deg,#1b3156 300deg,#15803D)}
.hplan--c6 .horbit{animation-duration:9.1s;
  background:conic-gradient(from 0deg,#64748B,#CBD5E1 90deg,#1b3156 175deg,#1b3156 300deg,#64748B)}

/* the ribbons sit above the face */
.hplan__flag{z-index:3}
/* the dashed one-off border was drawn by .hplan; the glow version has no
   border of its own, so the dash moves onto the face */
.hplan--once .hface{border:1px dashed rgba(255,255,255,.3)}

@media(prefers-reduced-motion:reduce){
  .hplan--glow .horbit,.hplan--glow:hover .horbit{animation:none}
}

/* ==========================================================================
   FOLDED SECTIONS
   The heavy reference sections — the plan detail, screens, window types,
   pure water, the crew, the service area — are closed by default. They keep
   every word they had; you just have to ask for them. The bar looks the same
   as the open section bars above and below it so the page still reads as one
   run of sections rather than a list of accordions.
   ========================================================================== */
.fold{display:block}
.fold > .fold__bar{list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(90deg,var(--navy-deep),var(--navy) 55%,var(--blue-strong));
  padding:14px max(20px,calc((100vw - var(--wrap))/2 + 20px));
  transition:filter .18s var(--ease)}
.fold > .fold__bar::-webkit-details-marker{display:none}
.fold > .fold__bar:hover{filter:brightness(1.14)}
.fold > .fold__bar:focus-visible{outline:2px solid var(--sky);outline-offset:-3px}
.fold > .fold__bar > span{font-family:var(--display);font-weight:700;color:#fff;
  font-size:1.02rem;letter-spacing:.01em}
.fold > .fold__bar > em{font-style:normal;color:var(--muted-navy);font-size:.84rem;
  font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold > .fold__bar::after{content:"";margin-left:auto;flex:none;
  width:11px;height:11px;border-right:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .22s var(--ease)}
.fold[open] > .fold__bar::after{transform:rotate(225deg) translate(-2px,-2px)}
@media(max-width:620px){
  .fold > .fold__bar > em{display:none}
  .fold > .fold__bar{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){
  .fold > .fold__bar,.fold > .fold__bar::after{transition:none}
}

/* ==========================================================================
   CONTACT DETAILS IN THE FOOTER
   The phone, email, Instagram and the insurance line used to run across the
   very top of the page, above the logo. That is the most valuable strip on
   the site and it was spent on details nobody needs before they know what
   they are looking at. Same information, bottom of the page, where people
   go looking for it.
   ========================================================================== */
.footcontact{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:0 0 18px;margin:0 0 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.footcontact a,.footcontact .nolink{display:inline-flex;align-items:center;gap:9px;
  color:#DCE7F5;text-decoration:none;font-size:.92rem;font-weight:600}
.footcontact a:hover{color:#fff}
.footcontact svg{width:17px;height:17px;flex:none;color:var(--sky)}
.footcontact .nolink{color:var(--muted-navy);font-weight:500}
@media(max-width:620px){
  .footcontact{gap:9px 18px;font-size:.88rem}
  .footcontact a,.footcontact .nolink{font-size:.86rem}
}

/* the line under the percentage on a hero tile — "off your regular price" */
.hplan__off{display:block;color:var(--sky);font-size:.68rem;font-weight:600;
  line-height:1.25;margin-top:3px;letter-spacing:.01em}
.hplan--once .hplan__off{color:var(--muted-navy)}

/* ==========================================================================
   INTERACTION LAYER — the styles the shared script needs
   ========================================================================== */

/* sections arrive instead of appearing. They start visible-at-rest in CSS and
   are only moved by the class the observer adds, so a page with JS off, or a
   screenshot, still shows everything. */
.fx-up{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .fx-up{opacity:0;transform:translateY(16px);
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .fx-up.fx-in{opacity:1;transform:none}
  /* a grid's children arrive in sequence rather than all at once */
  .fx-up.plans>*,.fx-up.heroplans>*,.fx-up.grid>*,.fx-up.lf-svc>*,.fx-up.hl-grid>*{
    opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .fx-up.fx-in.plans>*,.fx-up.fx-in.heroplans>*,.fx-up.fx-in.grid>*,
  .fx-up.fx-in.lf-svc>*,.fx-up.fx-in.hl-grid>*{opacity:1;transform:none}
  .fx-up.fx-in>*:nth-child(2){transition-delay:.06s}
  .fx-up.fx-in>*:nth-child(3){transition-delay:.12s}
  .fx-up.fx-in>*:nth-child(4){transition-delay:.18s}
  .fx-up.fx-in>*:nth-child(5){transition-delay:.24s}
  .fx-up.fx-in>*:nth-child(6){transition-delay:.30s}
}

/* the ink ring from a press */
.fxrip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:currentColor;opacity:.32;pointer-events:none;transform:scale(0);
  animation:fxrip .6s var(--ease) forwards}
@keyframes fxrip{to{transform:scale(26);opacity:0}}

/* the pointer glow the script feeds --mx/--my to */
.card,.plan,.hplan,.hl-card{--mx:50%;--my:50%}
@media(hover:hover) and (pointer:fine){
  .hplan .hface{background-image:radial-gradient(180px circle at var(--mx) var(--my),
    rgba(127,208,255,.16),transparent 60%)}
}

/* buttons lean with the cursor — the script sets transform, this makes it smooth */
@media(prefers-reduced-motion:no-preference){
  .btn--primary,.btn--lg{transition:background .16s ease,border-color .16s ease,
    transform .18s var(--ease),box-shadow .16s ease}
}

/* a folded section's contents must not be clipped once it has opened */
.fold > section{overflow:visible}

/* a fold holding other folds — the add-ons on the lights page */
.fold--group .fold__kids{background:var(--pale);padding:4px 0 2px}
.fold--group .fold__kids .fold > .fold__bar{
  background:linear-gradient(90deg,var(--navy),var(--navy-lift));
  margin:0 0 2px}
.fold--group .fold__kids .fold:last-child > .fold__bar{margin-bottom:0}
.fold--group .fold__kids .fold > .fold__bar > span{font-size:.96rem}