/* ============================================================
   Cleaner Carpet Naturally, LLC — shared stylesheet
   Light, calm and plain. His palette, kept.
   ============================================================ */

/* ---------- Fonts (self-hosted, so the CSP stays font-src 'self') ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-var.woff2') format('woff2-variations'),
      url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ----------
   Sampled by histogram from his own logo, not picked by eye.
   --blue is HIS brand blue and measures 3.99:1 on white: fine for graphics and
   large display type, but it FAILS AA for normal text. --blue-ink exists for
   anything that carries words. Same brand, legible site. */
:root{
  --blue:#0185D0;
  --blue-ink:#0166A6;
  --blue-deep:#015E9B;
  --green:#0C860D;
  --green-deep:#096B0A;

  --ink:#15181B;
  --muted:#5A6169;
  --paper:#FFFFFF;
  --sand:#F6F8F9;
  --band:#EDF3F6;
  --line:#E2E7EA;
  --inv:#FFFFFF;
  --inv-muted:#C7D8E4;

  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --container:1120px;
  --header-h:56px;
  --radius:12px;
  --radius-pill:999px;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;

  --dur:.5s; --dur-micro:.18s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;              /* anchor jumps only — no scroll library */
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;margin:0;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;margin-bottom:var(--s4)}
h3{font-size:1.125rem;font-weight:700;margin-bottom:var(--s2)}
p{margin:0 0 var(--s4)}
a{color:var(--green-deep)}
ul{margin:0;padding:0;list-style:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--blue-ink);color:#fff;padding:.7rem 1.1rem;
  font-family:var(--font-display);font-weight:700;
}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue-ink);outline-offset:2px;border-radius:4px;
}
.section--ink :where(a,button,summary):focus-visible{outline-color:#fff}

/* ---------- Layout ---------- */
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 2.5rem,54rem);margin-inline:auto}
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section--tight{padding:clamp(2rem,4vw,3.5rem) 0}
.section--sand{background:var(--sand)}
.section--band{background:var(--band)}
.section--ink{background:var(--blue-deep);color:var(--inv)}
.section--ink h2,.section--ink h3{color:var(--inv)}
.section--ink p{color:var(--inv-muted)}
.text-center{text-align:center}

.section-head{max-width:44rem;margin-bottom:var(--s7)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--muted);line-height:1.7}
.section--ink .lead{color:var(--inv-muted)}
.eyebrow{
  display:flex;align-items:center;gap:.55rem;margin:0 0 var(--s3);
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep);
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.section--ink .eyebrow{color:#9FE0A0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  padding:.8rem 1.35rem;border-radius:var(--radius-pill);
  background:var(--blue-ink);color:#fff;text-decoration:none;border:2px solid transparent;
  cursor:pointer;min-height:48px;
  transition:background var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease);
}
.btn:hover{background:var(--blue-deep)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--lg{font-size:1.0625rem;padding:1rem 1.75rem;min-height:56px}
.btn--green{background:var(--green-deep)}
.btn--green:hover{background:#075708}
.btn--ghost{background:transparent;color:var(--blue-ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--sand);border-color:var(--blue-ink)}
.btn--on-ink{background:#fff;color:var(--blue-deep)}
.btn--on-ink:hover{background:var(--band)}
.btn--block{width:100%}

/* ---------- Header ----------
   Two bands, the way his existing site is built: his logo across the whole top,
   then a blue strip carrying the navigation. He asked for the mark to be the
   thing you cannot miss, and this is the shape he already recognises as his.

   The band is what runs edge to edge; the artwork sits centred inside it. That
   is not a compromise, it is the only honest option — the largest copy of his
   lockup that exists anywhere, including on his own site, is 901px wide, so
   stretching it across a wide monitor would visibly soften it. Full-bleed
   colour, artwork at its native size. */
.logo-band{
  background:#fff;
  padding:clamp(1.1rem,2.6vw,1.9rem) var(--s5);
  text-align:center;
}
.logo-band__link{display:inline-block;max-width:100%;text-decoration:none}
.logo-band__img{
  display:block;width:100%;max-width:900px;height:auto;margin-inline:auto;
}

/* Only this strip sticks. The logo band scrolls away, which is what keeps the
   mark large without costing a fifth of the screen for the whole visit. */
.navbar{
  position:sticky;top:0;z-index:100;
  background:var(--blue-ink);
  box-shadow:0 1px 0 rgb(0 0 0 / .08);
}
.navbar__inner{display:flex;align-items:center;gap:var(--s5);min-height:56px}

.nav{display:flex;align-items:center;gap:var(--s6);margin-right:auto}
.nav__link{
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;
  color:#fff;text-decoration:none;padding:.55rem 0;position:relative;
  letter-spacing:.02em;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.25rem;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-micro) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* The strip already carries the number on a wide screen; this copy exists
   only for the full-screen menu, where the strip is behind the overlay. */
.nav .btn{display:none}

/* The number rides the sticky strip, so it is reachable from anywhere on the
   page without scrolling back up — on a phone that is the whole point. */
.navbar__call{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  color:var(--blue-deep);background:#fff;text-decoration:none;
  padding:.5rem 1.05rem;border-radius:var(--radius-pill);min-height:40px;
  margin-left:auto;white-space:nowrap;
  transition:background var(--dur-micro) var(--ease);
}
.navbar__call:hover{background:var(--band)}
.navbar__call svg{width:17px;height:17px;flex:none}

.nav-toggle{
  display:none;background:none;border:0;padding:.5rem;color:#fff;
  cursor:pointer;min-width:48px;min-height:48px;align-items:center;justify-content:center;
  margin-left:calc(var(--s3) * -1);
}
.nav-toggle svg{width:26px;height:26px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}

@media (max-width:1000px){
  .nav-toggle{display:inline-flex;position:relative;z-index:101}
  .nav .btn{display:inline-flex;margin-top:var(--s3)}
  .nav{
    position:fixed;inset:0;z-index:99;background:var(--blue-ink);
    flex-direction:column;justify-content:center;gap:var(--s5);
    padding:var(--s8) var(--s5);margin-right:0;
    transform:translateY(-100%);transition:transform var(--dur) var(--ease);
  }
  .nav__link{font-size:1.375rem;font-weight:700}
  .nav__link::after{left:50%;right:50%}
  .nav__link:hover::after,.nav__link[aria-current="page"]::after{left:0;right:0;transform:scaleX(1)}
  body.nav-open .nav{transform:translateY(0)}
  body.nav-open{overflow:hidden}
}

/* ---------- Hero ----------
   The logo is no longer in here — it is the band across the top of the page.
   What is left is what he asked to come immediately under it: the two things a
   visitor is meant to do, and only then the sentence explaining why. */
.hero{
  position:relative;background:var(--sand);
  border-bottom:1px solid var(--line);
  padding:clamp(1.75rem,4vw,2.75rem) 0 clamp(2.25rem,4.5vw,3.25rem);
}
.hero__grid{display:grid;justify-items:center;text-align:center}
.hero__copy{max-width:46rem}
.hero__copy .eyebrow{justify-content:center;margin-bottom:var(--s4)}

/* Both actions sit above the headline because that is the order he asked for,
   and it happens to be the right one: someone arriving from a search already
   knows they want a carpet cleaned, so the call comes before the argument. */
.hero__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);
  margin:0 0 var(--s6);
}

/* Stepped down from the site-wide h1. Above it sits a quarter-screen of his
   logo and two solid buttons; this is the line the eye reaches next, and it
   only has to carry the promise, not shout. Still the page's only h1. */
.hero h1{font-size:clamp(1.5rem,2.6vw,2.125rem);margin-bottom:var(--s4)}
.hero h1 em{font-style:normal;color:var(--blue-ink)}
.hero__lead{font-size:clamp(1rem,1.4vw,1.125rem);color:var(--muted);max-width:34rem;margin-inline:auto}
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s5);
  margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.hero__trust span{display:flex;align-items:center;gap:.45rem}
.hero__trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease);
}
a.card:hover{box-shadow:0 10px 26px rgb(21 24 27/.10);border-color:var(--blue)}
/* His photographs are small — 230x184 at worst. They are shown at a size their
   real resolution can carry, framed, rather than blown up into a banner. */
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card__body p{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s4)}
.card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:700;font-size:.875rem;color:var(--green-deep);
}
.card__more svg{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease)}
a.card:hover .card__more svg{transform:translateX(4px)}

/* ---------- Split ---------- */
.split{display:grid;gap:var(--s7);align-items:center}
@media (min-width:900px){ .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)} }
.split__media{border-radius:var(--radius);overflow:hidden;background:var(--band);border:1px solid var(--line)}
.split__media img{display:block;width:100%;height:auto}

/* ---------- Pull quote (the MCS story) ---------- */
.pull{
  border-left:4px solid var(--green);padding:var(--s2) 0 var(--s2) var(--s5);
  margin:var(--s6) 0;font-size:1.125rem;line-height:1.65;color:var(--ink);
}
.pull cite{display:block;margin-top:var(--s3);font-style:normal;font-size:.875rem;color:var(--muted)}

/* ---------- Reviews ---------- */
.tgrid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.tcard{
  margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5);display:flex;flex-direction:column;
}
.tcard blockquote{margin:0;flex:1}
.tcard blockquote p{font-size:.9875rem;line-height:1.65}
.tcard figcaption{
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  padding-top:var(--s4);border-top:1px solid var(--line);margin-top:var(--s4);
}
.tcard figcaption span{display:block;font-weight:500;font-size:.8125rem;color:var(--muted)}

/* ---------- Ticks ---------- */
.ticks{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem}
.ticks li::before{
  content:"";width:18px;height:18px;flex:none;margin-top:.24rem;border-radius:50%;
  background:var(--green-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section--ink .ticks li::before{background:#9FE0A0}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:.3rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);
  transform:rotate(45deg);transition:transform var(--dur-micro) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{color:var(--muted);margin-bottom:0}
.faq details > div{padding-top:var(--s2)}

/* ---------- Forms ---------- */
.field{display:block;margin-bottom:var(--s4)}
.field > span{display:block;font-family:var(--font-display);font-weight:600;font-size:.875rem;margin-bottom:var(--s2)}
.req{color:#B3261E}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:48px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--blue-ink);outline-offset:1px;border-color:var(--blue-ink);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B3261E}
.field-error{display:block;color:#8C1D18;font-size:.8125rem;margin-top:var(--s2);min-height:1.2em}
.form-note{font-size:.875rem;color:var(--muted)}
/* never display:none — a screen reader must still reach the status */
.form-status{margin-top:var(--s4);font-size:.9375rem;min-height:1.4em}
.form-status--ok{color:#0C6B2E}
.form-status--err{color:#8C1D18}
/* off-screen, not display:none — a display:none honeypot is skipped by some
   bots and by autofill, which defeats the point */
.hp-field{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

/* ---------- Quote block ----------
   The form previously sat as bare fields directly on the section background,
   which read as loose parts rather than one thing to fill in. Putting it on a
   white card separates it from the page and gives the eye somewhere to land. */
.quote-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:0 1px 2px rgb(21 24 27/.04);
}
.quote-form .field:last-of-type{margin-bottom:var(--s5)}
/* The form card is taller than the copy beside it. Centring the row leaves a
   large gap above the heading and makes the two columns look unrelated, so
   this row alone aligns to the top. */
@media (min-width:900px){
  #quote .split{align-items:start}
}

/* Contact details as term/description pairs. On anything above a phone the
   label sits in its own column so the values line up. */
.contact-list{margin:0;display:grid;gap:.35rem var(--s4);grid-template-columns:1fr}
@media (min-width:420px){ .contact-list{grid-template-columns:auto 1fr;gap:.6rem var(--s5)} }
.contact-list dt{
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding-top:.15rem;
}
.contact-list dd{margin:0;font-size:.9375rem}
.contact-list dd a{color:var(--green-deep);text-underline-offset:3px}
/* an email address is long and must be allowed to break rather than push the
   column wider than its grid track */
.contact-list dd a[href^="mailto"]{word-break:break-word}

/* ---------- Page head / prose ---------- */
.page-head{background:var(--sand);border-bottom:1px solid var(--line);padding:clamp(2rem,4vw,3.25rem) 0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.8125rem;color:var(--muted);margin:0 0 var(--s4)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.45rem;opacity:.5}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--green-deep)}
.prose{max-width:42rem}
.prose h2{margin-top:var(--s8)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6)}
.prose ul{margin:0 0 var(--s4);padding-left:1.25rem;list-style:disc}
.prose li{margin-bottom:.35rem}
.prose__meta{font-size:.875rem;color:var(--muted);margin-bottom:var(--s6)}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-deep);color:var(--inv-muted);padding:var(--s8) 0 var(--s5)}
.footer__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-bottom:var(--s6)}
.footer__h{font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 var(--s3)}
.site-footer a{color:var(--inv-muted);text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer li{margin-bottom:var(--s2);font-size:.9375rem}
.footer__logo{width:190px;height:auto;margin-bottom:var(--s4);background:#fff;padding:.6rem .8rem;border-radius:8px}
.footer__bottom{
  border-top:1px solid rgb(255 255 255/.18);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between;font-size:.8125rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s5)}
.footer__legal li{margin:0}

/* ---------- Reveals ----------
   Transform + opacity only, so each stays on the compositor. will-change is
   deliberately absent: across dozens of elements it costs more layer memory
   than it saves. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}

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

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .hero__actions .btn{width:100%}
  .section-head{margin-bottom:var(--s6)}
}
@media (max-width:520px){
  .navbar__inner{gap:var(--s3)}
  /* The number itself is the label at this size — "Call" would only cost the
     digits room, and the digits are what people actually read off a phone. */
  .navbar__call{padding:.5rem .9rem;font-size:.875rem}
  .logo-band{padding-inline:var(--s4)}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Print ---------- */
@media print{
  .navbar,.nav,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  .section--ink,.site-footer,.hero{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}