/* ==========================================================================
   Lemmer Web Consulting — shared stylesheet
   Design system productionized from Chris's Claude Design draft
   ("Lemmer Web Automations Rebrand" / Homepage.dc.html, 2026-07-17):
   warm paper, near-black ink, clay accent, Barlow Condensed signage headlines.
   Flat static site — no build step, no framework.
   ========================================================================== */

:root {
  --paper: #f4f2ec;
  --ink: #1a1916;
  --ink-2: #3d3a33;
  --body-text: #413e37;
  --muted: #57544c;
  --muted-2: #6f6a5f;
  --faint: #8a8578;
  --line: #ded9cd;
  --alt-bg: #efece3;
  --accent: #b8431f;
  --accent-hover: #8f3213;
  --accent-warm: #e07a4d;
  --accent-warm-hover: #eb8a5f;
  --dark: #1a1916;
  --dark-card: #211f1b;
  --dark-chip: #2c2a24;
  --dark-line: #34322c;
  --dark-text: #c9c4b8;
  --dark-muted: #a8a396;
  --badge-bg: #f2e4dc;
  --numeral: #d9cdb9;
  --input-bg: #faf9f5;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-headline: 'Barlow Condensed', sans-serif;
  --font-ui: 'Barlow Semi Condensed', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent); color: #fff; }
input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: none; border-color: var(--ink) !important; }
img { max-width: 100%; }

@keyframes lwcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

.container { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow--dark { color: var(--accent-warm); }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  margin-right: 10px; vertical-align: 1px;
  animation: lwcPulse 2.4s ease-in-out infinite;
}
h1, h2, h3 { font-family: var(--font-headline); font-weight: 800; letter-spacing: -.01em; }
.h-display { font-size: clamp(44px, 6vw, 80px); line-height: .94; margin: 0 0 24px; text-wrap: balance; }
.h-section { font-size: clamp(36px, 4.4vw, 58px); line-height: .98; margin: 0 0 16px; }
.lead { font-size: 19px; line-height: 1.5; color: var(--body-text); margin: 0; text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 18px;
  padding: 16px 26px; border-radius: 9px; border: none; cursor: pointer;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 16px 24px; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--dark { background: var(--ink); color: var(--paper); font-size: 15px; padding: 10px 18px; }
.btn--dark:hover { background: #000; color: var(--paper); }
.btn--block { display: block; text-align: center; }

/* ---------- Header ---------- */
/* ==========================================================================
   NAV GOLD ACCENT — 2026-08-30 (S35). Site-wide, so it lives HERE.

   WHY styles.css AND NOT hero-split.css: the nav is partials/header.php, shared
   by every page; hero-split.css is loaded only by index.php. A home-page-
   only accent line would make about/privacy/sms-policy visibly different pages.
   The "styles.css is locked - every override lives here" note at the top of
   hero-split.css (and motion.css) is from the pre-PHP motion-variant era; it
   governs HERO overrides, and there is no motion.css in the PHP site. A shared
   design-system accent is not an override, so it belongs in the shared sheet.

   THE COLOUR IS OPTION A - SATIN, salvaged from the rejected big-gold-field
   experiment (gold-picker-metal.html, deleted). Peak l62, face l53, rim l27.
   The FIELD was rejected on composition - a large bright surface fought the
   clay accent #b8431f and split the .70 hero panel at the 38% seam. A 1-3px
   line has neither problem: too small to fight anything, and it sits above
   the panel entirely.

   IT REPLACES the old border-bottom: 1px solid var(--line) (#ded9cd). Two
   stacked lines read as an accident, not as two decisions.

   SHIPPED = option B, 3px FLAT satin. Why flat and not the gradient, measured
   against the real header at 4x: the satin ramp needs AREA to read as metal.
   Stretched along a 1440x3px bar its rim stops (l27-30%) land at both ends and
   read as an unevenly lit, slightly muddy line - not as a highlight. The field
   had the area; the line does not. Uniform gold reads as a deliberate accent.
   Why 3px and not 1px: 1px is lovely on the PAPER pages but nearly vanishes
   over the dark hero on the home page, which is the page that matters most.
   3px holds in both contexts and is still a line, not a band - 5px starts
   reading as a divider and competes with the clay CTA.

   TO NUDGE WITHOUT ANOTHER DISPATCH - three independent dials on .site-header:
     THICKNESS   --nav-gold-h
                   1px hairline (paper pages only) | 2px | 3px SHIPPED |
                   5px reads as a divider
     FINISH      --nav-gold-fill
                   flat:     var(--nav-gold-face)   <- SHIPPED
                   gradient: the satin ramp, commented out below. If the ramp
                   is wanted but the muddy ends are not, LIFT THE END STOPS
                   into gold (l40%+) instead of letting them fall to l27%.
     BLOOM       --nav-gold-glow  (a box-shadow; `none` SHIPPED)
                   Careful: the header is sticky at z-index 50, so any bloom
                   paints DOWN over the hero. That is the field's mistake in
                   miniature, and over the dark hero it is nearly invisible
                   anyway - it only shows on the paper pages.
   Brightness: move --nav-gold-face's l% (53%) up or down.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 236, .92);
  backdrop-filter: blur(8px);
  border-bottom: none;

  /* --- the dials --- */
  --nav-gold-h: 3px;   /* 2026-08-31: 3px at the DARK face (l38). Chris went 3->2 for subtlety, then back up a step. */
  --nav-gold-rim:  hsl(39, 42%, 27%);   /* the A-SATIN ramp, kept for reference */
  --nav-gold-face: hsl(43, 52%, 45%);   /* 2026-09-04 Chris picked ANTIQUE. was hsl(42,46%,38%). THE LINE. */
  --nav-gold-peak: hsl(46, 60%, 62%);
  --nav-gold-fill: var(--nav-gold-face);
  --nav-gold-glow: none;
  /* THE GRADIENT ALTERNATIVE (picker option C) - the A-SATIN 168deg base ramp
     re-laid left-to-right, highlight at 40% to match the field's implied
     upper-left key light. Not shipped: see the note above. Paste over
     --nav-gold-fill to use it.
       linear-gradient(90deg,
         hsl(40, 44%, 30%)   0%,  hsl(42, 48%, 41%)  16%,
         hsl(44, 54%, 53%)  32%,  hsl(46, 60%, 62%)  40%,
         hsl(44, 52%, 47%)  56%,  hsl(41, 46%, 35%)  76%,
         hsl(39, 42%, 27%) 100%)                                              */
}
/* The line is a pseudo-element, not a border, because a border cannot carry a
   gradient without border-image's clipping quirks. .site-header is position:
   sticky, i.e. positioned, so this resolves against it. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-gold-h);
  background: var(--nav-gold-fill);
  box-shadow: var(--nav-gold-glow);
  pointer-events: none;
}
.header-inner {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wm-top { font-family: var(--font-headline); font-weight: 800; font-size: 20px; letter-spacing: .01em; }
.wm-sub {
  font-family: var(--font-ui); font-weight: 600; font-size: 9.5px;
  letter-spacing: .28em; color: var(--muted-2); margin-top: 3px; white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav > a { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.site-nav > a:hover { color: var(--accent); }
.site-nav > a.btn--dark, .site-nav > a.btn--dark:hover { color: var(--paper); }
.nav-phone {
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  color: var(--ink) !important;
  border-left: 1px solid var(--line); padding-left: 24px; white-space: nowrap;
}
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ---------- Hero ---------- */
.hero {
  padding-top: 76px; padding-bottom: 84px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero-sub { font-size: 20px; line-height: 1.5; color: var(--body-text); max-width: 540px; margin: 0 0 32px; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-offer { margin: 22px 0 0; font-size: 15px; color: var(--muted-2); max-width: 520px; }
.hero-offer strong { color: var(--ink); }

.founder-card {
  position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #e7e2d6;
  box-shadow: 0 24px 60px -30px rgba(26, 25, 22, .5);
}
.founder-photo {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.founder-photo-todo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(-45deg, #e7e2d6, #e7e2d6 14px, #ded9cd 14px, #ded9cd 16px);
  color: var(--muted-2); text-align: center; padding: 24px;
}
.founder-photo-todo .initials {
  font-family: var(--font-headline); font-weight: 800; font-size: 84px; line-height: 1; color: #cbc4b2;
}
.founder-photo-todo .todo-tag {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  border: 1.5px dashed var(--accent); border-radius: 6px; padding: 6px 10px; background: rgba(244,242,236,.85);
}
.founder-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  background: linear-gradient(to top, rgba(26, 25, 22, .86), rgba(26, 25, 22, 0));
  pointer-events: none;
}
.founder-caption .name { font-family: var(--font-headline); font-weight: 800; font-size: 22px; color: #fff; line-height: 1; }
.founder-caption .role { font-size: 14px; color: #e7e2d6; margin-top: 4px; }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--alt-bg); }
.trust-inner {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between;
}
.trust-label {
  font-family: var(--font-ui); font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.trust-items { display: flex; flex-wrap: wrap; gap: 12px 30px; font-weight: 600; font-size: 15px; color: var(--body-text); }

/* ---------- Dark sections ---------- */
.section-dark { background: var(--dark); color: var(--paper); }
.section-dark .lead, .section-dark p { color: var(--dark-text); }

/* ---------- Voice section ---------- */
.voice-grid { padding-top: 92px; padding-bottom: 92px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.voice-sub { font-size: 18px; line-height: 1.55; color: var(--dark-text); max-width: 520px; margin: 0 0 30px; text-wrap: pretty; }
.voice-list { display: flex; flex-direction: column; gap: 2px; }
.voice-item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--dark-line); }
.voice-item:last-child { border-bottom: 1px solid var(--dark-line); }
.voice-item .num { font-family: var(--font-headline); font-weight: 800; font-size: 20px; color: var(--accent-warm); min-width: 34px; }
.voice-item .t { font-weight: 700; font-size: 18px; color: var(--paper); }
.voice-item .d { color: var(--dark-muted); font-size: 15.5px; margin-top: 3px; }
.voice-note { font-size: 15px; color: var(--faint) !important; margin: 24px 0 0; max-width: 500px; }

.transcript-card { background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 14px; padding: 22px; }
/* Example-scenario demo block (dark band, below the voice grid) */
.demo-block { padding-bottom: 92px; }
.demo-block .section-intro { margin-bottom: 36px; }
.demo-block .lead { color: var(--dark-text); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.demo-badge {
  display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-warm);
  border: 1px solid #4a463d; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.demo-payoff {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dark-line);
  font-size: 14px; line-height: 1.5; color: var(--dark-muted);
}
.demo-disclaimer { font-size: 14.5px; line-height: 1.55; color: var(--faint) !important; max-width: 720px; margin: 28px 0 0; }
.transcript-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.transcript-head-left { display: flex; align-items: center; gap: 12px; }
.play-badge {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-warm);
  color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none;
}
.transcript-title { font-weight: 700; font-size: 15px; color: var(--paper); }
.transcript-meta { font-size: 13px; color: var(--faint); }
.transcript-time { font-family: var(--font-ui); font-size: 13px; color: var(--faint); white-space: nowrap; }
.transcript-lines { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 82%; padding: 11px 15px; font-size: 15px; line-height: 1.4; }
.bubble .speaker { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.bubble--caller { align-self: flex-start; background: var(--dark-chip); color: #e7e2d6; border-radius: 12px 12px 12px 3px; }
.bubble--caller .speaker { color: var(--faint); }
.bubble--agent { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 12px 12px 3px 12px; }
.bubble--agent .speaker { color: #f6cdba; }

/* ---------- Automations ---------- */
.section { padding-top: 92px; padding-bottom: 92px; }
.section-intro { max-width: 640px; margin-bottom: 44px; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.svc-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--badge-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.svc-card h3 { font-size: 24px; margin: 0 0 8px; }
.svc-card p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- How it works ---------- */
.band-alt { background: var(--alt-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step .n { font-family: var(--font-headline); font-weight: 800; font-size: 52px; line-height: 1; color: var(--numeral); margin-bottom: 10px; }
.step h3 { font-size: 22px; margin: 0 0 8px; }
.step p { font-size: 15.5px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- Why us ---------- */
.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.why-grid .h-section { font-size: clamp(34px, 4.2vw, 54px); margin-bottom: 18px; }
.why-lede { font-size: 18px; line-height: 1.55; color: var(--body-text); margin: 0; text-wrap: pretty; }
.case-card { margin-top: 28px; background: var(--dark); color: var(--paper); border-radius: 14px; padding: 24px; }
.case-badge {
  display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-warm);
  border: 1px solid #4a463d; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}
.case-card .case-title { font-family: var(--font-headline); font-weight: 800; font-size: 24px; line-height: 1.05; margin-bottom: 8px; }
.case-card p { font-size: 15px; color: var(--dark-muted); line-height: 1.5; margin: 0; }
.case-card a { color: var(--accent-warm); font-weight: 600; }
.case-card a:hover { color: var(--accent-warm-hover); }
.why-cards { display: flex; flex-direction: column; gap: 16px; }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: flex; gap: 18px; }
.why-card .num { font-family: var(--font-headline); font-weight: 800; font-size: 22px; color: var(--accent); min-width: 30px; }
.why-card h3 { font-size: 21px; margin: 0 0 6px; }
.why-card p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- Pricing ---------- */
.pricing-grid { padding-top: 92px; padding-bottom: 92px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pricing-grid .h-section { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 18px; }
.price-card { background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 16px; padding: 36px; }
.price-headline {
  font-family: var(--font-headline); font-weight: 800;
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.02; color: #fff; margin-top: 16px;
  text-wrap: balance;
}
.price-badge {
  display: inline-block; font-family: var(--font-ui); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--accent-warm); border-radius: 999px; padding: 6px 14px;
}
.price-rule { height: 1px; background: var(--dark-line); margin: 24px 0; }
.price-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-list li { display: flex; gap: 11px; font-size: 16px; color: #e7e2d6; }
.price-list .check { color: var(--accent-warm); font-weight: 700; }

/* ---------- Contact ---------- */
.contact-grid { padding-top: 92px; padding-bottom: 92px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-details { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: var(--muted); }
.contact-details strong { color: var(--ink); }
.contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-note { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--muted-2); margin-bottom: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--body-text); }
.field input, .field textarea {
  border: 1.5px solid var(--line); border-radius: 9px; padding: 12px 14px;
  font-size: 16px; background: var(--input-bg); color: var(--ink);
}
.field textarea { resize: vertical; }
/* Live validation state (contact form). Deliberately reuses --accent rather than
   introducing a red: the palette has no error colour, and inventing one for a single
   form would add a fifth hue to a three-hue system. Border-only, no background wash —
   the field stays readable while it is flagged. */
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--accent); }
.form-fineprint.is-nudge { color: var(--accent); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-submit {
  background: var(--ink); color: var(--paper); font-family: var(--font-ui);
  font-weight: 700; font-size: 18px; padding: 15px; border: none; border-radius: 9px; cursor: pointer;
}
.form-submit:hover { background: #000; }
.form-fineprint { font-size: 13.5px; color: var(--faint); margin: 0; }

/* ---------- Interior page hero ---------- */
.page-hero { padding-top: 64px; padding-bottom: 56px; }
.page-hero .h-display { font-size: clamp(40px, 5.4vw, 68px); }
.page-hero .lead { max-width: 640px; }

/* ---------- Prose / article (compliance + about copy) ---------- */
.prose { max-width: 46rem; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; color: var(--body-text); }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin: 2.4rem 0 .75rem; scroll-margin-top: 90px; }
.prose strong { color: var(--ink); }
.callout {
  background: var(--badge-bg); border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 1rem 1.25rem; margin: 0 0 1rem;
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.doc-meta { font-size: 15px; color: var(--muted-2); margin: 0 0 2rem; }

/* ---------- About page ---------- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; padding-bottom: 92px; }
.about-grid .founder-card { max-width: 420px; }
.fact-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fact-list li { display: flex; gap: 11px; font-size: 16px; color: var(--body-text); }
.fact-list .check { color: var(--accent); font-weight: 700; }

/* ---------- About photo collage (S46) ----------
   Three cards: the founder profile in front, the home office and the family
   photo behind it. The arrangement class on .about-collage is .collage--b;
   .collage-card is shared by all three. The founder name/role plate lives
   inside the profile card.
   Variant B (restrained stagger) IS THE SHIPPED ARRANGEMENT - Chris's pick,
   2026-09-03. The picker hook and the A/C variants were removed. */
.about-grid--collage { grid-template-columns: 1.1fr .9fr; }
.about-grid--collage > * { min-width: 0; }

.about-collage { position: relative; width: 100%; max-width: 620px; }
.collage-card {
  position: absolute; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line); background: #e7e2d6;
  box-shadow: 0 24px 60px -30px rgba(26, 25, 22, .5);
}
.collage-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage-card--office  { z-index: 1; }
.collage-card--family  { z-index: 2; }
.collage-card--profile { z-index: 3; }

/* -- B: restrained stagger. No overlap; profile left, office + family stacked right. -- */
.collage--b {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start;
}
.collage--b .collage-card { position: relative; }
.collage--b .collage-card--profile { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.collage--b .collage-card--office  { grid-column: 2; grid-row: 1; aspect-ratio: 2 / 1; margin-top: 34px; }
.collage--b .collage-card--family  { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }

/* -- Mobile: no overlap survives a 350px column, so every variant collapses to
      the same plain layout - profile full width, office + family in a row
      under it, matched heights. Placement is explicit because the DOM order is
      office/family/profile (profile last so it paints on top on desktop). -- */
@media (max-width: 700px) {
  .about-collage,
  .about-collage.collage--b {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; aspect-ratio: auto; max-width: 420px;
  }
  /* relative, NOT static: the founder plate is absolute and needs the card
     as its containing block, or it drops to the bottom of the collage. */
  .about-collage .collage-card { position: relative; inset: auto; margin-top: 0; width: auto; }
  .about-collage .collage-card--profile { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 5; }
  .about-collage .collage-card--office  { grid-column: 1; grid-row: 2; aspect-ratio: 1.37 / 1; }
  .about-collage .collage-card--family  { grid-column: 2; grid-row: 2; aspect-ratio: 1.1 / 1; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--dark); color: var(--paper); }
.cta-band-inner {
  padding-top: 64px; padding-bottom: 64px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.cta-band h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1; margin: 0; }
.cta-band .cta-sub { color: var(--dark-muted); margin: 8px 0 0; font-size: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--dark-text); }
.footer-grid {
  padding-top: 52px; padding-bottom: 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand-row .wm-top { color: var(--paper); }
.footer-brand-row .wm-sub { color: var(--faint); }
.footer-tagline { font-size: 15px; line-height: 1.5; color: var(--faint); max-width: 320px; margin: 0; }
.footer-label {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-links a { color: var(--dark-text); }
.footer-links a:hover { color: var(--paper); }
.footer-links .plain { color: var(--faint); }
.footer-legal { border-top: 1px solid var(--dark-chip); }
.footer-legal-inner {
  padding-top: 20px; padding-bottom: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 13.5px; color: var(--muted-2);
}
.footer-legal-inner a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-inner a:hover { color: var(--dark-text); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .site-nav { gap: 18px; }
  .nav-phone { padding-left: 18px; }
}

@media (max-width: 960px) {
  /* Mobile nav: checkbox-toggle panel, no JS */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
  }
  .nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 28px 20px;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav > a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .site-nav > a:last-child { border-bottom: none; }
  .nav-phone { border-left: none; padding-left: 0; }
  .btn--dark.nav-cta { margin-top: 12px; text-align: center; justify-content: center; }

  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .hero > .hero-media { max-width: 420px; }
  .voice-grid, .why-grid, .pricing-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .voice-grid, .pricing-grid, .contact-grid { padding-top: 64px; padding-bottom: 64px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-block { padding-bottom: 64px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust-inner { justify-content: flex-start; }
  .btn { font-size: 16px; padding: 14px 20px; }
  .price-amount { font-size: 58px; }
  .bubble { max-width: 92%; }
}