/* Radon Mitigation York PA Guide, gedeelde stijl.
   Tokens staan in :root en worden twee keer opnieuw gezet: onder
   prefers-color-scheme voor de systeeminstelling, en onder [data-theme]
   zodat een expliciete keuze in beide richtingen wint. */
:root{
  --ground:#F7F8F9; --surface:#FFFFFF; --surface-2:#EFF2F4;
  --ink:#16202A; --ink-soft:#5A6673; --ink-faint:#8A949E;
  --line:#DFE4E8; --line-strong:#C6CED5;
  --accent:#1E5F74; --accent-ink:#FFFFFF; --accent-soft:#E6EFF2;
  --warn:#B8541F; --warn-soft:#FBEDE5;
  --ok:#3F7A55; --ok-soft:#E8F1EB;
  --shadow:0 1px 2px rgba(22,32,42,.06),0 8px 24px rgba(22,32,42,.06);
  --r:10px;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10171E; --surface:#161F28; --surface-2:#1D2832;
    --ink:#E8ECEF; --ink-soft:#A3AEB8; --ink-faint:#78838D;
    --line:#26333E; --line-strong:#384956;
    --accent:#5FB0C4; --accent-ink:#0B1218; --accent-soft:#16303A;
    --warn:#E08A52; --warn-soft:#2E1F16;
    --ok:#74B58C; --ok-soft:#17261D;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#10171E; --surface:#161F28; --surface-2:#1D2832;
  --ink:#E8ECEF; --ink-soft:#A3AEB8; --ink-faint:#78838D;
  --line:#26333E; --line-strong:#384956;
  --accent:#5FB0C4; --accent-ink:#0B1218; --accent-soft:#16303A;
  --warn:#E08A52; --warn-soft:#2E1F16;
  --ok:#74B58C; --ok-soft:#17261D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.18;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem);letter-spacing:-.015em}
h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);letter-spacing:-.01em}
h3{font-size:1.09rem;font-family:var(--body);font-weight:600;letter-spacing:-.005em}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.lede{font-size:1.09rem;color:var(--ink-soft);max-width:60ch}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.brand-mark{flex:none;width:30px;height:33px}
.brand-text{display:grid;gap:.05rem;line-height:1.05}
.brand-service{font-family:var(--mono);font-size:.6rem;letter-spacing:.155em;text-transform:uppercase;color:var(--ink-soft)}
.brand-place{font-family:var(--display);font-size:1.28rem;font-weight:600;letter-spacing:-.015em}
.brand-place b{color:var(--accent);font-weight:600}
.site-nav{margin-left:auto;display:flex;gap:1.35rem;flex-wrap:wrap}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:.9rem}
.site-nav a:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.4rem,1.4rem + 3vw,4rem) clamp(1.8rem,1rem + 2vw,2.6rem);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:start}
.hero h1{margin-block:.55rem .85rem}
.hero-points{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.hero-points li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--ink-soft)}
.hero-points svg{flex:none;margin-top:.28rem;color:var(--accent)}

/* ---------- pCi/L scale ---------- */
.gauge{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.3rem 1.2rem;box-shadow:var(--shadow)}
.gauge h2{font-family:var(--body);font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.gauge .unit{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);letter-spacing:.04em}
.scale{margin-top:1.15rem}
.scale-bar{position:relative;height:16px;border-radius:8px;overflow:hidden;
  background:linear-gradient(90deg,var(--ok) 0%,var(--ok) 18%,#C9A227 18%,#C9A227 38%,var(--warn) 38%,var(--warn) 100%);}
.scale-marks{position:relative;height:1.6rem;margin-top:.4rem}
.mark{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);white-space:nowrap}
.mark::before{content:"";position:absolute;left:50%;top:-.52rem;width:1px;height:.4rem;background:var(--line-strong)}
.action-line{position:absolute;top:-4px;bottom:-4px;left:38%;width:2px;background:var(--ink);border-radius:1px}
.scale-legend{display:grid;gap:.55rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.leg{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;font-size:.87rem}
.chip{font-family:var(--mono);font-size:.74rem;padding:.16rem .45rem;border-radius:4px;white-space:nowrap}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-mid{background:#F6F0DC;color:#7A6414}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip-mid{background:#2A2413;color:#D6B94A}}
:root[data-theme="dark"] .chip-mid{background:#2A2413;color:#D6B94A}
.leg span:last-child{color:var(--ink-soft)}
.gauge-york{margin-top:.55rem;font-size:.82rem;color:var(--ink-soft);display:flex;align-items:center;gap:.45rem}
.york-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.gauge cite{display:block;margin-top:.9rem;font-style:normal;font-size:.78rem;color:var(--ink-faint)}

/* ---------- layout ---------- */
.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:clamp(1.8rem,1rem + 3vw,3.2rem);align-items:start;padding-block:clamp(2.2rem,1.4rem + 2.4vw,3.4rem)}
.content{display:grid;gap:clamp(2.2rem,1.4rem + 2.2vw,3.2rem);min-width:0}
.content section{display:grid;gap:.95rem}
.content section > p{max-width:66ch}

/* ---------- form ---------- */
.rail{position:sticky;top:78px;display:grid;gap:1rem}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.quote-head{background:var(--accent);color:var(--accent-ink);padding:1rem 1.2rem}
.quote-head h2{font-family:var(--body);font-size:1.02rem;font-weight:600;color:var(--accent-ink);margin-bottom:.2rem}
.quote-head p{font-size:.84rem;opacity:.9}
.quote form{padding:1.15rem 1.2rem 1.3rem;display:grid;gap:.85rem}
.field{display:grid;gap:.3rem}
.field label{font-size:.82rem;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.92rem;color:var(--ink);background:var(--ground);
  border:1px solid var(--line-strong);border-radius:7px;padding:.56rem .65rem;width:100%}
.field textarea{resize:vertical;min-height:68px}
.field .hint{font-size:.76rem;color:var(--ink-faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.btn{font-family:var(--body);font-size:.95rem;font-weight:600;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:7px;padding:.68rem 1rem;width:100%}
.btn:hover{filter:brightness(1.08)}
.consent{font-size:.76rem;color:var(--ink-faint);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[aria-busy="true"]{opacity:.65;cursor:progress}
.form-status{font-size:.86rem;line-height:1.5;padding:.6rem .75rem;border-radius:7px;border:1px solid}
.form-status.is-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.form-status.is-err{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.quote.is-sent form > *:not(.form-status):not(.consent){display:none}
.rail-note{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.05rem;font-size:.85rem;color:var(--ink-soft)}
.rail-note strong{color:var(--ink)}

/* ---------- directory ---------- */
.dir{display:grid;gap:.9rem}
.firm{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.2rem;display:grid;gap:.7rem}
.firm-top{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.firm-top h3{margin:0}
.firm-meta{margin-left:auto;display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.stars{color:#C9A227;letter-spacing:.04em}
.firm address{font-style:normal;font-size:.87rem;color:var(--ink-soft)}
.firm p{font-size:.91rem;color:var(--ink-soft);max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.tags li{font-family:var(--mono);font-size:.71rem;letter-spacing:.03em;padding:.18rem .48rem;border-radius:4px;background:var(--surface-2);color:var(--ink-soft)}
.tags li.t-mit{background:var(--accent-soft);color:var(--accent)}
.firm-links{display:flex;flex-wrap:wrap;gap:1rem;font-size:.87rem;padding-top:.15rem}

/* ---------- tables and misc ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:420px}
th,td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
td:first-child{font-weight:500}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.steps{margin:0;padding-left:1.15rem;display:grid;gap:.6rem;max-width:64ch}
.steps li{padding-left:.25rem}
.steps strong{font-weight:600}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1.05rem}
details + details{margin-top:.6rem}
summary{cursor:pointer;font-weight:500;font-size:.96rem;list-style-position:outside}
details p{margin-top:.6rem;font-size:.91rem;color:var(--ink-soft);max-width:64ch}
.callout{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 var(--r) var(--r) 0;padding:.95rem 1.15rem;font-size:.91rem;color:var(--ink-soft);max-width:66ch}
.callout strong{color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface);padding-block:2rem 2.4rem;margin-top:1.5rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem}
.site-foot h2{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.38rem;font-size:.88rem}
.site-foot a{color:var(--ink-soft);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.foot-legal{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-faint);max-width:78ch;display:grid;gap:.5rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .main-grid{grid-template-columns:1fr}
  .rail{position:static;order:-1}
}
@media (max-width:480px){
  .row2{grid-template-columns:1fr}
  .firm-meta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Offerteknop in de navigatie. Springt naar het formulier in de zijbalk, of
   naar dat op de homepage wanneer de pagina er zelf geen heeft. */
/* Specificiteit telt hier: .site-nav a is 0,1,1 en zou een kale .nav-cta van
   0,1,0 overstemmen, waardoor de knoptekst de linkkleur houdt en onleesbaar
   wordt op de accentachtergrond. Vandaar a.nav-cta. */
.site-nav a.nav-cta{background:var(--accent);color:var(--accent-ink);border-radius:7px;
  padding:.42rem .9rem;font-size:.88rem;font-weight:600;white-space:nowrap;
  margin-left:.2rem}
.site-nav a.nav-cta:hover{filter:brightness(1.1);color:var(--accent-ink)}