/* ==========================================================================
   Cleaning from the Heights

   Palette is disciplined on purpose: solid deep red carries the primary
   actions, orange is a secondary accent, and the only gradient on the page is
   the hero wash. Neutrals are warm — biased toward the accent hue — rather
   than a default cool grey.
   ========================================================================== */

:root {
  /* Brand */
  --red:        #C3161C;
  --red-deep:   #9A0F14;
  --red-lift:   #DC2026;
  --ember:      #F2701F;
  --ember-lift: #FF8B3D;
  --ember-deep: #B85A10;              /* orange that survives a WHITE ground */

  /* Warm neutrals */
  --ink:        #12100E;
  --ink-2:      #1C1916;
  --ink-3:      #2A2521;
  --paper:      #FFFFFF;
  --sand:       #F5F2ED;
  --sand-2:     #EDE8E0;
  --stone:      #6E655C;
  --stone-lt:   #736A60;              /* muted text on LIGHT grounds */
  --muted-ink:  rgba(255,255,255,.62); /* muted text on INK grounds  */
  --line:       #E4DDD4;
  --line-ink:   rgba(255,255,255,.12);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --header-h: 74px;
  --r:    4px;    /* the design is squared-off; corners stay tight */
  --r-lg: 6px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--stone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  font-stretch: 112%;          /* Archivo's width axis — quietly wider, more presence */
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.4vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.25; }

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

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 760px; }

.section { padding: clamp(72px, 9.5vw, 128px) 0; }
.section-sand { background: var(--sand); }
.section-ink  { background: var(--ink); color: rgba(255,255,255,.66); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }

/* Sections are left-aligned by default — a centered stack for everything is
   the look we are deliberately avoiding. */
.section-head { max-width: 34ch; margin-bottom: clamp(44px, 5vw, 68px); }
.section-head .section-sub { max-width: 56ch; }
.section-sub { font-size: 1.06rem; margin: 0; }
.section-ink .section-sub { color: rgba(255,255,255,.6); }

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; flex: none;
  background: var(--red);
}
.eyebrow-onink { color: var(--ember-lift); }
.eyebrow-onink::before { background: var(--ember-lift); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 20px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  --pad: 14px 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: var(--pad);
  font-family: var(--display);
  font-size: .97rem; font-weight: 600; letter-spacing: -.01em;
  border: 1.5px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn-sm { --pad: 10px 18px; font-size: .9rem; }
.btn-lg { --pad: 17px 32px; font-size: 1.04rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-lift); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.btn-quiet { color: var(--ink); border-color: var(--line); background: var(--paper); }
.btn-quiet:hover { border-color: var(--ink); }

.btn-onred { background: var(--ink); color: #fff; }
.btn-onred:hover { background: #000; transform: translateY(-1px); }
.btn-onred-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-onred-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }


/* Label + switch stacked. The label exists to make the control findable for
   someone who cannot read the rest of the page. */
.lang-block { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.lang-label {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; color: var(--red); white-space: nowrap; line-height: 1;
}

/* ---------- Language switch ----------
   Deliberately prominent. Most of the service area is Spanish-speaking, so
   this is a primary control, not a footnote — full language names rather than
   two-letter codes, and always visible without opening the menu. */
.lang-switch {
  display: flex; align-items: center; flex: none;
  gap: 2px; padding: 3px 3px 3px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.lang-globe { width: 18px; height: 18px; flex: none; color: var(--stone); }
.lang-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 15px; min-height: 40px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--display); font-size: .93rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--stone);
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.lang-btn:hover { background: var(--sand); color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--red); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { min-height: var(--header-h); display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* Logo mark — a rising skyline. Fills are classed rather than written into the
   SVG so the mark stays on the palette. favicon.svg carries its own hardcoded
   copy of these colours, because a standalone file cannot see these tokens —
   if the palette changes, change it there too. */
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--ink);
  border-radius: var(--r);
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-mark .bldg-1   { fill: #fff; opacity: .45; }
.brand-mark .bldg-2   { fill: #fff; opacity: .72; }
.brand-mark .bldg-3   { fill: var(--ember); }
.brand-mark .bldg-win { fill: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-stretch: 112%;
  font-size: 1.02rem; letter-spacing: -.028em; color: var(--ink);
}
.brand-tag {
  font-size: .75rem; color: var(--stone-lt);
  letter-spacing: .06em; text-transform: uppercase;
}

.nav { display: flex; gap: 22px; }
.nav a {
  position: relative; padding: 5px 0;
  font-size: .95rem; font-weight: 500; color: var(--stone);
  text-decoration: none; transition: color .16s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

/* script.js appends this tap-to-call link to the nav on EVERY viewport, but it
   is a mobile-only affordance — the header already shows the number on desktop.
   Without this it renders as an unstyled link whose SVG has no height limit,
   which inflated the nav to 145px and wrapped the header phone number. */
.nav-phone { display: none; }

.header-cta { display: flex; align-items: center; gap: 14px; }

.phone-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--ink); text-decoration: none; transition: color .16s ease;
  white-space: nowrap;          /* never let the number break across two lines */
}
.phone-link svg { width: 17px; height: 17px; color: var(--red); }
.phone-link:hover { color: var(--red); }

.menu-toggle {
  display: none; flex: none;
  width: 44px; height: 44px; padding: 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.menu-toggle span {
  display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1150px) {
  .header-cta .phone-link { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: rgba(255,255,255,.66);
  padding: clamp(64px, 8.5vw, 120px) 0 clamp(64px, 8vw, 112px);
}
.hero-wash {                   /* the page's only gradient */
  position: absolute; inset: -40% -20% auto auto;
  width: 78%; height: 150%;
  background:
    radial-gradient(42% 46% at 74% 22%, rgba(242,112,31,.30) 0%, transparent 68%),
    radial-gradient(46% 50% at 92% 44%, rgba(195,22,28,.42) 0%, transparent 66%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.h1-accent { color: var(--ember); }
.hero-sub { max-width: 46ch; font-size: clamp(1.06rem, 1.5vw, 1.2rem); margin-bottom: 2.3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* Reassurance panel — answers "what happens if I submit this?" up front */
.hero-panel {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: 30px 28px;
}
.panel-label {
  margin: 0 0 22px;
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ember-lift);
}
.panel-steps { display: grid; gap: 22px; }
.panel-steps li { display: flex; gap: 15px; align-items: flex-start; }
.panel-step-n {
  flex: none;
  width: 27px; height: 27px; display: grid; place-items: center;
  border: 1.5px solid var(--ember); border-radius: 50%;
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  color: var(--ember); margin-top: 2px;
}
.panel-steps strong {
  display: block; color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.015em; line-height: 1.3; margin-bottom: 3px;
}
.panel-steps span { font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.55; }
.panel-foot {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line-ink);
  font-size: .86rem; color: rgba(255,255,255,.5);
}

/* ---------- Trust band ---------- */
.trust-band { background: var(--ink-2); border-top: 1px solid var(--line-ink); }
.trust-inner {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  padding-block: 22px;
}
.trust-inner span {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.trust-inner span::before {
  content: ''; flex: none;
  width: 6px; height: 6px; background: var(--ember);
  transform: rotate(45deg);
}

/* ---------- Marquee (the page's one kinetic moment) ---------- */
.marquee {
  overflow: hidden;
  background: var(--red);
  border-block: 1px solid rgba(0,0,0,.14);
  padding-block: 13px;
}
.marquee-track { display: flex; width: max-content; animation: slide 44s linear infinite; }
.marquee-set {
  display: flex; align-items: center; gap: 20px;
  padding-right: 20px;
  font-family: var(--display); font-size: .84rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.94); white-space: nowrap;
}
.marquee-set i { font-style: normal; font-size: .7rem; color: rgba(255,255,255,.55); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Services (editorial list, not icon cards) ---------- */
.svc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(32px, 5vw, 68px);
}
.svc {
  padding: 30px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'icon title' '. body';
  gap: 4px 15px;
  transition: border-color .2s ease;
}
.svc:hover { border-top-color: var(--red); }
.svc-icon { grid-area: icon; color: var(--red); margin-top: 1px; }
.svc-icon svg { width: 25px; height: 25px; display: block; }
.svc h3 { grid-area: title; margin: 0; align-self: center; transition: color .18s ease; }
.svc:hover h3 { color: var(--red); }
.svc p { grid-area: body; margin: 8px 0 0; font-size: .98rem; }

/* ---------- Why us ---------- */
.why-grid {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
}
.why-item { background: var(--ink); padding: 32px 28px; }
.why-item h3 { margin-bottom: .5rem; }
.why-item p { margin: 0; font-size: .97rem; color: rgba(255,255,255,.6); }

/* ---------- Steps ---------- */
.steps {
  display: grid; gap: clamp(26px, 3.5vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.step { border-top: 2px solid var(--ink); padding-top: 22px; }
.step-n {
  display: block; margin-bottom: 16px;
  font-family: var(--display); font-size: 2.5rem; font-weight: 800;
  font-stretch: 112%; letter-spacing: -.04em; line-height: 1;
  color: var(--red);
}
.step h3 { margin-bottom: .45rem; }
.step p { margin: 0; font-size: .98rem; }

/* ---------- Service areas ---------- */
.areas-grid {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.areas-copy .section-sub { margin-bottom: 1.9rem; }
.area-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.area-tags li {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sand);
  font-family: var(--display); font-size: .92rem; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink);
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.quote {
  margin: 0; padding: 30px 28px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.stars { color: var(--ember-deep); letter-spacing: .2em; font-size: .95rem; margin-bottom: 16px; }
.quote blockquote { margin: 0 0 20px; }
.quote blockquote p {
  margin: 0; font-family: var(--display); font-size: 1.1rem;
  font-weight: 500; letter-spacing: -.02em; line-height: 1.45; color: var(--ink);
}
.quote figcaption {
  font-family: var(--display); font-size: .9rem; font-weight: 600; color: var(--ink);
  display: flex; flex-direction: column;
}
.quote figcaption span {
  font-family: var(--body); font-weight: 400; font-size: .84rem; color: var(--stone-lt);
}

/* ---------- Booking ---------- */
.book-grid {
  display: grid; gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  align-items: start;
}
.book-copy { position: sticky; top: calc(var(--header-h) + 36px); }
.book-points { display: grid; gap: 13px; margin: 30px 0 36px; }
.book-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .98rem; color: rgba(255,255,255,.7);
}
.book-points li::before {
  content: ''; flex: none; margin-top: .55em;
  width: 6px; height: 6px; background: var(--ember); transform: rotate(45deg);
}
.book-alt { padding-top: 28px; border-top: 1px solid var(--line-ink); }
.book-alt-label { margin: 0 0 10px; font-size: .88rem; color: var(--muted-ink); }
.phone-link-lg { font-size: 1.65rem; color: #fff; letter-spacing: -.03em; }
.phone-link-lg svg { width: 23px; height: 23px; color: var(--ember); }
.phone-link-lg:hover { color: var(--ember-lift); }
.book-alt-mail { margin: .7rem 0 0; font-size: .92rem; }
.book-alt-mail a { color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 3px; }
.book-alt-mail a:hover { color: var(--ember-lift); }

.book-form-shell {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px);
  color: var(--stone);
}

.book-form fieldset { border: 0; margin: 0 0 28px; padding: 0; }
.book-form fieldset:last-of-type { margin-bottom: 22px; }
.book-form legend {
  padding: 0 0 16px;
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}

.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
.field { margin-bottom: 16px; }
.field-row .field { margin-bottom: 0; }
.field-row + .field, .field-row + .field-row { margin-top: 16px; }

.book-form label {
  display: block; margin-bottom: 7px;
  font-family: var(--display); font-size: .85rem; font-weight: 600;
  letter-spacing: -.005em; color: var(--ink);
}
.req { color: var(--red); }

.book-form input,
.book-form select,
.book-form textarea {
  width: 100%; padding: 13px 14px;
  font-family: var(--body); font-size: .98rem; color: var(--ink);
  background: var(--sand);
  border: 1.5px solid transparent; border-radius: var(--r);
  transition: border-color .16s ease, background-color .16s ease;
}
.book-form textarea { resize: vertical; min-height: 100px; }
.book-form select {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E655C' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
  outline: none; background: var(--paper); border-color: var(--ink);
}
.book-form input.invalid,
.book-form select.invalid { border-color: var(--red); background: #FDF4F4; }

.err { margin: 6px 0 0; font-size: .82rem; font-weight: 500; color: var(--red-deep); }
.err:empty { display: none; }

/* honeypot — off-screen, not display:none (bots skip those) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin: 16px 0 0; font-size: .85rem; color: var(--stone-lt); text-align: center; }
.form-status { margin: 14px 0 0; font-size: .93rem; font-weight: 500; text-align: center; }
.form-status:empty { display: none; }
.form-status.error { color: var(--red-deep); }

#submitBtn { margin-top: 6px; }
#submitBtn[disabled] { opacity: .7; cursor: progress; transform: none; }
.spinner { display: none; width: 17px; height: 17px; }
#submitBtn.loading .spinner {
  display: block;
  border: 2px solid rgba(255,255,255,.38); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.book-success { text-align: center; padding: 30px 6px; }
.success-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--red); color: #fff;
}
.success-mark svg { width: 30px; height: 30px; }
.book-success h3 { font-size: 1.7rem; margin-bottom: .5rem; }
.book-success p { color: var(--stone); margin-bottom: 1.8rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 44px 22px 0;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -.02em; color: var(--ink);
  transition: color .16s ease;
}
.faq summary:hover { color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  background: var(--red); transition: transform .22s ease, opacity .22s ease;
}
.faq summary::before { width: 15px; height: 2px; margin-top: -1px; }
.faq summary::after  { width: 2px; height: 15px; margin-top: -7.5px; right: 12.5px; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details p { margin: 0 0 24px; max-width: 62ch; font-size: 1rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: #fff; padding: clamp(56px, 6.5vw, 86px) 0; }
.cta-inner {
  display: flex; flex-wrap: wrap; gap: 30px;
  align-items: center; justify-content: space-between;
}
.cta-copy { max-width: 30ch; }
.cta-band h2 { color: #fff; margin-bottom: .35rem; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.55); padding-top: clamp(56px, 6.5vw, 84px); }
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.7fr repeat(3, 1fr);
}
.footer-brand .brand-mark { margin-bottom: 16px; }
.footer-name {
  margin: 0 0 .45rem; color: #fff;
  font-family: var(--display); font-weight: 700; font-stretch: 112%;
  font-size: 1.14rem; letter-spacing: -.028em;
}
.footer-note { margin: 0; font-size: .92rem; }
.footer-col h3 {
  margin-bottom: 16px; color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: .94rem; color: rgba(255,255,255,.55); text-decoration: none; }
.footer-col a:hover { color: var(--ember-lift); }
.footer-hours { margin: 16px 0 0; font-size: .88rem; color: var(--muted-ink); }
.footer-bottom {
  margin-top: clamp(44px, 5vw, 60px);
  padding-block: 24px; border-top: 1px solid var(--line-ink);
}
.footer-bottom p { margin: 0; font-size: .86rem; color: var(--muted-ink); }

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn-quiet { flex: 0 0 96px; }
.mobile-bar .btn-primary { flex: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1020px) {
  .hero-grid  { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { max-width: 520px; }
  .areas-grid { grid-template-columns: 1fr; }
  .book-grid  { grid-template-columns: 1fr; }
  .book-copy  { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  /* The phone number folds into the menu; the Book button stays visible
     because it is the page's primary action. */
  .header-cta .phone-link { display: none; }
  .header-cta { gap: 10px; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    padding: 6px 24px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -24px rgba(18,16,14,.4);
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; font-size: 1.02rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav .nav-phone {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 0; margin-top: 8px;
    font-family: var(--display); font-weight: 600; color: var(--red);
  }
  .nav .nav-phone svg { width: 18px; height: 18px; }

  .mobile-bar { display: flex; }
  .site-footer { padding-bottom: 76px; }   /* clear the fixed bar */

  /* The sticky bottom bar already carries "Request a Cleaning", so the header
     copy of it is redundant — drop it and spend the width on the language
     control instead. */
  .header-cta > .btn { display: none; }

  /* Show only the OTHER language: tapping it is unambiguous, and a Spanish
     speaker sees the word "Español" rather than having to decode a toggle. */
  .lang-btn[aria-pressed="true"] { display: none; }

  /* The header row is brand + language + menu button. "Choose your language!"
     is 136px and the default 28px gaps pushed the whole row 16px past a 360px
     viewport — in ENGLISH only, since the Spanish label is shorter. */
  .header-inner { gap: 12px; }
  .lang-label { font-size: .68rem; letter-spacing: .02em; }
  .lang-switch { padding: 3px 3px 3px 10px; }
  .lang-btn[aria-pressed="false"] { color: var(--red); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .brand-tag { display: none; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; gap: 16px; }
  .hero-actions .btn,
  .cta-actions .btn { flex: 1 1 100%; }
  .trust-inner { gap: 12px 26px; }
  .trust-inner span { font-size: .74rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .book-form-shell { padding: 24px 20px; }
  .svc { padding: 24px 0; }
}

/* 400% zoom / 320px reflow */
@media (max-width: 380px) {
  .wrap { padding-inline: 16px; }
  .hero-panel { padding: 24px 20px; }
  .why-item { padding: 26px 20px; }
}

/* ==========================================================================
   404 page (public/404.html)

   Cloudflare Pages serves this for any unmatched path, WITH a real 404 status.
   Without this file Pages falls back to index.html at HTTP 200, which makes
   every mistyped URL look like the homepage to Google.
   ========================================================================== */
.nf {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--ink);
  color: rgba(255,255,255,.66);
  text-align: center;
  padding: 48px 0;
}
.nf-inner { max-width: 620px; }
.nf-brand { justify-content: center; margin: 0 0 44px; }
.nf-brand .brand-name { color: #fff; }
.nf-code {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(4.5rem, 15vw, 8rem); line-height: 1;
  letter-spacing: -.05em; color: var(--ember);
}
.nf h1 { color: #fff; margin-bottom: 1rem; font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.nf-sub { max-width: 46ch; margin: 0 auto 2.4rem; font-size: 1.04rem; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }
.nf-foot { margin: 2.6rem 0 0; font-size: .95rem; color: var(--muted-ink); }
.nf-foot a {
  color: var(--ember-lift); font-family: var(--display); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 560px) { .nf-actions .btn { flex: 1 1 100%; } }