/* Coral Rock Cleaning — Homestead, FL
   ---------------------------------------------------------------------------
   v4 design layer. The previous build had one radius (3px) and three shadows
   in the whole stylesheet, so every element read as a paragraph rather than an
   object. This version introduces a real elevation and radius scale, full-bleed
   photography in the hero, alternating section grounds, eyebrow labels and
   two-tone headings. Content, copy and markup semantics are unchanged.
   Palette is taken from the logo: navy rock, teal sparkle, coral branch.
   --------------------------------------------------------------------------- */

:root {
  --limestone:      #E7EEF1;
  --limestone-pale: #F4F8F9;
  --limestone-deep: #C3D4DB;
  --grove:          #023F55;   /* logo navy */
  --grove-mid:      #0B5E7B;
  --grove-deep:     #012C3C;
  --aquifer:        #0F8C99;
  --aquifer-bright: #13A6B5;   /* logo teal */
  --coral:          #F46B4E;   /* logo coral — the call-to-action colour */
  --coral-deep:     #D8543A;
  --ink:            #04252F;
  --ink-soft:       #3E5A66;
  --ink-faint:      rgba(4,37,47,.52);
  --white:          #FFFFFF;
  --wa:             #25D366;

  --shell: 1140px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --step--2: clamp(0.8rem, 0.78rem + 0.1vw, 0.85rem);
  --step--1: clamp(0.86rem, 0.84rem + 0.1vw, 0.93rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.33rem + 0.85vw, 2rem);
  --step-3:  clamp(1.7rem, 1.48rem + 1.1vw, 2.3rem);
  --step-4:  clamp(2.25rem, 1.66rem + 2.9vw, 3.9rem);

  /* Radius scale. Small for inputs and tags, md for panels, lg for cards and
     photography, pill for anything you tap. */
  /* Height of the photo band across the top of the hero on phones. */
  --hero-band: clamp(230px, 34vh, 320px);

  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   26px;
  --pill:   999px;
  --radius: var(--r-sm);        /* legacy alias, still referenced below */

  /* Elevation. Every shadow is tinted with the brand navy rather than black,
     so lifted elements stay inside the palette. */
  --shadow-soft: 0 10px 28px -12px rgba(2,63,85,.20);
  --shadow-lift: 0 18px 40px -16px rgba(2,63,85,.32);
  --shadow-card: 0 1px 2px rgba(2,63,85,.05), 0 10px 26px -16px rgba(2,63,85,.30);
  --shadow-deep: 0 28px 60px -24px rgba(1,30,42,.50);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  font-variation-settings: 'wdth' 100;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--aquifer); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--grove); }

:focus-visible { outline: 3px solid var(--aquifer-bright); outline-offset: 3px; }

h1, h2, h3 {
  font-variation-settings: 'wdth' 112;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; font-variation-settings: 'wdth' 105; }
p  { margin: 0 0 1.1em; max-width: 68ch; }

/* Two-tone headings. The accent half of a headline carries the teal so the
   line has a focal point instead of reading as one solid block. */
h1 .hl, h2 .hl { color: var(--aquifer-bright); }
.hero h1 .hl { color: var(--aquifer-bright); }
.band--grove h2 .hl { color: var(--aquifer-bright); }

.shell { width: min(var(--shell), 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ==========================================================================
   EYEBROW / SECTION HEADS
   A small uppercase label above every heading. Costs one line and gives each
   section a visible starting edge while scrolling.
   ========================================================================== */

.kicker {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aquifer);
  margin: 0 0 .7rem; font-variation-settings: 'wdth' 100;
}
.hero .kicker, .band--grove .kicker { color: var(--aquifer-bright); }

/* ==========================================================================
   TOP UTILITY BAR
   Hours, phone and coverage area above the header — the three things a local
   customer checks before anything else.
   ========================================================================== */

.topbar {
  background: var(--grove-deep); color: rgba(231,238,241,.82);
  font-size: var(--step--2); line-height: 1.4;
}
.topbar .shell {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.4rem;
  padding-block: .2rem;
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 700;
  display: inline-flex; align-items: center; min-height: 40px; }
.topbar a:hover { color: var(--aquifer-bright); }
.topbar span { display: inline-flex; align-items: center; gap: .4rem; }
.topbar .topbar__sep { display: none; }
@media (min-width: 720px) { .topbar .topbar__last { margin-left: auto; } }

/* ==========================================================================
   HEADER
   ========================================================================== */

.masthead {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  color: var(--ink);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(195,212,219,.7);
  transition: box-shadow .2s ease;
}
.masthead.is-stuck { box-shadow: var(--shadow-soft); }
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px; flex-wrap: wrap;
}

.masthead nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-right: auto; }
.masthead nav a {
  color: var(--grove); text-decoration: none; font-size: var(--step--1); font-weight: 600;
  padding-block: .6rem; border-bottom: 2px solid transparent;
}
.masthead nav a:hover { color: var(--aquifer); border-bottom-color: var(--aquifer-bright); }

.masthead__actions { display: flex; align-items: center; gap: .5rem; }

.lang-switch {
  color: var(--grove); font-size: var(--step--1); font-weight: 700;
  border: 1px solid var(--limestone-deep); padding: .42rem .85rem;
  border-radius: var(--pill); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-switch:hover { background: var(--grove); color: var(--white); border-color: var(--grove); }

.masthead__call {
  background: var(--grove); color: var(--white);
  font-weight: 700; text-decoration: none;
  padding: .55rem 1.15rem; border-radius: var(--pill);
  font-size: var(--step--1); white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.masthead__call:hover { background: var(--grove-mid); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.masthead__quote {
  background: var(--coral); color: var(--white);
  font-weight: 700; text-decoration: none;
  padding: .55rem 1.15rem; border-radius: var(--pill);
  font-size: var(--step--1); white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.masthead__quote:hover { background: var(--coral-deep); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

/* ==========================================================================
   HERO
   Full-bleed photograph with a layered wash. A cleaning company sells the
   finished room; the old flat colour block sold nothing.
   ========================================================================== */

.hero {
  position: relative; isolation: isolate;
  background: var(--grove); color: var(--limestone);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.25rem, 8vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-src, none);
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
/* Two stacked washes: a vertical one that anchors the bottom edge, and a
   horizontal one that protects the headline column. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(1,30,42,.34) 0%, rgba(1,30,42,.10) 36%, rgba(1,30,42,.46) 82%, rgba(1,30,42,.74) 100%),
    linear-gradient(96deg, rgba(1,30,42,.88) 0%, rgba(1,30,42,.60) 44%, rgba(1,30,42,.10) 100%);
}
.hero--image::before { background-image: var(--hero-src); }
@media (max-width: 899px) {
  /* A landscape hero cropped into a tall viewport shows a narrow middle strip.
     Where a portrait variant exists, use it instead of cropping. */
  /* On a phone the hero's text runs to about twice the screen height, so a
     photo behind it is never actually seen - just a murky wash. Instead the
     photo becomes a band across the top, at full strength, and the text sits
     on solid navy below it where it reads perfectly. */
  .hero { padding-top: 0; }
  .hero::before {
    background-image: var(--hero-src-m, var(--hero-src, none));
    background-position: center 58%;
    height: var(--hero-band);
    bottom: auto;
  }
  .hero::after {
    height: calc(var(--hero-band) + 2px);
    bottom: auto;
    background: linear-gradient(180deg,
      rgba(1,30,42,.10) 0%,
      rgba(1,30,42,.20) 52%,
      rgba(1,30,42,.68) 84%,
      var(--grove) 97%,
      var(--grove) 100%);
  }
  .hero > .shell { padding-top: calc(var(--hero-band) + 1.75rem); }
}

.hero h1 { color: var(--white); max-width: 19ch; }
/* With the price card alongside, the headline column is half a screen wide.
   Full display size would wrap it to four lines, so it steps down one notch. */
@media (min-width: 900px) {
  .hero__grid:not(.hero__grid--solo) h1 {
    font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.2rem);
    max-width: 15ch;
  }
}
.hero__lede { font-size: var(--step-1); color: rgba(231,238,241,.90); max-width: 46ch; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero__grid--solo { grid-template-columns: 1fr !important; }
.hero__grid--solo h1 { max-width: 22ch; }
.hero__grid--solo .hero__lede { max-width: 58ch; }

.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* Trust chips under the hero buttons. Rounded, bordered, translucent — they
   read as badges rather than as another sentence. */
.hero__badges {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.hero__badges li {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--white); font-size: var(--step--1); font-weight: 600;
  padding: .42rem .9rem; border-radius: var(--pill);
}
.hero__badges b { color: var(--aquifer-bright); font-weight: 700; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; text-decoration: none;
  padding: .9rem 1.6rem; border-radius: var(--pill); border: 2px solid transparent;
  font-size: var(--step-0); cursor: pointer; font-family: inherit;
  line-height: 1.2; min-height: 48px;
  transition: transform .15s ease, background .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--coral); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--coral-deep); color: var(--white); box-shadow: var(--shadow-lift); }
.btn--ghost { border-color: rgba(255,255,255,.55); color: var(--white); background: rgba(255,255,255,.08); }
.btn--ghost:hover { background: var(--white); color: var(--grove); border-color: var(--white); }
.btn--solid { background: var(--grove); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--solid:hover { background: var(--grove-mid); color: var(--white); box-shadow: var(--shadow-lift); }
.btn--white { background: var(--white); color: var(--grove); box-shadow: var(--shadow-soft); }
.btn--white:hover { background: var(--limestone); color: var(--grove); box-shadow: var(--shadow-lift); }
.btn--wa { background: var(--wa); color: #06331A; box-shadow: var(--shadow-soft); }
.btn--wa:hover { background: #1FBD5A; color: #06331A; box-shadow: var(--shadow-lift); }

/* ==========================================================================
   PRICE PICKER
   Floats as a white card over the hero photograph.
   ========================================================================== */

.picker {
  background: var(--white); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-deep);
  border: 1px solid rgba(255,255,255,.6);
}
.picker h2 { font-size: var(--step-1); margin-bottom: .2em; }
.picker__note { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1.25rem; }
.picker__row { display: grid; gap: .8rem; margin-bottom: 1rem; }
@media (min-width: 480px) { .picker__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.field select, .field input, .field textarea {
  font-family: inherit; font-size: var(--step-0);
  padding: .7rem .8rem; border: 1px solid var(--limestone-deep);
  border-radius: var(--r-sm); background: var(--white); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select:focus, .field input:focus, .field textarea:focus {
  border-color: var(--aquifer-bright);
  box-shadow: 0 0 0 3px rgba(19,166,181,.18);
  outline: none;
}

.picker__result {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--limestone-deep); padding-top: 1.1rem; margin-top: .4rem;
}
.picker__price {
  font-size: var(--step-4); font-weight: 700; font-variation-settings: 'wdth' 112;
  color: var(--coral-deep); line-height: 1;
}
.picker__unit { font-size: var(--step--1); color: var(--ink-soft); }
.picker__cta { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.picker__cta .btn { padding: .75rem 1.2rem; font-size: var(--step--1); min-height: 44px; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.trust { background: var(--limestone-pale); border-bottom: 1px solid rgba(195,212,219,.6); }
.trust ul {
  list-style: none; margin: 0; padding: 0; padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .55rem;
  font-size: var(--step--1); font-weight: 600;
}
.trust li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); color: var(--grove);
  border: 1px solid rgba(195,212,219,.9);
  border-radius: var(--pill); padding: .4rem .95rem;
  box-shadow: 0 1px 2px rgba(2,63,85,.05);
}
.trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aquifer-bright); flex: none;
}

/* ==========================================================================
   SECTIONS — alternating grounds give the page a pulse on scroll
   ========================================================================== */

.band { padding-block: clamp(3rem, 6.5vw, 5rem); }
.band--pale  { background: var(--white); }
.band--stone { background: var(--limestone-pale); }
.band--ice   { background: var(--limestone); }
.band--grove { background: var(--grove); color: var(--limestone); position: relative; isolation: isolate; }
.band--grove h2, .band--grove h3 { color: var(--white); }
/* A faint teal glow keeps the dark band from reading as a solid rectangle. */
.band--grove::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 82% 18%, rgba(19,166,181,.22) 0%, transparent 62%),
    radial-gradient(52% 70% at 8% 92%, rgba(244,107,78,.14) 0%, transparent 60%);
}

.band__intro { max-width: 62ch; }
.band__intro p { color: var(--ink-soft); font-size: var(--step-1); }
.band--grove .band__intro p { color: rgba(231,238,241,.86); }

/* ==========================================================================
   SERVICE CARDS
   Was a bordered two-column list. Now elevated cards with a photo edge, which
   is what makes a services section feel browsable rather than read-through.
   ========================================================================== */

.svc-cards {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 2.5vw, 1.6rem);
}
@media (min-width: 620px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }

.svc-cards li {
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(195,212,219,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-cards li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.svc-cards .card__media { display: block; overflow: hidden; background: var(--limestone-deep); }
.svc-cards .card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.svc-cards li:hover .card__media img { transform: scale(1.04); }
.svc-cards .card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.svc-cards h3 { margin-bottom: .4em; }
.svc-cards h3 a { color: var(--grove); text-decoration: none; }
.svc-cards h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-cards li { position: relative; }
.svc-cards h3 a:hover { color: var(--aquifer); }
.svc-cards p { margin: 0 0 1rem; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.svc-cards .price-from {
  display: inline-flex; align-items: center; margin-top: auto; align-self: flex-start;
  font-weight: 700; color: var(--grove); font-size: var(--step--1);
  background: var(--limestone-pale); border: 1px solid rgba(195,212,219,.9);
  border-radius: var(--pill); padding: .3rem .8rem;
}
.band--grove .svc-cards li { background: rgba(255,255,255,.97); border-color: rgba(255,255,255,.25); }
.band--grove .svc-cards h3 { color: var(--grove); }

/* Legacy list variant, kept for any caller that still asks for it. */
.services { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 760px) { .services { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem,4vw,3.5rem); } }
.services li { border-top: 1px solid var(--limestone-deep); padding-block: 1.4rem; }
.services h3 { margin-bottom: .35em; }
.services h3 a { display: inline-block; padding-block: .25rem; color: var(--grove); text-decoration: none; }
.services h3 a:hover { color: var(--aquifer); text-decoration: underline; }
.services p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 46ch; }
.services .price-from { display: block; margin-top: .5rem; font-weight: 700; color: var(--aquifer); font-size: var(--step--1); }

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */

.steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { position: relative; padding-top: 4.2rem; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--aquifer-bright); color: var(--white);
  font-weight: 700; font-size: var(--step-1); font-variation-settings: 'wdth' 112;
  box-shadow: var(--shadow-soft);
}
.steps h3 { margin-bottom: .35em; }
.steps p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 38ch; }
.band--grove .steps p { color: rgba(231,238,241,.84); }
.band--grove .steps li::before { background: var(--white); color: var(--grove); }

/* ==========================================================================
   LOCAL REASONS
   ========================================================================== */

.reasons { display: grid; gap: clamp(1.1rem, 2.5vw, 1.6rem); margin-top: 2.25rem; }
@media (min-width: 820px) { .reasons { grid-template-columns: repeat(3, 1fr); } }
.reasons section {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  border-top: 4px solid var(--aquifer-bright);
}
.reasons h3 { color: var(--white); }
.reasons p { color: rgba(231,238,241,.86); font-size: var(--step--1); margin: 0; max-width: none; }
/* Same block on a light band. */
.band--pale .reasons section, .band--stone .reasons section {
  background: var(--white); border: 1px solid rgba(195,212,219,.55);
  border-top: 4px solid var(--aquifer-bright);
  box-shadow: var(--shadow-card);
}
.band--pale .reasons h3, .band--stone .reasons h3 { color: var(--grove); }
.band--pale .reasons p, .band--stone .reasons p { color: var(--ink-soft); }

/* ==========================================================================
   AREAS
   ========================================================================== */

.areas { list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem; }
.areas a, .areas span {
  display: inline-flex; align-items: center; min-height: 42px;
  text-decoration: none; color: var(--grove);
  background: var(--white); border: 1px solid rgba(195,212,219,.9);
  padding: .5rem 1.05rem; border-radius: var(--pill);
  font-size: var(--step--1); font-weight: 600;
  box-shadow: 0 1px 2px rgba(2,63,85,.05);
  transition: transform .15s ease, background .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.areas a:hover {
  background: var(--grove); color: var(--white); border-color: var(--grove);
  transform: translateY(-2px); box-shadow: var(--shadow-soft);
}
.band--grove .areas a, .band--grove .areas span { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.4); }
.band--grove .areas a:hover { background: var(--white); color: var(--grove); }

/* ==========================================================================
   PRICE TABLE
   ========================================================================== */

.rates {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: 1.75rem; font-size: var(--step--1);
  background: var(--white); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.rates caption { text-align: left; color: var(--ink-soft); padding-bottom: .8rem; caption-side: top; }
.rates th, .rates td { padding: .85rem .9rem; text-align: left; border-bottom: 1px solid rgba(195,212,219,.7); }
.rates thead th { font-weight: 700; color: var(--white); background: var(--grove); border-bottom: none; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: none; }
.rates tbody tr:nth-child(even) { background: var(--limestone-pale); }
.rates tbody th { font-weight: 600; }
.rates td { font-variant-numeric: tabular-nums; }
.picker .rates { box-shadow: none; border: 1px solid rgba(195,212,219,.7); }
/* The Spanish column headers ("Profunda", "Mudanza") are wider than the
   English ones and pushed the table past the viewport on a phone. Tighter
   cells at narrow widths, still above the 12.5px text floor. */
@media (max-width: 430px) {
  .rates { font-size: var(--step--2); }
  .rates th, .rates td { padding: .7rem .4rem; }
  .rates thead th { padding-inline: .35rem; }
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.reviews { display: grid; gap: 1.4rem; margin-top: 2.25rem; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.reviews blockquote {
  margin: 0; background: var(--white); border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.35rem; box-shadow: var(--shadow-card);
  border: 1px solid rgba(195,212,219,.55);
  position: relative;
}
.reviews blockquote::before {
  content: "\201C"; position: absolute; top: .35rem; right: 1.1rem;
  font-size: 4rem; line-height: 1; color: rgba(19,166,181,.22); font-weight: 700;
}
.reviews p { font-size: var(--step--1); margin-bottom: .8rem; color: var(--ink-soft); max-width: none; }
.reviews cite { font-style: normal; font-weight: 700; font-size: var(--step--1); color: var(--grove); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { margin-top: 2.25rem; max-width: 72ch; display: grid; gap: .7rem; }
.faq details {
  background: var(--white); border: 1px solid rgba(195,212,219,.7);
  border-radius: var(--r-md); padding: 1.05rem 1.25rem;
  box-shadow: 0 1px 2px rgba(2,63,85,.04);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq details[open] { box-shadow: var(--shadow-card); border-color: rgba(19,166,181,.45); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: var(--step-0); color: var(--grove);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.15em; color: var(--white); line-height: 1;
  background: var(--aquifer-bright); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: .9rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }

/* ==========================================================================
   QUOTE FORM
   ========================================================================== */

.quote__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.quote__grid > * { min-width: 0; }
@media (min-width: 900px) { .quote__grid { grid-template-columns: .9fr 1.1fr; } }
.quote form {
  display: grid; gap: .9rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 1.9rem);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 560px) { .quote .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } }
.quote label { color: rgba(231,238,241,.88); }
/* SMS consent. Carrier review wants the disclosure visible beside an
   unchecked, optional box - not hidden behind a link or a tooltip. */
.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: var(--step--1); line-height: 1.9;
  color: rgba(231,238,241,.82);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: .9rem 1rem;
}
.consent input { margin-top: .25rem; width: 18px; height: 18px; flex: none; accent-color: var(--aquifer-bright); }
.consent a {
  color: var(--aquifer-bright);
  display: inline-block; padding-block: .55rem;
  text-decoration-thickness: 2px;
}
.consent a:hover { color: var(--white); }

.quote .fine { font-size: var(--step--1); color: rgba(231,238,241,.72); margin: 0; max-width: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--grove-deep); color: rgba(231,238,241,.74);
  padding-block: 3rem 2rem; font-size: var(--step--1);
}
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 { font-size: var(--step--1); color: var(--white); margin-bottom: .9em;
  font-variation-settings: 'wdth' 100; letter-spacing: .08em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
.footer p a { display: inline-flex; align-items: center; min-height: 40px; }
.footer a { color: rgba(231,238,241,.74); text-decoration: none; }
.footer a:hover { color: var(--aquifer-bright); }
.footer p { max-width: 42ch; }
.footer__legal { margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(231,238,241,.14); }
.footer__legal p { margin: 0; max-width: none; }

/* ==========================================================================
   FLOATING ACTIONS
   ========================================================================== */

.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #06331A;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(6,51,26,.45);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.wa:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px -8px rgba(6,51,26,.55); color: #06331A; }
.wa svg { width: 30px; height: 30px; fill: currentColor; }
.wa span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 680px) {
  .masthead nav { display: none; }
  .masthead__call { display: none; }
  .masthead__inner { min-height: 60px; }
  .masthead .wordmark { margin-right: auto; }
  .wa { bottom: 4.6rem; right: .85rem; width: 52px; height: 52px; }
  .wa svg { width: 27px; height: 27px; }
  .mobile-call {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--coral); color: var(--white);
    text-align: center; padding: 1rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 -6px 20px -8px rgba(1,30,42,.4);
    /* Parked off-screen until the hero's own buttons are gone. At scroll top
       this bar sat exactly on top of "Get a free quote" - elementFromPoint at
       the middle of that button returned the bar, so the main call to action
       on the page could not be tapped at all on a 390x844 phone. It also
       duplicated the Call button sitting right next to it. */
    transform: translateY(100%);
    transition: transform .22s ease-out;
    visibility: hidden;
  }
  .mobile-call.is-on { transform: none; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-call { transition: none; }
}
@media (min-width: 681px) { .mobile-call { display: none; } }

.footer { padding-bottom: 2rem; }
@media (max-width: 680px) { .footer { padding-bottom: 5.5rem; } }

/* ==========================================================================
   UTILITY
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; background: var(--white); color: var(--grove);
  padding: .75rem 1rem; z-index: 100; border-radius: var(--r-sm);
}
.skip:focus { left: 1rem; top: .5rem; }

.crumbs { font-size: var(--step--1); color: rgba(231,238,241,.72); margin-bottom: 1rem; }
/* Breadcrumbs are standalone tap targets, so they get real height even though
   they sit on one line. Inline links inside body copy do not - padding those
   would break the line rhythm of the paragraph they live in. */
.crumbs a { color: rgba(231,238,241,.72); display: inline-block; padding-block: .5rem; }
.crumbs a:hover { color: var(--white); }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }

/* Scroll reveal. Elements start slightly low and faded; an IntersectionObserver
   adds .is-in. With JS off or reduced motion on, everything is simply visible. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   MEDIA
   Photo slots. Every image is a brand placeholder generated in the project
   palette — no stock photography, nothing pretending to be a real job.
   Replace the file at the same path with a real photo and it appears.
   Sizes: hero 1600x1000, before/after 1200x900, service cards 800x600.
   ========================================================================== */

.proof { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
@media (min-width: 640px) { .proof { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.proof figure { margin: 0; }
.proof img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); display: block; box-shadow: var(--shadow-card);
}
.proof figcaption {
  margin-top: .8rem; font-size: var(--step--1); font-weight: 700;
  color: var(--grove); display: flex; align-items: baseline; gap: .5rem;
}
.proof figcaption::before {
  content: ""; width: 26px; height: 3px; border-radius: var(--pill);
  background: var(--aquifer-bright); flex: none; transform: translateY(-4px);
}
.band--grove .proof figcaption { color: var(--limestone); }

.proof-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 1.4rem; }
.band--grove .proof-note { color: rgba(231,238,241,.78); }

/* Proof-point band. */
.figures { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures div {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-top: 4px solid var(--aquifer-bright);
  border-radius: var(--r-md); padding: 1.15rem 1.25rem 1.2rem;
}
.band--pale .figures div, .band--stone .figures div {
  background: var(--white); border: 1px solid rgba(195,212,219,.55);
  border-top: 4px solid var(--aquifer-bright); box-shadow: var(--shadow-card);
}
.figures b {
  display: block; font-size: var(--step-3); font-weight: 700;
  font-variation-settings: 'wdth' 112; line-height: 1; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.figures span { display: block; margin-top: .45rem; font-size: var(--step--1); color: rgba(231,238,241,.82); }
.band--pale .figures b, .band--stone .figures b { color: var(--grove); }
.band--pale .figures span, .band--stone .figures span { color: var(--ink-soft); }

/* ==========================================================================
   BEFORE / AFTER COMPARE
   Drag handle over two stacked photos. Pointer events on the frame drive it;
   the range input stays for keyboard and screen-reader users.
   ========================================================================== */

.compares { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); margin-top: 2.25rem; }

/* Three across put each slider at 329px on a 1440px screen - narrower than
   the same slider on a phone, with the 48px grip covering a sixth of it, and
   the grout and splatter these photographs are meant to show invisible at
   that size. Two across, with the third spanning the full width, gives every
   pair room to actually read. */
@media (min-width: 900px) {
  .compares { grid-template-columns: repeat(2, 1fr); }
  .compares > .compare:last-child { grid-column: 1 / -1; }
  /* A 4:3 frame at full content width is an 1030x772 slab. 16:9 is the right
     shape there, but a centred crop of a 4:3 photo would eat the floor, and
     in the living-room pair the floor is where the shoes and the toys are.
     Anchor the crop low: the ceiling is what we can afford to lose. */
  .compares > .compare:last-child .compare__frame { aspect-ratio: 16 / 9; }
  .compares > .compare:last-child .compare__frame img { object-position: center 78%; }
}

/* <figure> carries a default 40px side margin in every browser, which was
   shrinking each slider inside its grid cell. */
.compare { margin: 0; }
.compare figcaption {
  margin-top: .85rem; font-size: var(--step--1); font-weight: 700; color: var(--grove);
}
.band--grove .compare figcaption { color: var(--white); }
.compare figcaption span { display: block; font-weight: 400; color: var(--ink-soft); margin-top: .15rem; }
.band--grove .compare figcaption span { color: rgba(231,238,241,.78); }

.compare__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-lg); background: var(--limestone-deep);
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
  cursor: ew-resize;
  --pos: 50%;
}
.compare__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; user-select: none; -webkit-user-drag: none;
}
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }

.compare__tag {
  position: absolute; top: .7rem; z-index: 4;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  padding: .32rem .75rem; border-radius: var(--pill); pointer-events: none;
  background: rgba(1,30,42,.78); color: var(--white);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.compare__tag--b { left: .7rem; }
.compare__tag--a { right: .7rem; }

.compare__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px;
  background: var(--white); transform: translateX(-50%); z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(1,30,42,.22);
}
.compare__grip {
  position: absolute; top: 50%; left: var(--pos); z-index: 3; pointer-events: none;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--white); box-shadow: 0 4px 14px rgba(1,30,42,.40);
  display: grid; place-items: center;
}
.compare__grip::before {
  content: ""; width: 20px; height: 10px;
  background:
    linear-gradient(to right, var(--grove) 3px, transparent 3px) left center/7px 10px no-repeat,
    linear-gradient(to left,  var(--grove) 3px, transparent 3px) right center/7px 10px no-repeat;
  clip-path: polygon(0 50%, 40% 0, 40% 100%, 60% 0, 100% 50%, 60% 100%);
}

.compare__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; appearance: none; background: none;
  pointer-events: none;
}
.compare__range:focus-visible ~ .compare__grip { outline: 3px solid var(--aquifer-bright); outline-offset: 3px; }

/* ==========================================================================
   GALLERY — native scroll-snap strip, no carousel library, no autoplay
   ========================================================================== */

.gallery {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 74vw);
  gap: .9rem; margin-top: 2rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-block: .35rem 1rem;
  scrollbar-width: thin;
}
@media (min-width: 700px)  { .gallery { grid-auto-columns: minmax(300px, 38vw); } }
@media (min-width: 1000px) { .gallery { grid-auto-columns: 340px; } }

.gallery figure { margin: 0; scroll-snap-align: start; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); display: block; background: var(--limestone-deep);
  box-shadow: var(--shadow-card);
}
.gallery figcaption { margin-top: .6rem; font-size: var(--step--1); color: var(--ink-soft); }
.band--grove .gallery figcaption { color: rgba(231,238,241,.80); }

.gallery-bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

.gallery-hint { font-size: var(--step--1); color: var(--ink-soft); margin-top: .35rem; }
.band--grove .gallery-hint { color: rgba(231,238,241,.78); }

/* ==========================================================================
   LOGO
   The logo is the only way back to the home page on a phone, so its tap area
   is padded to a comfortable target rather than the image's own height.
   ========================================================================== */

.wordmark {
  display: flex; align-items: center; line-height: 0;
  min-height: 44px; padding-block: .35rem; text-decoration: none;
  margin-right: 1rem;
}
.wordmark img { height: 36px; width: auto; display: block; }
@media (max-width: 680px) { .wordmark img { height: 30px; } }
.footer .wordmark { margin-right: 0; }
.footer .wordmark img { height: 42px; margin-bottom: 1rem; }

/* ==========================================================================
   QUOTE FORM — honeypot + status
   ========================================================================== */

/* The honeypot must be invisible to people but NOT display:none, which many
   bots detect and skip. Pushed off-screen instead, and taken out of the tab
   order and the accessibility tree at the markup level. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 1rem 0 0;
  padding: .9rem 1.05rem;
  border-radius: var(--r-md);
  font-size: var(--step--1);
  line-height: 1.55;
}
.form-status--ok {
  background: rgba(255,255,255,.14);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.28);
}
.form-status--ok strong { font-size: var(--step-0); }
.form-status--err {
  background: rgba(233,106,72,.18);
  color: var(--white);
  border: 1px solid rgba(233,106,72,.55);
}