:root{
    --ground:#F3F5F8; --surface:#FFFFFF; --ink:#0F1B2D; --soft:#4F5E72; --rule:#D8DEE6;
    --brand:#1B2E5A; --brand-ink:#FFFFFF; --signal:#FFC20E; --signal-ink:#0F1B2D;
    --good:#1E8A4C; --warn:#B7791F; --bad:#C23A2B; --good-bg:#E4F4EA; --warn-bg:#FCF1DC; --bad-bg:#FBE5E2;
    --display:"Archivo", "Arial Black", system-ui, sans-serif;
    --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --ground:#0C121C; --surface:#131B28; --ink:#E7ECF3; --soft:#9AA8BA; --rule:#243044;
      --brand:#26407A; --good:#4CC47F; --warn:#E5A93B; --bad:#EF6B5B; --good-bg:#12291D; --warn-bg:#2B2213; --bad-bg:#2E1715;
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --ground:#0C121C; --surface:#131B28; --ink:#E7ECF3; --soft:#9AA8BA; --rule:#243044;
    --brand:#26407A; --good:#4CC47F; --warn:#E5A93B; --bad:#EF6B5B; --good-bg:#12291D; --warn-bg:#2B2213; --bad-bg:#2E1715;
  }
  *{box-sizing:border-box}
  body{background:var(--ground);color:var(--ink);font:400 16.5px/1.6 var(--body);margin:0}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px}
  .wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
  .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}

  header{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
  header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
  .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
  .badge{width:40px;height:40px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
  .logo-text{font:900 20px/1 var(--display);font-stretch:125%;text-transform:uppercase;letter-spacing:.01em}
  .logo-text small{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--soft);font-stretch:100%}
  header nav{display:flex;gap:24px}
  header nav a{text-decoration:none;font-weight:500;color:var(--soft)}
  header nav a:hover{color:var(--ink)}
  .phone{font:500 15px/1 var(--mono)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--signal);color:var(--signal-ink);font:800 16px/1 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.02em;padding:15px 22px;border-radius:6px;border:0;text-decoration:none;cursor:pointer}
  .btn:hover{filter:brightness(1.05)}
  .btn.dark{background:var(--brand);color:var(--brand-ink)}

  /* hero */
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);padding-block:clamp(48px,7vw,88px);align-items:center}
  h1{font:900 clamp(44px,7vw,86px)/.95 var(--display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;margin:16px 0 20px;text-wrap:balance}
  h1 .hl{background:linear-gradient(var(--signal),var(--signal)) no-repeat 0 88%/100% 34%;padding-inline:.05em}
  .lede{font-size:19px;color:var(--soft);max-width:42ch;margin:0 0 26px}
  .proof{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
  .proof div{display:grid;gap:2px}
  .proof b{font:800 30px/1 var(--display);font-stretch:112%}
  .proof span{font-size:14px;color:var(--soft)}

  /* estimator */
  .est{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,3vw,28px);box-shadow:0 18px 40px -24px rgba(15,27,45,.35)}
  .est h2{font:800 22px/1.1 var(--display);font-stretch:112%;text-transform:uppercase;margin:6px 0 18px}
  .field{display:grid;gap:8px;margin-bottom:16px}
  .field > span{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chips button{font:500 14.5px/1 var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--rule);padding:10px 14px;border-radius:99px;cursor:pointer}
  .chips button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
  select,input,textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:6px;padding:12px;width:100%}
  .result{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:end;background:var(--ground);border-radius:8px;padding:18px;margin:6px 0 16px}
  .result .range{font:900 38px/1 var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
  .result .time{font:500 14px/1.3 var(--mono);color:var(--soft);text-align:right}
  .result small{grid-column:1/-1;color:var(--soft);font-size:13px}
  .est .btn{width:100%}

  section{padding-block:clamp(56px,8vw,96px)}
  h2.sec{font:900 clamp(32px,4.6vw,52px)/1 var(--display);font-stretch:118%;text-transform:uppercase;margin:12px 0 16px;text-wrap:balance}
  .sec-lede{color:var(--soft);max-width:56ch;margin:0 0 40px}

  /* inspection report */
  .inspect{background:var(--surface);border-block:1px solid var(--rule)}
  .report-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
  .report{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
  .report-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--brand);color:var(--brand-ink);font:500 13px/1.4 var(--mono)}
  .item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 20px;border-top:1px solid var(--rule)}
  .pill{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:4px;white-space:nowrap}
  .pill.good{background:var(--good-bg);color:var(--good)}
  .pill.warn{background:var(--warn-bg);color:var(--warn)}
  .pill.bad{background:var(--bad-bg);color:var(--bad)}
  .item b{display:block;font-weight:600}
  .item span.note{font-size:14px;color:var(--soft)}
  .item .meas{font:500 14px/1.2 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
  .legend{display:grid;gap:14px;margin-top:8px;padding:0;list-style:none}
  .legend li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}

  /* services */
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
  .svc article{background:var(--surface);padding:26px}
  .svc h3{font:800 20px/1.1 var(--display);font-stretch:112%;text-transform:uppercase;margin:14px 0 8px}
  .svc p{margin:0 0 14px;color:var(--soft);font-size:15px}
  .svc .from{font:500 13px/1 var(--mono);color:var(--ink)}
  .svc svg{display:block}

  /* promises */
  .promise{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
  .promise h3{font:800 24px/1.1 var(--display);font-stretch:112%;text-transform:uppercase;margin:0 0 10px}
  .promise p{margin:0;color:var(--soft)}
  .promise .big{font:900 56px/1 var(--display);font-stretch:125%;color:var(--brand);margin-bottom:8px}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .promise .big{color:var(--signal)}}
  :root[data-theme="dark"] .promise .big{color:var(--signal)}

  /* visit / book */
  .visit{background:var(--brand);color:var(--brand-ink)}
  .visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
  .visit .eyebrow{color:rgba(255,255,255,.7)}
  .visit h2.sec{color:#fff}
  .visit table{width:100%;border-collapse:collapse;font:400 15px/1 var(--mono);font-variant-numeric:tabular-nums}
  .visit td{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16)}
  .visit td:last-child{text-align:right}
  .visit form{background:var(--surface);color:var(--ink);border-radius:12px;padding:clamp(20px,3vw,28px);display:grid;gap:14px}
  .visit form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .visit label{display:grid;gap:6px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
  .ok{margin:0;color:var(--good);font:500 14px/1.4 var(--mono)}
  footer{padding-block:32px;font-size:14px;color:var(--soft)}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media (max-width:920px){
    .hero .wrap,.report-wrap,.visit .wrap{grid-template-columns:1fr}
    .svc{grid-template-columns:1fr 1fr}
    .promise{grid-template-columns:1fr}
    header nav{display:none}
  }
  @media (max-width:560px){
    .svc{grid-template-columns:1fr}
    .visit form .two{grid-template-columns:1fr}
    .item{grid-template-columns:auto 1fr}
    .item .meas{grid-column:2;text-align:left}
    .phone{display:none}
  }
  /* ---------- motion ---------- */
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
  .hero .wrap > div:first-child > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
  .hero .eyebrow{display:inline-block;animation-delay:.05s!important}
  .hero h1{animation-delay:.15s!important}
  .hero .lede{animation-delay:.3s!important}
  .hero .btn.dark{animation-delay:.4s!important}
  .hero .proof{animation-delay:.5s!important}
  .est{animation:rise .9s cubic-bezier(.2,.7,.2,1) .35s backwards}
  h1 .hl{animation:mark .7s cubic-bezier(.6,0,.2,1) .8s both}
  @keyframes mark{from{background-size:0% 34%}}
  .btn{transition:transform .2s,box-shadow .2s,filter .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(15,27,45,.45)}
  .btn:active{transform:translateY(0)}
  .btn .arr{display:inline-block;transition:transform .25s}
  .btn:hover .arr{transform:translateX(5px)}
  .chips button{transition:background .2s,color .2s,border-color .2s,transform .15s}
  .chips button:active{transform:scale(.94)}
  .result{transition:box-shadow .2s}
  .result.bump{animation:bump .6s ease-out}
  @keyframes bump{0%{box-shadow:0 0 0 0 var(--signal)}30%{box-shadow:0 0 0 3px var(--signal)}100%{box-shadow:0 0 0 0 transparent}}

  /* scroll reveals — elements start only slightly faded, never hidden */
  .rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s;transition-delay:calc(var(--i,0)*80ms)}
  .rv.pre{transform:translateY(28px);opacity:.35}
  .report{position:relative}
  .report::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--signal);box-shadow:0 0 14px 2px var(--signal);opacity:0;pointer-events:none}
  .report.scan::after{animation:scan 1.5s cubic-bezier(.4,0,.2,1) .2s}
  @keyframes scan{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
  .item{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,background .2s;transition-delay:calc(.2s + var(--i,0)*.25s),calc(.2s + var(--i,0)*.25s),0s}
  .item:hover{background:var(--ground)}
  .report.pre .item{transform:translateX(20px);opacity:.3}
  .item .pill{display:inline-block;transition:transform .4s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(.45s + var(--i,0)*.25s)}
  .report.pre .item .pill{transform:scale(.4)}
  .svc article{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,background .25s;transition-delay:calc(var(--i,0)*80ms),calc(var(--i,0)*80ms),0s}
  .svc article:hover{background:var(--ground)}
  .svc svg [fill="#FFC20E"],.svc svg [stroke="#FFC20E"]{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
  .svc article:hover svg [fill="#FFC20E"],.svc article:hover svg [stroke="#FFC20E"]{transform:scale(1.35)}
  .svc article:hover h3{color:var(--brand)}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .svc article:hover h3{color:var(--signal)}}
  :root[data-theme="dark"] .svc article:hover h3{color:var(--signal)}
  .ok:not([hidden]){animation:rise .5s both}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
  }

  .sent.err,.ok.err{color:#E0463A}