/* ============================================================
   SYMONIS DPF — "Test-lane certificate" design system
   Barlow / Barlow Condensed · workshop indigo · warning-light amber
   ============================================================ */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlowcondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlowcondensed-700.woff2) format('woff2')}

:root{
  --bg:oklch(1 0 0);
  --surface:oklch(0.962 0.008 282);
  --ink:oklch(0.205 0.028 282);
  --muted:oklch(0.44 0.03 282);
  --primary:oklch(0.42 0.155 282);
  --primary-press:oklch(0.36 0.15 282);
  --primary-deep:oklch(0.245 0.06 283);
  --on-deep:oklch(0.94 0.01 282);
  --on-deep-muted:oklch(0.76 0.03 282);
  --accent:oklch(0.80 0.155 78);
  --accent-press:oklch(0.75 0.155 78);
  --accent-ink:oklch(0.24 0.05 78);
  --pass:oklch(0.55 0.14 152);
  --fail:oklch(0.52 0.19 25);
  --line:oklch(0.88 0.012 282);
  --line-deep:oklch(0.38 0.05 282);
  --display:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --body:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --radius:6px;
  --z-sticky:30;--z-topbar:40;--z-modal:50;
  --pad-section:clamp(3rem,8vw,6.5rem);
  --pad-x:clamp(1rem,4vw,2rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);font-size:1.0625rem;line-height:1.55;
  color:var(--ink);background:var(--bg);
  padding-bottom:76px; /* sticky bar clearance */
}
@media(min-width:900px){body{padding-bottom:0}}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--primary)}
strong{font-weight:600}
ul{list-style:none}
button{font:inherit;cursor:pointer}

/* ---------- type scale ---------- */
h1,h2,h3{font-family:var(--display);line-height:1.02;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(2.75rem,9.5vw,4.75rem);font-weight:700;text-transform:uppercase}
h2{font-size:clamp(1.9rem,5.5vw,3rem);font-weight:700;text-transform:uppercase}
h3{font-size:clamp(1.3rem,3.2vw,1.7rem);font-weight:600}
p{max-width:68ch;text-wrap:pretty}
.lead{font-size:clamp(1.125rem,2.6vw,1.3rem);color:var(--muted);font-weight:500}
.sub{color:var(--muted)}

/* ---------- layout ---------- */
.wrap{max-width:72rem;margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--pad-section)}
.section--tight{padding-block:clamp(2rem,5vw,3.5rem)}
.section--surface{background:var(--surface)}
.section--deep{background:var(--primary-deep);color:var(--on-deep)}
.section--deep h2,.section--deep h3{color:#fff}
.section--deep p{color:var(--on-deep)}
.section--deep .sub{color:var(--on-deep-muted)}
.stack-s>*+*{margin-top:.75rem}
.stack>*+*{margin-top:1.25rem}
.stack-l>*+*{margin-top:2.25rem}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  background:var(--primary-deep);color:#fff;
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem var(--pad-x);
}
.topbar__mark{font-family:var(--display);font-weight:700;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:.03em;color:#fff;text-decoration:none;line-height:1}
.topbar__mark small{display:block;font-family:var(--body);font-weight:500;font-size:.66rem;
  letter-spacing:.14em;color:var(--accent);margin-top:.15rem}
.topbar__call{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  font-weight:600;font-size:1rem;padding:.55rem .9rem;border-radius:var(--radius);
  white-space:nowrap;min-height:44px;
}
.topbar__call:active{background:var(--accent-press)}
.topbar__hours{display:none;color:var(--on-deep-muted);font-size:.85rem}
@media(min-width:760px){.topbar__hours{display:block;margin-left:auto}.topbar__call{margin-left:0}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--primary-deep);color:#fff;overflow:clip}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;opacity:.34}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,oklch(0.245 0.06 283/.35) 0%,oklch(0.245 0.06 283/.88) 78%)}
.hero__inner{position:relative;padding-block:clamp(2.5rem,7vw,5.5rem);
  display:grid;gap:2rem}
@media(min-width:900px){.hero__inner{grid-template-columns:1.15fr .85fr;align-items:center;gap:3rem}}
.hero h1{color:#fff}
.hero__price{
  font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,4vw,1.9rem);
  color:var(--accent);text-transform:uppercase;letter-spacing:.02em}
.hero__ticks{display:flex;flex-wrap:wrap;gap:.5rem .6rem;padding:0}
.hero__ticks li{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line-deep);border-radius:999px;
  font-size:.92rem;font-weight:500;color:var(--on-deep);
  padding:.35rem .8rem;background:oklch(0.245 0.06 283/.55)}
.hero__ticks svg{color:var(--accent);flex:none}
.hero .sub{color:oklch(0.88 0.015 282)}
.hero .sub a{color:var(--accent)}

/* ---------- lead form card ---------- */
.formcard{
  background:var(--bg);color:var(--ink);border-radius:10px;
  padding:clamp(1.25rem,4vw,1.75rem);
  box-shadow:0 18px 50px -18px oklch(0.12 0.05 283/.55);
}
.formcard h2,.formcard h3{font-size:1.55rem;text-transform:uppercase}
.formcard .sub{font-size:.95rem;margin-top:.25rem}
.formcard form{display:grid;gap:.7rem;margin-top:1.1rem}
.formcard input{
  width:100%;min-height:56px;padding:.9rem 1rem;
  font:inherit;font-size:1.05rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;
}
.formcard input::placeholder{color:oklch(0.46 0.02 282)}
.formcard input:focus-visible{outline:3px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.formcard .btn{width:100%}
.formcard__note{font-size:.85rem;color:var(--muted);text-align:center}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.035em;text-decoration:none;
  border:none;border-radius:var(--radius);
  min-height:56px;padding:.85rem 1.6rem;
  transition:transform .12s cubic-bezier(.25,1,.5,1),background .12s;
}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--accent);color:var(--accent-ink)}
.btn--amber:hover{background:var(--accent-press)}
.btn--indigo{background:var(--primary);color:#fff}
.btn--indigo:hover{background:var(--primary-press)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid var(--line-deep)}
.btn--ghost:hover{border-color:#fff}

/* ---------- certificate stamp ---------- */
.stamp{
  display:inline-block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;line-height:1;
  border:2px solid currentColor;border-radius:4px;
  padding:.42rem .7rem .38rem;rotate:-1.5deg;
  color:var(--primary);
}
.stamp--amber{color:oklch(0.47 0.12 78)}
.stamp--pass{color:var(--pass)}
.stamp--fail{color:var(--fail)}
.stamp--ondeep{color:var(--accent)}
.stamp.is-in{animation:stamp-in .28s cubic-bezier(.25,1,.5,1) both}
@keyframes stamp-in{from{scale:1.12;opacity:0}to{scale:1;opacity:1}}

/* ---------- reading pair (before/after) ---------- */
.readings{display:grid;gap:1px;background:var(--line-deep);border:1px solid var(--line-deep);border-radius:8px;overflow:hidden}
@media(min-width:640px){.readings{grid-template-columns:1fr 1fr}}
.reading{background:var(--primary-deep);padding:1.1rem 1.25rem}
.reading__label{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-muted)}
.reading__value{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,2.9rem);
  font-variant-numeric:tabular-nums;color:#fff;line-height:1.05;margin-top:.2rem}
.reading__value em{font-style:normal;color:var(--accent)}
.reading--after .reading__value em{color:oklch(0.78 0.16 152)}

/* ---------- video facade ---------- */
.facade{position:relative;border-radius:10px;overflow:hidden;background:var(--primary-deep)}
.facade img{width:100%;aspect-ratio:16/9;object-fit:cover}
.facade__btn{
  position:absolute;inset:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;
  background:linear-gradient(oklch(0.2 0.05 283/.25),oklch(0.2 0.05 283/.55));
  border:none;color:#fff;
}
.facade__btn:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.facade__play{
  width:76px;height:76px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;color:var(--accent-ink);
  box-shadow:0 10px 34px -8px oklch(0.2 0.05 283/.8);
  transition:scale .15s cubic-bezier(.25,1,.5,1);
}
.facade__btn:hover .facade__play{scale:1.07}
.facade__label{font-family:var(--display);font-weight:600;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 8px oklch(0.2 0.05 283/.8)}
.facade video{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- option ladder (certificate table) ---------- */
.ladder{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.ladder__col{padding:clamp(1.25rem,4vw,1.75rem);border-bottom:1px solid var(--line);position:relative}
.ladder__col:last-child{border-bottom:none}
@media(min-width:900px){
  .ladder{display:grid;grid-template-columns:1fr 1fr 1fr}
  .ladder__col{border-bottom:none;border-right:1px solid var(--line)}
  .ladder__col:last-child{border-right:none}
}
.ladder__col--featured{background:var(--surface)}
.ladder__flag{position:absolute;top:0;right:0;background:var(--primary);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .7rem;border-radius:0 0 0 var(--radius)}
.ladder__name{font-family:var(--display);font-weight:700;font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em}
.ladder__price{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--primary);
  font-variant-numeric:tabular-nums;line-height:1;margin-top:.4rem}
.ladder__price small{font-size:1rem;font-weight:600;color:var(--muted)}
.ladder__spec{margin-top:1rem;display:grid;gap:.5rem;font-size:.97rem}
.ladder__spec li{display:flex;gap:.55rem;align-items:baseline}
.ladder__spec svg{flex:none;translate:0 2px}
.ladder__spec .ok{color:var(--pass)}
.ladder__spec .no{color:var(--fail)}
.ladder__stamps{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.ladder__cta{margin-top:1.25rem}
.ladder__cta .btn{width:100%;font-size:1.1rem;min-height:50px}

/* ---------- ruled comparison table ---------- */
.certtable{width:100%;border-collapse:collapse;font-size:.97rem;background:var(--bg)}
.certtable caption{text-align:left;font-family:var(--display);font-weight:700;font-size:1.4rem;
  text-transform:uppercase;padding-bottom:.9rem}
.certtable th,.certtable td{border:1px solid var(--line);padding:.75rem .85rem;text-align:left;vertical-align:top}
.certtable thead th{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.05rem;background:var(--surface)}
.certtable thead th.hl{background:var(--primary);color:#fff}
.certtable td.hl{background:oklch(0.962 0.008 282/.6)}
.certtable .ok{color:var(--pass);font-weight:600}
.certtable .no{color:var(--fail);font-weight:600}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .certtable{min-width:560px}

/* ---------- checklist (qualifier) ---------- */
.checklist{counter-reset:chk;display:grid;gap:1rem;list-style:none}
.checklist li{
  counter-increment:chk;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:1.1rem 1.2rem 1.1rem 3.4rem;position:relative}
.checklist li::before{
  content:counter(chk);position:absolute;left:1rem;top:1.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--primary);color:#fff;
  font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:1rem}
.checklist h3{font-size:1.15rem;margin-bottom:.3rem}
.checklist p{font-size:.97rem;color:var(--muted)}

/* ---------- symptom list ---------- */
.symptoms{display:grid;gap:.75rem}
@media(min-width:640px){.symptoms{grid-template-columns:1fr 1fr}}
.symptoms li{display:flex;gap:.8rem;align-items:flex-start;
  border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;background:var(--bg)}
.symptoms svg{flex:none;color:oklch(0.55 0.14 78);translate:0 3px}
.symptoms strong{display:block}
.symptoms span{font-size:.92rem;color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid;gap:1.5rem;counter-reset:step;list-style:none}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem}}
.steps li{counter-increment:step;border-top:3px solid var(--primary);padding-top:1rem}
.steps li::before{content:"STEP " counter(step);font-family:var(--display);font-weight:700;
  letter-spacing:.1em;color:var(--primary);font-size:.95rem}
.steps h3{margin-top:.35rem}
.steps p{font-size:.99rem;color:var(--muted);margin-top:.4rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:1.05rem .25rem;
  font-weight:600;font-size:1.06rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:600;font-size:1.6rem;
  color:var(--primary);flex:none;line-height:1;transition:rotate .18s cubic-bezier(.25,1,.5,1)}
.faq details[open] summary::after{rotate:45deg}
.faq .faq__a{padding:0 .25rem 1.2rem;color:var(--muted);max-width:62ch}
.faq .faq__a p+p{margin-top:.6rem}

/* ---------- location ---------- */
.loc{display:grid;gap:2rem}
@media(min-width:860px){.loc{grid-template-columns:1fr 1fr;align-items:start}}
.loc address{font-style:normal;font-size:1.15rem;line-height:1.6}
.loc dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin-top:1.25rem}
.loc dt{font-weight:600}
.loc dd{color:var(--muted)}
.loc__map{border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface)}
.loc__map iframe{width:100%;height:100%;border:0}

/* ---------- photo strip ---------- */
.strip{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.strip img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- final CTA band ---------- */
.ctaband{display:grid;gap:1.5rem;justify-items:start}
@media(min-width:860px){.ctaband{grid-template-columns:1.2fr .8fr;align-items:center}}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- footer ---------- */
.footer{background:var(--primary-deep);color:var(--on-deep-muted);font-size:.95rem}
.footer .wrap{padding-block:2.5rem;display:grid;gap:1.75rem}
@media(min-width:820px){.footer .wrap{grid-template-columns:1.2fr 1fr 1fr}}
.footer a{color:var(--on-deep)}
.footer h3{color:#fff;font-size:1.1rem;text-transform:uppercase;margin-bottom:.6rem}
.footer ul{display:grid;gap:.4rem}
.footer__legal{border-top:1px solid var(--line-deep)}
.footer__legal .wrap{padding-block:1.1rem;display:block;font-size:.83rem}

/* ---------- sticky mobile bar ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:flex;gap:.6rem;padding:.6rem calc(.75rem + env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left));
  background:oklch(1 0 0/.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.stickybar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.stickybar__call{background:var(--accent);color:var(--accent-ink)}
.stickybar__wa{border:2px solid var(--primary);color:var(--primary)}
@media(min-width:900px){.stickybar{display:none}}

/* ---------- mobile fold compaction (form inside ~650px) ---------- */
@media(max-width:759px){
  .hide-m{display:none}
  .hero__inner{padding-block:1.5rem 2rem;gap:1.1rem}
  .hero .stack>*+*{margin-top:.85rem}
  h1{font-size:clamp(2.15rem,8.5vw,2.9rem)}
  .hero__price{font-size:1.2rem}
  .hero__ticks{gap:.4rem}
  .hero__ticks li{font-size:.82rem;padding:.28rem .6rem}
  .formcard{padding:1.1rem 1rem}
  .formcard h2{font-size:1.35rem}
  .formcard input{min-height:50px;padding:.7rem .9rem}
  .topbar__mark{font-size:1.15rem}
}

/* ---------- misc ---------- */
.divider-note{
  display:flex;align-items:center;gap:.9rem;border:1.5px dashed var(--line-deep);
  border-radius:8px;padding:1rem 1.2rem;background:oklch(0.245 0.06 283/.5)}
.warnlamp{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.6rem 1rem;z-index:60;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.badge-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* count-up numbers hold layout */
[data-countup]{display:inline-block;min-width:2ch}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .stamp.is-in{animation:none}
}