/* ==========================================================================
   Inland Service Pros — Design System
   --------------------------------------------------------------------------
   Warm editorial / organic minimalist. Paper-and-ink rather than screen-glow:
   cream grounds, warm charcoal ink, terracotta accent, hand-drawn line art.

   Contrast note (WCAG 2.1 AA, all values verified):
     ink #191712 on cream ............ 16.62:1
     ink-soft #4A443A on cream ....... 8.95:1
     ink-mute #6B6459 on cream ....... 5.43:1
     terracotta #C0522B on cream ..... 4.35:1  <- LARGE TEXT / UI ONLY
     terracotta-deep #9A3F1E on cream  6.28:1  <- use for small text
     paper #FFF on terracotta ........ 4.68:1
     border-strong #8C7F68 on cream .. 3.64:1  <- meets 3:1 for control edges
   Never set small body copy in --terracotta on a light ground; use
   --terracotta-deep. This is why the two tokens exist.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* surfaces */
  --cream:          #FAF6EF;
  --cream-deep:     #F4EEE3;
  --paper:          #FFFFFF;
  --sand:           #EFE6D8;
  --sand-deep:      #E4D8C6;
  --ink:            #191712;
  --ink-raised:     #23201A;

  /* text */
  --ink-strong:     #191712;
  --ink-soft:       #4A443A;
  --ink-mute:       #6B6459;
  --on-dark:        #FAF6EF;
  --on-dark-mute:   #B9AFA0;

  /* accent */
  --terracotta:      #C0522B;
  --terracotta-deep: #9A3F1E;
  --terracotta-soft: #E8814F;
  --terracotta-wash: #F6E7DE;
  --slate:           #2B3844;

  /* lines */
  --border:          #DFD4C2;   /* decorative rules only */
  --border-strong:   #8C7F68;   /* control edges — meets 3:1 */
  --focus:           #9A3F1E;
  --focus-on-dark:   #E8814F;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* type scale — fluid, 375px → 1440px */
  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.65vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.20vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.70rem + 2.15vw, 4.00rem);
  --step-5:  clamp(2.70rem, 1.85rem + 3.60vw, 5.50rem);

  /* spacing — 4/8 rhythm */
  --space-2xs: 0.25rem;  --space-xs: 0.5rem;   --space-sm: 0.75rem;
  --space-md:  1rem;     --space-lg: 1.5rem;   --space-xl: 2rem;
  --space-2xl: 3rem;     --space-3xl: 4rem;    --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* form */
  --radius-xs: 4px;  --radius-sm: 8px;   --radius-md: 14px;
  --radius-lg: 22px; --radius-xl: 32px;  --radius-pill: 999px;

  --shell:      min(1240px, 100% - 2.5rem);
  --shell-text: min(70ch, 100% - 2.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100;
}

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

/* The success panel hides the form with `form.hidden = true`, which sets the
   hidden attribute. The browser's own `[hidden] { display: none }` loses to
   any author display rule, and `.form` sets `display: grid` -- so the form
   stayed on screen after a successful submission, still filled in, still
   submittable. A second click meant a duplicate lead. This one line is the
   standard fix and has to outrank every later display rule. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Light-only by design. Declared so a visitor whose OS is in dark mode still
     gets light form controls and scrollbars instead of dark browser chrome
     sitting on a cream page. */
  color-scheme: light;
}

/* Removes the ~300ms tap delay on touch. This audience is largely on a phone,
   often one-handed on a job site, so the delay is felt on every tap. */
a, button, summary, label, input, select, textarea, [role='button'] {
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain. Very low opacity — sells "ink on stock" without costing a
   request or hurting text contrast. Sits behind everything, ignores input. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { }

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
  color: var(--ink-strong);
  /* Fraunces variable axes: softer terminals, slight "wonk" — the warm,
     mid-century imperfection the brand is built on. */
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
  text-wrap: balance;
}
p { margin: 0 0 var(--space-md); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Long tokens (URLs, IDs) reflow instead of blowing out the layout */
p, li, dd, td, .u-wrap { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ a11y helpers */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: var(--z-overlay);
  background: var(--ink); color: var(--on-dark);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--on-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Same reason: the focus ring on the CTA button was drawn in --focus
   (the light-background colour) against the dark panel, giving a 2.65:1
   indicator. WCAG 2.2 wants 3:1 for focus indicators. */
.band--ink :where(a, button, summary):focus-visible,
.cta-panel__body :where(a, button, summary):focus-visible { outline-color: var(--focus-on-dark); }

/* ----------------------------------------------------------------- layout */
.shell { width: var(--shell); margin-inline: auto; position: relative; z-index: var(--z-raised); }
.shell--text { width: var(--shell-text); margin-inline: auto; }

.section { padding-block: var(--space-4xl); }
.section--tight { padding-block: var(--space-3xl); }
.section--loose { padding-block: var(--space-5xl); }

.band--cream { background: var(--cream); }
.band--sand  { background: var(--sand); }
.band--paper { background: var(--paper); }
.band--ink   { background: var(--ink); color: var(--on-dark); }
.band--ink :is(h1,h2,h3,h4) { color: var(--on-dark); }
.band--ink p { color: var(--on-dark-mute); }

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }

.grid { display: grid; gap: var(--space-lg); }
/* Grid and flex children default to min-width:auto, and a form control's
   intrinsic size is roughly 20 characters, so an <input> refuses to shrink
   and drags its whole column past a 320px viewport. 375px never shows it,
   which is why this survived every previous pass. */
.grid > *, .field, .input, .select, .textarea { min-width: 0; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: var(--space-md);
}
/* flex-start + this offset keeps the rule beside the FIRST line when the
   label wraps, instead of floating between the two lines. */
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--terracotta);
  flex: none; margin-top: 0.72em;
}
/* The CTA panel is a dark surface that is NOT inside .band--ink, so these
   on-dark overrides have to name it explicitly. Without this the eyebrow
   rendered deep terracotta on near-black at 2.65:1, well under AA. */
.band--ink .eyebrow,
.cta-panel__body .eyebrow { color: var(--terracotta-soft); }
.band--ink .eyebrow::before,
.cta-panel__body .eyebrow::before { background: var(--terracotta-soft); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.band--ink .lede { color: var(--on-dark-mute); }
.muted { color: var(--ink-mute); }
.note {
  font-size: var(--step--1); color: var(--ink-mute);
  font-style: italic;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;                    /* comfortably above the 44px minimum */
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--terracotta); color: var(--paper); }
.btn--primary:hover { background: var(--terracotta-deep); color: var(--paper); }

.btn--ghost {
  background: transparent; color: var(--ink-strong);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--sand); color: var(--ink-strong); border-color: var(--ink-soft); }

/* The lead partnership is a different product from automation, so it gets a
   different button. Slate next to the terracotta primary reads as "other
   service" rather than "secondary action". Cream on slate measures 11.13:1. */
.btn--partner { background: var(--slate); color: var(--cream); }
.btn--partner:hover { background: var(--ink); color: var(--cream); }

.btn--on-ink { background: var(--cream); color: var(--ink); }
.btn--on-ink:hover { background: var(--terracotta-soft); color: var(--ink); }

.btn--lg { min-height: 56px; padding: var(--space-md) var(--space-xl); font-size: var(--step-1); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-arrow { width: 1em; height: 1em; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--cream); } }

.site-header__inner {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: 76px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  text-decoration: none; color: var(--ink-strong); flex: none;
}
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}
.brand__name span { display: block; font-family: var(--font-body); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex; align-items: center; gap: var(--space-xs);
  list-style: none; margin: 0; padding: 0;
}
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 500;
  white-space: nowrap;   /* a nav item breaking mid-word is never correct */
  color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--ink-strong); background: var(--cream-deep); }
.site-nav__link[aria-current='page'] { color: var(--ink-strong); font-weight: 600; }
.site-nav__link[aria-current='page']::after {
  content: ''; position: absolute; margin-top: 2.1em;
  width: 18px; height: 2px; background: var(--terracotta); border-radius: 2px;
}
.header__cta { flex: none; }

/* mobile nav toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-strong);
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  display: block; width: 19px; height: 1.5px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; }
.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::after  { transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: 76px 0 auto;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) 0 var(--space-xl);
    margin-left: 0;
    max-height: calc(100dvh - 76px); overflow-y: auto;
    display: none;
  }
  .site-nav[data-open='true'] { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; width: var(--shell); margin-inline: auto; gap: 0; }
  .site-nav__link { min-height: 52px; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .site-nav__link[aria-current='page']::after { display: none; }
  .site-nav__link[aria-current='page'] { color: var(--terracotta-deep); }
  .site-nav .btn { margin-top: var(--space-md); width: 100%; }
  .header__cta--desktop { display: none; }
}
@media (min-width: 1001px) { .site-nav .btn { display: none; } }

/* ------------------------------------------------------------------- hero */
.hero { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }

/* Scroll-scrub track. Its extra height IS the scrub distance: the frame
   sticks to the top while the page moves through the remaining ~110vh, and
   that progress drives video.currentTime. The headline and CTA stay on
   screen throughout, so the effect costs nothing in conversion terms.
   Only applied once JS confirms it can drive the video — see .js-scrub. */
.hero__track { position: relative; }
.hero__sticky { position: relative; }

.js-scrub .hero[data-hero-scrub] .hero__track { height: 150vh; }
/* 150vh means the scrub completes in half a screen of scrolling. Longer
   tracks turn the hero into a scroll trap — you cannot reach the rest of
   the page until the clip has run out. Keep this modest. */
.js-scrub .hero[data-hero-scrub] .hero__sticky {
  position: sticky;
  top: 76px;                       /* clears the sticky site header */
  height: calc(100vh - 76px);
  display: flex; align-items: center;
}
.js-scrub .hero[data-hero-scrub] .hero__frame { width: 100%; min-height: 0; height: min(78vh, 760px); }

/* The video stacks over the poster once it can render; until then the poster
   is what the reader sees, which keeps the largest paint fast. */
.hero__video { opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.hero__video[data-ready='true'] { opacity: 1; }
/* The frame sizes to its content with a min-height floor, so long headlines
   at narrow widths push it taller instead of spilling out of a fixed ratio. */
.hero__frame {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 760px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Two scrims: a vertical one for the whole frame, and a horizontal one that
   anchors the left-aligned copy. Without the second, the eyebrow and subtext
   lose contrast wherever the photo is brightest. */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,13,10,0.80) 0%, rgba(15,13,10,0.45) 42%, rgba(15,13,10,0) 72%),
    linear-gradient(180deg, rgba(15,13,10,0.52) 0%, rgba(15,13,10,0.18) 34%, rgba(15,13,10,0.78) 100%);
}
/* Narrow screens put the copy over most of the frame, so the scrim gets
   darker earlier rather than clearing in the middle. */
@media (max-width: 700px) {
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(15,13,10,0.42) 0%, rgba(15,13,10,0.58) 30%, rgba(15,13,10,0.88) 100%);
  }
}
.hero__content {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
}
@media (min-width: 900px) { .hero__content { padding: var(--space-2xl); max-width: 62ch; } }
.hero__content .eyebrow { color: var(--terracotta-soft); margin-bottom: 0; }
.hero__content .eyebrow::before { background: var(--terracotta-soft); }
.hero__title {
  font-size: var(--step-4); color: var(--cream); margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__sub { color: #EDE6DA; font-size: var(--step-1); margin: 0; max-width: 54ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45); }

/* statement — the big editorial paragraph */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 400;
  font-variation-settings: 'SOFT' 34, 'WONK' 1;
  color: var(--ink-mute);
  text-align: center;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.statement strong { color: var(--ink-strong); font-weight: 600; }
.statement em { font-style: normal; color: var(--terracotta-deep); }
@media (min-width: 700px) { .statement { max-width: 30ch; } }

/* ------------------------------------------------------------ bleed band
   Full-width photographic break between two text-heavy sections. */
.bleed {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 52vh, 560px);
  display: grid;
  align-items: end;
  background: var(--ink);
  overflow: hidden;
}
.bleed__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
/* Two gradients, same reasoning as the hero: the vertical one alone leaves
   the left-aligned copy sitting over bright stucco with too little contrast. */
.bleed__overlay {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,13,10,0.78) 0%, rgba(15,13,10,0.40) 45%, rgba(15,13,10,0) 75%),
    linear-gradient(180deg, rgba(15,13,10,0.24) 0%, rgba(15,13,10,0.12) 35%, rgba(15,13,10,0.72) 100%);
}
@media (max-width: 700px) {
  .bleed__overlay {
    background: linear-gradient(180deg, rgba(15,13,10,0.38) 0%, rgba(15,13,10,0.55) 40%, rgba(15,13,10,0.85) 100%);
  }
}
.bleed__content { padding-block: var(--space-2xl); }
.bleed__content .eyebrow { color: var(--terracotta-soft); }
.bleed__content .eyebrow::before { background: var(--terracotta-soft); }
.bleed__title {
  font-size: var(--step-3); color: var(--cream); margin-bottom: var(--space-xs);
  max-width: 20ch; text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.bleed__text {
  color: #E4DCCF; max-width: 52ch; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--flat { background: var(--cream-deep); border-color: transparent; }
.card__title { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.card__body { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* numbered step card */
.step { position: relative; padding-top: var(--space-xl); }
.step__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  color: var(--terracotta);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-sm);
}
.step__rule { height: 1px; background: var(--border); margin-bottom: var(--space-md); }

/* ---------------------------------------------------------- service list */
.service-list { display: grid; gap: var(--space-sm); }
.service-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.service-item[open] { border-color: var(--ink); background: var(--ink); }
.service-item__summary {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 68px; padding: var(--space-md) var(--space-lg);
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600;
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
  color: var(--ink-strong);
}
.service-item__summary::-webkit-details-marker { display: none; }
.service-item[open] .service-item__summary { color: var(--on-dark); }
.service-item__icon {
  margin-left: auto; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand); color: var(--ink-strong);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.service-item[open] .service-item__icon {
  background: var(--terracotta); color: var(--paper); transform: rotate(45deg);
}
.service-item__panel { padding: 0 var(--space-lg) var(--space-lg); }
.service-item[open] .service-item__panel { color: var(--on-dark-mute); }
.service-item__panel p { max-width: 62ch; }
.service-item__figure {
  margin: var(--space-md) 0 0;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--cream);
}
.service-item__figure img { width: 100%; }

/* ------------------------------------------------------------------ facts */
.fact {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.fact__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--terracotta-wash); color: var(--terracotta-deep);
  display: grid; place-items: center; margin-bottom: var(--space-lg);
}
.fact__value {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 600; line-height: 1;
  font-variation-settings: 'SOFT' 26, 'WONK' 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2xs);
}
.fact__label { font-size: var(--step--1); color: var(--ink-mute); margin: 0; }

/* Cards sit in a flex column with the label last, so this pins the link to
   the bottom and keeps it aligned across cards of differing label length. */
.fact__note { margin: auto 0 0; padding-top: var(--space-md); font-size: var(--step--1); }
.fact__note a {
  /* terracotta-deep, not terracotta: 6.77:1 on the card's white ground, where
     plain terracotta would fail AA for text this size. */
  color: var(--terracotta-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--terracotta-deep) 40%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fact__note a:hover { color: var(--terracotta); border-bottom-color: currentColor; }

/* ------------------------------------------------------------------ cities */
.city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.city-item {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 2px var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
/* City names are proper nouns. They may wrap between words but must never
   split mid-word, so the blanket `overflow-wrap: anywhere` set on li near the
   top of this file (there so long URLs in prose cannot overflow) is switched
   back off for both halves of the row. Left on, `anywhere` also collapses the
   flex min-content width to a single character, which is what allowed
   "Wildomar" to render as "Wildoma / r" with plenty of room to spare. */
.city-item__name {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
  letter-spacing: -0.02em;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.city-item__note {
  margin-left: auto; font-size: var(--step--1); color: var(--ink-mute);
  text-align: right;
  overflow-wrap: normal; word-break: normal;
}
/* When the name and its note no longer fit on one line the note drops below
   and aligns left, instead of the two being crushed together. */
@media (max-width: 30rem) {
  .city-item__note { margin-left: 0; text-align: left; }
}

/* --------------------------------------------------------------- gallery */
.gallery { display: grid; gap: var(--space-md); }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; }
  .gallery__item--wide  { grid-column: span 4; grid-row: span 2; }
  .gallery__item--tall  { grid-column: span 2; grid-row: span 2; }
  .gallery__item--third { grid-column: span 2; grid-row: span 1; }
}
.gallery__item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--sand);
  min-height: 180px;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(180deg, transparent, rgba(15,13,10,0.82));
  color: var(--cream);
}
.gallery__caption strong { display: block; font-family: var(--font-display); font-size: var(--step-1);
  font-variation-settings: 'SOFT' 28, 'WONK' 1; }
.gallery__caption span { font-size: var(--step--1); color: #D9D0C2; }

/* -------------------------------------------------------------- FAQ block */
.faq { display: grid; gap: var(--space-xs); }
.faq__item {
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.faq__summary {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-lg) 0;
  min-height: 44px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600; line-height: 1.3;
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
  color: var(--ink-strong);
  transition: color var(--dur) var(--ease);
}
.faq__summary:hover { color: var(--terracotta-deep); }
.faq__summary::-webkit-details-marker { display: none; }
.faq__sign {
  margin-left: auto; flex: none; width: 26px; height: 26px; margin-top: 3px;
  position: relative; color: var(--terracotta);
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px;
  background: currentColor; transition: transform var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__panel { padding: 0 3rem var(--space-lg) 0; color: var(--ink-soft); max-width: 74ch; }
.faq__panel ul { margin: var(--space-sm) 0 0; padding-left: 1.15rem; }
.faq__panel li { margin-bottom: var(--space-xs); }

/* ---------------------------------------------------------------- pricing */
/* The column count follows the number of tiers, which the renderer sets as
   --price-cols. A hardcoded four-column rule survived the drop from four
   tiers to two, so the two remaining cards took a quarter of the row each and
   sat in a narrow pair with half the row empty beside them. Capping the width
   per card keeps two tiers readable without letting them sprawl. */
.price-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  max-width: min(100%, calc(var(--price-cols, 4) * 27rem));
  /* Centred. Left-aligned, two cards capped at 48rem sat in the left half of a
     1240px shell with 472px of dead space beside them, which read as a layout
     bug rather than a choice. */
  margin-inline: auto;
}

.price {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.price--featured {
  background: var(--ink); color: var(--on-dark); border-color: var(--ink);
}
.price--featured :is(h3, .price__amount) { color: var(--on-dark); }
.price--featured .price__basis, .price--featured .price__summary { color: var(--on-dark-mute); }
.price--featured .price__includes li { color: #D9D0C2; }

/* The badge sits in normal flow so tier names line up across every card
   instead of the featured one riding higher than the rest. */
.price__flag {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  min-height: 24px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.price__flag { background: var(--terracotta); color: var(--paper); }
.price__name { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.price__amount {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 600; line-height: 1;
  font-variation-settings: 'SOFT' 26, 'WONK' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin-block: var(--space-sm) var(--space-2xs);
}
/* The unit always sits on its own line. Left inline it wraps or not depending
   on sub-pixel column width, which made the cards disagree with each other. */
.price__amount span {
  display: block;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-mute);
  margin-top: var(--space-2xs);
}
.price--featured .price__amount span { color: var(--on-dark-mute); }
.price__qualifier {
  display: inline-flex; align-items: center;
  align-self: flex-start;   /* hug the text; the card is a flex column */
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--terracotta-deep);
  background: var(--terracotta-wash);
  padding: 3px 9px; border-radius: var(--radius-xs);
  margin-bottom: var(--space-xs);
}
.price--featured .price__qualifier {
  color: var(--terracotta-soft); background: rgba(232,129,79,0.14);
}
.price__basis { font-size: var(--step--1); color: var(--ink-mute); margin-bottom: var(--space-md); }
.price__summary { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--space-lg); }
.price__includes { list-style: none; margin: 0 0 var(--space-xl); padding: 0;
  display: grid; gap: var(--space-sm); font-size: 0.93rem; color: var(--ink-soft); }
.price__includes li { display: flex; gap: var(--space-sm); align-items: flex-start; line-height: 1.45; }
.price__check { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--terracotta); }
.price--featured .price__check { color: var(--terracotta-soft); }
.price .btn { margin-top: auto; width: 100%; }


.callout {
  border-left: 3px solid var(--terracotta);
  background: var(--terracotta-wash);
  padding: var(--space-lg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p { color: var(--ink-soft); }
.callout strong { color: var(--ink-strong); }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field__label { font-weight: 600; font-size: 0.95rem; color: var(--ink-strong); }
.field__req { color: var(--terracotta-deep); margin-left: 2px; }
.field__hint { font-size: var(--step--1); color: var(--ink-mute); }

.input, .select, .textarea {
  width: 100%;
  min-height: 52px;                       /* touch-friendly */
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;                        /* >=16px prevents iOS zoom-on-focus */
  color: var(--ink-strong);
  background: var(--paper);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 128px; padding-top: var(--space-md); resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234A443A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-2xl);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--terracotta-deep);
  box-shadow: 0 0 0 3px var(--terracotta-wash);
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: #B3261E;
}
.input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px #F7DEDC; }

.field__error {
  display: none;
  align-items: flex-start; gap: 6px;
  font-size: var(--step--1); font-weight: 500; color: #8C1D18;
}
.field__error[data-show='true'] { display: flex; }
.field__error svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* checkbox group */
.checks { display: grid; gap: var(--space-xs); }
@media (min-width: 560px) { .checks { grid-template-columns: repeat(2, 1fr); } }
.check {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 48px; padding: var(--space-xs) var(--space-md);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.check:hover { border-color: var(--ink-soft); background: var(--cream); }
.check:has(input:checked) { border-color: var(--terracotta); background: var(--terracotta-wash); }
.check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.check input { width: 20px; height: 20px; accent-color: var(--terracotta); flex: none; margin: 0; }
.check span { font-size: 0.95rem; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; font-weight: 600; font-size: 0.95rem; margin-bottom: var(--space-xs); }

/* honeypot — hidden from humans, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* error summary */
.form-summary {
  display: none;
  border: 1.5px solid #B3261E; background: #FCEEEC;
  border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg);
}
.form-summary[data-show='true'] { display: block; }
.form-summary h3 { font-family: var(--font-body); font-size: 1rem; color: #8C1D18; margin-bottom: var(--space-xs); }
.form-summary ul { margin: 0; padding-left: 1.1rem; }
.form-summary a { color: #8C1D18; font-size: 0.95rem; }

/* success state */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.form-success[data-show='true'] { display: block; }
.form-success__mark {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--terracotta-wash); color: var(--terracotta-deep);
  display: grid; place-items: center; margin: 0 auto var(--space-lg);
}
.form-status { font-size: var(--step--1); color: var(--ink-mute); text-align: center; }

/* ------------------------------------------------------------------- CTA */
.cta-panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
  display: grid;
}
@media (min-width: 860px) { .cta-panel { grid-template-columns: 1.05fr 1fr; } }
.cta-panel__body { padding: var(--space-2xl); display: flex; flex-direction: column;
  justify-content: center; gap: var(--space-md); align-items: flex-start; }
@media (min-width: 860px) { .cta-panel__body { padding: var(--space-3xl); } }
.cta-panel__title { font-size: var(--step-3); color: var(--cream); margin: 0; }
.cta-panel__text { color: var(--on-dark-mute); margin: 0; max-width: 46ch; }
.cta-panel__media { position: relative; min-height: 260px; }
.cta-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--on-dark-mute); padding-block: var(--space-3xl) var(--space-xl); }
/* WCAG 2.2 asks for a 24x24 CSS px pointer target. The legal and email
   links sat at 18-23px tall, so give them vertical padding rather than
   changing the type size. */
.site-footer a { color: var(--on-dark-mute); text-decoration: none;
  display: inline-block; padding-block: 3px; }
.site-footer a:hover { color: var(--terracotta-soft); }
.footer__grid { display: grid; gap: var(--space-2xl); }
/* Grid items default to min-width:auto, so a column refuses to shrink below
   its own min-content. At 320px that pushed the footer 20px wider than the
   viewport and scrolled the whole page sideways. 375px never showed it. */
.footer__grid > * { min-width: 0; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.footer__brand { display: inline-flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.footer__brand img { width: 40px; height: 40px; }
.footer__brand span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--cream); font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.footer__heading {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream);
  margin-bottom: var(--space-md);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer__list a { display: inline-flex; min-height: 32px; align-items: center; font-size: 0.95rem; }
.footer__phone {
  font-family: var(--font-display); font-size: var(--step-1); color: var(--cream) !important;
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
}
.footer__map {
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid #34302A;
  aspect-ratio: 16 / 10; background: #221F1A;
  /* The embed is fixed at zoom 9, which covers ~51km of latitude at 200px
     tall, so below about 160px it starts cropping the end markets off.
     This floor keeps Murrieta, Temecula and Menifee in frame. */
  min-height: 200px;
  /* min-height and aspect-ratio together were driving the WIDTH to 320px
     (200 x 1.6), which is wider than the content box on a 320px phone and
     scrolled every page sideways. The ratio gives way, the floor holds. */
  max-width: 100%;
}
.footer__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.35) contrast(0.95); }
.footer__base {
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: 1px solid #34302A;
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl);
  align-items: center; font-size: 0.86rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-left: auto; }

/* ------------------------------------------------------------ page header */
.page-head { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: 1px solid var(--border); }
.page-head__title { font-size: var(--step-4); margin-bottom: var(--space-md); }
.page-head__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; margin: 0; }

.breadcrumb { display: flex; gap: var(--space-xs); align-items: center;
  font-size: var(--step--1); color: var(--ink-mute); margin-bottom: var(--space-lg); list-style: none; padding: 0; }
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--terracotta-deep); text-decoration: underline; }
.breadcrumb li { display: flex; gap: var(--space-xs); align-items: center; }
.breadcrumb li + li::before { content: '/'; color: var(--border-strong); }

/* --------------------------------------------------------------- prose */
.prose h2 { font-size: var(--step-2); margin-top: var(--space-2xl); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-xl); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: var(--space-md); color: var(--ink-soft); }
.prose li { margin-bottom: var(--space-xs); }
.prose p { color: var(--ink-soft); }

/* ====================================================== AUTOMATION SERVICE
   New components for the automation offer. Built from the existing tokens
   and patterns rather than a second design language — same cream/ink ground,
   same terracotta accent, same radii and spacing scale. */

/* --------------------------------------------------------- workflow card
   One automation offering. Leads with the bottleneck in the trade's own
   words, because the pain is the hook — not the technology. */
.workflow {
  position: relative;      /* anchors the corner tag out of the flow */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.workflow__num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  color: var(--terracotta);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.workflow__name { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.workflow__blurb { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: var(--space-lg); }

.workflow__pain {
  border-left: 3px solid var(--border-strong);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 0.95rem;
  color: var(--ink-mute);
  font-style: italic;
}
.workflow__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: var(--space-xs);
}
.workflow__how { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--space-lg); }
.workflow__outcome {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--terracotta-deep);   /* 6.77:1 on paper — safe at this size */
  font-size: 0.95rem;
}
/* Pinned to the corner rather than sitting in the flow. In-flow it pushed the
   step number down on tagged cards only, so numbers stopped lining up across
   the grid. */
.workflow__tag {
  position: absolute;
  top: var(--space-lg); right: var(--space-lg);
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--terracotta-wash); color: var(--terracotta-deep);
  padding: 4px 9px; border-radius: var(--radius-pill);
  max-width: 55%;
}
/* Keep the heading clear of the tag. */
.workflow__tag ~ .workflow__name { padding-right: 4ch; }

/* ------------------------------------------------------------- live demo
   A scripted walk-through of missed-call text-back. It is a demonstration
   of the OUTCOME, not a live integration — labeled as such on the page so
   nobody mistakes it for a real conversation. */
.demo { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 860px) { .demo { grid-template-columns: 380px 1fr; } }

.demo__phone {
  background: var(--ink);
  border-radius: 28px;
  padding: var(--space-md);
  box-shadow: 0 18px 50px rgba(25,23,18,0.18);
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.demo__screen {
  background: var(--cream);
  border-radius: 18px;
  padding: var(--space-md);
  min-height: 400px;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.demo__bar {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-mute); text-transform: uppercase;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xs);
}

.demo__step { opacity: 0; transform: translateY(8px); }
.demo__step[data-shown='true'] {
  opacity: 1; transform: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
/* With JS off or reduced motion, every step is simply visible. */
html:not(.js-demo) .demo__step { opacity: 1; transform: none; }

.demo__event {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  background: var(--sand);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.demo__event--miss { background: #F7E4DF; color: #7A2E14; }
.demo__event--ok   { background: var(--terracotta-wash); color: var(--terracotta-deep); font-weight: 600; }
.demo__event svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

.demo__bubble {
  max-width: 84%;
  padding: var(--space-sm) var(--space-md);
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.demo__bubble--out {
  align-self: flex-end;
  background: var(--terracotta); color: var(--paper);
  border-bottom-right-radius: 5px;
}
.demo__bubble--in {
  align-self: flex-start;
  background: var(--paper); color: var(--ink-strong);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.demo__time {
  font-size: 0.68rem; color: var(--ink-mute);
  margin-top: 3px;
}
/* White, not a tint. Terracotta only reaches 4.68:1 against pure white, so
   ANY softening drops this small text below AA. De-emphasis comes from size
   and letter-spacing instead of color. */
.demo__bubble--out .demo__time {
  color: var(--paper);
  text-align: right;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.demo__controls { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-top: var(--space-lg); }
.demo__disclaimer {
  font-size: var(--step--1); color: var(--ink-mute); font-style: italic;
  margin-top: var(--space-md);
}

/* --------------------------------------------------- two-service split
   Homepage component that shows both offers while making the hierarchy
   unmistakable: automation is the anchor, lead-gen is the next step. */
.split { display: grid; gap: var(--space-lg); align-items: stretch; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; } }

.split__primary, .split__secondary {
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  display: flex; flex-direction: column;
}
.split__primary { background: var(--ink); color: var(--on-dark); }
.split__primary :is(h2, h3) { color: var(--cream); }
.split__primary p { color: var(--on-dark-mute); }
.split__secondary { background: var(--paper); border: 1px solid var(--border); }
.split__secondary p { color: var(--ink-soft); }

.split__rank {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--space-md);
  align-self: flex-start;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.split__primary .split__rank { background: var(--terracotta); color: var(--paper); }
.split__secondary .split__rank { background: var(--sand-deep); color: var(--ink-soft); }
.split__title { font-size: var(--step-2); margin-bottom: var(--space-sm); }
.split__list { list-style: none; margin: var(--space-md) 0 var(--space-xl); padding: 0; display: grid; gap: var(--space-xs); font-size: 0.95rem; }
.split__list li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.split__list svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--terracotta); }
.split__primary .split__list { color: #D9D0C2; }
.split__primary .split__list svg { color: var(--terracotta-soft); }
.split__secondary .split__list { color: var(--ink-soft); }
.split :is(.split__primary, .split__secondary) .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------ results placeholder
   Deliberately visible-but-empty. Honest about having no clients yet rather
   than inventing testimonials. Flip results.enabled in config.js to swap. */
.results-empty {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  background: var(--cream-deep);
}
.results-empty__icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sand-deep); color: var(--ink-mute);
  display: grid; place-items: center; margin: 0 auto var(--space-md);
}
.results-empty p { color: var(--ink-mute); max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------------- animation */
/* Scroll reveals are opt-IN, gated on the .js-reveal class that site.js puts
   on <html>. Content is therefore fully visible by default — with JavaScript
   disabled, blocked, or broken, nothing is hidden. Never make the readability
   of the page depend on a script running. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  .js-reveal [data-reveal] {
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .js-reveal [data-reveal].is-in:nth-child(2) { transition-delay: 60ms; }
  .js-reveal [data-reveal].is-in:nth-child(3) { transition-delay: 120ms; }
  .js-reveal [data-reveal].is-in:nth-child(4) { transition-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  body::before, .site-header, .nav-toggle, .cta-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}

/* ------------------------------------------------- what you pay for
   Was two equal columns of loose prose: dense paragraphs on the left, five
   bare bullets on the right, headings out of line and a large void under the
   short column. The list is the part carrying the value, so it now gets
   weight as a panel and the text column stays the wider of the two. */
.pay-grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 60rem) {
  .pay-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-3xl); }
}

.includes {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-xl);
}
.includes__title {
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-lg);
}
.includes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.includes__list li {
  display: grid;
  grid-template-columns: auto 1fr;   /* icon column never squeezes the text */
  gap: var(--space-sm);
  align-items: start;
  color: var(--ink-strong);
}
.includes__list svg {
  width: 18px; height: 18px;
  margin-top: 0.2em;                 /* optical alignment to the first line */
  color: var(--terracotta-deep);
}
.includes__foot {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ------------------------------------------------ missed-call value calc
   Same motion language as the phone demo: steps arrive in sequence, the
   arrival is decelerated, and prefers-reduced-motion shows the finished
   figure immediately rather than a blank panel. */
.calc { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 60rem) {
  .calc { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); }
}

.calc__panel {
  background: var(--ink-strong);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-xl);
  color: var(--cream);
}
.calc__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.calc__step {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-sm);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  opacity: 0; transform: translateY(8px);
}
.calc__step[data-shown='true'] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.calc__step-label { color: rgba(255,255,255,0.72); font-size: var(--step--1); max-width: 30ch; }
.calc__step-value {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  font-variant-numeric: tabular-nums;   /* stops the row jittering as it counts */
  color: #fff;
}

.calc__total { margin-top: var(--space-xl); }
.calc__total-label {
  margin: 0; font-size: var(--step--1); letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.calc__total-value {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--terracotta-soft, #E8A08A);
}

.calc__inputs { display: grid; gap: var(--space-lg); }
@media (min-width: 30rem) { .calc__inputs { grid-template-columns: 1fr 1fr; } }
.calc__field { display: grid; gap: var(--space-xs); }
.calc__label { font-size: var(--step--1); font-weight: 600; color: var(--ink-strong); }
.calc__input {
  min-height: 48px;                     /* comfortable touch target */
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper, #fff); color: var(--ink-strong);
  font: inherit; font-variant-numeric: tabular-nums; width: 100%;
}
.calc__input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.calc__hint, .calc__foot { color: var(--ink-soft); font-size: var(--step--1); }
.calc__hint { margin: var(--space-md) 0 0; }
.calc__foot { margin: var(--space-lg) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .calc__step { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------ the open offer
   The strongest thing we can say right now, so it is allowed to look like
   it. Terracotta ground rather than the usual cream, because it should
   read as an announcement and not as another content card. */
.offer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  border-radius: var(--radius-lg, 14px);
  background: var(--terracotta-deep);
  color: #fff;
}
.offer__flag {
  margin: 0 0 var(--space-xs);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.offer__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  color: #fff;
}
.offer__body { margin: 0; color: rgba(255,255,255,0.94); max-width: 62ch; }
.offer__note {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.24);
  font-size: var(--step--1); color: rgba(255,255,255,0.74);
}

/* ------------------------------------------------ the two offers, plainly
   Hero-centric pattern: hero, then a single value-prop strip that states the
   offer before any explanation. These sit above everything discursive. */
.offers { display: grid; gap: var(--space-xl); }
@media (min-width: 52rem) { .offers { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

.offer-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
}
.offer-card__flag {
  margin: 0;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta-deep);
}
.offer-card__title {
  margin: 0;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  line-height: 1.15; text-wrap: balance;
  color: var(--ink-strong);
}
.offer-card__line { margin: 0; color: var(--ink-soft); }
.offer-card__price {
  margin: 0; padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  width: 100%;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.offer-card__sep { color: var(--ink-mute); padding: 0 0.35em; }
.offers__foot {
  margin: var(--space-2xl) auto 0; max-width: 62ch; text-align: center;
  color: var(--ink-soft); font-size: var(--step--1);
}

/* ----------------------------------------- the seven, in one glance
   Homepage only. The full cards live on the automation page. */
.wf-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .wf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .wf-grid { grid-template-columns: repeat(3, 1fr); } }

.wf-mini {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--cream);
}
.wf-mini__num {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display); font-size: var(--step--1);
  /* --terracotta is 4.35:1 and this is small text, which the note at the top
     of this file says never to do. --terracotta-deep clears AA. */
  font-variant-numeric: tabular-nums; color: var(--terracotta-deep);
}
.wf-mini__name {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-0); font-weight: 600; color: var(--ink-strong);
}
.wf-mini__blurb { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.wf-mini__needs {
  margin: var(--space-md) 0 0;
  font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* Below 380px the header runs out of room: brand + gap + toggle exceeds the
   shell, which pushed the menu button off the right edge and scrolled every
   page sideways. The tagline under the wordmark is the widest and least
   load-bearing part of the lockup, so it is what gives way. The site name
   and the menu button both stay. */
@media (max-width: 380px) {
  .brand, .brand__name { min-width: 0; }
  .brand__name > span { display: none; }
}