/* ==========================================================================
   TENANT TURNOVER, INC. — FOUNDATION STYLESHEET
   Built in Phase 1 (Design System). Every future page inherits from this file.

   TABLE OF CONTENTS
   1.  Design Tokens (CSS custom properties)   → change brand here
   2.  Base / Reset
   3.  Layout helpers (container)
   4.  Typography scale
   5.  Buttons
   6.  Cards (service / testimonial / stat)
   7.  Form elements
   8.  Styleguide-only scaffolding (.sg-*)  → safe to ignore on real pages
   9.  Site components (Phase 2): header, hero, sections, footer, reveal
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Change a value here and it updates everywhere across the site.
   ========================================================================== */
:root {
  /* ---- Brand color: Ink (deep midnight slate) — primary / text / dark UI --- */
  --color-ink-900: #0b1b2b;   /* darkest — dark sections, primary headings   */
  --color-ink-800: #10273c;
  --color-ink-700: #1c374f;
  --color-ink-600: #2c4a64;

  /* ---- Brand accent: Emerald — action color, "move-in ready" / speed ------ */
  --color-emerald-800: #086345;   /* hover state for primary actions          */
  --color-emerald-700: #0a7d55;   /* PRIMARY action / links (AA: 5.1:1 on white) */
  --color-emerald-600: #0e9f6e;   /* accents on large text / non-text UI      */
  --color-emerald-500: #16b982;
  --color-emerald-100: #d6f5e8;   /* tints, hover halos, badges               */
  --color-emerald-50:  #eefaf4;

  /* ---- Secondary accent: Brass — premium warmth, used sparingly ----------- */
  --color-brass-600: #a9843f;
  --color-brass-500: #c6a15b;
  --color-brass-100: #f4ead3;

  /* ---- Neutrals: warm-tinted gray scale ----------------------------------- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f7f9fa;   /* app surface / section background         */
  --color-neutral-100: #eef1f4;
  --color-neutral-200: #e0e5eb;   /* borders / dividers                       */
  --color-neutral-300: #c6cdd6;
  --color-neutral-400: #9aa5b1;   /* muted icons                              */
  --color-neutral-500: #5f6b79;   /* secondary text (AA on white + tinted bg) */
  --color-neutral-600: #4c5866;   /* body text on light                       */
  --color-neutral-700: #333d49;

  /* ---- Semantic colors ---------------------------------------------------- */
  --color-success: #15803d;
  --color-success-bg: #e7f6ec;
  --color-warning: #b45309;
  --color-warning-bg: #fbf0dc;
  --color-error:   #b91c1c;
  --color-error-bg: #fbe6e6;
  --color-info:    #1d4ed8;
  --color-info-bg: #e5edfb;

  /* ---- Semantic role aliases (use these in components) -------------------- */
  /* AA contrast: white button text needs >=4.5:1 — emerald-700 gives 5.1:1
     (emerald-600 was 3.4:1) */
  --color-primary:        var(--color-emerald-700);
  --color-primary-hover:  var(--color-emerald-800);
  --color-text:           var(--color-ink-900);
  --color-text-body:      var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-surface:        var(--color-neutral-0);
  --color-surface-alt:    var(--color-neutral-50);
  --color-border:         var(--color-neutral-200);

  /* ---- Typography --------------------------------------------------------- */
  --font-heading: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* Fluid type scale (mobile-first; clamp grows on larger viewports) */
  --fs-display: clamp(2.6rem, 7vw + 1rem, 4.5rem);   /* hero headline        */
  --fs-h1:      clamp(2.1rem, 5vw + 0.5rem, 3.25rem);
  --fs-h2:      clamp(1.7rem, 3.2vw + 0.5rem, 2.5rem);
  --fs-h3:      clamp(1.35rem, 2vw + 0.4rem, 1.75rem);
  --fs-h4:      clamp(1.15rem, 1vw + 0.5rem, 1.3rem);
  --fs-body-lg: clamp(1.075rem, 0.4vw + 1rem, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---- Radius ------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, layered) ------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 27, 43, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 27, 43, 0.07);
  --shadow-md: 0 8px 20px rgba(11, 27, 43, 0.09);
  --shadow-lg: 0 16px 40px rgba(11, 27, 43, 0.12);
  --shadow-xl: 0 28px 70px rgba(11, 27, 43, 0.16);
  --shadow-focus: 0 0 0 4px var(--color-emerald-100);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 400ms;

  /* ---- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background: var(--color-surface-alt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.text-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
}
.text-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.text-h2 { font-size: var(--fs-h2); }
.text-h3 { font-size: var(--fs-h3); }
.text-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

.text-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
.text-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.text-small { font-size: var(--fs-small); line-height: var(--lh-snug); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--color-text-muted); }

/* Eyebrow / overline — used above section headings site-wide */
.overline {
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald-700);
}

.text-muted { color: var(--color-text-muted); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Primary — emerald, the main call to action ("Request a Quote") */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Secondary — outlined, calmer ("Download Free eBook") */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink-900);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* On dark backgrounds */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Text link button — arrow moves on hover (micro-interaction) */
.btn-link {
  background: none;
  border: none;
  padding: 0.35rem 0;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn-link .arrow { transition: transform var(--dur) var(--ease); }
.btn-link:hover { color: var(--color-primary-hover); }
.btn-link:hover .arrow { transform: translateX(4px); }

.btn-lg { --btn-py: 1.05rem; --btn-px: 2rem; font-size: var(--fs-body-lg); }
.btn-full { width: 100%; }

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* ---- Service card ---- */
.card-service { padding: var(--space-6); }
.card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-service .card-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-emerald-50);
  color: var(--color-emerald-700);
  margin-bottom: var(--space-4);
}
.card-service .card-icon svg { width: 26px; height: 26px; }
.card-service h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.card-service p { margin: 0 0 var(--space-4); color: var(--color-text-body); font-size: var(--fs-small); }

/* ---- Testimonial card ---- */
.card-testimonial { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.card-testimonial .quote-mark {
  font-family: var(--font-heading);
  font-size: 3rem; line-height: 0.6;
  color: var(--color-brass-500);
  height: 1.5rem;
}
.card-testimonial blockquote {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--color-ink-800);
  font-weight: var(--fw-medium);
}
.card-testimonial .attribution { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.card-testimonial .avatar {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-ink-700); color: #fff;
  display: grid; place-items: center; font-weight: var(--fw-semibold);
  font-family: var(--font-heading); font-size: var(--fs-small); flex: none;
}
.card-testimonial .attribution .name { font-weight: var(--fw-semibold); color: var(--color-text); font-size: var(--fs-small); }
.card-testimonial .attribution .role { font-size: var(--fs-caption); color: var(--color-text-muted); }
.stars { color: var(--color-brass-500); letter-spacing: 2px; font-size: var(--fs-small); }

/* ---- Stat / number card ---- */
.card-stat { padding: var(--space-6); text-align: left; }
.card-stat .stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink-900);
}
.card-stat .stat-number .unit { color: var(--color-emerald-600); }
/* Text-based headline stats ("Every Unit") — smaller scale so words fit */
.card-stat .stat-number.is-text { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.25; }
.card-stat .stat-label { margin-top: var(--space-3); font-weight: var(--fw-semibold); color: var(--color-text); }
.card-stat .stat-sub { margin-top: var(--space-1); font-size: var(--fs-caption); color: var(--color-text-muted); }

/* ==========================================================================
   7. FORM ELEMENTS
   ========================================================================== */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.form-label .req { color: var(--color-error); }
.form-hint { font-size: var(--fs-caption); color: var(--color-text-muted); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-neutral-400); }

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--color-neutral-300); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-textarea { resize: vertical; min-height: 120px; line-height: var(--lh-snug); }

/* Custom dropdown chevron */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error { border-color: var(--color-error); }
.form-error-text { font-size: var(--fs-caption); color: var(--color-error); }

/* ==========================================================================
   8. STYLEGUIDE-ONLY SCAFFOLDING (.sg-*)
   These classes only style the review page. Real pages don't use them.
   ========================================================================== */
.sg-body { background: var(--color-neutral-50); }

.sg-hero {
  background: linear-gradient(160deg, var(--color-ink-900), var(--color-ink-700));
  color: #fff;
  padding: var(--space-9) 0 var(--space-8);
}
.sg-hero .overline { color: var(--color-emerald-500); }
.sg-hero h1 { color: #fff; }
.sg-hero p { color: rgba(255,255,255,0.72); max-width: 60ch; }

.sg-section { padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border); }
.sg-section:last-child { border-bottom: none; }
.sg-section-head { margin-bottom: var(--space-6); }
.sg-section-head .num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-emerald-600);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
}
.sg-section-head h2 { margin: var(--space-2) 0 var(--space-2); }
.sg-section-head p { margin: 0; max-width: 65ch; }

.sg-grid { display: grid; gap: var(--space-5); }
.sg-grid-2 { grid-template-columns: 1fr; }
.sg-grid-3 { grid-template-columns: 1fr; }
.sg-grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .sg-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .sg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Color swatches */
.sg-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.sg-swatch .chip { height: 84px; }
.sg-swatch .meta { padding: var(--space-3); }
.sg-swatch .meta .name { font-weight: var(--fw-semibold); color: var(--color-text); font-size: var(--fs-small); }
.sg-swatch .meta .hex { font-size: var(--fs-caption); color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-transform: uppercase; }

.sg-label {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.sg-type-row { padding: var(--space-4) 0; border-bottom: 1px dashed var(--color-border); }
.sg-type-row:last-child { border-bottom: none; }
.sg-type-row .spec {
  display: block; font-size: var(--fs-caption); color: var(--color-text-muted);
  font-family: var(--font-body); margin-bottom: var(--space-2); letter-spacing: 0.02em;
}

.sg-tokens { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; }
.sg-space-item { text-align: center; }
.sg-space-bar { background: var(--color-emerald-100); border: 1px solid var(--color-emerald-500); border-radius: var(--radius-sm); }
.sg-space-item .lbl { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: var(--space-2); }

.sg-shadow-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
}

.sg-swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sg-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.sg-btn-row.on-dark { background: var(--color-ink-900); padding: var(--space-5); border-radius: var(--radius-md); }

.sg-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}

.sg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.sg-badge.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }

/* ==========================================================================
   9. SITE COMPONENTS (Phase 2) — header, hero, sections, footer, reveal
   Uses only the tokens defined in section 1.
   ========================================================================== */

/* ---- Section rhythm ---- */
.section { padding: var(--space-9) 0; }
.section-alt { background: var(--color-surface); }
.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head h2 { margin: var(--space-2) 0 var(--space-3); }
.section-head p { margin: 0; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   SITE HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}

/* Logo placeholder — swap for an SVG/image later without touching layout */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-ink-900);
  text-decoration: none;
}
.logo:hover { color: var(--color-ink-900); }
.logo .logo-mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-emerald-600), var(--color-emerald-700));
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.95rem;
  flex: none;
}
.logo .logo-inc { color: var(--color-text-muted); font-weight: var(--fw-regular); }

/* Logo image (images/logo.png). Intrinsic width/height attrs prevent layout
   shift; CSS scales it down. */
.logo-img { height: 48px; width: auto; display: block; }
@media (max-width: 480px) { .logo-img { height: 40px; } }

/* INTERIM dark-background treatment: the logo's black letterforms disappear
   on ink backgrounds, so it sits on a soft white plate until a light
   (white/knockout) logo variant is provided. Then remove this plate and
   swap the src to logo-light.png. */
.logo-on-dark {
  background: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  display: inline-block;
}
.site-footer .logo-img { height: 52px; }

.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-neutral-600);
  padding: var(--space-2) 0;
  position: relative;
}
.nav-links a:hover { color: var(--color-ink-900); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transition: right var(--dur) var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--color-ink-900); }

.nav-cta { flex: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-right: calc(var(--space-2) * -1);
}
.nav-toggle .bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-ink-900);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle .bar + .bar { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--container-pad) var(--space-6);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--color-neutral-100);
  }
  .nav-links a::after { display: none; }
  .nav-cta { margin-top: var(--space-4); }
  .nav-cta .btn { width: 100%; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--color-emerald-50) 0%, transparent 60%),
    var(--color-surface);
  padding: var(--space-8) 0 var(--space-9);
  overflow: hidden;
}
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .hero { padding-top: var(--space-9); }
}
.hero-copy .overline { display: inline-block; margin-bottom: var(--space-4); }
.hero-copy h1 { margin-bottom: var(--space-5); }
.hero-copy .hero-sub { max-width: 54ch; margin: 0 0 var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding: 0; list-style: none;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}
.hero-proof li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-proof .tick { color: var(--color-emerald-600); font-weight: var(--fw-bold); }

/* HERO MEDIA — swappable container. Only the INNER content of .hero-media
   changes between phases; layout around it stays untouched. */
.hero-media { position: relative; }

/* ---- Turn gallery: two photos at a time (index.html) --------------------
   The frame keeps the original before/after frame's size and position
   (4:3, radius-xl, shadow-xl). Each photo fills half the frame — a 2:3
   panel, matching the crops produced by tools/optimize-turn-photos.py.
   --tp-per   photos shown at once: 2, or 1 on narrow phones (read by JS) */
.turn-pair { --tp-per: 2; --tp-gap: 3px; position: relative; outline: none; }
.turn-pair:focus-visible .tp-frame { box-shadow: var(--shadow-xl), 0 0 0 4px var(--color-emerald-100); }

.tp-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3;
  background: var(--color-neutral-100);
  touch-action: pan-y;
  contain: inline-size;            /* photos' intrinsic width must not widen the hero column */
}
.tp-track {
  display: flex;
  height: 100%;
  gap: var(--tp-gap);
  background: #fff;                /* shows through the gap as the divider */
  transition: transform 420ms var(--ease);
  will-change: transform;
}
.tp-track.no-anim { transition: none; }
.tp-slide {
  position: relative;
  flex: 0 0 calc((100% - (var(--tp-per) - 1) * var(--tp-gap)) / var(--tp-per));
  min-width: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-neutral-100);
}
.tp-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
/* Arrows on the frame's left and right edges */
.tp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.88);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tp-arrow svg { width: 22px; height: 22px; }
.tp-prev { left: var(--space-3); }
.tp-next { right: var(--space-3); }
.tp-arrow:hover:not(:disabled) { background: var(--color-emerald-700); border-color: var(--color-emerald-700); color: #fff; }
.tp-arrow:focus-visible { outline: 3px solid var(--color-emerald-500); outline-offset: 2px; }
.tp-arrow:disabled { opacity: 0.4; cursor: default; }
/* Without JS the arrows do nothing — hide them; the first pair still shows */
.turn-pair:not(.tp-ready) .tp-arrow { display: none; }

/* Counter + label beneath the frame */
.tp-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-inline: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.tp-label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-medium);
  color: var(--color-ink-800);
}
.tp-label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-emerald-500);
  box-shadow: 0 0 0 3px var(--color-emerald-100);
  flex: none;
}
.tp-counter {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Narrow phones: one photo at a time. The frame goes to the photo's own 3:4
   so a single portrait shot isn't sliced into a landscape band. */
@media (max-width: 479.98px) {
  .turn-pair { --tp-per: 1; --tp-gap: 0px; }
  .tp-frame { aspect-ratio: 3 / 4; }
  .tp-arrow { width: 38px; height: 38px; }
  .tp-prev { left: var(--space-2); }
  .tp-next { right: var(--space-2); }
}

/* ==========================================================================
   EBOOK PROMO STRIP
   ========================================================================== */
.ebook-strip {
  background: linear-gradient(135deg, var(--color-ink-900), var(--color-ink-700));
  color: #fff;
  padding: var(--space-7) 0;
}
.ebook-strip-inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .ebook-strip-inner { grid-template-columns: auto 1fr auto; gap: var(--space-6); }
}
.ebook-cover {
  display: block;
  width: 128px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-lg);
  flex: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ebook-cover:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-xl); }
.ebook-cover img { width: 100%; height: auto; display: block; }
.ebook-strip .overline { color: var(--color-brass-500); }
.ebook-strip h2 { color: #fff; font-size: var(--fs-h3); margin: var(--space-2) 0 var(--space-2); }
.ebook-strip p { color: rgba(255,255,255,0.72); margin: 0; max-width: 58ch; font-size: var(--fs-small); }

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */
.services-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.section-foot { margin-top: var(--space-7); text-align: center; }

/* ==========================================================================
   TRUST SECTION
   ========================================================================== */
.badge-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.trust-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-800);
  box-shadow: var(--shadow-xs);
}
.trust-badge .shield { color: var(--color-emerald-600); display: grid; }
.trust-badge .shield svg { width: 18px; height: 18px; }
.stats-grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
  background:
    radial-gradient(900px 400px at 15% 120%, rgba(14,159,110,0.25) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-ink-900), var(--color-ink-800));
  color: #fff;
  padding: var(--space-9) 0;
  text-align: center;
}
.final-cta .overline { color: var(--color-emerald-500); }
.final-cta h2 { color: #fff; margin: var(--space-3) 0 var(--space-4); }
.final-cta p { color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0 auto var(--space-6); }
.final-cta .hero-actions { justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-ink-900);
  color: rgba(255,255,255,0.65);
  padding: var(--space-8) 0 var(--space-6);
  font-size: var(--fs-small);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer .logo { color: #fff; margin-bottom: var(--space-4); }
.footer-tagline { max-width: 34ch; margin: 0 0 var(--space-4); }
.footer-contact { margin: 0 0 var(--space-4); display: grid; gap: var(--space-1); }
.footer-col h3 {
  color: #fff;
  font-size: var(--fs-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col a { color: rgba(255,255,255,0.65); }
.footer-col a:hover { color: #fff; }
.social-row { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.social-row a {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.2);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.75);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-row a:hover { background: var(--color-emerald-600); border-color: var(--color-emerald-600); color: #fff; }
.social-row svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.45);
}

/* ==========================================================================
   SCROLL REVEAL (progressive enhancement)
   JS adds .reveal-ready to <html>; without JS everything stays visible.
   Global prefers-reduced-motion rule (section 2) neutralizes the transition.
   ========================================================================== */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   10. INNER PAGES (Phase 3) — page hero, service rows, placeholders, areas
   Uses only the tokens defined in section 1.
   ========================================================================== */

/* ---- Page hero (smaller than homepage hero) ---- */
.page-hero {
  background:
    radial-gradient(1000px 400px at 85% -20%, var(--color-emerald-50) 0%, transparent 60%),
    var(--color-surface);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}
.page-hero .overline { display: inline-block; margin-bottom: var(--space-3); }
.page-hero h1 { margin-bottom: var(--space-4); max-width: 22ch; }
.page-hero .lead { max-width: 62ch; margin: 0; }

/* ---- Image placeholder (swap for real photos later) ---- */
.img-ph {
  background: linear-gradient(150deg, var(--color-neutral-100), var(--color-neutral-200));
  border: 1.5px dashed var(--color-neutral-300);
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.img-ph span {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  background: rgba(255,255,255,0.7);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  text-align: center;
}
.img-ph.portrait { aspect-ratio: 3 / 4; }
.img-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.img-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Service-row photos: landscape fills the column at 4:3; portrait shots stay
   3:4 but are capped in width so they don't tower over the text column. */
.service-media .img-photo { aspect-ratio: 4 / 3; }
.service-media .img-photo.portrait { aspect-ratio: 3 / 4; max-width: 440px; margin-inline: auto; }

/* ---- Anchor chip nav (services page jump links) ---- */
.chip-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.chip-nav a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-600);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip-nav a:hover { border-color: var(--color-primary); color: var(--color-primary-hover); box-shadow: var(--shadow-xs); }

/* ---- Service detail rows (alternating two-column) ---- */
.service-row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 96px; /* anchor offset under sticky header */
}
.service-row:last-of-type { border-bottom: none; }
@media (min-width: 900px) {
  .service-row { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .service-row.flip .service-media { order: -1; }
}
.service-row h2 { margin-bottom: var(--space-3); }
.service-row .why {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-emerald-50);
  border-left: 3px solid var(--color-emerald-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-ink-800);
}
.service-row .why strong { color: var(--color-emerald-700); }

/* ---- Check list (what's included) ---- */
.check-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .check-list.cols-2 { grid-template-columns: 1fr 1fr; } }
.check-list li { display: flex; gap: var(--space-2); font-size: var(--fs-small); }
.check-list .tick { color: var(--color-emerald-600); font-weight: var(--fw-bold); flex: none; }

/* ---- Service areas ---- */
.area-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-800);
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.area-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--color-emerald-500); }
.area-card .pin { color: var(--color-emerald-600); flex: none; display: grid; }
.area-card .pin svg { width: 16px; height: 16px; }
.area-card .st { color: var(--color-text-muted); font-weight: var(--fw-regular); }

/* ---- Values mini-grid (About) ---- */
.values-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
.value-card { padding: var(--space-5); }
.value-card .value-num {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-emerald-600);
  letter-spacing: 0.1em;
}
.value-card h3 { font-size: var(--fs-h4); margin: var(--space-2) 0; }
.value-card p { margin: 0; font-size: var(--fs-small); }

/* ---- Two-column story block (About) ---- */
.story-grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }

/* ==========================================================================
   11. DAY-ZERO SCHEDULE (Phase 4, process page)
   Compact day-by-day sequence: day chips + flat rows.
   Base styles = fully readable static list (no JS / reduced motion).
   JS adds .dz-ready to the wrapper to enable scroll highlighting.
   ========================================================================== */
.dz-schedule {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
  display: grid;
  gap: var(--space-3);
  position: relative;
  z-index: 0;
}
/* Spine + scroll progress fill; z-index -1 keeps them behind the row cards,
   visible only in the gaps between rows. Aligned to the day-chip centers. */
.dz-track {
  position: absolute;
  left: 61px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--color-neutral-200);
  z-index: -1;
}
.dz-progress {
  position: absolute;
  left: 61px;
  top: 28px;
  width: 2px;
  height: 0;
  max-height: calc(100% - 56px);
  background: var(--color-emerald-600);
  z-index: -1;
}
.dz-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-4);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}
.dz-day {
  display: inline-grid;
  place-items: center;
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  background: var(--color-ink-900);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-align: center;
}
.dz-row.day-zero .dz-day { background: var(--color-emerald-700); }
.dz-row h3 { font-size: var(--fs-body); margin: 0 0 var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dz-row p { margin: 0; font-size: var(--fs-small); }
.dz-row.dz-cond { border-style: dashed; background: var(--color-neutral-50); }
.dz-flag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-brass-100);
  color: var(--color-brass-600);
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Role badge — who owns / can help with each day.
   Mobile: flows above the title (no overlap possible).
   ≥700px: pinned to the card's top-right corner. */
.dz-role {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-bottom: var(--space-2);
}
.dz-role.role-help { background: var(--color-emerald-100); color: var(--color-emerald-700); }
.dz-role.role-other { background: var(--color-neutral-100); color: var(--color-neutral-600); }
@media (min-width: 700px) {
  .dz-row { position: relative; }
  .dz-role {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    margin-bottom: 0;
  }
  /* Reserve corner space so long titles wrap instead of sliding under the badge */
  .dz-row h3 { padding-right: 170px; }
}
.dz-note {
  max-width: 780px;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-small);
  color: var(--color-ink-800);
  background: var(--color-emerald-50);
  border-left: 3px solid var(--color-emerald-600);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.dz-bridge {
  max-width: 780px;
  margin: var(--space-6) auto 0;
  text-align: center;
}

/* ---- JS-enhanced scroll states (only under .dz-ready) ---- */
.dz-ready .dz-row {
  transition: opacity var(--dur-slow) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.dz-ready .dz-row.is-dim { opacity: 0.45; }
.dz-ready .dz-row.is-active {
  border-color: var(--color-emerald-500);
  box-shadow: var(--shadow-md);
}
.dz-ready .dz-row.is-done .dz-day,
.dz-ready .dz-row.is-active .dz-day { background: var(--color-emerald-700); }

/* ==========================================================================
   12. EBOOK FUNNEL (Phase 5) — cover mockup, capture form, thank-you
   ========================================================================== */

/* ---- eBook cover image (images/ebook-coversheet.jpg) ---- */
.book-cover {
  width: min(340px, 80vw);
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}
@media (min-width: 900px) {
  .book-cover { transform: rotate(-2deg); }
}

/* ---- Lead-magnet hero layout: cover left, form right ---- */
.ebook-hero-head {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.ebook-hero-head .hero-proof { justify-content: center; }
.ebook-hero-grid {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .ebook-hero-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: var(--space-8);
  }
  .ebook-hero-grid .ebook-form-panel { justify-self: start; width: 100%; }
}

/* ---- Capture form panel ---- */
.ebook-form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 520px;
  margin-inline: auto;
  scroll-margin-top: 96px;
}
.form-grid-2 { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-error-banner {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   13. RESOURCES + CONTACT (Phase 6)
   ========================================================================== */

/* ---- Article prose ---- */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 {
  font-size: var(--fs-h3);
  margin: var(--space-7) 0 var(--space-3);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.4rem; display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--color-emerald-600); font-weight: var(--fw-semibold); }
.prose strong { color: var(--color-ink-900); }

/* ---- In-article eBook / process plug ---- */
.article-plug {
  background: var(--color-emerald-50);
  border: 1px solid var(--color-emerald-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.article-plug p { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--color-ink-800); }
.article-plug p:last-child, .article-plug .btn-link { margin-bottom: 0; }

/* ---- Back link above article titles ---- */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

/* ---- Contact page ---- */
.contact-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
}
.contact-aside { display: grid; gap: var(--space-5); }
.contact-aside .card { padding: var(--space-5); }
.contact-aside h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.contact-aside p { margin: 0 0 var(--space-3); font-size: var(--fs-small); }
.contact-aside p:last-child { margin-bottom: 0; }
.contact-aside ol { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.contact-aside ol li::marker { color: var(--color-emerald-600); font-weight: var(--fw-bold); }
.contact-line { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.contact-line .ico { color: var(--color-emerald-600); display: grid; flex: none; }
.contact-line .ico svg { width: 18px; height: 18px; }

/* ---- Thank-you download panel ---- */
.download-panel {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6);
}
.download-panel .dl-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-emerald-100);
  color: var(--color-emerald-700);
  display: grid; place-items: center;
}
.download-panel .dl-icon svg { width: 30px; height: 30px; }