/* ==========================================================================
   draincleaningkyle.com — site.css   (generated by _tools/build.py)

   Contrast note: every foreground/background pair below was picked to clear
   WCAG AA. The two that are easy to break by "brightening" later:
     --accent  #a8410d on #fff text  -> 6.0:1   (white text ON accent = 6.0:1)
     --link    #0a5a86 on #fff       -> 5.9:1
   Do not lighten either without re-checking.
   ========================================================================== */

:root{
  --navy:#0d2b45;
  --navy-dk:#07192a;
  --ink:#15222c;
  --body:#3c4b57;
  --muted:#5a6b78;
  --line:#dde5eb;
  --line-2:#eef3f6;
  --bg:#ffffff;
  --bg-alt:#f5f8fa;
  --accent:#a8410d;
  --accent-dk:#833209;
  --link:#0a5a86;
  --link-dk:#074562;
  --focus:#0a5a86;
  --radius:10px;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .55em;font-weight:700;
  letter-spacing:-.012em}
h1{font-size:clamp(1.75rem,1.15rem + 2.4vw,2.7rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1.05vw,1.85rem)}
h3{font-size:1.08rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .45em}
a{color:var(--link);text-underline-offset:.16em}
a:hover{color:var(--link-dk)}
strong{color:var(--ink)}
address{font-style:normal}

/* --- focus: never remove, always 3:1 ------------------------------------- */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}
.site-footer :focus-visible,.cta-band :focus-visible,.hero-home :focus-visible{
  outline-color:#ffd79a;
}
main:focus{outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;
  border-radius:0 0 var(--radius) var(--radius);font-weight:700;
  text-decoration:none;
}
.skip-link:focus{top:0;color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  min-height:48px;padding:11px 22px;border-radius:var(--radius);
  font-weight:700;text-decoration:none;border:2px solid transparent;
  line-height:1.2;
}
.btn-call{background:var(--accent);color:#fff;flex-direction:column;gap:0;
  padding:8px 20px;text-align:center}
.btn-call:hover,.btn-call:focus{background:var(--accent-dk);color:#fff}
.btn-call-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  opacity:.92;font-weight:700}
.btn-call-num{font-size:1.05rem;font-weight:800;white-space:nowrap}
.btn-call-lg{padding:12px 30px}
.btn-call-lg .btn-call-num{font-size:1.32rem}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(255,255,255,.14);color:#fff}
.btn-submit{background:var(--navy);color:#fff;font-size:1rem;width:100%}
.btn-submit:hover,.btn-submit:focus{background:var(--navy-dk);color:#fff}

/* --- header -------------------------------------------------------------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;gap:18px;padding-top:10px;
  padding-bottom:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo-img{height:auto;width:auto;max-height:44px;max-width:270px}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-1{font-weight:700;color:var(--navy);font-size:.72rem;letter-spacing:.22em}
.logo-2{font-weight:800;color:var(--navy);font-size:1.02rem;letter-spacing:-.02em}
.logo-accent{color:var(--accent)}

/* Direct child only — this must NOT match .nav-sub, or the dropdown inherits
   display:flex and lays its items out in a row that runs off the screen. */
.nav-desktop>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-desktop a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;font-weight:600;font-size:.94rem;
}
.nav-desktop a:hover{background:var(--bg-alt);color:var(--link-dk)}
.nav-desktop a.is-active{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* Services dropdown (desktop).
   Opens on :hover AND :focus-within — hover alone would make it unreachable by
   keyboard, and there is no JavaScript here to fall back on. focus-within also
   keeps it open while the tab sequence walks through the links inside it.
   The panel is hidden with visibility rather than display:none so that the
   links stay focusable-in-order and the fade can animate. */
.nav-has-sub{position:relative}
.nav-sub-trigger{
  display:flex;align-items:center;gap:7px;padding:10px 12px;border:0;
  border-radius:8px;background:none;color:var(--ink);font:inherit;
  font-weight:600;font-size:.94rem;cursor:pointer;
}
.nav-sub-trigger:hover{background:var(--bg-alt);color:var(--link-dk)}
.nav-caret{
  width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
}
.nav-sub{
  display:block;
  position:absolute;top:100%;left:0;z-index:60;min-width:272px;margin:0;
  padding:8px;list-style:none;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 30px rgba(13,43,69,.16);
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
/* No gap between the trigger and the panel, or the pointer crosses dead space
   on the way down and the menu closes under it. */
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub li{margin:0}
.nav-sub a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap;
}
.nav-sub a:hover{background:var(--bg-alt);color:var(--link-dk)}

.nav-mobile{display:none}
.nav-mobile>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  min-height:48px;padding:0 14px;border:2px solid var(--line);
  border-radius:var(--radius);font-weight:700;color:var(--ink);
}
.nav-mobile>summary::-webkit-details-marker{display:none}
.nav-mobile .bars{
  width:20px;height:2px;background:var(--ink);position:relative;display:block;
}
.nav-mobile .bars::before,.nav-mobile .bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
}
.nav-mobile .bars::before{top:-6px}
.nav-mobile .bars::after{top:6px}
.nav-mobile[open] nav{
  /* Belt and braces on top of the header's own z-index — this panel overlaps
     whatever section follows the header, and it must always win. */
  position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px rgba(13,43,69,.12);
}
.nav-mobile nav ul{list-style:none;margin:0;padding:8px 20px 16px}
.nav-mobile nav a{
  display:block;padding:13px 4px;border-bottom:1px solid var(--line-2);
  color:var(--ink);text-decoration:none;font-weight:600;
}
.nav-mobile nav a.is-active{color:var(--accent)}
/* Mobile: the services are a labelled group, always open. */
.nav-m-head{
  display:block;padding:13px 4px 6px;font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.nav-mobile nav ul.nav-m-sub{padding:0 0 0 12px}

/* --- hero ---------------------------------------------------------------- */
.hero-home{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* ONE scrim layer, never two.
   A translucent <img> UNDER a translucent gradient MULTIPLIES: this was
   opacity:.34 on the image beneath a .94 gradient, leaving about 2% of the hero
   photograph visible and rendering the whole hero as a flat navy block. The
   image is now fully opaque and the gradient alone does the darkening.

   The scrim is deliberately EVEN rather than falling away to one side. A
   horizontal falloff only uncovers the photo outside the centred text column,
   which on this layout is a narrow strip of the least interesting part of the
   frame — and it puts light behind text at some viewport widths. An even scrim
   shows the whole photograph and is safe at every width.

   These values were set by eye against the real photograph and then checked:
   composited over the BRIGHTEST pixels a hero photo is likely to contain (a
   blown sky or a white van, roughly #ebebf0), the .64 end still leaves white
   text at about 5.9:1 and the #e2ebf2 lede at about 4.7:1 — both over the 4.5:1
   AA threshold, but not by much. Lightening these further breaks the lede
   first, so re-check it if you do. */
.hero-home::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,25,42,.70) 0%,rgba(7,25,42,.64) 100%);
}
.hero-inner{position:relative;z-index:2;padding:64px 20px 56px;max-width:860px;
  margin-inline:auto}
.hero-home h1{color:#fff;margin-bottom:.4em}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;
  color:#f2a03d;margin:0 0 14px;
}
.hero-home .lede{font-size:1.14rem;color:#e2ebf2;max-width:60ch;margin-bottom:1.6em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0}
.trust li{
  color:#e2ebf2;font-weight:600;font-size:.93rem;padding-left:22px;position:relative;
}
.trust li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;
  border-left:2.5px solid #f2a03d;border-bottom:2.5px solid #f2a03d;
  transform:rotate(-45deg);
}

.page-hero{background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding:44px 0 0}
.page-hero .wrap{padding-bottom:34px}
.page-hero h1{margin-bottom:.35em}
.page-hero .lede{font-size:1.1rem;color:var(--body);max-width:64ch;
  margin-bottom:1.4em}
.page-hero-media{max-height:340px;overflow:hidden}
.page-hero-media img{width:100%;height:340px;object-fit:cover}

/* --- breadcrumbs --------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line-2);background:#fff;font-size:.86rem}
.crumbs+.page-hero{border-top:0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;
  padding:11px 0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--link)}
.crumbs [aria-current]{color:var(--muted)}

/* --- body / sections ----------------------------------------------------- */
.page-body{padding:44px 20px 8px;max-width:960px}
.sec{margin:0 0 44px}
.sec>p,.sec>ul,.sec>ol{max-width:72ch}
.lede{max-width:70ch}

.ticks{list-style:none;padding:0}
.ticks li{padding-left:28px;position:relative;margin-bottom:.6em}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}

.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 6px;
}
.card h3{margin-bottom:.4em}

.steps{list-style:none;counter-reset:step;padding:0;
  display:grid;gap:14px}
.steps li{
  counter-increment:step;position:relative;padding:18px 20px 4px 62px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin:0;
}
.steps li::before{
  content:counter(step);position:absolute;left:18px;top:18px;
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:.92rem;
}
.steps h3{margin-bottom:.3em}

.svc-grid{list-style:none;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.svc-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  background:#fff;margin:0;transition:border-color .18s ease,box-shadow .18s ease;
}
.svc-card:hover{border-color:#b9cbd8;box-shadow:0 6px 18px rgba(13,43,69,.07)}
.svc-card h3{margin-bottom:.35em;font-size:1.05rem}
.svc-card h3 a{text-decoration:none;color:var(--link)}
.svc-card h3 a:hover{text-decoration:underline}
.svc-card p{margin:0;font-size:.94rem;color:var(--muted)}

.area-grid{list-style:none;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.area-grid li{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;margin:0;font-weight:600;color:var(--ink);font-size:.94rem;
}

.addr-card{background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 8px}
.addr-card h3{margin-bottom:.3em;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.addr-card h3+p,.addr-card h3+address{margin-bottom:1.1em}
.addr-hours{color:var(--muted);font-size:.94rem}
.big-tel a{font-size:1.5rem;font-weight:800;text-decoration:none}
.big-tel a:hover{text-decoration:underline}

.prose h2{margin-top:1.8em}
.prose h2:first-of-type{margin-top:0}
.updated{color:var(--muted);font-size:.9rem}

/* --- homepage image bands ------------------------------------------------ */
.home-bands{
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:0 0 42px;
}
.band{margin:0}
.band-img{
  width:100%;height:230px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);
}
.band figcaption{
  margin-top:10px;font-size:.93rem;color:var(--muted);line-height:1.55;
}

/* --- "more pages" inner-link module -------------------------------------- */
.more-pages{
  border-top:1px solid var(--line);padding-top:26px;margin-top:8px;
}
.more-pages-h{
  font-size:1.02rem;font-weight:800;color:var(--ink);margin-bottom:.7em;
}
.more-pages-list{list-style:none;padding:0;margin:0}
.more-pages-list li{margin-bottom:.5em}
.more-pages-list a{font-weight:600}

/* --- FAQ (native disclosure) --------------------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;background:#fff}
.faq-item>summary{
  cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:700;
  color:var(--ink);position:relative;min-height:48px;
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"";position:absolute;right:22px;top:calc(50% - 5px);
  width:10px;height:10px;border-right:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(45deg);
}
.faq-item[open]>summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq-item[open]>summary{border-bottom:1px solid var(--line-2)}
.faq-a{padding:16px 20px 2px}
.faq-a p{max-width:72ch}

/* --- contact form -------------------------------------------------------- */
.contact-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start}
.contact-form{border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.contact-form h3{font-size:1.15rem;margin-bottom:.8em}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;
  font-size:.94rem}
.req{color:var(--accent)}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);padding:11px 13px;min-height:48px;
  border:2px solid var(--line);border-radius:8px;background:#fff;
}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:#b9cbd8}
.hint{font-size:.86rem;color:var(--muted);margin:6px 0 0}
.form-note{font-size:.88rem;color:var(--muted)}

/* --- CTA band ------------------------------------------------------------ */
.cta-band{background:var(--navy);color:#fff;margin-top:26px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:38px 20px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:.35em}
.cta-band p{color:#dbe6ee;margin:0;max-width:62ch}

/* --- footer -------------------------------------------------------------- */
.site-footer{background:var(--navy-dk);color:#cfdce6;padding:48px 0 26px;
  font-size:.94rem}
.f-top{display:grid;gap:30px;grid-template-columns:1.4fr repeat(4,1fr)}
.f-head{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:1em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:#cfdce6;text-decoration:none}
.site-footer a:hover,.site-footer a:focus{color:#fff;text-decoration:underline}
.f-name{color:#fff;font-weight:800;font-size:1.06rem;margin-bottom:.5em}
.f-blurb{color:#a9bccb;max-width:34ch}
.btn-call-footer{margin:6px 0 16px}
.f-address{color:#cfdce6;margin-bottom:.9em}
.f-hours{color:#a9bccb;font-size:.88rem}
.f-hours-k{color:#cfdce6;font-weight:700}
.f-areas{border-top:1px solid rgba(255,255,255,.13);margin-top:34px;padding-top:24px}
.f-areas p{color:#a9bccb;max-width:none;margin:0}
.f-legal{border-top:1px solid rgba(255,255,255,.13);margin-top:24px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#8ea4b5;font-size:.86rem}
.f-legal p{margin:0}
.f-disclaim{max-width:46ch}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  /* Slightly heavier on small screens: the text column spans the full width, so
     it sits over every part of the photograph rather than just the middle. */
  .hero-home::after{
    background:linear-gradient(180deg,rgba(7,25,42,.78) 0%,rgba(7,25,42,.72) 100%);
  }
  .nav-desktop{display:none}
  .nav-mobile{display:block}
  /* MUST stay positioned. This was `position:static`, and z-index is ignored on
     a static element — so the header's z-index:40 did nothing, the open mobile
     menu painted underneath .hero-inner (z-index:2), and tapping Menu looked
     like it did nothing at all. The <details> was opening correctly the whole
     time; the panel was just behind the hero.
     .hero-home is position:relative with z-index:auto, which creates NO
     stacking context, so .hero-inner's z-index:2 competes in the ROOT stacking
     context. The header has to out-rank it there.
     `relative` rather than `sticky` keeps the header from eating screen height
     on a phone while still giving z-index something to apply to. */
  .site-header{position:relative;z-index:40}
  .header-inner{position:relative}
  .logo-img{max-height:36px;max-width:210px}
}
@media (max-width:640px){
  .f-top{grid-template-columns:1fr 1fr}
  .hero-inner{padding:44px 20px 40px}
  .page-hero{padding-top:30px}
  .page-hero-media img{height:210px}
  .cta-inner{padding:30px 20px}
  .header-call .btn-call-label{display:none}
  .header-call{padding:8px 14px}
  .steps li{padding-left:20px;padding-top:52px}
  .steps li::before{top:16px;left:20px}
}
@media (max-width:420px){
  .f-top{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{
  .site-header,.cta-band,.nav-mobile,.skip-link,.crumbs{display:none}
  body{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}