/* ==========================================================================
   Slake Window Cleaning — design system
   Palette taken from the brand sheet:
     #8CA593 sage · #314338 deep green · #1E2A24 ink · #F2EFE6 cream · #C18B4E gold
   Type: Fraunces (display serif, echoes the retro script wordmark)
         Montserrat (UI/body, echoes the tracked caps in the logo lockup)
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  /* brand ink */
  --sage: #8ca593;
  --green: #314338;
  --ink: #1e2a24;
  --cream: #f2efe6;
  --gold: #c18b4e;

  /* surfaces */
  --paper: #faf8f3;
  --paper-2: #f2efe6;
  --paper-3: #eae5d8;
  --sage-tint: #e7ede7;
  --line: #dcd7c9;
  --line-soft: #e8e3d7;
  --green-2: #3e5346;

  /* text — every pair below is >= 4.5:1 on its stated background */
  --text: #1e2a24; /* on --paper  : 13.1:1 */
  --text-2: #4a5a50; /* on --paper  :  6.9:1 */
  --text-inv: #f2efe6; /* on --ink    :  9.2:1 */
  --text-inv-2: #c5d0c7; /* on --ink    :  9.6:1 */
  --gold-ink: #8a5f2e; /* gold, darkened for text on cream: 4.9:1
                            (raw --gold on cream is only 2.6:1 — decorative use only) */
  --sage-on-green: #a8bcae; /* sage, lightened for small text on --green: 5.3:1
                            (raw --sage on --green is 3.98:1 — it only clears
                             4.5:1 against the darker --ink, at 5.5:1) */

  /* spacing — density 4/10, "standard" */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4: clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-5: clamp(2.35rem, 1.7rem + 2.7vw, 3.9rem);

  /* shape + depth */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30, 42, 36, 0.06), 0 2px 8px rgba(30, 42, 36, 0.04);
  --shadow-md: 0 2px 4px rgba(30, 42, 36, 0.06), 0 12px 28px rgba(30, 42, 36, 0.08);
  --shadow-lg: 0 4px 8px rgba(30, 42, 36, 0.07), 0 24px 56px rgba(30, 42, 36, 0.12);

  /* The four-point sparkle from the logo, as a background layer. */
  --sparkle-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23F2EFE6' fill-opacity='0.14'%3E%3Cpath d='M50 0c3.4 26.6 6.8 44.4 12.6 50C56.8 55.6 53.4 73.4 50 100c-3.4-26.6-6.8-44.4-12.6-50C43.2 44.4 46.6 26.6 50 0Z'/%3E%3Cpath d='M100 50c-26.6 3.4-44.4 6.8-50 12.6C44.4 56.8 26.6 53.4 0 50c26.6-3.4 44.4-6.8 50-12.6C55.6 43.2 73.4 46.6 100 50Z'/%3E%3C/g%3E%3C/svg%3E");

  --container: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 220ms;
}

/* ------------------------------------------------------------ base/reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
p {
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}
a {
  color: inherit;
}
ul,
ol {
  margin: 0 0 var(--s-3);
  padding-left: 1.15em;
}
li {
  margin-bottom: 0.35em;
}
strong {
  font-weight: 600;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}

/* focus — never removed, only restyled (a11y priority 1) */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--text-inv);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus {
  top: var(--s-3);
}

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

/* ----------------------------------------------------------- primitives */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container-narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(3.5rem, 8vw, var(--s-9));
}
.section-tight {
  padding-block: clamp(2.5rem, 5vw, var(--s-7));
}

/* dark surfaces */
.on-dark {
  background: var(--ink);
  color: var(--text-inv);
}
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--text-inv);
}
.on-green {
  background: var(--green);
  color: var(--text-inv);
}
.on-green h2,
.on-green h3 {
  color: var(--text-inv);
}
.on-cream {
  background: var(--paper-2);
}
.on-sage {
  background: var(--sage-tint);
}

/* subtle paper texture + glass-light motif, used behind dark sections */
.has-glow {
  position: relative;
  isolation: isolate;
}
.has-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(140, 165, 147, 0.22), transparent 60%),
    radial-gradient(80% 60% at 95% 110%, rgba(193, 139, 78, 0.14), transparent 65%);
  pointer-events: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.6;
}
.eyebrow.is-centered {
  justify-content: center;
}
.on-dark .eyebrow,
.on-green .eyebrow {
  color: var(--gold);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}
.on-dark .lede,
.on-green .lede {
  color: var(--text-inv-2);
}

.section-head {
  max-width: 68ch;
  margin-bottom: clamp(2rem, 4vw, var(--s-6));
}
.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  --btn-bd: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px; /* >= 44px touch target */
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
}
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.btn-gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  --btn-bd: var(--gold);
}
.btn-cream {
  --btn-bg: var(--cream);
  --btn-fg: var(--green);
  --btn-bd: var(--cream);
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--green);
  --btn-bd: #b6bfb4;
}
.btn-ghost:hover {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  --btn-bd: var(--green);
}
.on-dark .btn-ghost,
.on-green .btn-ghost {
  --btn-fg: var(--cream);
  --btn-bd: rgba(242, 239, 230, 0.45);
}
.on-dark .btn-ghost:hover,
.on-green .btn-ghost:hover {
  --btn-bg: var(--cream);
  --btn-fg: var(--green);
  --btn-bd: var(--cream);
}
.btn-lg {
  min-height: 56px;
  padding: 1rem 2rem;
  font-size: var(--step-0);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  min-height: 44px;
}
.link-arrow svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}
.link-arrow:hover {
  color: var(--gold-ink);
}
.on-dark .link-arrow {
  color: var(--gold);
}

/* -------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  text-decoration: none;
}
.brand img {
  height: 52px;
  width: auto;
}
.brand:hover img {
  opacity: 0.85;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.nav a:hover {
  color: var(--gold-ink);
  background: rgba(140, 165, 147, 0.16);
}
.nav a[aria-current="page"] {
  color: var(--gold-ink);
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* dropdown for the four service pages */
.nav-group {
  position: relative;
}
.nav-group > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.nav-group > button:hover {
  color: var(--gold-ink);
  background: rgba(140, 165, 147, 0.16);
}
.nav-group > button svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform var(--dur) var(--ease);
}
.nav-group > button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
}
.nav-group > button[aria-expanded="true"] + .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu li {
  margin: 0;
}
.nav-menu a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone svg {
  width: 1.05em;
  height: 1.05em;
}
.header-phone:hover {
  color: var(--gold-ink);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--green);
  cursor: pointer;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

/* Between the drawer breakpoint and ~1300px the header is tight: eight nav
   items plus the phone number plus the quote button. Rather than let it push
   the page into horizontal scroll, drop the phone number's text here — the
   number is still one tap away in the drawer, the hero and the footer, and
   the icon-only link keeps the tap target. */
@media (max-width: 1300px) {
  .header-phone .header-phone-label {
    display: none;
  }
  .nav {
    gap: 0.15rem;
  }
  .nav a,
  .nav-group > button {
    padding-inline: 0.5rem;
  }
}

@media (max-width: 1080px) {
  .nav,
  .header-cta .header-phone {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .brand img {
    height: 40px;
  }
}

/* mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  padding: var(--s-4) clamp(1.25rem, 4vw, 2.5rem) var(--s-7);
  background: var(--paper);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}
.mobile-nav li {
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] {
  color: var(--gold-ink);
}
.mobile-nav .is-sub a {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  padding-left: var(--s-3);
}
.mobile-nav .btn {
  width: 100%;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Capped so the primary CTA stays above the fold on a laptop. */
  min-height: min(82vh, 700px);
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  overflow: hidden;
  background: var(--ink);
  color: var(--text-inv);
}
.hero-sm {
  min-height: 0;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Focal point for the hero photo. A wide 16:9 shot cropped into a tall phone
   frame loses most of its width, so the subject has to be re-centred there —
   otherwise the crop lands on empty wall. Set here rather than inline so the
   media query can override it. */
.hero {
  --photo-pos: center 42%;
}
@media (max-width: 700px) {
  .hero {
    --photo-pos: 68% 45%;
  }
}

/* Photo slot. `--photo` is pre-wired on each page to a file in /Media.
   The photo is the TOP layer of this pseudo-element's background, stacked over
   the designed CSS art. If the file is missing the layer paints nothing and the
   art shows through — so the page looks finished either way.
   (The art must live in the same background stack as the photo. A separate
   pseudo-element can't work: its opaque base layer would paint over the photo,
   because a z-index:-1 child still paints above its parent's own background.) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--photo, none) var(--photo-pos, center) / cover no-repeat,
    radial-gradient(90% 70% at 88% 8%, rgba(193, 139, 78, 0.3), transparent 62%),
    radial-gradient(70% 60% at 10% 100%, rgba(140, 165, 147, 0.34), transparent 60%),
    /* light raking across clean glass */
      repeating-linear-gradient(
        108deg,
        rgba(242, 239, 230, 0.05) 0 2px,
        rgba(242, 239, 230, 0) 2px 26px
      ),
    linear-gradient(160deg, #26332c 0%, #1e2a24 55%, #16211c 100%);
}
/* Scrim over the top — keeps headline contrast whatever the photo looks like.
   Every layer here must stay translucent. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(30, 42, 36, 0.95) 0%,
    rgba(30, 42, 36, 0.92) 44%,
    rgba(30, 42, 36, 0.58) 76%,
    rgba(30, 42, 36, 0.38) 100%
  );
}
/* Stacked layouts put the copy over the middle of the photo, so the scrim has
   to be even there instead of graded left-to-right. */
@media (max-width: 900px) {
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(30, 42, 36, 0.88) 0%,
      rgba(30, 42, 36, 0.93) 45%,
      rgba(30, 42, 36, 0.9) 100%
    );
  }
}
.hero-inner {
  position: relative;
  width: 100%;
}
.hero-copy {
  max-width: 52ch;
}
.hero h1 {
  margin-bottom: var(--s-3);
}
.hero h1 em {
  font-style: normal;
  color: var(--sage);
}
.hero .lede {
  max-width: 54ch;
  font-size: var(--step-0);
  margin-bottom: var(--s-4);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(242, 239, 230, 0.18);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.hero-meta svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--gold);
  flex: none;
}

/* decorative sparkle, straight from the logo lockup */
.sparkle {
  position: absolute;
  color: var(--gold);
  opacity: 0.9;
  pointer-events: none;
}
/* One sparkle, kept faint and high in the corner. Against a photographic hero
   a bright mark lands on top of real subject matter and reads as an artifact,
   so the second one is dropped entirely. */
.hero .sparkle-1 {
  width: clamp(80px, 10vw, 148px);
  top: 9%;
  right: 5%;
  opacity: 0.3;
}
.hero .sparkle-2 {
  display: none;
}
/* On a phone the hero photo is cropped tight and the sparkle lands beside the
   headline. Drop it — the copy needs the room more than the flourish does. */
@media (max-width: 700px) {
  .hero .sparkle-1 {
    display: none;
  }
}

/* page banner for interior pages */
.pagehead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 7vw, 5rem);
  background: var(--green);
  color: var(--text-inv);
  overflow: hidden;
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 80% at 92% 0%, rgba(193, 139, 78, 0.26), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(140, 165, 147, 0.3), transparent 62%);
}
.pagehead h1 {
  font-size: var(--step-4);
  max-width: 26ch;
}
.pagehead .lede {
  max-width: 58ch;
  margin-bottom: 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}
.breadcrumb li {
  margin: 0;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
.breadcrumb li + li::before {
  content: "/";
  opacity: 0.5;
}
.breadcrumb a {
  text-decoration: none;
  min-height: auto;
}
.breadcrumb a:hover {
  color: var(--gold);
}

/* ---------------------------------------------------------- trust strip */
.trustbar {
  background: var(--green);
  color: var(--text-inv);
  padding-block: var(--s-5);
}
.trustbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-inline: var(--s-2);
  border-left: 1px solid rgba(242, 239, 230, 0.2);
}
.trust-item:first-child {
  border-left: 0;
}
.trust-item .ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(242, 239, 230, 0.4);
  border-radius: 50%;
  color: var(--cream);
}
.trust-item .ico svg {
  width: 26px;
  height: 26px;
}
.trust-item span {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .trustbar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-2);
  }
  .trust-item:nth-child(3) {
    border-left: 0;
  }
}

/* --------------------------------------------------------------- cards */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--s-2);
}
.card p {
  color: var(--text-2);
  font-size: 0.97rem;
}
.card .ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(140, 165, 147, 0.26);
  color: var(--green);
}
.card .ico svg {
  width: 26px;
  height: 26px;
}
.card > *:last-child {
  margin-bottom: 0;
}
.card .link-arrow {
  margin-top: auto;
  padding-top: var(--s-2);
}

a.card,
.card.is-link {
  text-decoration: none;
}
a.card:hover,
.card.is-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage);
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  font-size: 0.95rem;
  color: var(--text-2);
}
.card-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.5em;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75em;
  height: 0.42em;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.on-dark .card-list,
.on-green .card-list {
  color: var(--text-inv-2);
}

/* ------------------------------------------------------------- process */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--s-4);
  border-top: 2px solid rgba(242, 239, 230, 0.22);
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}
.step p {
  font-size: 0.95rem;
  color: var(--text-inv-2);
  margin: 0;
}

/* --------------------------------------------------------------- plans */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
@media (max-width: 940px) {
  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.plan.is-featured {
  background: var(--green);
  color: var(--text-inv);
  border-color: var(--green);
  box-shadow: var(--shadow-lg);
}
.plan.is-featured h3,
.plan.is-featured .plan-rate {
  color: var(--text-inv);
}
.plan.is-featured .plan-cadence {
  color: var(--sage-on-green);
}
.plan.is-featured .card-list {
  color: var(--text-inv-2);
}
@media (min-width: 941px) {
  .plan.is-featured {
    transform: scale(1.03);
  }
  .plan.is-featured:hover {
    transform: scale(1.03) translateY(-4px);
  }
}
.plan-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.9rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan h3 {
  font-size: var(--step-2);
  margin-bottom: 0.15rem;
}
.plan-cadence {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.plan-rate {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  color: var(--green);
}
.plan-rate small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 0.5rem;
}
.plan.is-featured .plan-rate small {
  color: var(--text-inv-2);
}
.plan hr {
  margin: var(--s-4) 0;
  border-color: var(--line-soft);
}
.plan.is-featured hr {
  border-color: rgba(242, 239, 230, 0.22);
}
.plan .btn {
  width: 100%;
  margin-top: auto;
}

/* ------------------------------------------------- before / after slider */
.ba {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--green);
  box-shadow: var(--shadow-md);
  touch-action: pan-y;
}
.ba-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  cursor: ew-resize;
  /* pan-y lets a vertical swipe scroll the page as normal while handing
     horizontal gestures to our pointer handler, so the slider can be dragged
     from anywhere on the image rather than only from the thumb. */
  touch-action: pan-y;
}
/* Each layer paints its photo (if the file exists) over its own CSS-art
   ::after, which sits at z-index -1 inside the layer's own stacking context. */
.ba-layer {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* CSS-art stand-ins: grimy glass vs. clean glass. A real photo set on
   --photo takes over the layer automatically. */
.ba-before::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--photo-before, none) center / cover no-repeat,
    radial-gradient(38% 30% at 22% 28%, rgba(150, 140, 110, 0.55), transparent 70%),
    radial-gradient(30% 26% at 74% 66%, rgba(130, 122, 96, 0.5), transparent 70%),
    radial-gradient(22% 20% at 55% 18%, rgba(120, 115, 95, 0.45), transparent 70%),
    repeating-linear-gradient(
      74deg,
      rgba(90, 88, 70, 0.22) 0 3px,
      rgba(90, 88, 70, 0) 3px 11px
    ),
    linear-gradient(150deg, #6b6f61, #4d5349);
}
.ba-after::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--photo-after, none) center / cover no-repeat,
    linear-gradient(112deg, rgba(255, 255, 255, 0.5) 0 6%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.28) 46% 50%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(70% 60% at 78% 10%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(155deg, #b9cbbc 0%, #8ca593 60%, #6f8a79 100%);
}
.ba-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.ba-tag {
  position: absolute;
  bottom: 0.85rem;
  padding: 0.3rem 0.75rem;
  background: rgba(30, 42, 36, 0.78);
  color: var(--cream);
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-tag-before {
  left: 0.85rem;
}
.ba-tag-after {
  right: 0.85rem;
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--cream);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(30, 42, 36, 0.2);
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green);
  box-shadow: var(--shadow-md);
}
.ba-knob svg {
  width: 24px;
  height: 24px;
}
/* the real control: a range input stretched over the frame — free keyboard
   support and screen-reader semantics, visually invisible */
/* Kept for keyboard and screen-reader users, and as the value store — but
   pointer-inert. On touch a range input only responds to a drag that starts on
   its thumb, which is invisible here and 56px wide, so dragging did nothing on
   phones. Dragging is handled on .ba-frame instead; this stays tabbable
   because pointer-events:none doesn't affect keyboard focus. */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 100%;
  cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 56px;
  height: 100%;
  border: 0;
  cursor: ew-resize;
}
.ba-range:focus-visible + .ba-divider .ba-knob {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.ba-caption {
  padding: 0.9rem 1.1rem;
  background: var(--green);
  color: var(--text-inv);
  font-size: 0.92rem;
}
.ba-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.ba-caption span {
  color: var(--sage-on-green);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* photo tiles (gallery grid) */
.tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--photo, none) var(--photo-pos, center) / cover no-repeat,
    var(--sparkle-mark) center / 30% no-repeat,
    linear-gradient(112deg, rgba(255, 255, 255, 0.42) 0 7%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(70% 60% at 80% 12%, rgba(255, 255, 255, 0.3), transparent 62%),
    linear-gradient(155deg, #b9cbbc, #8ca593 62%, #6f8a79);
}
.tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1rem 0.85rem;
  background: linear-gradient(transparent, rgba(30, 42, 36, 0.82));
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------- split feature */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Targets the last child rather than .split-media specifically, so sections
   whose media column is a slider or a card stack also flip. */
.split.is-reverse > :last-child {
  order: -1;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  /* Stacked: copy always reads before its media. */
  .split.is-reverse > :last-child {
    order: 0;
  }
}
.split-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Placeholder art: the logo sparkle over a branded gradient, so an empty
   photo slot reads as designed rather than as a failed image. A real photo
   set on --photo paints over all of this. */
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--photo, none) var(--photo-pos, center) / cover no-repeat,
    var(--sparkle-mark) center / 34% no-repeat,
    linear-gradient(115deg, rgba(242, 239, 230, 0.34) 0 8%, rgba(242, 239, 230, 0) 26%),
    radial-gradient(80% 70% at 85% 6%, rgba(193, 139, 78, 0.4), transparent 62%),
    radial-gradient(70% 60% at 6% 96%, rgba(140, 165, 147, 0.55), transparent 60%),
    linear-gradient(158deg, #3b4f42, #1e2a24);
}

/* stat pair used beside copy blocks */
/* Grid rather than flex-wrap, so three stats stay on one row and share
   column widths instead of one orphan dropping to a second line. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--s-4) var(--s-3);
  margin-top: var(--s-5);
}
.stat {
  min-width: 0;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  color: var(--green);
}
.stat span {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.on-dark .stat b,
.on-green .stat b {
  color: var(--gold);
}
.on-dark .stat span,
.on-green .stat span {
  color: var(--text-inv-2);
}

/* --------------------------------------------------------- service map */
/* Full-width map panel — the map carries city labels now, so it needs the
   room. Region detail sits in cards underneath rather than beside it. */
.map-panel {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  background: var(--green);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.map {
  width: 100%;
  height: auto;
  display: block;
}
.map-panel figcaption {
  padding: var(--s-3) var(--s-2) 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-inv-2);
}
.map-panel figcaption a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(193, 139, 78, 0.5);
}
.map-panel figcaption a:hover {
  border-bottom-color: var(--gold);
}
/* A long email address in a large button is wider than a 320px phone. Let the
   button shrink and the address wrap rather than pushing the whole page into
   horizontal scroll. Pre-existing; only visible on the narrowest handsets. */
@media (max-width: 380px) {
  .btn-lg {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------- booking page */
.booking-wrap {
  max-width: 860px;
  margin-inline: auto;
}
/* The scheduler is a third-party iframe, so we style the frame around it and
   leave the inside alone. min-height is generous on purpose: these widgets
   render a month grid plus a time column, and a short frame makes the visitor
   scroll inside a scrollable box, which is horrible on a phone. */
.booking-embed {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.booking-embed iframe {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
}
@media (max-width: 640px) {
  .booking-embed iframe {
    min-height: 620px;
  }
}
.booking-noscript {
  margin-top: var(--s-3);
  text-align: center;
  color: var(--text-2);
}
/* Shown when SITE['booking_url'] is empty. It has to read as a deliberate
   "call us" panel, not as a calendar that failed to load. */
.booking-fallback {
  text-align: center;
  background: var(--sage-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-5);
}
/* The badge styling lives on `.card .ico`, so a standalone icon gets none of
   it — restate it here rather than widening that selector and touching every
   card on the site. */
.booking-fallback .ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s-3);
  border-radius: var(--r-md);
  background: rgba(140, 165, 147, 0.26);
  color: var(--green);
}
.booking-fallback .ico svg {
  width: 26px;
  height: 26px;
}
.booking-fallback h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--step-2);
}
.booking-fallback p {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--text-2);
}
.booking-note {
  margin: var(--s-3) 0 0;
  font-size: var(--step--1);
  color: var(--text-2);
}
.booking-fallback .btn-row {
  justify-content: center;
  margin-top: var(--s-4);
}

.region-list {
  display: grid;
  /* Three across, so five regions land 3 + 2 rather than 4 + 1 orphan. Wider
     cards also mean the city lists run to fewer lines. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) {
  .region-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .region-list {
    grid-template-columns: 1fr;
  }
}
.region {
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-sm);
  margin: 0;
}
.region h3 {
  font-size: var(--step-1);
  margin-bottom: 0.25rem;
}
.region p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-2);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip {
  margin: 0;
  padding: 0.45rem 0.95rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  color: var(--text);
}
.on-dark .chip,
.on-green .chip {
  background: rgba(242, 239, 230, 0.08);
  border-color: rgba(242, 239, 230, 0.25);
  color: var(--text-inv);
}

/* -------------------------------------------------- comparison table */
/* Wide content scrolls inside its own container — the page body never does. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.94rem;
  text-align: left;
}
.compare th,
.compare td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.compare thead th {
  position: sticky;
  top: 0;
  background: var(--paper-2);
  border-bottom: 2px solid var(--sage);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.compare thead th span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-2);
  margin-top: 0.15rem;
}
.compare thead th.is-featured {
  background: var(--green);
  color: var(--cream);
  border-bottom-color: var(--gold);
}
.compare thead th.is-featured span {
  color: var(--sage-on-green);
}
.compare tbody th {
  font-weight: 500;
  color: var(--text);
}
.compare td {
  text-align: center;
  width: 17%;
  font-weight: 600;
}
.compare td.is-featured {
  background: rgba(140, 165, 147, 0.14);
}
.compare td.no {
  color: var(--text-2);
  font-weight: 400;
  font-size: 0.86rem;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}
.compare .yes {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
}
.compare .yes svg {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}
.compare td.is-featured .yes {
  background: var(--gold);
  color: var(--ink);
}

/* ------------------------------------------------------------ reviews */
.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.stars {
  display: flex;
  gap: 0.15rem;
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.stars svg {
  width: 18px;
  height: 18px;
}
.quote blockquote {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
}
.quote footer {
  margin-top: auto;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.placeholder-note {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: rgba(193, 139, 78, 0.1);
  border: 1px dashed var(--gold);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--gold-ink);
}
.placeholder-note strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- FAQ */
.faq {
  max-width: 820px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
/* Native <details>/<summary>: keyboard accessible and open-able with no JS
   at all, which the previous button + grid-row animation was not. */
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  list-style: none; /* drop the default disclosure triangle */
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q::marker {
  content: "";
}
.faq-q:hover {
  color: var(--gold-ink);
}
.faq-q .plus {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.2em;
}
.faq-q .plus::before,
.faq-q .plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.faq-q .plus::after {
  transform: rotate(90deg);
}
.faq-item[open] .plus::after {
  transform: rotate(0deg);
}
.faq-a {
  overflow: hidden;
}
.faq-a p {
  padding-bottom: 1.25rem;
  color: var(--text-2);
  margin: 0;
  max-width: 68ch;
}
/* Content is at full height immediately (so it's never clipped); the fade and
   slide supply the motion without depending on animatable intrinsic sizes. */
.faq-item[open] .faq-a {
  animation: faq-in 240ms var(--ease) both;
}
@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- form */
.form-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .form-wrap {
    grid-template-columns: 1fr;
  }
}
.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 560px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--s-3);
}
.field.is-full {
  grid-column: 1 / -1;
}
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.field label .req {
  color: var(--gold-ink);
}
.field .hint {
  font-size: 0.82rem;
  color: var(--text-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 1rem; /* >=16px keeps iOS from zooming on focus */
  color: var(--text);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a50' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--sage);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--green);
}
.field .error {
  display: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: #a3341f;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #a3341f;
  background: #fdf4f2;
}
.field.has-error .error {
  display: block;
}
/* checkbox group */
.field-set {
  padding: 0;
  margin: 0 0 var(--s-3);
  border: 0;
}
.field-set legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.field-set legend .req {
  color: var(--gold-ink);
}
.field-set > .error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #a3341f;
}
.field-set.has-error > .error {
  display: block;
}
.field-set.has-error .check-grid {
  border-color: #a3341f;
  background: #fdf4f2;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 1rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
  margin-inline: -0.9rem;
}
@media (max-width: 560px) {
  .check-grid {
    grid-template-columns: 1fr;
  }
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px; /* touch target */
  font-size: 0.94rem;
  color: var(--text);
  cursor: pointer;
}
.checkbox:hover {
  color: var(--gold-ink);
}
.checkbox input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  flex: none;
  accent-color: var(--green);
  cursor: pointer;
}
.form-note {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: var(--s-3) 0 0;
  font-size: 0.85rem;
  color: var(--text-2);
}
.form-note svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  /* sage would only be 2.7:1 on the white card; gold-ink is 5.6:1 */
  color: var(--gold-ink);
}
.form-status {
  display: none;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border-radius: var(--r-sm);
  font-size: 0.94rem;
}
.form-status.is-visible {
  display: block;
}
.form-status.is-error {
  background: #fdf4f2;
  border: 1px solid #a3341f;
  color: #7d2718;
}

.contact-aside dl {
  margin: 0;
}
.contact-aside dt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.35rem;
}
.contact-aside dt svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.contact-aside dd {
  margin: 0 0 var(--s-4);
  font-size: var(--step-1);
}
.contact-aside dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--sage);
}
.contact-aside dd a:hover {
  color: var(--gold-ink);
}
.contact-aside dd small {
  display: block;
  font-size: 0.88rem;
  color: var(--text-2);
  margin-top: 0.2rem;
}

/* ----------------------------------------------------------------- CTA */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.cta h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.cta .lede {
  margin-inline: auto;
  margin-bottom: var(--s-5);
}
.cta .btn-row {
  justify-content: center;
}
.cta .sparkle-1 {
  width: clamp(120px, 16vw, 220px);
  top: -8%;
  left: -3%;
  opacity: 0.16;
}
.cta .sparkle-2 {
  width: clamp(80px, 10vw, 140px);
  bottom: -6%;
  right: 2%;
  opacity: 0.2;
}

/* -------------------------------------------------------------- footer */
.site-footer {
  background: var(--ink);
  color: var(--text-inv-2);
  padding-block: var(--s-7) var(--s-4);
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: var(--s-6);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand img {
  height: 58px;
  width: auto;
  margin-bottom: var(--s-3);
}
.footer-brand p {
  max-width: 34ch;
}
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--s-3);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 0.15rem;
}
.footer-col a {
  display: inline-block;
  padding: 0.35rem 0;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover {
  color: var(--gold);
}
.social {
  display: flex;
  /* Wider than it looks like it needs to be: two 44px circles 8px apart are
     easy to mis-tap on a phone, and tapping the wrong social icon is an
     invisible failure — the visitor just lands somewhere unexpected. */
  gap: 0.85rem;
  margin-top: var(--s-3);
}
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 239, 230, 0.25);
  border-radius: 50%;
  color: var(--cream);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.social svg {
  width: 19px;
  height: 19px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(242, 239, 230, 0.15);
  font-size: 0.86rem;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer-bottom a {
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--gold);
}

/* Footer links sit at ~36px from padding alone, which is under the 44px
   minimum touch target. Give them the full height on touch-sized screens
   without loosening the tighter desktop rhythm. */
@media (max-width: 720px) {
  .footer-col a,
  .footer-bottom nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
  .brand {
    min-height: 44px;
  }
}

/* sticky mobile call bar — trades sites live on phone calls */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: rgba(30, 42, 36, 0.15);
  box-shadow: 0 -4px 20px rgba(30, 42, 36, 0.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 56px;
  background: var(--green);
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.callbar a + a {
  background: var(--gold);
  color: var(--ink);
}
.callbar svg {
  width: 1.15em;
  height: 1.15em;
}
@media (max-width: 720px) {
  .callbar {
    display: flex;
  }
  body {
    padding-bottom: 56px;
  }
}

/* ------------------------------------------------------------- motion */
/* Standard tier: 300-450ms staggered reveal on scroll. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

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

/* --------------------------------------------------------------- print */
@media print {
  .site-header,
  .callbar,
  .mobile-nav,
  .cta {
    display: none !important;
  }
  body {
    padding: 0;
    background: #fff;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}