/* ==========================================================================
   SECTIONS — hero, page hero, feature band, process, area check, CTA, grids
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME HERO
   The headline states the business model in words. Do not replace it with
   something atmospheric — the entire conversion problem is that visitors
   assume "laundry service" means a building they drive to.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 6vh, 5rem);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 150%;   /* extra height so parallax never exposes ground */
  object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(15,20,23,.94) 0%, rgba(15,20,23,.55) 45%, rgba(15,20,23,.35) 100%),
    linear-gradient(to right, rgba(15,20,23,.7) 0%, rgba(15,20,23,.1) 70%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { max-width: 20ch; margin-bottom: 1.75rem; }
/* Per-line clipped mask. The inner span is what animates. */
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }

.hero__sub { max-width: 46ch; color: rgba(255,255,255,.8); margin-bottom: 2.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero__foot {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero__fact { max-width: 22ch; }
.hero__fact dt {
  font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--breeze-w); margin-bottom: .5rem;
}
.hero__fact dd { margin: 0; font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.6; }

/* --------------------------------------------------------------------------
   PAGE HERO — every page except home
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: clamp(320px, 52svh, 560px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
  background: var(--ink); color: var(--white);
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 130%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,20,23,.95) 0%, rgba(15,20,23,.6) 60%, rgba(15,20,23,.45) 100%);
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; }
.page-hero .label { margin-bottom: 1.25rem; }
.page-hero__title { max-width: 18ch; }
.page-hero__sub { max-width: 52ch; margin-top: 1.5rem; color: rgba(255,255,255,.78); }

/* Compact variant for flow pages (booking, cart) where the work is below */
.page-hero--slim { min-height: auto; padding: calc(var(--header-h) + 2.5rem) 0 2.5rem; }

/* The booking card is pulled up over the hero, so the hero needs enough
   bottom padding for the overlap to land on empty space rather than on the
   last line of the intro. */
.page-hero--overlap { padding-bottom: clamp(5.5rem, 10vh, 8rem); }
.page-hero--slim::before { content: ""; position: absolute; inset: 0; background: var(--ink); }

/* --------------------------------------------------------------------------
   FULL-BLEED FEATURE BAND — the parallax moment
   -------------------------------------------------------------------------- */
.feature {
  position: relative;
  min-height: clamp(440px, 62vh, 720px);
  /* Padding as well as min-height: on a short viewport the content grows to
     fill the band and ends up with only a few pixels above the eyebrow, which
     reads as squashed against the section edge. */
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink); color: var(--white);
}
.feature__bg { position: absolute; inset: 0; }
.feature__bg img { width: 100%; height: 150%; object-fit: cover; }
.feature__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(15,20,23,.92) 0%, rgba(15,20,23,.72) 45%, rgba(15,20,23,.25) 100%);
}
/* The max-width belongs on the children, not on .feature__inner itself —
   .feature__inner is also .wrap, and overriding .wrap's max-width leaves its
   `margin: 0 auto` centring a narrow column in the middle of the viewport
   instead of starting it at the page gutter like every other section. */
.feature__inner { position: relative; z-index: 2; }
.feature__inner > * { max-width: 46ch; }
.feature__title { margin: 1.25rem 0 1.5rem; }
.feature__meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem;
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.feature__meta span {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */
/* Hairline grids.
   The dividers come from a 1px box-shadow on each CELL, not from a coloured
   background showing through the gaps. Box-shadow takes no layout space, so
   two neighbours' shadows meet inside the 1px gap and read as a single rule,
   and the outermost cells draw the outer border themselves.

   The reason it is done this way: with a coloured container background, a row
   that is not completely full leaves the unused cells showing as grey blocks.
   Drawing the lines per cell means an empty cell is simply nothing. */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 1px;
  background: transparent;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-2 > *, .grid-3 > *, .grid-4 > * { box-shadow: 0 0 0 1px var(--g100); }
.tone-dark .grid-2 > *, .tone-dark .grid-3 > *, .tone-dark .grid-4 > * { box-shadow: 0 0 0 1px var(--g700); }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Stats row on dark */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }

/* --------------------------------------------------------------------------
   SERVICE AREA CHECKER
   Sits directly under the hero. One input, instant answer, never a dead end.
   -------------------------------------------------------------------------- */
.areacheck { background: var(--white); border: 1px solid var(--g100); padding: clamp(1.75rem, 4vw, 3rem); }
.areacheck--inset { margin-top: -4rem; position: relative; z-index: 5; box-shadow: var(--shadow-float); }
.areacheck__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.areacheck__form { display: flex; gap: .75rem; flex-wrap: wrap; }
.areacheck__form .field { flex: 1 1 200px; }
.areacheck__form .btn { flex: none; }
.areacheck__result { margin-top: 1.25rem; }
.areacheck__result:empty { margin-top: 0; }
.areacheck__waitlist { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--g100); }
@media (max-width: 560px) {
  .areacheck__form { flex-direction: column; }
  .areacheck__form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   PRICING TABLE
   -------------------------------------------------------------------------- */
.price-row {
  display: grid; grid-template-columns: 1.4fr 1fr auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--g100);
}
.price-row__name { font-size: 1.05rem; font-weight: 400; }
.price-row__desc { margin-top: .35rem; font-size: .82rem; color: var(--g500); max-width: 52ch; }
.price-row__price { font-size: 1.5rem; font-weight: 300; letter-spacing: -.02em; white-space: nowrap; }
.price-row__unit { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g500); display: block; margin-top: .25rem; }
@media (max-width: 760px) {
  .price-row { grid-template-columns: 1fr; gap: .75rem; }
  .price-row__price { font-size: 1.3rem; }
}

/* Plan card for recurring pickups */
.plan { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--white); height: 100%; display: flex; flex-direction: column; }
.plan__name { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--breeze); margin-bottom: 1rem; }
.plan__save { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.plan__desc { margin-top: 1rem; color: var(--g500); flex: 1; }

/* --------------------------------------------------------------------------
   SPLIT ROW — alternating image / text
   -------------------------------------------------------------------------- */
.srow { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.srow--flip .srow__media { order: 2; }
.srow__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--g100); }
.srow__media img { width: 100%; height: 100%; object-fit: cover; }
.srow__body { max-width: 48ch; }
@media (max-width: 900px) {
  .srow { grid-template-columns: 1fr; }
  .srow--flip .srow__media { order: 0; }
}

/* --------------------------------------------------------------------------
   CTA SPLIT — closing block on every page
   -------------------------------------------------------------------------- */
.cta { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(400px, 55vh, 620px); }
.cta__media { position: relative; overflow: hidden; background: var(--g100); }
.cta__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-expo);
}
.cta:hover .cta__media img { transform: scale(1.04); }
.cta__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem);
  background: var(--ink); color: var(--white);
}
.cta__title { margin: 1.25rem 0 1.25rem; }
.cta__text { color: var(--g300); max-width: 42ch; margin-bottom: 2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.cta__note { margin-top: 1.75rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g500); }
@media (max-width: 900px) {
  .cta { grid-template-columns: 1fr; }
  .cta__media { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   CONTACT / DETAIL LIST
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.detail { display: flex; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--g100); }
.detail__icon { flex: none; width: 20px; color: var(--breeze); }
.detail__label { font-size: .55rem; letter-spacing: .26em; text-transform: uppercase; color: var(--g500); margin-bottom: .35rem; }
.detail__value { font-size: 1rem; }

/* --------------------------------------------------------------------------
   LEGAL / LONG-FORM PROSE
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.35rem; font-weight: 400; letter-spacing: -.01em; margin: 3rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; font-weight: 400; margin: 2rem 0 .75rem; }
.prose p { margin-bottom: 1.15rem; color: var(--g700); line-height: 1.8; }
.prose ul { margin: 0 0 1.15rem; padding-left: 1.25rem; list-style: disc; }
.prose li { margin-bottom: .5rem; color: var(--g700); line-height: 1.8; }
.prose a { color: var(--breeze); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 500; color: var(--ink); }

/* Anchored policy sections need a visible landing target */
.prose__section { padding-top: .5rem; }

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .35rem .65rem;
  background: var(--breeze); color: var(--white);
  font-size: .52rem; letter-spacing: .18em; text-transform: uppercase;
}
.badge--quiet { background: var(--g100); color: var(--g700); }

/* auto-fill almost always leaves a partly-filled last row, so this one needs
   the per-cell rule treatment more than any other grid on the site. */
.area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: transparent; }
.area-cell { background: var(--white); padding: 1.15rem 1.25rem; box-shadow: 0 0 0 1px var(--g100); }
.area-cell__name { font-size: .95rem; }
.area-cell__zip { font-size: .72rem; color: var(--g500); margin-top: .25rem; letter-spacing: .08em; }