/* JetDrainPro — design system
   Derived from the supplied Figma orange theme.
   Constraints: no webfonts (render-blocking), no framework, CLS-safe by construction. */

:root{
  /* Palette — sampled from the Figma mockups */
  --jd-orange:#E8511A;
  --jd-orange-bright:#FF7A1A;
  --jd-orange-deep:#B93A0C;
  --jd-wash:#FFF3EC;
  --jd-ink:#1B1B1D;
  --jd-slate:#55565A;
  --jd-line:#E6E2DD;
  --jd-paper:#FFFFFF;
  --jd-footer:#232326;
  --jd-whatsapp:#25D366;

  /* Type — system stack. Zero network cost, zero FOUT, zero CLS. */
  --jd-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --jd-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Scale */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem; --s7:4.5rem;
  --wrap:1120px;
  --radius:10px;
  --shadow:0 1px 2px rgba(27,27,29,.05),0 8px 24px -12px rgba(27,27,29,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--jd-sans);
  font-size:1rem;
  line-height:1.65;
  color:var(--jd-slate);
  background:var(--jd-paper);
  /* room for the sticky mobile action bar */
  padding-bottom:64px;
}
@media(min-width:768px){body{padding-bottom:0}}

img{max-width:100%;height:auto;display:block}
a{color:var(--jd-orange-deep)}
h1,h2,h3,h4{color:var(--jd-ink);line-height:1.2;margin:0 0 var(--s3);font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,1.1rem + 3.4vw,3.1rem)}
h2{font-size:clamp(1.45rem,1rem + 1.9vw,2.15rem)}
h3{font-size:1.15rem}
p{margin:0 0 var(--s3)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:100;background:var(--jd-paper);padding:var(--s2) var(--s3);border-radius:6px}
:focus-visible{outline:3px solid var(--jd-orange);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)}
.section{padding-block:var(--s6)}
@media(min-width:768px){.section{padding-block:var(--s7)}}
.section-wash{background:var(--jd-wash)}
.center{text-align:center}
.eyebrow{
  font:600 .7rem/1 var(--jd-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--jd-orange-deep);
  margin:0 0 var(--s2);
}
.lede{font-size:1.05rem;max-width:62ch;margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 var(--s4);
  border-radius:999px;border:2px solid transparent;
  font:600 .95rem/1 var(--jd-sans);text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--jd-orange);color:#fff}
.btn-primary:hover{background:var(--jd-orange-deep)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-wa{background:var(--jd-whatsapp);color:#fff}
.btn-wa:hover{background:#1da851}

/* ---------- Header ---------- */
.site-header{
  position:absolute;inset:0 0 auto;z-index:20;
  padding-block:var(--s3);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.logo{
  display:inline-flex;align-items:center;line-height:0;text-decoration:none;
  /* fallback styling if the PNG fails to load and the alt text renders */
  font:italic 800 1.35rem/1 var(--jd-sans);color:#fff;letter-spacing:-.02em;
}
.logo img{width:auto;height:34px}
@media(min-width:768px){.logo img{height:38px}}
.site-footer .logo img{height:40px}
.nav{display:none}
@media(min-width:960px){
  .nav{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0}
  .nav a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:500;opacity:.92}
  .nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(360px,52vh,560px);display:grid;place-items:center;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(27,27,29,.62),rgba(185,58,12,.58));
}
.hero-inner{text-align:center;color:#fff;padding-block:var(--s7) var(--s6);max-width:52rem}
.hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.hero p{color:rgba(255,255,255,.94);font-size:1.05rem;margin-bottom:var(--s4)}
.hero-cta{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}

/* ---------- Signature: the Quick Answer block ---------- */
/* This is the one element carrying the design's boldness. It is the AI Overview
   extraction target and the visual anchor of every service page. */
.answer{
  position:relative;
  background:var(--jd-paper);
  border:1px solid var(--jd-line);
  border-left:6px solid var(--jd-orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s4) var(--s4) var(--s3);
  box-shadow:var(--shadow);
  max-width:64ch;
}
.answer .eyebrow{margin-bottom:var(--s1)}
.answer h2,.answer h3{font-size:1.2rem;margin-bottom:var(--s2)}
.answer p{margin:0;color:var(--jd-ink);font-size:1.02rem}
.answer-meta{
  margin-top:var(--s3);padding-top:var(--s2);border-top:1px dashed var(--jd-line);
  font:500 .75rem/1.4 var(--jd-mono);color:var(--jd-slate);
}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--s3)}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--jd-paper);border:1px solid var(--jd-line);border-radius:var(--radius);padding:var(--s4)}
.card h3{margin-bottom:var(--s1)}
.card p{font-size:.9rem;margin:0}

.svc{
  display:block;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--jd-line);border-radius:var(--radius);background:var(--jd-paper);
  transition:box-shadow .15s ease,transform .15s ease;
}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.svc-body{padding:var(--s2) var(--s3) var(--s3)}
.svc h3{font-size:.95rem;margin:0}
.svc span{font-size:.8rem;color:var(--jd-slate)}

/* ---------- About split ---------- */
.split{display:grid;gap:var(--s5);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
.split img{border-radius:var(--radius);width:100%;object-fit:cover}

/* ---------- Process ---------- */
/* Numbered because a drain job genuinely is a sequence: you cannot jet a line
   you have not inspected. The numbers encode dependency, not decoration. */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--s3)}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step;position:relative;padding-left:3rem;border-top:1px solid var(--jd-line);padding-top:var(--s3)}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:var(--s3);
  font:700 1.05rem/1 var(--jd-mono);color:var(--jd-orange);
}
.steps h3{font-size:.98rem;margin-bottom:.25rem}
.steps p{font-size:.88rem;margin:0}

/* ---------- Table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jd-line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
caption{caption-side:top;text-align:left;padding:var(--s3);font-weight:600;color:var(--jd-ink)}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--jd-line);vertical-align:top}
thead th{background:var(--jd-wash);color:var(--jd-ink);font-weight:700}
tbody tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--jd-line)}
.faq details{border-bottom:1px solid var(--jd-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s3) 2.5rem var(--s3) 0;position:relative;
  font-weight:600;color:var(--jd-ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:var(--s3);color:var(--jd-orange);font:700 1.4rem/1 var(--jd-mono)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--s3);margin:0;max-width:70ch}

/* ---------- CTA band ---------- */
.band{background:linear-gradient(115deg,var(--jd-orange-deep),var(--jd-orange) 55%,var(--jd-orange-bright));color:#fff}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.92);max-width:60ch}
.band-card{background:#fff;border-radius:var(--radius);padding:var(--s4);text-align:center;max-width:26rem;margin-inline:auto}
.band-card h3{color:var(--jd-orange-deep)}
.band-card p{color:var(--jd-slate);font-size:.9rem}

/* ---------- Form ---------- */
.form{display:grid;gap:var(--s2)}
@media(min-width:640px){.form{grid-template-columns:1fr 1fr}}
.form label{font-size:.8rem;font-weight:600;color:var(--jd-ink);display:block;margin-bottom:.25rem}
.form input,.form textarea{
  width:100%;min-height:48px;padding:var(--s2) var(--s3);
  border:1px solid var(--jd-line);border-radius:6px;background:#fff;
  font:400 .95rem/1.5 var(--jd-sans);color:var(--jd-ink);
}
.form .full{grid-column:1/-1}
.form textarea{min-height:110px;resize:vertical}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.8rem;padding-block:var(--s3);color:var(--jd-slate)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--jd-line)}
.crumbs li:last-child::after{content:""}

/* ---------- Related ---------- */
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);margin:0;padding:0}
.pills a{
  display:inline-block;padding:.45rem var(--s3);border:1px solid var(--jd-line);
  border-radius:999px;font-size:.85rem;text-decoration:none;color:var(--jd-ink);background:#fff;
}
.pills a:hover{border-color:var(--jd-orange);color:var(--jd-orange-deep)}

/* ---------- Footer ---------- */
.site-footer{background:var(--jd-footer);color:#B9B9BE;padding-block:var(--s6);font-size:.88rem}
.site-footer a{color:#E7E7EA;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer h4{color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--jd-mono)}
.foot-grid{display:grid;gap:var(--s5)}
@media(min-width:768px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.legal{border-top:1px solid #34343A;margin-top:var(--s5);padding-top:var(--s3);font-size:.78rem;color:#87878E}

/* ---------- Sticky mobile action bar ---------- */
.actionbar{
  position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(0,0,0,.08);
}
.actionbar a{
  min-height:56px;display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:#fff;text-decoration:none;font:600 .95rem/1 var(--jd-sans);
}
.actionbar .call{background:var(--jd-orange)}
.actionbar .wa{background:var(--jd-whatsapp)}
@media(min-width:768px){
  .actionbar{
    inset:auto var(--s4) var(--s4) auto;grid-template-columns:1fr;gap:var(--s2);
    border:0;background:transparent;
  }
  .actionbar a{border-radius:999px;padding-inline:var(--s4);box-shadow:var(--shadow)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.svc:hover{transform:none}
}

/* Header solidifies once the hero is out of view (set by main.js). */
.site-header.is-stuck{
  position:fixed;background:var(--jd-footer);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Contact form: WhatsApp handoff ---------- */
.form .opt{font-weight:400;color:var(--jd-slate);text-transform:none;letter-spacing:0}
.form .hint{grid-column:1/-1;font-size:.78rem;line-height:1.5;color:var(--jd-slate);margin:var(--s2) 0 0}
.form .form-status{margin:0;font-size:.82rem;font-weight:600;color:var(--jd-orange-deep);min-height:1.2em}
.form .form-status:empty{min-height:0}
.form .field-error{margin:.3rem 0 0;font-size:.78rem;font-weight:600;color:var(--jd-orange-deep)}
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"]{border-color:var(--jd-orange);background:var(--jd-wash)}
.form noscript{grid-column:1/-1}
.form .btn-wa svg{flex:0 0 auto}

/* A service card whose page has not been written yet. It renders, it is honest
   about its state, and it is not clickable. Regains its link automatically the
   moment the target page is generated. */
.svc-planned{cursor:default;opacity:.62}
.svc-planned:hover{box-shadow:none;transform:none}
.svc-planned span{font-style:italic}

.ill{margin:1.75rem 0}.ill img{width:100%;height:auto;border-radius:10px;display:block}.ill figcaption{margin-top:.5rem;font-size:.85rem;color:var(--muted,#667);font-style:italic}