/* Killeen Pool Resurfacing.
   The look of a pool owner's water test kit, kept professional: instruction-card white, reagent-label ink,
   a pale pool-water field, discrete colour chips on a calibrated scale, and burnt terracotta only where
   something should be done (calls, the estimate, the live state). One self-hosted variable face, Archivo.
   One hand-written stylesheet. No framework, no JavaScript. */

/* ---------- Font (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#15191E;
  --ink-2:#3D464F;
  --ink-3:#5B6772;
  --rule:#D4DDE3;
  --rule-2:#7F8C96;
  --white:#FFFFFF;
  --water:#E6F2F6;
  --water-2:#D2E8EF;

  /* the scale */
  --c1:#2C7FB8;
  --c2:#8CC7DA;
  --c3:#F3D36B;
  --c4:#E8954A;
  --c5:#B4532A;

  --accent:#B4532A;
  --accent-dark:#923F1D;
  --accent-tint:#F7E6DD;
  --blue-ink:#155F90;

  --scale:linear-gradient(90deg,
    var(--c1) 0 calc(20% - 2px),#fff calc(20% - 2px) 20%,
    var(--c2) 20% calc(40% - 2px),#fff calc(40% - 2px) 40%,
    var(--c3) 40% calc(60% - 2px),#fff calc(60% - 2px) 60%,
    var(--c4) 60% calc(80% - 2px),#fff calc(80% - 2px) 80%,
    var(--c5) 80% 100%);

  --f:"Archivo",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:75rem;
  --gut:clamp(1rem,3.2vw,2rem);
  --r:8px;
  --r-s:5px;
  --lift:0 1px 2px rgba(21,25,30,.06),0 10px 24px -14px rgba(21,25,30,.32);
  --lift-2:0 2px 4px rgba(21,25,30,.06),0 22px 44px -18px rgba(8,14,20,.5);
  --ease:cubic-bezier(.16,1,.3,1);
  --chip:var(--c1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:7.5rem;scrollbar-color:var(--ink-3) var(--water)}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font:400 1.0625rem/1.66 var(--f);font-stretch:100%;
  font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  caret-color:var(--accent);
}
img,svg{max-width:100%}
img{height:auto;display:block}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.25rem}
li{margin-bottom:.45rem}
ul li::marker{color:var(--c1)}
ol li::marker{color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums}
strong{font-weight:700;color:var(--ink)}
::selection{background:var(--accent-tint);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:2px;border-radius:3px}

a{color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--accent-dark)}

h1,h2,h3{font-family:var(--f);color:var(--ink);text-wrap:balance}
h1{margin:0 0 1rem;font-size:clamp(2rem,1.35rem + 2.5vw,3.15rem);line-height:1.05;font-weight:800;font-stretch:112%;letter-spacing:-.022em}
h2{margin:0 0 clamp(1.15rem,2.4vw,1.75rem);font-size:clamp(1.55rem,1.15rem + 1.5vw,2.3rem);line-height:1.12;font-weight:800;font-stretch:108%;letter-spacing:-.018em;max-width:34ch}
h3{margin:1.85rem 0 .5rem;font-size:clamp(1.08rem,1rem + .3vw,1.22rem);line-height:1.3;font-weight:700;font-stretch:102%;letter-spacing:-.006em}
h2 + h3{margin-top:.25rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1rem;font-weight:700;text-decoration:none;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}
.skip:hover{color:#fff}
.ic{width:1.1em;height:1.1em;flex:none;display:inline-block;vertical-align:-.16em}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;
  padding:.8rem 1.3rem;border:2px solid transparent;border-radius:var(--r-s);
  font:700 1rem/1.15 var(--f);font-stretch:104%;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s var(--ease);
}
.btn .ic{width:1.15rem;height:1.15rem}
.btn:active{transform:translateY(1px)}
.btn-phone,.btn-solid{background:var(--accent);color:#fff;box-shadow:0 8px 16px -10px rgba(21,25,30,.5)}
.btn-phone:hover,.btn-solid:hover{background:var(--accent-dark);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-on-dark{border-color:#fff;color:#fff}
.btn-on-dark:hover{background:#fff;color:var(--accent-dark)}
.btn-lg{min-height:3.35rem;padding:.95rem 1.55rem;font-size:1.06rem}
.btn-block{display:flex;width:100%}
.btn-line .ic{transition:transform .2s var(--ease)}
.btn-line:hover .ic{transform:translateX(3px)}

/* ---------- Top bar and header ---------- */
.topbar{background:var(--ink);color:#D3DBE0;font-size:.84rem}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.35rem}
.topbar p{margin:0;display:flex;align-items:center;gap:.5rem}
.topbar .ic{color:var(--c2)}
.topbar-phone{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:700;text-decoration:none}
.topbar-phone:hover{color:var(--c3)}

.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 10px 24px -20px rgba(21,25,30,.55)}
.site-header::after{content:"";display:block;height:4px;background:var(--scale)}
.header-in{position:relative;display:flex;align-items:center;gap:1.25rem;min-height:4.6rem}
.logo{display:flex;align-items:center;gap:.7rem;min-width:0;flex:none;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--ink)}
.mark{width:2.6rem;height:2.6rem;flex:none}
.logo-word{display:flex;flex-direction:column;line-height:1}
.logo-l1{font-size:1.3rem;font-weight:800;font-stretch:118%;letter-spacing:-.018em}
.logo-l2{margin-top:.22rem;font-size:.84rem;font-weight:500;font-stretch:97%;color:var(--ink-3)}

.nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav-list > li{margin:0}
.nav-list > li > a,.dd-btn{
  position:relative;display:flex;align-items:center;gap:.3rem;padding:.65rem .75rem;
  font:650 .97rem/1.2 var(--f);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
}
.nav-list > li > a::after,.dd-btn::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--rule-2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-list > li > a:hover::after,.dd-btn:hover::after,.has-dd:focus-within .dd-btn::after{transform:none}
.nav-list > li > a[aria-current="page"]::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--accent)}
.dd-btn .ic{width:.9rem;height:.9rem;transition:transform .2s var(--ease)}
.has-dd{position:relative}
.has-dd:hover .dd-btn .ic,.has-dd:focus-within .dd-btn .ic{transform:rotate(180deg)}
.dd{
  position:absolute;top:100%;left:-.25rem;z-index:5;min-width:19.5rem;list-style:none;margin:0;padding:.45rem;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--lift-2);
  visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .22s var(--ease),visibility .18s;
}
.has-dd:hover .dd,.has-dd:focus-within .dd{visibility:visible;opacity:1;transform:none}
.dd li{margin:0}
.dd a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--r-s);font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink);text-decoration:none}
.dd a::before{
  content:"";flex:none;width:.55rem;height:.55rem;border-radius:2px;
  background:var(--water-2) linear-gradient(var(--c1),var(--c1)) bottom/100% 0% no-repeat;transition:background-size .35s var(--ease);
}
.dd a:hover{background:var(--water)}
.dd a:hover::before{background-size:100% 100%}
.dd a[aria-current="page"]::before{background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 100%}
.header-cta{flex:none}
.btn-header{min-height:2.85rem;padding:.6rem 1.05rem;font-size:.95rem;box-shadow:none}

/* Phone menu: a <details> element, no JavaScript */
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:2.85rem;height:2.85rem;border:1px solid var(--rule);border-radius:var(--r-s);color:var(--ink)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .ic{width:1.45rem;height:1.45rem}
.mnav[open] summary{border-color:var(--ink)}
.mnav[open] .ic-open,.mnav:not([open]) .ic-close{display:none}
.mnav-panel{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:#fff;box-shadow:0 22px 34px -16px rgba(21,25,30,.4);padding:.5rem var(--gut) 1.5rem;
  max-height:calc(100vh - 7.5rem);overflow:auto;
}
.mnav-panel ul{list-style:none;margin:0 0 1.25rem;padding:0}
.mnav-panel li{margin:0}
.mnav-panel a{display:block;padding:.75rem 0;font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.mnav-panel a[aria-current="page"]{color:var(--accent-dark)}
.mnav-group > span{display:block;padding:1rem 0 .3rem;font-size:.86rem;font-weight:700;color:var(--ink-3)}
.mnav-group ul{margin:0;padding-left:.9rem;border-left:1px solid var(--rule)}
.mnav-group a{font-size:.97rem;font-weight:600}
.callbar{display:none}

/* ---------- Hero: the pool photo, the instruction card, the estimate card ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#1E2A33}
.hero-slides{position:absolute;inset:0;z-index:-1}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slides img:not(:first-child){display:none}
.hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,22,28,.5) 0%,rgba(15,22,28,.2) 55%,rgba(15,22,28,.06) 100%)}
.hero-in{display:grid;gap:clamp(1.25rem,2.6vw,2rem);padding-block:clamp(2.25rem,5.5vw,4.75rem)}
.hero-copy{
  position:relative;overflow:hidden;max-width:47rem;background:#fff;border-radius:10px;box-shadow:var(--lift-2);
  padding:calc(clamp(1.35rem,3vw,2.35rem) + 10px) clamp(1.35rem,3vw,2.35rem) clamp(1.35rem,3vw,2.25rem);
}
.scale{position:absolute;top:0;left:0;right:0;height:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#fff}
.scale i{position:relative;background:#EDF1F3}
.scale i::after{content:"";position:absolute;inset:0;background:var(--chip)}
.scale i:nth-child(1){--chip:var(--c1)}
.scale i:nth-child(2){--chip:var(--c2)}
.scale i:nth-child(3){--chip:var(--c3)}
.scale i:nth-child(4){--chip:var(--c4)}
.scale i:nth-child(5){--chip:var(--c5)}
.hero h1{margin-bottom:.85rem}
.h1-brand{display:block}
.h1-rest{display:block;margin-top:.6rem;font-size:.52em;line-height:1.3;font-weight:650;font-stretch:100%;letter-spacing:-.008em;color:var(--ink-2)}
.tagline{display:flex;align-items:center;gap:.5rem;margin:0 0 1.1rem;font-weight:700;font-size:.97rem;color:var(--blue-ink)}
.tagline::before{content:"";width:.62rem;height:.62rem;border-radius:2px;background:var(--c1)}
.hero-intro p{font-size:1.02rem;line-height:1.66}
.hero-intro p:last-child{margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.5rem}
.hero-note{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.9rem;font-weight:600;color:var(--ink-3)}
.hero-note .ic{color:var(--c1)}
.hero-form{min-width:0}

/* The estimate card */
.ticket{background:#fff;border-radius:10px;box-shadow:var(--lift-2);overflow:hidden}
.ticket-head{display:flex;flex-direction:column;gap:.2rem;padding:1.05rem 1.3rem 1.1rem;background:var(--accent);color:#fff}
.ticket-title{order:1;margin:0;font-size:1.42rem;line-height:1.15;font-weight:800;font-stretch:110%;letter-spacing:-.012em}
.ticket-kicker{order:2;margin:0;font-size:.9rem;font-weight:500;color:#fff}
.qf{display:grid;gap:.85rem;padding:1.2rem 1.3rem 1.3rem}
.f{display:block;margin:0}
.f > span{display:flex;align-items:center;gap:.4rem;margin-bottom:.32rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.f > span::before{
  content:"";flex:none;width:.5rem;height:.5rem;border-radius:2px;
  background:var(--water-2) linear-gradient(var(--c1),var(--c1)) bottom/100% 0% no-repeat;transition:background-size .45s var(--ease);
}
.f:focus-within > span::before{background-size:100% 100%}
.f input,.f select,.f textarea{
  width:100%;font:400 1rem/1.4 var(--f);color:var(--ink);background:#fff;
  border:1.5px solid var(--rule-2);border-radius:var(--r-s);padding:.68rem .8rem;transition:border-color .15s,box-shadow .15s;
}
.f textarea{resize:vertical;min-height:6.5rem}
.f select{appearance:none;padding-right:2.4rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233D464F' stroke-width='2.2' stroke-linecap='square' d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") no-repeat right .75rem center/1rem}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,95,144,.22)}
.f ::placeholder{color:#6B7782;opacity:1}
.f-pair{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.f-hint{margin:-.4rem 0 0;font-size:.82rem;color:var(--ink-3)}
.f-fine{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-3)}
.f-fine a{color:var(--ink-2)}
.f-errors{padding:.8rem 1rem;border-radius:var(--r-s);background:var(--accent-tint);color:var(--ink);font-size:.92rem}
.f-errors p{margin:0 0 .3rem;font-weight:700}
.f-errors ul{margin:0;padding-left:1.1rem}
.f-errors li{margin:0}
.qf .btn-solid{margin-top:.15rem}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Bands ---------- */
.band{padding-block:clamp(3.25rem,6.5vw,5.75rem)}
.band--paper{background:var(--water)}
.band--photo{padding-block:clamp(1.75rem,3.5vw,2.75rem) 0}
.band--photo + .band:not(.band--paper){padding-top:clamp(2.5rem,5vw,4rem)}
.band > .wrap + .wrap{margin-top:1.75rem}
.band-photo{display:block;width:100%;aspect-ratio:12/5;object-fit:cover;border-radius:var(--r);box-shadow:var(--lift)}

/* The section's place on the scale: a small chip before each section heading, stepping band by band */
main > section:nth-of-type(4n+2){--chip:var(--c2)}
main > section:nth-of-type(4n+3){--chip:var(--c1)}
main > section:nth-of-type(4n){--chip:var(--c4)}
main > section:nth-of-type(4n+1){--chip:var(--c3)}
.band > .wrap > h2:first-child::before,.band-head > h2:first-child::before{
  content:"";display:inline-block;width:.42em;height:.42em;margin-right:.42em;vertical-align:.1em;border-radius:3px;
  background:var(--chip);box-shadow:inset 0 0 0 1px rgba(21,25,30,.14);
}

.rd{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.prose > :not(h2):not(.cta-row):not(.faq):not(.spec-tags):not(.split){max-width:68ch}
.wrap.prose > .faq{max-width:52rem}
.section-lead{max-width:62ch;margin:0 0 1.9rem;font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.55;font-weight:500;color:var(--ink)}
.band-head{margin-bottom:1.6rem}
.band-head h2{margin-bottom:.75rem}
.band-head p{max-width:62ch}

/* ---------- Cards ---------- */
.cards{display:grid;gap:clamp(.9rem,1.8vw,1.35rem);grid-template-columns:minmax(0,1fr);margin-bottom:.5rem}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  padding-bottom:1.2rem;transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s;
}
.card > :not(.card-photo){padding-inline:1.2rem}
.card-photo{width:100%;aspect-ratio:3/2;object-fit:cover;margin:0 0 1.05rem}
.card h3{display:flex;align-items:baseline;gap:.55rem;margin:1.2rem 0 .5rem;font-size:1.1rem}
.card-photo + h3{margin-top:0}
.card h3::before{
  content:"";flex:none;width:.55rem;height:.55rem;border-radius:2px;transform:translateY(-.08em);
  background:var(--water-2) linear-gradient(var(--chip),var(--chip)) bottom/100% 0% no-repeat;transition:background-size .45s var(--ease);
}
.band--paper .card h3::before{background-color:#BFDCE6}
.card:hover,.card:focus-within{border-color:#C2CDD5;box-shadow:var(--lift)}
.card:hover h3::before,.card:focus-within h3::before{background-size:100% 100%}
.card p{font-size:.97rem;line-height:1.6}
.card p:last-child{margin-bottom:0}
.band--paper .card{border-color:#C9DCE4}
.cards:not(:has(.card-photo)){column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:clamp(1.75rem,3vw,2.25rem)}
.cards:not(:has(.card-photo)) > .card{background:none;border:0;border-top:1.5px solid var(--ink);border-radius:0;padding:1rem 0 0;box-shadow:none}
.cards:not(:has(.card-photo)) > .card > *{padding-inline:0}
.cards:not(:has(.card-photo)) > .card h3{margin-top:0}


/* ---------- Lead row, why-us box, split photos ---------- */
.lead-row{display:grid;gap:1.75rem 2.5rem;align-items:center}
.lead-photo,.split-photo,.row-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);box-shadow:var(--lift)}
.why-box{margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--lift);padding:clamp(1.25rem,2.6vw,1.9rem)}
.why-box .why-title{margin:0 0 1.15rem;font-size:clamp(1.22rem,1rem + .75vw,1.52rem);line-height:1.2;font-weight:800;font-stretch:106%;letter-spacing:-.014em;color:var(--ink)}
.why-box ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.why-box li{display:flex;gap:.65rem;margin:0}
.why-box .ic{flex:none;width:1.35rem;height:1.35rem;margin-top:.12rem;padding:.2rem;border-radius:4px;background:var(--c1);color:#fff}
.why-box p{margin:0;font-size:.97rem;line-height:1.55}

.split{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr)}
.split > h2:first-child{grid-column:1/-1;margin-bottom:0}
.split > .prose,.split > div{min-width:0}
.split > .prose > :last-child{margin-bottom:0}
.split-aside{display:grid;gap:1.5rem;align-content:start}
.wrap.photo-row{display:grid;gap:clamp(.75rem,1.5vw,1.1rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}

/* ---------- Readings: spec tags ---------- */
.spec-tags{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0 0 1.75rem;padding:0}
.spec-tags li{display:flex;flex-direction:column;justify-content:center;min-width:8.5rem;margin:0;padding:.55rem .9rem .6rem;background:#fff;border:1px solid var(--rule);border-radius:var(--r-s)}
.spec-tags .rk{display:flex;align-items:center;gap:.4rem;font-size:.8rem;line-height:1.3;font-weight:600;color:var(--ink-3)}
.spec-tags .rk::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--c1)}
.spec-tags .rv{font-size:1.02rem;line-height:1.3;font-weight:750;font-stretch:104%;font-variant-numeric:tabular-nums;color:var(--ink)}
.band--paper .spec-tags li{border-color:#C9DCE4}

/* ---------- Readings: the price chart ---------- */
.batch{position:relative;margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--lift);overflow:hidden}
.batch figcaption{padding:1.15rem 1.3rem .9rem;border-bottom:1.5px solid var(--ink)}
.batch-kicker{display:none}
.batch-title{display:block;font-size:1.12rem;line-height:1.3;font-weight:800;font-stretch:106%;color:var(--ink)}
.batch dl{margin:0;padding:.35rem 1.3rem .55rem}
.batch dl div{display:flex;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px dotted var(--rule-2)}
.batch dl div:last-child{border-bottom:0}
.batch dt{flex:1 1 auto;font-size:.94rem;line-height:1.4;color:var(--ink-2)}
.batch dd{flex:none;margin:0;max-width:11rem;text-align:right;font-size:.98rem;line-height:1.35;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink)}
.batch-src{margin:0;padding:.85rem 1.3rem 1.05rem;font-size:.84rem;line-height:1.5;color:var(--ink-3);background:#F5FAFC;border-top:1px solid var(--rule)}

/* ---------- Steps: the instruction card ---------- */
.stakes{list-style:none;margin:0 0 1.5rem;padding:0;background:#fff;border-radius:var(--r);box-shadow:var(--lift);overflow:hidden}
.stakes li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1.1rem;margin:0;padding:1.15rem 1.35rem;border-top:1px solid var(--rule)}
.stakes li:first-child{border-top:0}
.stake{
  grid-row:1 / span 2;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-s);
  font-size:1rem;font-weight:800;font-stretch:110%;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--water);box-shadow:inset 0 0 0 1px rgba(21,95,144,.18);
}
.stakes h3,.stakes h4{margin:.1rem 0 .3rem;font-size:1.06rem;line-height:1.3}
.stakes p{margin:0;font-size:.97rem;line-height:1.6}

/* ---------- FAQ ---------- */
.faq{margin:0 0 1.5rem;border-top:1px solid var(--rule)}
.band--paper .faq{border-top-color:#C3D7DF}
.faq details{border-bottom:1px solid var(--rule)}
.band--paper .faq details{border-bottom-color:#C3D7DF}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:.85rem;padding:1.05rem .2rem;
  font-size:1.04rem;line-height:1.4;font-weight:700;font-stretch:102%;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";flex:none;width:.55rem;height:.55rem;margin-top:.45rem;border-radius:2px;
  background:var(--water-2) linear-gradient(var(--accent),var(--accent)) bottom/100% 0% no-repeat;transition:background-size .45s var(--ease);
}
.band--paper .faq summary::before{background-color:#BFDCE6}
.faq summary:hover{color:var(--accent-dark)}
.faq details[open] > summary::before{background-size:100% 100%}
.faq-ic{margin-left:auto;flex:none;color:var(--ink-3);transition:transform .25s var(--ease)}
.faq-ic .ic{width:1.05rem;height:1.05rem;vertical-align:0}
.faq details[open] .faq-ic{transform:rotate(180deg)}
.faq-a{padding:0 .2rem 1.25rem 1.4rem}
.faq-a > :last-child{margin-bottom:0}

/* ---------- Calls to action ---------- */
.cta-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.85rem 1.5rem;
  margin-top:2.25rem;padding:1rem 1.15rem 1rem 1.35rem;background:#fff;border:1px solid var(--rule);border-radius:var(--r);
}
.band--paper .cta-row{border-color:#C9DCE4}
.cta-row p{margin:0;font-weight:650;color:var(--ink)}
.split .cta-row{margin-top:1.75rem}

.cta-band{background:var(--accent);color:#fff;padding-block:clamp(3.25rem,6vw,4.75rem)}
.cta-band-in{display:grid;gap:1.75rem;align-items:center}
.cta-band h2{margin:0 0 .8rem;color:#fff;max-width:26ch}
.cta-band p{margin:0;max-width:60ch;font-size:1.04rem;color:#fff}
.cta-band a:not(.btn){color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-band .btn-phone{background:#fff;color:var(--accent-dark);box-shadow:0 10px 20px -12px rgba(21,25,30,.55)}
.cta-band .btn-phone:hover{background:var(--ink);color:#fff}
.cta-band-actions .btn-phone:not([href^="tel:"]) + .btn-on-dark{display:none}

/* ---------- Contact, lists, notes ---------- */
.contact-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.contact-list li{margin:0;padding:1rem 1.15rem;background:#fff;border:1px solid #C9DCE4;border-radius:var(--r)}
.contact-list .k{display:flex;align-items:center;gap:.45rem;margin:0 0 .3rem;font-size:.85rem;font-weight:700;color:var(--ink-3)}
.contact-list .k .ic{color:var(--c1)}
.contact-list .v{margin:0;font-size:1.02rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.area-line{max-width:70ch;font-size:.98rem}
.map iframe{display:block;width:100%;height:22rem;border:0;border-radius:var(--r)}
.link-list{list-style:none;padding:0;columns:2 15rem;column-gap:2rem}
.link-list li{break-inside:avoid;display:flex;align-items:baseline;gap:.55rem}
.link-list li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:2px;background:var(--c2);transform:translateY(-.08em)}
.note,.foot-note{font-size:.92rem;color:var(--ink-3)}
.foot-note{margin-top:2rem}
.quote-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.quote-card{margin:0;padding:1.4rem;background:#fff;border:1px solid var(--rule);border-radius:var(--r)}
.quote-card blockquote{margin:0 0 .8rem}
.quote-card figcaption{font-weight:700;color:var(--ink)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#C3CCD3}
.foot-grid{display:grid;gap:2.25rem;padding-block:clamp(2.75rem,5vw,4rem)}
.logo--foot{color:#fff;margin-bottom:1.25rem}
.logo--foot:hover{color:#fff}
.logo--foot .logo-l2{color:#A9B5BE}
.foot-id p{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .6rem;font-size:.95rem;line-height:1.5}
.foot-id .nap{display:block}
.foot-id .ic{color:var(--c2);width:1.05rem;height:1.05rem;margin-top:.2rem}
.site-footer strong{color:#fff}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.3)}
.site-footer a:hover{color:#fff;text-decoration-color:var(--c4)}
.foot-small{font-size:.86rem;color:#9AA6AF}
.foot-head{margin:0 0 .85rem;font-size:1.02rem;font-weight:800;font-stretch:106%;color:#fff}
.foot-head:not(:first-child){margin-top:1.6rem}
.foot-nav ul,.social{list-style:none;margin:0;padding:0}
.foot-nav ul{columns:2;column-gap:1.5rem}
.foot-nav li,.social li{margin:0 0 .5rem;break-inside:avoid}
.foot-nav a,.social a{font-size:.94rem;line-height:1.35;text-decoration:none}
.foot-nav a:hover,.social a:hover{text-decoration:underline}
.foot-nav a[aria-current="page"]{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.foot-nav a[aria-current="page"]::before{content:"";width:.45rem;height:.45rem;border-radius:2px;background:var(--c4)}
.foot-area p{font-size:.94rem;line-height:1.7}
.foot-strip{background:#0C0F12}
.foot-bottom{margin:0;padding:1rem 0;text-align:center;font-size:.85rem;color:#98A4AD}

/* ---------- Larger screens ---------- */
@media (min-width:40rem){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards > .card:last-child:nth-child(odd){grid-column:1/-1}
  .cards > .card:last-child:nth-child(odd) .card-photo{aspect-ratio:12/5}
}
@media (min-width:48rem){
  .foot-grid{grid-template-columns:1.1fr 1.35fr 1fr}
  .cta-band-in{grid-template-columns:minmax(0,1.4fr) auto}
  .stakes li{grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr);align-items:start}
  .stake{grid-row:auto}
  .stakes h3,.stakes h4{margin-top:.45rem}
  .stakes p{padding-top:.15rem}
}
@media (min-width:54rem){
  .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .split > .split-photo{position:sticky;top:7rem}
  .lead-row{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
}
@media (min-width:62rem){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards > .card:last-child:nth-child(odd){grid-column:auto}
  .cards > .card:last-child:nth-child(odd) .card-photo{aspect-ratio:3/2}
  .cards:has(> .card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards:has(> .card:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards:has(> .card:nth-child(5):last-child) > .card{grid-column:span 2}
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(n+4){grid-column:span 3}
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(n+4) .card-photo{aspect-ratio:9/4}
  .hero--form .hero-in{grid-template-columns:minmax(0,1fr) minmax(20rem,23.5rem);align-items:start;column-gap:clamp(1.5rem,3vw,2.5rem)}
}

/* ---------- Phones and tablets ---------- */
@media (max-width:67.49rem){
  .nav{display:none}
  .header-cta{margin-left:auto}
  .mnav{display:block}
  .header-in{gap:.75rem;min-height:4.1rem}
}
@media (max-width:59.99rem){
  .hero{background:var(--water)}
  .hero-slides{inset:0 0 auto 0;height:clamp(12rem,46vw,17rem)}
  .hero-slides img{object-position:50% 78%}
  .hero-slides::after{background:linear-gradient(rgba(15,22,28,.08),rgba(15,22,28,0))}
  .hero-in{padding-top:clamp(9.5rem,38vw,14rem);padding-bottom:1.75rem}
  .hero-copy{max-width:none}
  .hero-form{max-width:36rem}
  .callbar{
    display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
    background:#fff;box-shadow:0 -1px 0 var(--rule),0 -8px 20px -8px rgba(21,25,30,.25);
  }
  .callbar .btn{flex:1 1 auto;min-height:3rem;padding-inline:.8rem;font-size:.97rem}
  .callbar .btn-line{flex:0 1 auto}
  body{padding-bottom:4.4rem}
}
@media (max-width:30rem){
  .topbar .long,.hero-note{display:none}
  .topbar{font-size:.78rem}
  .header-in{gap:.55rem}
  .mark{width:2.2rem;height:2.2rem}
  .logo{gap:.5rem}
  .logo-l1{font-size:1.08rem}
  .logo-l2{font-size:.74rem}
  .btn-header{width:2.85rem;padding:0}
  .btn-header .ic{width:1.25rem;height:1.25rem}
  .btn-header span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .f-pair{grid-template-columns:minmax(0,1fr)}
  .batch dl div{flex-wrap:wrap;gap:.15rem 1rem}
  .batch dd{max-width:none;text-align:left}
  .cta-row{padding:1rem}
  .cta-row .btn{width:100%}
}

/* ---------- Motion: the scale develops once; chips develop on use ---------- */
@media (prefers-reduced-motion:no-preference){
  .scale i::after{animation:develop .6s var(--ease) both}
  .scale i:nth-child(1)::after{animation-delay:.15s}
  .scale i:nth-child(2)::after{animation-delay:.23s}
  .scale i:nth-child(3)::after{animation-delay:.31s}
  .scale i:nth-child(4)::after{animation-delay:.39s}
  .scale i:nth-child(5)::after{animation-delay:.47s}
}
@keyframes develop{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .card h3::before{background-size:100% 100%}
}

@media print{
  .topbar,.site-header,.callbar,.hero-form,.hero-slides,.cta-band,.skip,.scale{display:none !important}
  .hero{background:none}
  .hero-in{padding:0}
  .hero-copy{box-shadow:none;padding:0}
  body{background:#fff;color:#000}
}