:root{
    --paper:#f4f7fb; --white:#fff;
    --navy:#0d1a30; --navy-2:#1b3159; --steel:#5c6b85;
    --ice:#e8eff8; --ice-2:#d3e2f2; --line:#dbe3ee;
    --amber:#d99a37;
    --cta:#0d1a30; --cta-hover:#1b3159; --cta-ink:#fff;
    --maxw:1120px; --tap:56px;
    --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--sans);color:var(--navy);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:78px}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  :focus-visible{outline:3px solid var(--navy-2);outline-offset:3px;border-radius:6px}
  .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 26px;font-weight:700;font-size:1.05rem;border-radius:10px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease,border-color .15s ease;font-family:var(--sans)}
  .btn svg{flex:none}
  .btn-call{background:var(--cta);color:var(--cta-ink);box-shadow:0 8px 22px -10px rgba(27,49,89,.5),0 0 20px -4px rgba(150,182,230,.4)}
  .btn-call:hover{background:var(--cta-hover);transform:translateY(-2px)}
  .btn-ghost{background:var(--white);color:var(--navy);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}

  /* scroll-reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .stagger>.reveal:nth-child(2){transition-delay:.08s}
  .stagger>.reveal:nth-child(3){transition-delay:.16s}
  .stagger>.reveal:nth-child(4){transition-delay:.24s}
  .stagger>.reveal:nth-child(5){transition-delay:.32s}
  .stagger>.reveal:nth-child(6){transition-delay:.4s}

  /* lunar glow + stars + cursor */
  .cursor-glow{position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle,rgba(150,182,230,.13),rgba(150,182,230,.05) 45%,transparent 70%)}
  .spark{position:absolute;color:#b8cbe3;pointer-events:none}
  @media (max-width:639px){.spark.hide-sm{display:none}}
  .spark.tw{animation:sparktw 5.5s ease-in-out infinite}
  @keyframes sparktw{0%,100%{opacity:.25}50%{opacity:.85}}
  .phasewrap{background:var(--paper)}

  section{scroll-margin-top:74px}
  .sec{padding:48px 0}
  .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
  .sec-num{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--steel)}
  .sec-head h2{font-size:clamp(1.5rem,5.4vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
  .sec-sub{color:var(--steel);max-width:56ch;margin-bottom:28px;font-size:.98rem}

  /* header */
  .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px}
  .brand{display:flex;align-items:center;gap:11px}
  .brand .mark{width:32px;height:32px;flex:none}
  .brand .name{font-weight:800;font-size:1.06rem;letter-spacing:-.01em;line-height:1.1;color:var(--navy)}
  .brand .name span{display:block;font-weight:600;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:3px}
  .nav{display:none;align-items:center;gap:26px}
  .nav a{font-size:.94rem;color:var(--steel);font-weight:600}
  .nav a:hover{color:var(--navy)}
  .header-phone{display:none;align-items:center;gap:8px;font-weight:800;font-size:1.08rem;color:var(--navy)}
  .header-phone svg{color:var(--navy-2)}
  .header-call-sm{display:inline-flex;min-height:44px;padding:0 18px;font-size:.95rem}

  /* ============ HERO ============ */
  .hero{position:relative;overflow:hidden;background:radial-gradient(130% 95% at 86% -8%,#dce8f5,transparent 60%),linear-gradient(180deg,#e9f1f9 0%,#f2f6fb 58%,var(--paper) 100%)}
  /* volumetric moon: parallax wrapper + idle float */
  .moonwrap{position:absolute;top:-46px;right:-72px;width:260px;height:260px;pointer-events:none;will-change:transform;z-index:0}
  .moonfloat img{width:100%;height:100%;object-fit:contain;transform:rotate(-12deg);opacity:.2;filter:saturate(.8) drop-shadow(0 0 30px rgba(150,182,230,.5)) drop-shadow(0 0 80px rgba(150,182,230,.3))}
  .moonfloat{width:100%;height:100%;animation:moonfloat 9s ease-in-out infinite}
  @keyframes moonfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hero-inner{position:relative;z-index:1;padding-block:40px 46px;max-width:720px;margin-inline:auto;text-align:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:20px}
  .eyebrow svg{color:var(--navy-2)}
  h1{font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--navy);font-size:clamp(1.95rem,7.3vw,3.5rem);margin-bottom:16px}
  h1 .accent{color:var(--navy-2);display:block}
  .subhead{font-size:clamp(1rem,3.7vw,1.14rem);color:var(--steel);max-width:44ch;margin:0 auto 30px;line-height:1.6}
  .repairs{max-width:660px;margin:0 auto 26px;position:relative}
  .repairs-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
  .repairs-label .swipe{display:inline-flex;align-items:center;gap:4px;color:var(--navy-2);opacity:.75}
  .repairs-label .swipe svg{animation:nudge 2.2s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  .fixgrid{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:5px 2px 12px}
  .fixgrid::-webkit-scrollbar{display:none}
  .fix{flex:0 0 126px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:14px 8px;background:var(--white);border:1px solid #e2eaf4;border-radius:14px;box-shadow:0 4px 14px -8px rgba(27,49,89,.45);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
  .fix:hover{border-color:var(--navy-2);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(120,152,205,.75)}
  .fix svg{color:var(--navy-2)}
  .fix span{font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.2;text-align:center}
  .cta-row{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:400px;margin:0 auto 20px}
  .cta-row .btn{width:100%}
  .offer{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--navy);background:var(--ice);border:1px solid var(--ice-2);border-radius:8px;padding:10px 15px;margin-bottom:30px;box-shadow:0 0 18px -5px rgba(150,182,230,.55)}
  .offer svg{color:var(--amber)}
  .offer b{font-weight:800}
  .trustline{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;font-size:.78rem;font-weight:600;color:var(--steel);line-height:1.5}
  .trustline li{padding:0 12px;position:relative}
  .trustline li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}

  /* moon-phase divider — bolder, readable */
  .phasedivider{display:flex;align-items:center;gap:16px;padding-block:20px 8px}
  .phasedivider .rule{flex:1;height:1px;background:var(--line)}
  .phasedivider .dots{display:flex;align-items:center;gap:10px}
  .phasedivider .dots svg{width:16px;height:16px;color:var(--navy-2);filter:drop-shadow(0 1px 3px rgba(120,152,205,.45))}

  /* trust strip */
  .trust{background:var(--paper);padding:20px 0 46px}
  .trust-inner{display:grid;grid-template-columns:1fr;gap:20px}
  .trust-item{display:flex;gap:14px;align-items:flex-start}
  .trust-item .ti-ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--ice);display:grid;place-items:center;color:var(--navy-2)}
  .trust-item h3{font-size:.98rem;font-weight:800;letter-spacing:-.01em;margin-bottom:3px;color:var(--navy)}
  .trust-item p{font-size:.84rem;color:var(--steel);line-height:1.5}

  /* services with photo slots */
  .svcgrid{display:grid;grid-template-columns:1fr;gap:16px}
  .svc{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
  .svc:hover{border-color:var(--navy-2);box-shadow:0 14px 34px -18px rgba(150,182,230,.75);transform:translateY(-2px)}
  .photo{aspect-ratio:16/9;background:var(--ice);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
  .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .svc:hover .photo img{transform:scale(1.04)}
  .svc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
  .svc-body h3{font-size:1.06rem;font-weight:800;letter-spacing:-.01em}
  .svc-body p{font-size:.87rem;color:var(--steel);line-height:1.5}
  .svc-cta{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:800;color:var(--navy-2)}
  .svc-cta svg{transition:transform .15s ease}
  .svc:hover .svc-cta svg{transform:translateX(3px)}

  /* how it works */
  .how{background:var(--paper)}
  .steps{display:grid;grid-template-columns:1fr;gap:14px}
  .step{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px}
  .step .ph{width:34px;height:34px;margin-bottom:12px;filter:drop-shadow(0 2px 6px rgba(120,152,205,.4))}
  .step h3{font-size:1.02rem;font-weight:800;margin-bottom:4px}
  .step h3 small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--steel);margin-bottom:5px;text-transform:uppercase}
  .step p{font-size:.87rem;color:var(--steel);line-height:1.55}

  /* brands — a quiet reference listing (deliberately NOT the pill chips used for cities) */
  .brandcols{list-style:none;columns:2;column-gap:30px}
  .brandcols li{break-inside:avoid;display:flex;align-items:center;gap:10px;padding:11px 0;
    border-bottom:1px solid var(--line);font-size:.95rem;font-weight:600;color:var(--navy)}
  .brandcols li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ice-2);flex:none}
  .brand-note{font-size:.76rem;color:var(--steel);margin-top:18px;max-width:70ch}

  /* escape hatch: never let a missing name turn a "yes" into a "no" */
  .escape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px;padding:15px 17px;
    background:var(--ice);border:1px solid var(--ice-2);border-radius:12px;
    font-size:.92rem;font-weight:600;color:var(--navy);box-shadow:0 0 20px -8px rgba(150,182,230,.6)}
  .escape .ic{flex:none;color:var(--navy-2)}
  .escape a{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--navy-2);white-space:nowrap}
  .escape a:hover{text-decoration:underline}

  /* reviews */
  .why{background:var(--paper)}
  .revgrid{display:grid;grid-template-columns:1fr;gap:14px}
  .rev{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px}
  .rev .stars{color:var(--amber);letter-spacing:2px;font-size:.95rem;margin-bottom:9px}
  .rev p{font-size:.9rem;color:var(--navy);line-height:1.55;margin-bottom:11px}
  .rev .who{font-size:.8rem;font-weight:700;color:var(--steel)}

  /* areas */
  .areas p{color:var(--steel);font-size:.95rem;max-width:70ch}
  .arealist{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .arealist span{font-size:.85rem;font-weight:600;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px}

  /* faq */
  .faq{background:var(--paper)}
  .qa{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
  .qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.98rem;font-weight:700;color:var(--navy);text-align:left;min-height:56px}
  .qa button svg{flex:none;color:var(--steel);transition:transform .25s ease}
  .qa.open button svg{transform:rotate(45deg)}
  .qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
  .qa .a>div{overflow:hidden;padding:0 18px;color:var(--steel);font-size:.9rem;line-height:1.55}
  .qa.open .a{grid-template-rows:1fr}
  .qa.open .a>div{padding-bottom:16px}

  /* quote: two-column on desktop */
  .quote-grid{display:grid;grid-template-columns:1fr;gap:26px}
  .quote-left .bigphone{display:inline-flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;color:var(--navy);margin:14px 0 18px}
  .quote-left .bigphone svg{color:var(--navy-2)}
  .quote-points{list-style:none;display:grid;gap:12px}
  .quote-points li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--steel)}
  .quote-points svg{flex:none;color:var(--navy-2);margin-top:3px}
  .formwrap{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 16px 44px -26px rgba(150,182,230,.7)}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:5px}
  .field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;font-family:var(--sans);font-size:1rem;color:var(--navy);background:var(--paper);border:1.5px solid var(--line);border-radius:10px}
  .field textarea{min-height:96px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-2);background:var(--white)}
  .form-note{font-size:.76rem;color:var(--steel);margin-top:10px}
  .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

  /* footer */
  footer{background:var(--navy);color:#c7d2e4;padding:42px 0 26px;position:relative;overflow:hidden}
  footer .cols{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:26px}
  footer h4{color:#fff;font-size:.92rem;font-weight:800;margin-bottom:10px}
  footer a:hover{color:#fff}
  footer ul{list-style:none}
  footer li{margin-bottom:7px;font-size:.88rem}
  .f-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .f-brand .name{font-weight:800;color:#fff}
  .f-note{font-size:.76rem;line-height:1.55;color:#8fa0bd;border-top:1px solid rgba(199,210,228,.18);padding-top:16px}
  .f-phone{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;color:#fff;margin:6px 0 10px}

  /* sticky call bar: ONE full-width button with the full number */
  .callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;padding:10px 18px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 24px -14px rgba(27,49,89,.4)}
  .js .callbar{transform:translateY(125%);transition:transform .3s cubic-bezier(.2,.7,.3,1);will-change:transform}
  .js .callbar.show{transform:none}
  .callbar .btn{flex:1;min-height:52px;font-size:1.08rem}

  @media (min-width:640px){
    .fixgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;overflow:visible;padding:0}
    .fix{flex:initial;min-height:92px}
    .repairs-label .swipe{display:none}
    .cta-row{flex-direction:row;max-width:none;justify-content:center}
    .cta-row .btn{width:auto}
    .trust-inner{grid-template-columns:1fr 1fr;gap:24px}
    .svcgrid{grid-template-columns:1fr 1fr}
    .brandcols{columns:3}
    .steps{grid-template-columns:repeat(3,1fr)}
    .revgrid{grid-template-columns:repeat(3,1fr)}
    footer .cols{grid-template-columns:2fr 1fr 1fr}
  }
  @media (min-width:900px){
    .nav{display:flex}.header-phone{display:flex}.header-call-sm{display:none}
    .callbar{display:none}body{padding-bottom:0}
    .hero-inner{padding-block:64px 66px}
    .moonwrap{top:-92px;right:-64px;width:430px;height:430px}
    .sec{padding:64px 0}
    .trust-inner{grid-template-columns:repeat(4,1fr);gap:26px}
    .svcgrid{grid-template-columns:repeat(3,1fr)}
    .brandcols{columns:4;column-gap:36px}
    .quote-grid{grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .moonfloat{animation:none}
  }

  /* ─────────────────────────────────────────────────────────────────────
     NARROW-SCREEN OVERFLOW FIX
     Grid items default to min-width:auto, so they can't shrink below their
     min-content. The submit button (white-space:nowrap, 26px side padding)
     had a min-content of 299px, which pinned the quote column at 345px and
     pushed it off-screen on anything narrower than ~385px.
     Two things are needed: let the grid items shrink, and let the buttons
     wrap when there genuinely isn't room.
     ───────────────────────────────────────────────────────────────────── */
  .quote-grid > *, .svcgrid > *, .symgrid > *, .cost > *, .others > *,
  .steps > *, .trust-inner > *, .shero-grid > *{min-width:0}

  .btn{max-width:100%}
  .formwrap input, .formwrap select, .formwrap textarea{max-width:100%}

  @media (max-width:400px){
    .btn{white-space:normal;padding:10px 16px;font-size:1rem;line-height:1.3;text-align:center;height:auto}
    .bigphone{font-size:1.5rem}
  }