/* Layout: one calm reading column (68ch) with full-bleed photo bands; slate-course pattern marks section breaks. */
:root{
  --paper:#f1f3f2; --paper-2:#e4e8e8; --ink:#1d252c; --ink-2:#4a5763; --line:#cbd2d6;
  --slate:#34414d; --copper:#9b5a2c; --copper-ink:#ffffff; --patina:#3f7e72;
  --card:#ffffff;
  --deep:#1f2c37; --deep-2:#2b3b49; --on-deep:#f0f3f5; --on-deep-2:#b8c5cf; --copper-hi:#e09a63; --patina-hi:#82c7b7; --head:#dfe7ec; --foot:#141d25;
  --display:"Gloock", "Iowan Old Style", Georgia, serif;
  --body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --r:6px; --wrap:72rem; --read:42rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --deep:#0d1317; --deep-2:#17212a; --head:#1a242c; --foot:#070a0d; --paper:#14191e; --paper-2:#1c242b; --ink:#e6eaec; --ink-2:#a9b4bd; --line:#2e3943;
  --slate:#c5d0d8; --copper:#d48c57; --copper-ink:#1a1209; --patina:#7dbdaf; --card:#1a2128; color-scheme:dark}}
:root[data-theme="dark"]{
  --deep:#0d1317; --deep-2:#17212a; --head:#1a242c; --foot:#070a0d; --paper:#14191e; --paper-2:#1c242b; --ink:#e6eaec; --ink-2:#a9b4bd; --line:#2e3943;
  --slate:#c5d0d8; --copper:#d48c57; --copper-ink:#1a1209; --patina:#7dbdaf; --card:#1a2128; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--copper);text-underline-offset:.18em}
a:hover{color:var(--copper)}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.2rem,6vw,3.8rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.read{max-width:var(--read)}
.stack{display:grid;gap:1rem}
.eyebrow{font:600 .78rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--patina)}
.lede{font-size:1.2rem;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.section{padding-block:clamp(2.5rem,7vw,4.5rem)}
.section.alt{background:var(--paper-2)}
.course{height:14px;background:
  radial-gradient(circle at 50% 0,transparent 9px,var(--line) 9.5px,transparent 10.5px) 0 0/28px 14px,
  radial-gradient(circle at 50% 0,transparent 9px,var(--line) 9.5px,transparent 10.5px) 14px 7px/28px 14px;opacity:.9}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--deep)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--deep);color:var(--on-deep);border-top:4px solid var(--copper);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1;color:inherit}
.brand>span:last-child{display:flex;flex-direction:column}
.brand b{font:400 1.45rem/1 var(--display)}
.brand small{font:600 .68rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-2);margin-top:.25rem}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem}
.nav a[aria-current="page"],.nav a:hover{color:var(--copper-hi)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.65rem 1.15rem;border-radius:var(--r);font:600 1rem/1 var(--body);text-decoration:none;border:1.5px solid var(--slate);color:var(--slate);background:transparent;cursor:pointer}
.btn:hover{color:var(--copper);border-color:var(--copper)}
.btn.primary{background:var(--copper);border-color:var(--copper);color:var(--copper-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--copper-ink)}
.btns{display:flex;flex-wrap:wrap;gap:.6rem}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-weight:600;padding:.6rem .8rem;border:1.5px solid var(--on-deep-2);border-radius:var(--r)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:3px solid var(--copper);display:grid;padding:.5rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px))}
.menu nav a{padding:.75rem 0;border-bottom:1px solid var(--deep-2);text-decoration:none;font-weight:500;color:var(--on-deep)}
@media (max-width:860px){.nav{display:none}.menu{display:block}}

/* hero */
.hero{padding-block:clamp(1.8rem,5vw,3.5rem) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero .stack{gap:1.1rem}
.phone-line{font:600 1.05rem/1.3 var(--body)}
.phone-line span{font-variant-numeric:tabular-nums;white-space:nowrap}

/* before/after compare */
.compare{position:relative;overflow:hidden;border-radius:var(--r);background:var(--line);aspect-ratio:var(--ar,2/1);max-width:100%;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.compare .bar::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
  background-image:linear-gradient(90deg,transparent 45%,#34414d 45%,#34414d 55%,transparent 55%)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.tag{position:absolute;top:.6rem;padding:.28rem .55rem;border-radius:4px;font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;background:rgba(20,25,30,.72);color:#fff;pointer-events:none}
.tag.b{left:.6rem}.tag.a{right:.6rem}
.cap{font-size:.92rem;color:var(--ink-2);margin-top:.5rem}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-block:1px solid var(--line)}
.facts div{padding:1.2rem 1rem;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts b{display:block;font:400 1.35rem/1.15 var(--display);margin-bottom:.3rem}
.facts span{font-size:.93rem;color:var(--ink-2)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;counter-reset:s;margin-top:1.8rem;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;gap:.4rem;align-content:start}
.steps li::before{content:counter(s);font:400 2.2rem/1 var(--display);color:var(--copper)}
.steps h3{font-size:1.2rem}
.steps p{color:var(--ink-2);font-size:.98rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* job cards */
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:2rem 1.5rem;margin-top:1.8rem}
.job{display:grid;gap:.55rem;align-content:start;min-width:0}
.job .meta{font:600 .78rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--patina)}
.job h3{font-size:1.2rem}
.job p{font-size:.96rem;color:var(--ink-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pair figure{margin:0;position:relative}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.single img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1.25rem;margin-top:1.8rem}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;display:grid;gap:.75rem;align-content:start}
.stars{color:var(--copper);letter-spacing:.12em;font-size:1rem}
.review blockquote{margin:0;font-size:1rem}
.review footer{font-size:.88rem;color:var(--ink-2)}
.review footer b{color:var(--ink)}

/* faq */
.faq{border-top:1px solid var(--line);margin-top:1.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;font:600 1.08rem/1.35 var(--body);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.8rem;font:400 1.6rem/1 var(--display);color:var(--copper)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.15rem;color:var(--ink-2);max-width:var(--read)}

/* split + lists */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ticks li{padding-left:1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.75rem;height:.4rem;border-left:2px solid var(--patina);border-bottom:2px solid var(--patina);transform:rotate(-45deg)}
.nots li::before{border:0;width:.8rem;height:2px;top:.75em;background:var(--copper);transform:none}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.areas h3{font:600 .85rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--patina);margin-bottom:.6rem}
.areas ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
@media (max-width:760px){.areas{grid-template-columns:1fr}}
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1.5rem;margin-top:1.8rem}
.svc{display:grid;gap:.5rem;align-content:start;text-decoration:none}
.svc img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.svc h3{font-size:1.2rem}
.svc p{color:var(--ink-2);font-size:.96rem}
.svc .noimg{aspect-ratio:3/2;border-radius:3px;background:var(--paper-2);border:1px solid var(--line)}

/* quote form */
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1rem}
.quote label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.quote input,.quote textarea{font:inherit;font-weight:400;padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);width:100%}
.quote input:focus,.quote textarea:focus{border-color:var(--copper);outline:none}
.quote .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.quote .row{grid-template-columns:1fr}}
.quote .hp{position:absolute;left:-9999px}
.form-note{font-size:.88rem;color:var(--ink-2)}
.form-msg{font-weight:600;color:var(--patina)}
.prose{display:grid;gap:1rem;max-width:var(--read)}
.prose h2{margin-top:1rem}
.video{border-radius:var(--r);max-height:80vh;margin-inline:auto}
.crumbs{font-size:.88rem;color:var(--ink-2);margin-bottom:1rem}
.crumbs a{color:var(--ink-2)}

/* footer + mobile call bar */
.foot{position:relative;background:var(--foot);color:var(--on-deep);padding-block:3.2rem 6rem;font-size:.95rem}
.foot::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:radial-gradient(circle at 50% 100%,var(--foot) 10px,transparent 10.5px) 0 0/22px 12px repeat-x}
.foot .muted{color:var(--on-deep-2)}
.foot a:hover{color:var(--copper-hi)}
.foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr}}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot h3{font:600 .8rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--patina-hi);margin-bottom:.6rem}
.foot address{font-style:normal;display:grid;gap:.2rem}
.callbar{display:none}
@media (max-width:860px){
  .callbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:1px solid var(--line);
    padding:.6rem max(12px,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .callbar .btn{min-height:48px;padding:.5rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- slate identity layer ---- */
.mark{flex:none;width:34px;height:34px;border-radius:5px;background:
  radial-gradient(circle at 50% 100%,var(--copper) 6px,transparent 6.5px) 0 22px/12px 12px repeat-x,
  radial-gradient(circle at 50% 100%,#8fa3b3 6px,transparent 6.5px) 6px 14px/12px 12px repeat-x,
  radial-gradient(circle at 50% 100%,#5d7385 6px,transparent 6.5px) 0 6px/12px 12px repeat-x,#3a4c5b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.eyebrow::before{content:"";display:inline-block;width:1.4rem;height:2px;background:var(--copper);vertical-align:middle;margin-right:.6em;transform:translateY(-1px)}
.deep{position:relative;background:var(--deep);color:var(--on-deep);
  background-image:radial-gradient(circle at 50% 100%,rgba(255,255,255,.035) 13px,transparent 13.5px),radial-gradient(circle at 50% 100%,rgba(255,255,255,.035) 13px,transparent 13.5px);
  background-size:28px 16px;background-position:0 0,14px 8px}
.deep .eyebrow{color:var(--patina-hi)}
.deep .lede,.deep .cap,.deep .muted{color:var(--on-deep-2)}
.deep h1 em{font-style:normal;color:var(--copper-hi)}
.deep .ticks li::before{border-color:var(--patina-hi)}
.deep a:not(.btn){color:var(--on-deep)}
.deep .quote{color:var(--ink)}
.btn.light{border-color:var(--on-deep-2);color:var(--on-deep)}
.btn.light:hover{border-color:var(--copper-hi);color:var(--copper-hi)}
.hero.deep{padding-block:clamp(2.2rem,6vw,4.5rem)}
.hero-photo .compare{box-shadow:0 18px 40px rgba(0,0,0,.35);outline:1px solid rgba(255,255,255,.12)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font:600 .82rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-2)}
.trust i{width:5px;height:5px;border-radius:50%;background:var(--copper-hi)}
.tiles{height:12px;background:radial-gradient(circle at 50% 0,var(--deep) 10px,transparent 10.5px) 0 0/22px 12px repeat-x}
.head{background:var(--head);border-bottom:3px solid var(--copper)}
.facts{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.facts b{color:var(--copper)}
.review{border-top:3px solid var(--copper)}
.job .pair,.single{box-shadow:0 6px 18px rgba(20,30,40,.12);border-radius:4px}
.deep .quote .muted,.deep .quote .form-note{color:var(--ink-2)}
.deep .quote a{color:var(--ink)}