:root{
  --paper:#FFFFFF;
  --mist:#F3F3F3;
  --ink:#0A0A0A;
  --black:#000000;
  --orange:#EF8635;
  --ember:#D9661F;
  --steel:#4A4B4D;
  --muted:#323334;
  --line:#E3E3E3;
  --surface:#FFFFFF;
  --headbg:rgba(255,255,255,.94);
  --bg:var(--paper);
  --fg:var(--ink);
  color-scheme:light dark;
  --head:'Saira Condensed','Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --maxw:1220px;
  --pad:clamp(18px,5vw,44px);
}
/* Dark theme. Driven by a class this page sets itself (see the script in
   <head>), so it works even if the host page pins a data-theme attribute.
   The media query is the no-JS fallback. */
html.theme-dark{
  --paper:#0D0D0D; --surface:#181818; --mist:#121212;
  --ink:#F7F7F7; --muted:#D5D6D7; --steel:#ABACAE;
  --line:#313131; --headbg:rgba(10,10,10,.95);
  --bg:#0D0D0D; --fg:#F7F7F7; color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html:not(.theme-light){
    --paper:#0D0D0D; --surface:#181818; --mist:#121212;
    --ink:#F7F7F7; --muted:#D5D6D7; --steel:#ABACAE;
    --line:#313131; --headbg:rgba(10,10,10,.95);
    --bg:#0D0D0D; --fg:#F7F7F7; color-scheme:dark;
  }
}
html.theme-dark .btn.line,
html:not(.theme-light) .dk-line{color:var(--ink);border-color:var(--ink)}
html.theme-dark .btn.line:hover{background:var(--ink);color:#000}
html.theme-dark .btn.dark{background:var(--orange);border-color:var(--orange);color:#000}
html.theme-dark .btn.dark:hover{background:var(--ember);border-color:var(--ember);color:#fff}
html.theme-dark .more{color:var(--orange)}
html.theme-dark .tile{background:transparent;border:0}
html.theme-dark .strip{background:#2A2A2A}
html.theme-dark .dark,html.theme-dark .band,html.theme-dark footer,
html.theme-dark .strip div{background:#050505}
html.theme-dark .callout,html.theme-dark .myth{border-left-color:var(--orange)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scroll-behavior:smooth;background:var(--bg);scroll-padding-top:var(--hh,78px)}
body{margin:0;background-color:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:17px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  body,body *{cursor:url("../images/cursor.png"),auto}
  a,button,summary,[role="button"]{cursor:url("../images/cursor.png"),pointer}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.06;margin:0;text-transform:uppercase;letter-spacing:.012em;color:var(--ink)}
h1{font-size:clamp(36px,6.4vw,62px)}
h2{font-size:clamp(27px,4.2vw,40px)}
h3{font-size:clamp(19px,2.6vw,23px)}
p{margin:0 0 1em;max-width:70ch}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---- utility bar ---- */
.util{background:var(--black);color:#e0e0e0;font-size:13.5px}
.util-in{max-width:var(--maxw);margin:0 auto;padding:7px var(--pad);display:flex;gap:18px;align-items:center;flex-wrap:nowrap;overflow:hidden}
.lic-short{display:none}
.util a{color:#e2e2e2;text-decoration:none}
.util a:hover{color:var(--orange)}
.util .lic{font-family:var(--head);letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;color:#bdbdbd}
.util .sp{flex:1 1 auto}

/* ---- header ---- */
.head{position:sticky;top:0;z-index:90;background:var(--headbg);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}
.head-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:14px}
.nav .btn{height:40px;padding-block:0}
/* The phone number must not crowd the solid button beside it. 10px read as
   cramped; this holds the pair ~24px apart without pushing the button off
   the content column. */
.head .top-cta{margin-left:10px}
/* The brand may give up space before the row overflows; the tagline is the
   first thing to go, via the 1240px rule further down. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 1 auto;min-width:0}
.brand img{width:50px}
.brand b{font-family:var(--head);font-size:23px;line-height:1;display:block;color:var(--ink)}
.brand b span{color:var(--orange)}
/* nowrap matters: the brand is allowed to shrink, and without this the
   tagline breaks onto a second line and the whole header grows with it.
   Black on the light theme, white on the dark one. */
.brand .tag{display:block;font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:#000;margin-top:4px;white-space:nowrap}
html.theme-dark .brand .tag{color:#fff}
@media (prefers-color-scheme:dark){
  html:not(.theme-light) .brand .tag{color:#fff}
}
.sp{flex:1 1 auto}
.nav{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.nav .nav-cta{display:none}
/* Nav items sit on one unshrinkable row, so their combined width decides
   whether the header fits. At 1220px they used to total ~1160px inside a
   1132px box, which pushed the Request Service button ~29px past the
   content column everything else lines up to. Tighter padding and normal
   word spacing bring the row back inside. */
.nav-pay{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:.045em;word-spacing:normal;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:9px 8px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;height:40px;
  white-space:nowrap;flex:0 0 auto}
.nav-pay:hover{color:var(--orange)}
.nav a{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:.045em;word-spacing:normal;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:9px 8px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;height:40px;
  white-space:nowrap;flex:0 0 auto}
.nav a:hover{color:var(--orange)}
.nav a[aria-current="page"]{color:var(--orange);box-shadow:inset 0 -3px 0 var(--orange)}
.callnum{font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--ink);text-decoration:none;white-space:nowrap}
.callnum span{color:var(--orange)}
.burger{display:none;width:44px;height:40px;border:1px solid var(--line);background:var(--surface);padding:0}
.burger i{display:block;height:2px;background:var(--ink);margin:5px auto;width:20px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);font-weight:700;
  font-size:16px;letter-spacing:.07em;word-spacing:-.14em;line-height:1.1;text-transform:uppercase;text-decoration:none;padding:13px 24px;
  border:2px solid var(--orange);background:var(--orange);color:#000;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.btn.dark{background:var(--black);border-color:var(--black);color:#fff}
.btn.dark:hover{background:var(--orange);border-color:var(--orange);color:#000}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.onphoto{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn.onphoto:hover{background:#fff;color:#000;border-color:#fff}
.btn.sm{padding:10px 17px;font-size:14.5px}
.btn.big{padding:16px 30px;font-size:18px}
.btn svg{width:18px;height:18px;flex:0 0 auto}

/* ---- hero ---- */
.hero{position:relative;min-height:clamp(440px,66vh,640px);display:flex;align-items:flex-end;
  background:#111 50% 50%/cover no-repeat;background-attachment:scroll;color:#fff;
  image-rendering:auto;transform:translateZ(0)}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.64) 46%,rgba(0,0,0,.18) 100%)}
.hero .wrap{position:relative;padding-block:clamp(48px,8vw,86px)}
.hero h1{max-width:17ch}
.eyebrow{font-family:var(--head);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  font-size:13.5px;color:var(--orange);margin-bottom:16px}
.hero p{font-size:clamp(17px,2vw,20px);color:#f0f0f0;max-width:54ch;margin-top:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-top{display:flex;align-items:center;gap:clamp(20px,4vw,56px);justify-content:space-between}
.hero-copy{flex:1 1 auto;min-width:0}
.hero-logo{flex:0 0 auto;width:clamp(120px,15vw,190px);height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}

/* page banner (inner pages) */
.pbanner{position:relative;min-height:clamp(260px,38vh,380px);display:flex;align-items:flex-end;
  background:#111 50% 45%/cover no-repeat;color:#fff;transform:translateZ(0)}
.pbanner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.25) 100%)}
.pbanner .wrap{position:relative;padding-block:clamp(34px,5vw,58px)}
.pbanner h1{font-size:clamp(30px,5vw,50px)}
.pbanner p{color:#f0f0f0;max-width:60ch;margin-top:14px}

/* ---- sections ---- */
section{padding:clamp(54px,7vw,88px) 0;background:var(--bg)}
.hero,.pbanner,.dark,.band{color:#fff}
.hero h1,.pbanner h1,.dark h2,.dark h3,.band h2{color:#fff}
.mist{background:var(--mist)}
.dark{background:var(--black);color:#fff}
.sec-head{max-width:72ch;margin-bottom:clamp(28px,4vw,42px)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:18px}
.dark .sec-head p{color:#dcdcdc}
.kicker{font-family:var(--head);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  font-size:13px;color:var(--orange);margin-bottom:12px}

/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split img{width:100%;height:100%;max-height:440px;object-fit:cover;object-position:50% 50%}
.split p{color:var(--muted)}

/* values grid */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px)}
.val{border-top:4px solid var(--orange);padding-top:18px}
.val p{color:var(--muted);font-size:16.5px;margin:10px 0 0}

/* services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.card-s{background:var(--surface);border:1px solid var(--line);padding:26px 24px 24px;display:flex;flex-direction:column}
.card-s h3{margin-bottom:10px}
.card-s p{color:var(--muted);font-size:16.5px;margin:0 0 18px}
.more{margin-top:auto;font-family:var(--head);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:14px;color:var(--ember);text-decoration:none;border-bottom:2px solid var(--orange);align-self:flex-start;padding-bottom:2px}

/* stats strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16)}
.strip div{background:var(--black);padding:26px 20px}
.strip b{display:block;font-family:var(--head);font-size:clamp(34px,5vw,50px);color:var(--orange);line-height:1}
.strip span{display:block;color:#dcdcdc;font-size:15.5px;margin-top:8px;line-height:1.45}

/* reviews */
.rev-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px}
.g-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);padding:11px 17px;font-family:var(--head);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:15px}
.g-btn .stars{color:var(--orange);letter-spacing:1px}
.conveyor{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.track{display:flex;gap:20px;width:max-content;animation:slide 26s linear infinite}
.conveyor:hover .track,.conveyor:focus-within .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quote{flex:0 0 auto;width:min(380px,83vw);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--orange);padding:24px}
.quote .stars{color:var(--orange);letter-spacing:2px;font-size:15px}
.quote p{font-size:16.5px;color:var(--muted);margin:12px 0 16px}
.quote cite{font-style:normal;font-family:var(--head);font-weight:700;letter-spacing:.05em;font-size:17px}
.quote small{display:block;color:var(--steel);font-size:14px;margin-top:2px}

/* brands */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tile{display:flex;align-items:center;justify-content:center;background:transparent;border:0;
  min-height:122px;padding:18px 14px;transition:opacity .15s,transform .15s}
.tile:hover{opacity:.72}
.tile img{max-height:56px;width:auto;object-fit:contain}
/* wordmarks that are solid black read as white on a dark page */
html.theme-dark .tile img.mono{filter:brightness(0) invert(1)}

/* standing band */
.band{background:var(--black);color:#fff;padding:clamp(40px,5.5vw,62px) 0}
.band-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;justify-content:space-between}
.band h2{font-size:clamp(24px,3.6vw,36px);max-width:22ch}
.band p{color:#dcdcdc;margin:10px 0 0;font-size:17.5px}
.band-actions{display:flex;flex-wrap:wrap;gap:12px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);counter-reset:s}
.stp{background:var(--surface);border:1px solid var(--line);padding:24px}
.stp .n{counter-increment:s;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--orange);display:block;margin-bottom:10px}
.stp .n::before{content:"Step " counter(s,decimal-leading-zero)}
.stp p{color:var(--muted);font-size:16.5px;margin:10px 0 0}

/* myths */
.myths{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.myth{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);padding:24px}
.myth p{color:var(--muted);font-size:16.5px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* systems */
.systems{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.sys{background:var(--surface);border:1px solid var(--line);padding:26px 24px}
.sys p{color:var(--muted);font-size:16.5px;margin:10px 0 0}
.sys ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:16px}
.sys li{margin-bottom:4px}


.callout{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--orange);padding:clamp(24px,3.4vw,34px)}
.callout p{color:var(--muted);margin:12px 0 0}

/* request */
.req{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:start}
.form{display:grid;gap:13px;background:var(--surface);border:1px solid var(--line);padding:clamp(22px,3vw,30px)}
.form label{font-family:var(--head);font-weight:600;letter-spacing:.09em;font-size:13px;color:var(--muted);text-transform:uppercase}
.form input,.form select,.form textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:12px 13px;font-family:var(--body);font-size:16px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--orange);outline:none}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.note{font-size:14.5px;color:var(--steel);margin:0}
.info li{margin-bottom:8px;color:var(--muted)}
.lead-in{color:var(--muted)}
.info a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange)}
.info ul{list-style:none;padding:0;margin:20px 0 0;font-size:16.5px}

/* footer */
footer{background:var(--black);color:#d4d4d4;padding:52px 0 30px}
.f-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:30px}
footer h3{font-size:14px;letter-spacing:.12em;color:#fff;margin-bottom:14px}
footer a{color:#d4d4d4;text-decoration:none;display:block;padding:5px 0;font-size:15.5px}
footer a:hover{color:var(--orange)}
.f-brand img{width:66px;margin-bottom:14px}
.f-brand p{color:#c0c0c0;font-size:15.5px;margin:0}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px;color:#a2a2a2;font-size:14px;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}


@media (max-width:1240px){
  .nav a,.nav-pay{font-size:15px;padding:9px 8px;letter-spacing:.04em}
  .callnum{font-size:17px}
  .brand .tag{display:none}
}
@media (max-width:1080px){
  .cards,.systems,.steps{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .nav a{padding:9px 9px;font-size:15px}
  .callnum{font-size:17px}
}
@media (max-width:860px){
  body{font-size:16.5px}
  .burger{display:block;flex:0 0 auto}
  .util-in{font-size:12.5px;gap:12px;justify-content:space-between}
  .util .hide-sm{display:none}
  .lic-long{display:none}
  .lic-short{display:inline}
  .util .lic{white-space:nowrap}
  .util a{white-space:nowrap}
  .head-in{flex-wrap:nowrap;gap:10px;padding-block:10px}
  .brand{min-width:0;flex:0 1 auto}
  .brand img{width:40px;flex:0 0 auto}
  .brand b{font-size:19px}
  .brand .tag{font-size:9.5px;letter-spacing:.05em}
  .head .top-cta{display:none}
  .callnum{font-size:15.5px}
  .callnum span{display:none}
  .hero .wrap,.pbanner .wrap{padding-block:clamp(78px,20vw,120px) clamp(34px,8vw,56px)}
  .head{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Mobile menu: anchored to the header's bottom edge and clipped to its own
     box, so it unrolls out from beneath the banner and rolls back up into it.
     No transforms, no stacking tricks. */
  .head{position:sticky;overflow:visible}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    display:block; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg);
    padding:0 var(--pad);
    max-height:0; overflow:hidden;
    transition:max-height .48s cubic-bezier(.32,0,.15,1);
    box-shadow:0 18px 26px -18px rgba(0,0,0,.45);
  }
  .nav.open{max-height:min(80vh,600px);overflow-y:auto}
  .nav a,.nav .nav-pay{
    display:block; height:auto; font-size:20px; padding:15px 0;
    border-bottom:1px solid var(--line); text-align:left;
  }
  .nav a[aria-current="page"]{box-shadow:none}
  .nav .nav-cta{display:flex;margin:18px 0 22px;width:100%;padding:15px;
    height:auto;border-bottom:0;text-align:center}
  .hero-top{display:block}
  .hero-logo{display:none}
  .split{grid-template-columns:1fr}
  .split img{max-height:280px}
  .cards,.systems,.steps,.myths,.req{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .brands{grid-template-columns:repeat(2,1fr)}
  /* Footer collapses to one block with bullet-separated links */
  .f-grid{grid-template-columns:1fr;gap:22px;text-align:center}
  .f-brand{max-width:36ch;margin:0 auto}
  .f-brand p{font-size:14.5px}
  .f-grid > div:not(.f-brand){display:block}
  .f-grid > div:not(.f-brand) h3{margin-bottom:8px;font-size:12.5px;letter-spacing:.14em}
  .f-grid > div:not(.f-brand) a{
    display:inline; padding:0; font-size:15px; white-space:nowrap;
  }
  .f-grid > div:not(.f-brand) a::after{
    content:"•"; color:var(--orange); padding:0 9px; display:inline-block;
  }
  .f-grid > div:not(.f-brand) a:last-of-type::after{content:none}
  .f-grid > div:not(.f-brand){line-height:2.1}
  .legal{justify-content:center;text-align:center;gap:4px 14px}
  .hero-actions .btn,.band-actions .btn{flex:1 1 100%}
  .hero::before,.pbanner::before{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.86) 100%)}
  .track{animation-duration:18s}
  .form .row{grid-template-columns:1fr}
}
@media (max-width:430px){
  .callnum{display:none}
  .brand .tag{display:none}
  .brand b{font-size:20px}
}
@media (max-width:380px){.brands{grid-template-columns:1fr}}
/* html's scroll-padding-top offsets the sticky header; this adds the
   breathing room below it. Together they put "Get started" a fixed
   distance under the banner on every page, independent of the section's
   own responsive padding. */
#request .sec-head{scroll-margin-top:clamp(26px,4.4vw,57px)}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .conveyor{overflow-x:auto}.track{width:auto}
}

/* ---- page banner art ---------------------------------------------------
   Each page's hero lives here rather than in a style attribute, so the
   browser can cache the image across page loads. */
.hero--home{background-image:url("../images/hero-home.webp")}
.pbanner--claims{background-image:url("../images/hero-claims.webp")}
.pbanner--residential{background-image:url("../images/hero-residential.webp")}
.pbanner--commercial{background-image:url("../images/hero-commercial.webp")}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#000;
  font-family:var(--head);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:12px 20px}
.skip:focus{left:0}

/* ---- SMS consent checkboxes -------------------------------------------
   Both boxes are optional. Nothing here sets `required`, and the submit
   handler never checks them: a request goes through either way. */
.consent{display:grid;gap:14px;border:0;border-top:1px solid var(--line);
  padding:18px 0 0;margin:2px 0 0;min-width:0}
.consent-h{font-family:var(--head);font-weight:600;letter-spacing:.09em;font-size:13px;
  color:var(--muted);text-transform:uppercase;margin:0;padding:0 0 4px}
/* .opt is a <label>, so it has to undo the uppercase field-label styling above. */
.form .opt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;
  font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:normal;text-transform:none;
  color:var(--muted)}
.opt input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:2px 0 0;flex:0 0 auto;
  border:2px solid var(--steel);background:var(--bg);display:grid;place-content:center;cursor:pointer}
.opt input[type="checkbox"]:checked{border-color:var(--orange);background:var(--orange)}
.opt input[type="checkbox"]:checked::after{
  content:"";width:11px;height:6px;border:2px solid #000;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-2px)}
.opt input[type="checkbox"]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.opt span{font-size:14px;line-height:1.55;color:var(--muted)}
.opt b{font-weight:600;color:var(--ink);display:block;margin-bottom:3px;font-size:14.5px}
.opt .optional{font-family:var(--head);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  font-size:11px;color:var(--steel)}

/* legal links directly under the submit button */
.form-legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.form-legal a{font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange);
  padding-bottom:1px}
.form-legal a:hover{color:var(--ember)}

/* ---- legal documents ---- */
.doc{max-width:78ch}
.doc h2{font-size:clamp(22px,3vw,30px);margin:44px 0 14px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:18px;margin:26px 0 8px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:600}
.doc p,.doc li{color:var(--muted);font-size:16.5px}
.doc ul{padding-left:20px;margin:0 0 1em}
.doc li{margin-bottom:6px}
.doc hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.doc a{color:var(--ink);border-bottom:2px solid var(--orange);text-decoration:none}
.doc .eff{font-family:var(--head);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:13px;color:var(--steel);margin-bottom:34px}
.doc .notice{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--orange);
  padding:clamp(20px,3vw,28px);margin:0 0 36px}
.doc .notice p{margin:0}
.doc .notice h2{margin:0 0 12px;font-size:19px}

/* ---- footer payment button ----
   Sits in the credit line, directly above "Licensed and insured", on the
   same left edge as the copyright text beside it. */
.f-pay{display:flex;justify-content:flex-start;margin:34px 0 0}
.f-pay + .legal{margin-top:18px}
html.theme-dark .f-pay .btn.line,
footer .f-pay .btn.line{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
footer .f-pay .btn.line:hover{background:var(--orange);border-color:var(--orange);color:#000}
@media (max-width:860px){.f-pay{justify-content:center}}

/* ---- payment interstitial ----------------------------------------------
   Both "Make a Payment" controls open this. It stands in for handing the
   visitor off to a payment provider. */
.pay-portal{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:var(--pad)}
.pay-portal[open],.pay-portal.is-on{display:flex}
.pay-portal .panel{background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--orange);max-width:520px;width:100%;
  padding:clamp(26px,4vw,38px);position:relative;text-align:center}
.pay-portal h2{font-size:clamp(22px,3vw,28px);margin-bottom:14px}
.pay-portal p{color:var(--muted);margin:0 auto 10px;max-width:42ch}
/* A trailing period carries ~0.26em of advance but almost no visual
   weight, so centring the text box leaves the words sitting about 2px
   left of where the eye expects. Hanging it takes it out of the
   centring and lines the words up optically. */
.pay-portal p .hang{margin-right:-.26em}
/* `auto` side margins matter here: .pay-portal p centres via margin:0 auto,
   and a bare `margin:18px 0 22px` would override that and pin the capped
   box to the left edge of the panel. */
.pay-portal .ph{font-family:var(--head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:14px;color:var(--ember);border:1px dashed var(--orange);padding:14px 16px;margin:18px auto 22px}
.pay-portal .x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;
  line-height:1;color:var(--steel);cursor:pointer;padding:6px}
.pay-portal .x:hover{color:var(--orange)}

/* While the payment panel is open the page behind must not scroll. The
   gutter reserved above means locking it shifts nothing. */
html.pay-open{overflow:hidden}