/* ==========================================================================
   LA Cleaning — design system
   Built by Regan IT, September 2026.
   Palette derived from the existing logo:
     green #50b245 · navy #154867 · blue #0072ef · orange #f78e3b
   ========================================================================== */

:root {
  /* brand */
  --navy:        #154867;
  --navy-900:    #0d2f45;
  --navy-700:    #1c5b80;
  --green:       #50b245;
  --green-700:   #2f7a34;   /* accessible on light for small text + buttons */
  --green-100:   #e8f5e4;
  --blue:        #0072ef;
  --orange:      #f78e3b;
  --orange-100:  #fdeedd;

  /* ground */
  --cream:       #fbf9f5;
  --cream-200:   #f3efe7;
  --white:       #ffffff;
  --ink:         #12262f;
  --ink-70:      #46606c;
  --ink-45:      #7a8d96;
  --line:        rgba(21, 72, 103, .14);
  --line-soft:   rgba(21, 72, 103, .08);

  /* type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* scale */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,47,69,.05), 0 2px 8px rgba(13,47,69,.04);
  --shadow-md: 0 2px 4px rgba(13,47,69,.05), 0 12px 28px rgba(13,47,69,.08);
  --shadow-lg: 0 4px 8px rgba(13,47,69,.06), 0 24px 56px rgba(13,47,69,.12);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-color: rgba(21,72,103,.3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--green); }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 var(--sp-4); color: var(--navy-900); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-family: var(--body); font-weight: 650; letter-spacing: -.005em; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
strong { font-weight: 650; color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--cream { background: var(--cream-200); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy-900); color: #dbe6ee; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); border-radius: 2px; }
.section--navy .eyebrow { color: var(--orange); }
.section--navy .eyebrow::before { background: var(--orange); }

.lede { font-size: clamp(1.075rem, 1.6vw, 1.25rem); color: var(--ink-70); line-height: 1.6; }
.section--navy .lede { color: #b9cbd8; }
.measure { max-width: 62ch; }
.head-block { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head-block--center { margin-inline: auto; text-align: center; }
.head-block--center .eyebrow { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.6rem; border-radius: var(--r-pill); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--green { background: var(--green-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--green:hover { background: #266628; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { background: var(--white); border-color: var(--navy); transform: translateY(-2px); }
.btn--onnavy { background: #fff; color: var(--navy-900); }
.btn--onnavy:hover { background: var(--orange); color: var(--navy-900); transform: translateY(-2px); }
.btn--onnavy-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--onnavy-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Buttons are nowrap so labels stay on one line, which means a long label can
   overflow a narrow phone. Below 420px let them wrap and centre instead. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,249,245,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 4px 20px rgba(13,47,69,.06); background: rgba(251,249,245,.96); }
.hdr__in { display: flex; align-items: center; gap: var(--sp-5); min-height: 88px; }
.hdr__logo { flex: none; display: block; line-height: 0; }
.hdr__logo img { height: 54px; width: auto; }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; align-items: center; gap: clamp(.35rem, 1.4vw, 1.1rem); list-style: none; margin: 0; padding: 0; }
.hdr__nav a {
  display: block; padding: .55rem .7rem; white-space: nowrap; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 550; color: var(--ink-70); text-decoration: none;
  transition: color .16s, background-color .16s;
}
.hdr__nav a:hover { color: var(--navy-900); background: rgba(21,72,103,.06); }
.hdr__nav a[aria-current="page"] { color: var(--navy-900); font-weight: 650; background: var(--green-100); }
.hdr__cta { flex: none; display: flex; align-items: center; gap: var(--sp-3); }
.hdr__tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .95rem; color: var(--navy-900); text-decoration: none;
  padding: .5rem .2rem;
}
.hdr__tel svg { width: 16px; height: 16px; color: var(--green-700); }
.hdr__tel:hover { color: var(--green-700); }
.burger {
  display: none; flex: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--navy);
  transition: transform .22s var(--ease), opacity .18s;
}
.burger span::before { position: absolute; transform: translateY(-6px); }
.burger span::after  { position: absolute; transform: translateY(6px); }
.burger span { position: relative; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* Between the burger breakpoint and about 1140px the full nav, the phone number
   and the quote button together are wider than the viewport. Drop the phone
   number's text and keep its icon; that buys back roughly 90px. */
@media (max-width: 1140px) {
  .hdr__tel span { display: none; }
  .hdr__nav ul { gap: clamp(.2rem, .8vw, .7rem); }
}
@media (max-width: 940px) {
  .burger { display: inline-flex; margin-left: auto; }
  .hdr__nav {
    position: fixed; inset: 88px 0 auto; margin: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .hdr__nav.is-open { max-height: 78vh; overflow-y: auto; }
  .hdr__nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-3) clamp(1.15rem,4vw,2.5rem) var(--sp-5); }
  .hdr__nav a { padding: .9rem .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .hdr__cta .hdr__tel span { display: none; }
}
@media (max-width: 760px) {
  /* logo + burger + phone + button will not fit on a 375px screen */
  .hdr__cta .btn { display: none; }
  .hdr__in { gap: var(--sp-3); min-height: 74px; }
  .hdr__logo img { height: 42px; }
  .hdr__tel { padding: .5rem .35rem; }
}
@media (max-width: 760px) { .hdr__nav { inset: 74px 0 auto; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--cream); padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(21,72,103,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 62%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 44rem; height: 44rem; right: -16rem; top: -20rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(80,178,69,.16), rgba(80,178,69,0) 62%);
}
.hero__in { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .hero__in { grid-template-columns: 1.08fr .92fr; } }
.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: normal;
  background-image: linear-gradient(100deg, rgba(80,178,69,.38), rgba(247,142,59,.38));
  background-size: 100% .30em;
  background-position: 0 .62em;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding-inline: .05em;
  white-space: nowrap;
  /* so each wrapped line gets its own highlight, not one box across both */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__lede { font-size: clamp(1.1rem, 1.75vw, 1.3rem); color: var(--ink-70); max-width: 34rem; margin-bottom: var(--sp-6); }
.hero__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 600; color: var(--navy-900); box-shadow: var(--shadow-sm);
}
.pill svg { width: 15px; height: 15px; color: var(--green-700); flex: none; }
.pill--orange { background: var(--orange-100); border-color: rgba(247,142,59,.4); }
.pill--orange svg { color: #b8601a; }

/* hero card: the price + areas panel */
.hero__panel {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.hero__panel::before {
  content: ""; position: absolute; inset: auto auto -14px -14px; width: 96px; height: 96px; z-index: -1;
  border-radius: var(--r-lg); background: repeating-linear-gradient(45deg, rgba(0,114,239,.16) 0 4px, transparent 4px 8px);
}
/* the three named areas, now the hero panel's anchor where the rate used to be */
.hero__places { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.hero__places li {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.15;
  letter-spacing: -.025em; color: var(--navy-900);
  padding-left: 1.05rem; position: relative;
}
.hero__places li + li { margin-top: .12rem; }
.hero__places li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.hero__places li:nth-child(3)::before { background: var(--orange); }
.rate__left .rate__badge { display: inline-block; }
.price-tag { display: flex; align-items: baseline; gap: .5rem; margin-bottom: var(--sp-2); }
.price-tag__num { font-family: var(--display); font-size: clamp(3rem, 6vw, 4rem); font-weight: 600; line-height: .9; color: var(--navy-900); letter-spacing: -.03em; }
.price-tag__unit { font-size: 1.05rem; font-weight: 600; color: var(--ink-70); }
.price-note { font-size: .925rem; color: var(--ink-70); margin-bottom: var(--sp-5); }
.hero__panel hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: var(--sp-5); }
.area-mini { display: grid; gap: var(--sp-4); }
.area-mini__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.area-mini__pin { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); }
.area-mini__pin svg { width: 17px; height: 17px; }
.area-mini__item:nth-child(2) .area-mini__pin { background: var(--orange-100); color: #b8601a; }
.area-mini__t { font-weight: 700; font-size: 1rem; color: var(--navy-900); line-height: 1.35; }
.area-mini__s { font-size: .9rem; color: var(--ink-70); line-height: 1.5; }

/* ---------- trust strip ---------- */
.trust { background: var(--navy-900); color: #cddbe5; }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); padding-block: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust__item svg { width: 22px; height: 22px; flex: none; color: var(--orange); margin-top: 2px; }
.trust__t { font-weight: 650; color: #fff; font-size: .975rem; line-height: 1.3; }
.trust__s { font-size: .875rem; color: #9cb3c2; line-height: 1.45; }

/* ---------- cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.35rem, 2.4vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(21,72,103,.22); }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700); margin-bottom: var(--sp-4);
}
.card__icon svg { width: 23px; height: 23px; }
.card__icon--orange { background: var(--orange-100); color: #b8601a; }
.card__icon--blue { background: #e2f0ff; color: #0559b3; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: .975rem; color: var(--ink-70); }
.card__meta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); font-size: .875rem; font-weight: 650; color: var(--green-700); }

/* ---------- area cards ---------- */
.area-card {
  position: relative; overflow: hidden; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm);
}
.area-card::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(80,178,69,.13), transparent 66%);
}
.area-card--norfolk::after { background: radial-gradient(circle, rgba(247,142,59,.15), transparent 66%); }

/* Blurred lane network behind each area card. Inset negative so the blur's
   soft edge never shows as a border inside the card's rounded corners, and
   masked from the top right so it fades out before it reaches the body copy
   and the village pills, where it would eat into text contrast. */
.area-card__map {
  position: absolute; inset: -12%; width: 124%; height: 124%;
  z-index: 0; pointer-events: none;
  filter: blur(2.6px);
  opacity: .58;
  /* a broad diagonal wash rather than a corner glow, so the lane network reads
     across the card, still fading before the village pills */
  mask-image: linear-gradient(207deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.22) 66%, transparent 88%);
  -webkit-mask-image: linear-gradient(207deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.22) 66%, transparent 88%);
}
/* everything the reader has to read sits above the map */
.area-card__top, .area-card h3, .area-card p, .village-list { position: relative; z-index: 1; }
/* readers who have asked for more contrast get no decorative wash at all */
@media (prefers-contrast: more) { .area-card__map { display: none; } }
@media print { .area-card__map { display: none; } }
.area-card__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); position: relative; }
.area-card__badge {
  flex: none; padding: .3rem .8rem; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--green-100); color: var(--green-700);
}
.area-card--norfolk .area-card__badge { background: var(--orange-100); color: #a8551a; }
.area-card h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-bottom: var(--sp-3); position: relative; }
.area-card p { color: var(--ink-70); position: relative; }
.village-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: var(--sp-4) 0 0; padding: 0; position: relative; }
.village-list li {
  font-size: .84rem; font-weight: 550; color: var(--navy-900);
  background: var(--cream-200); border: 1px solid var(--line-soft);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}

/* ---------- steps ---------- */
.steps {
  counter-reset: s; display: grid;
  gap: clamp(1.75rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4,1fr); } }
/* The number is 2.1rem tall on a line-height of 1, so the top padding has to
   clear that plus a real gap, or the digits sit on top of the heading. */
.step { counter-increment: s; position: relative; padding-top: 3.4rem; }
.step::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1;
  color: rgba(21,72,103,.16); letter-spacing: -.03em;
}
/* a hairline under the number ties it to its own step */
.step::after {
  content: ""; position: absolute; top: 2.75rem; left: 0; width: 20px; height: 2px;
  border-radius: 2px; background: var(--green); opacity: .5;
}
.section--navy .step::after { background: var(--orange); opacity: .65; }
.step h4 { margin-bottom: var(--sp-2); font-size: 1.075rem; }
.step p { font-size: .95rem; color: var(--ink-70); }
.section--navy .step::before { color: rgba(255,255,255,.22); }
.section--navy .step h4 { color: #fff; }
.section--navy .step p { color: #a9bfcd; }

/* ---------- checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checks--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .checks--2 { grid-template-columns: repeat(2, 1fr); } }
.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .975rem; line-height: 1.5; }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--green-700); margin-top: 2px; }
.checks--x svg { color: var(--ink-45); }
.section--navy .checks li { color: #cddbe5; }
.section--navy .checks svg { color: var(--orange); }

/* ---------- quote ---------- */
.quote { position: relative; max-width: 52rem; margin-inline: auto; text-align: center; }
.quote__mark { font-family: var(--display); font-size: 5rem; line-height: .6; color: var(--green); opacity: .35; display: block; margin-bottom: var(--sp-3); }
.quote blockquote { margin: 0 0 var(--sp-5); font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 1.95rem); line-height: 1.4; letter-spacing: -.015em; color: var(--navy-900); }
.quote figcaption { font-size: .95rem; color: var(--ink-70); font-weight: 550; }
.stars { display: inline-flex; gap: 3px; margin-bottom: var(--sp-4); }
.stars svg { width: 19px; height: 19px; color: var(--orange); }

/* ---------- pricing table ---------- */
.rate {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
  grid-template-columns: 1fr;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.2vw, 2.75rem); box-shadow: var(--shadow-md);
}
@media (min-width: 860px) { .rate { grid-template-columns: .85fr 1.15fr; } }
.rate__left { text-align: center; padding: clamp(1.25rem,2.4vw,1.75rem); background: var(--cream-200); border-radius: var(--r-lg); }
.rate__num { font-family: var(--display); font-size: clamp(3.4rem, 8vw, 5rem); font-weight: 600; line-height: .88; letter-spacing: -.035em; color: var(--navy-900); }
.rate__unit { font-size: 1.05rem; font-weight: 650; color: var(--ink-70); margin-bottom: var(--sp-4); }
.rate__badge { display: inline-block; padding: .35rem .9rem; border-radius: var(--r-pill); background: var(--green-100); color: var(--green-700); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }

.tbl { width: 100%; border-collapse: collapse; font-size: .975rem; }
.tbl caption { text-align: left; font-weight: 650; color: var(--navy-900); padding-bottom: var(--sp-3); }
.tbl th, .tbl td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-weight: 650; color: var(--navy-900); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-70); }
.tbl td:last-child { text-align: right; font-weight: 650; color: var(--navy-900); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* Grid and flex children default to min-width:auto, so a wide table inside one
   stretches its parent instead of letting .tbl-scroll scroll. This is what made
   the vacancies card overflow a 320px phone. */
.grid > *, .form-shell > *, .rate > *, .hero__in > *, .steps > * { min-width: 0; }
.card, .area-card, .form-card { min-width: 0; }

/* ---------- faq ---------- */
.faq { max-width: 46rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0 clamp(1rem,2vw,1.4rem); margin-bottom: var(--sp-3);
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: rgba(21,72,103,.24); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-weight: 650; color: var(--navy-900); font-size: 1.0125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--green-700); border-bottom: 2px solid var(--green-700);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq__a { padding-bottom: 1.2rem; color: var(--ink-70); font-size: .975rem; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- form ---------- */
.form-shell { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .form-shell { grid-template-columns: 1fr 1.15fr; } }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: .9rem; font-weight: 650; color: var(--navy-900); margin-bottom: .4rem; }
.field .req { color: #b8601a; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; background: var(--cream);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-700); background: var(--white);
  box-shadow: 0 0 0 3px rgba(80,178,69,.18);
}
.field__hint { font-size: .825rem; color: var(--ink-45); margin-top: .35rem; }
.field-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.pill-note {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: var(--sp-4); padding: .8rem 1rem;
  background: var(--cream-200); border-left: 2px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .925rem; color: var(--ink-70);
}
.pill-note svg { width: 18px; height: 18px; flex: none; color: var(--green-700); margin-top: 2px; }
.section--white .pill-note { background: var(--cream); }
.form-note { font-size: .85rem; color: var(--ink-45); margin-top: var(--sp-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--r-md); padding: 1rem 1.15rem; margin-bottom: var(--sp-5); font-size: .95rem; border: 1px solid; }
.alert--ok { background: var(--green-100); border-color: rgba(47,122,52,.3); color: #1d5c22; }
.alert--err { background: #fdecec; border-color: rgba(190,50,50,.3); color: #92211f; }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.contact-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-list__ic { flex: none; width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--green-700); }
.contact-list__ic svg { width: 20px; height: 20px; }
.contact-list__ic--star { color: #b8601a; background: var(--orange-100); border-color: rgba(247,142,59,.35); }
.contact-list dt { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-45); margin-bottom: .2rem; }
.contact-list dd { margin: 0; font-size: 1.075rem; font-weight: 600; color: var(--navy-900); line-height: 1.4; }
.contact-list dd a { color: inherit; text-decoration: none; }
.contact-list dd a:hover { color: var(--green-700); }
.contact-list dd small { display: block; font-size: .875rem; font-weight: 450; color: var(--ink-70); margin-top: .2rem; }


/* ---------- brand signature ----------
   The one place the full lockup runs large enough that
   "Making homes beautiful since 2010" reads as words, not texture. */
.signature { background: var(--white); border-block: 1px solid var(--line-soft); }
.signature__in {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding-block: clamp(2.5rem, 6vw, 4.5rem); text-align: center;
}
.signature img { width: min(420px, 88vw); height: auto; }
.signature p {
  font-size: .95rem; color: var(--ink-45); max-width: 44ch;
  letter-spacing: .01em;
}
.signature__rule { width: 46px; height: 2px; border-radius: 2px; background: var(--green); }

/* ---------- legal pages ---------- */
.legal { max-width: 46rem; }
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.35rem); margin-top: var(--sp-7); margin-bottom: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { color: var(--ink-70); margin-bottom: var(--sp-4); }
.legal strong { color: var(--navy-900); }
.legal code { font-size: .92em; background: var(--cream-200); padding: .1rem .35rem; border-radius: 4px; }
.legal__stamp {
  margin-top: var(--sp-7); padding: 1rem 1.15rem;
  background: var(--cream-200); border-left: 2px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9rem; color: var(--ink-70);
}
.area-card--solo { max-width: 46rem; }
.area-card__note {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft); font-size: .925rem; position: relative; z-index: 1;
}

/* ---------- cta band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 20px 20px;
  mask-image: radial-gradient(100% 100% at 15% 0%, #000, transparent 65%);
  -webkit-mask-image: radial-gradient(100% 100% at 15% 0%, #000, transparent 65%);
}
.cta-band__in { position: relative; display: grid; gap: var(--sp-5); align-items: center; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
@media (min-width: 860px) { .cta-band__in { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: #b9cbd8; max-width: 46ch; margin: 0; }

/* ---------- footer ---------- */
.ftr { background: var(--navy-900); color: #93aab9; border-top: 1px solid rgba(255,255,255,.09); font-size: .925rem; }
.ftr__in { display: grid; gap: var(--sp-6); padding-block: clamp(2.5rem, 5vw, 4rem) var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .ftr__in { grid-template-columns: 1.5fr .85fr .85fr 1.1fr; } }
.ftr__find a { display: inline-flex; align-items: center; gap: .55rem; }
.ftr__find svg { width: 17px; height: 17px; flex: none; color: var(--green); }
.ftr__find a:hover svg { color: var(--orange); }
.ftr__logo { background: #fff; padding: .85rem 1.1rem; border-radius: var(--r-md); display: inline-block; margin-bottom: var(--sp-4); }
.ftr__logo img { height: 56px; width: auto; }
.ftr h4 { color: #fff; font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: var(--sp-4); font-weight: 700; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ftr a { color: #93aab9; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--green); }
.ftr__bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; align-items: center;
  padding-block: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: #7d95a5;
}
/* the build credit: small, quiet, and a single link covering label and logo */
.ftr__by {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #7d95a5; text-decoration: none; font-size: .85rem;
  transition: color .18s var(--ease);
}
.ftr__by img {
  height: 17px; width: auto; display: block;
  opacity: .78; transition: opacity .18s var(--ease);
}
.ftr__by:hover { color: #fff; }
.ftr__by:hover img { opacity: 1; }
.ftr__social { display: flex; gap: .6rem; }
.ftr__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #cddbe5; }
.ftr__social a:hover { background: var(--green-700); color: #fff; }
.ftr__social svg { width: 18px; height: 18px; }

/* ---------- sticky contact widget ----------
   Desktop: a vertical tab pinned to the right edge that slides a panel out.
   Phone:   a fixed bar along the bottom with the buttons already showing,
            because a vertical edge tab is unusable with a thumb.        */
.qc { position: fixed; z-index: 90; }
.qc__t {
  margin: 0 0 .1rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-45);
}
.qc__btn {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border-radius: var(--r-sm);
  font-family: var(--body); font-size: .93rem; font-weight: 650; line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.qc__btn svg { width: 19px; height: 19px; flex: none; }
.qc__btn--wa  { background: var(--green-700); }
.qc__btn--fb  { background: var(--navy); }
.qc__btn--tel { background: transparent; color: var(--navy-900); border: 1.5px solid var(--line); }
.qc__btn--tel svg { color: var(--green-700); }
.qc__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.qc__btn--tel:hover { background: var(--cream-200); filter: none; }

.qc__tab {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .82rem; font-weight: 650; letter-spacing: .04em;
  color: #fff; background: var(--green-700); border: 0; cursor: pointer;
  padding: .9rem .55rem; border-radius: var(--r-sm) 0 0 var(--r-sm);
  box-shadow: -2px 0 12px rgba(13,47,69,.16);
  writing-mode: vertical-rl; text-orientation: mixed;
}
.qc__tab svg { width: 17px; height: 17px; flex: none; transform: rotate(90deg); }
.qc__tab:hover { background: #266628; }

@media (min-width: 768px) {
  .qc { right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
  .qc__panel {
    display: flex; flex-direction: column; gap: .5rem;
    width: 0; padding: 0; overflow: hidden; opacity: 0;
    background: var(--white); border: 1px solid var(--line); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md); box-shadow: var(--shadow-lg);
    transition: width .28s var(--ease), opacity .2s var(--ease), padding .28s var(--ease);
  }
  .qc.is-open .qc__panel { width: 13.5rem; padding: 1rem; opacity: 1; }
}

@media (max-width: 767px) {
  /* keep the footer clear of the fixed bar */
  body { padding-bottom: 4.6rem; }
  .qc { left: 0; right: 0; bottom: 0; top: auto; transform: none; }
  .qc__tab { display: none; }
  .qc__panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .6rem clamp(.7rem, 3vw, 1rem);
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(13,47,69,.12);
  }
  .qc__t { display: none; }
  .qc__btn { justify-content: center; padding: .8rem .5rem; }
  .qc__btn--tel { display: none; }
}
@media (max-width: 340px) { .qc__btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .qc__panel, .qc__btn { transition: none; } }
@media print { .qc { display: none !important; } body { padding-bottom: 0; } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- preview banner (removed on the real site) ---------- */
.pv-bar {
  background: repeating-linear-gradient(45deg, #154867 0 14px, #103a53 14px 28px);
  color: #fff; font-size: .82rem; text-align: center; padding: .6rem 1rem; line-height: 1.4;
}
.pv-bar strong { color: var(--orange); }

@media print { .hdr, .cta-band, .pv-bar, .btn { display: none !important; } body { background: #fff; } }