/* ============================================================
   Perks + Provisions — Editorial design system (v2)
   Based on Claude Design tokens + editorial direction
   ============================================================ */

:root {
  /* Core palette — espresso + cream + brass */
  --espresso-950: #1a110b;
  --espresso-900: #22160e;
  --espresso-800: #2e1d12;
  --espresso-700: #3d2817;
  --espresso-600: #4d321c;
  --espresso-500: #5e3d22;

  --cream-50: #faf6ef;
  --cream-100: #f4ece0;
  --cream-200: #ece0cc;
  --cream-300: #e0cfae;

  --brass-600: #a67324;
  --brass-500: #c9902f;
  --brass-400: #e0ae4c;
  --brass-300: #ecc27a;

  --maroon-950: #2a0910;
  --maroon-900: #3d0e18;
  --maroon-800: #521422;
  --maroon-700: #6a1a2c;
  --maroon-600: #8c1f33;

  --forest-900: #14302a;
  --forest-800: #1d4038;
  --forest-700: #28594e;
  --forest-600: #367568;

  --ink-900: #181511;
  --ink-700: #3d342a;
  --ink-500: #6b5e4e;
  --ink-400: #8a7c6a;
  --ink-300: #b3a694;

  --line: rgba(26,17,11,0.10);
  --line-strong: rgba(26,17,11,0.18);
  --line-on-dark: rgba(244,236,224,0.14);

  --font-display: 'Lora', 'Source Serif 4', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(26,17,11,0.05), 0 2px 6px rgba(26,17,11,0.04);
  --shadow-md: 0 2px 4px rgba(26,17,11,0.06), 0 10px 28px rgba(26,17,11,0.08);
  --shadow-lg: 0 4px 10px rgba(26,17,11,0.08), 0 24px 48px rgba(26,17,11,0.12);

  --container: 1280px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Prevent fixed-positioned third-party widgets (reCAPTCHA v3 badge, which
   parks itself at right:-186px) from triggering a horizontal scrollbar.
   `clip` is preferred over `hidden` so it doesn't establish a new scroll
   container — fixed elements still render in their normal viewport spot. */
body { overflow-x: clip; }
body.ed {
  margin: 0;
  background: var(--cream-50);
  color: var(--espresso-900);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
}
body.ed * { box-sizing: border-box; }
body.ed a { color: inherit; text-decoration: none; }

/* Keyboard focus ring — ADA compliance for keyboard navigation */
body.ed :focus { outline: none; }
body.ed :focus-visible {
  outline: 2px solid var(--brass-400);
  outline-offset: 2px;
  border-radius: 2px;
}
body.ed .ed-nav-cta:focus-visible,
body.ed .ed-btn-dark:focus-visible,
body.ed .ed-btn-outline:focus-visible,
body.ed .ed-btn-outline-dark:focus-visible,
body.ed .ed-btn-primary:focus-visible { outline-offset: 3px; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body.ed *, body.ed *::before, body.ed *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Button color overrides (higher specificity than body.ed a) */
body.ed a.ed-btn-dark,
body.ed a.ed-nav-cta,
body.ed a.ed-btn-outline-dark,
body.ed button.ed-btn-dark,
body.ed button.ed-nav-cta { color: #ffffff; }
body.ed a.ed-btn-dark:hover,
body.ed a.ed-nav-cta:hover,
body.ed button.ed-btn-dark:hover,
body.ed button.ed-nav-cta:hover { color: #ffffff; }
body.ed a.ed-btn-outline { color: var(--forest-700); }
body.ed a.ed-btn-outline:hover { color: #ffffff; }
body.ed a.ed-btn-outline-dark:hover { color: var(--brass-300); }
body.ed img, body.ed picture, body.ed svg { display: block; max-width: 100%; }
body.ed button { font-family: var(--font-body); cursor: pointer; }
body.ed h1, body.ed h2, body.ed h3 { margin: 0; }
body.ed .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   Nav
   ============================================================ */
.ed-topbar {
  background: var(--espresso-950);
  color: var(--cream-200);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.ed-topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ed-topbar a { color: var(--cream-100); font-weight: 500; }
.ed-topbar a:hover { color: var(--brass-400); }
.ed-topbar-social { display: flex; gap: 12px; }
.ed-topbar-social a svg { fill: currentColor; opacity: .8; }
.ed-topbar-social a:hover svg { opacity: 1; }

.ed-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,246,239,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.ed-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.ed-logo {
  display: inline-flex;
  align-items: center;
  color: var(--espresso-900);
  font-family: var(--font-display);
}
.ed-logo-mark { font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.ed-logo-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 99px;
  background: var(--brass-500);
  margin: 0 7px;
}
.ed-logo-italic { font-weight: 300; font-style: italic; font-size: 22px; }
.ed-logo-img {
  height: 52px;
  width: auto;
  display: block;
}
.ed-footer-logo-img {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}
.ed-footer-logo { margin-bottom: 0; }

.ed-nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.ed-nav-links a {
  font-size: 16px;
  color: var(--ink-700);
  font-weight: 500;
  transition: color 160ms;
}
.ed-nav-links a:hover { color: var(--espresso-900); }

.ed-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ed-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--espresso-900);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ed-nav-cta {
  background: var(--forest-600);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background 160ms;
}
.ed-nav-cta:hover { background: var(--forest-700); color: #ffffff; }

.ed-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 8px 10px;
  cursor: pointer;
}
.ed-nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--espresso-900);
  margin: 3px 0;
  border-radius: 2px;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.ed-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 600;
}
.ed-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--brass-500);
}
.ed-eyebrow-brass { color: var(--brass-600); font-weight: 700; }
.ed-eyebrow-brass::before { background: var(--brass-500); }

.ed-h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 24px 0 28px;
  color: var(--espresso-950);
}
.ed-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-600);
}
.ed-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--espresso-950);
}
.ed-h2 em { font-style: italic; font-weight: 400; color: var(--brass-600); }
.ed-h2-dark { color: var(--cream-50); }
.ed-h2-dark em { color: var(--brass-400); }

.ed-lede {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-700);
  line-height: 1.65;
  font-weight: 350;
}

/* ============================================================
   Hero — photo background with fade to cream on left
   ============================================================ */
.ed-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream-50);
  padding: 0;
  max-width: none;
}
.ed-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ed-hero-bg picture, .ed-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
/* Fade from solid cream on left → transparent toward right, so headline is readable
   and image is visible as a backdrop under the quote card. */
.ed-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--cream-50) 0%,
      var(--cream-50) 28%,
      rgba(250,246,239,0.85) 45%,
      rgba(250,246,239,0.35) 62%,
      rgba(250,246,239,0) 78%),
    linear-gradient(180deg,
      rgba(250,246,239,0.1) 0%,
      rgba(250,246,239,0) 40%,
      rgba(26,17,11,0.12) 100%);
}
.ed-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 40px 48px;
}
.ed-hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 56px;
  align-items: start;
}
.ed-hero-left { padding-top: 12px; }
.ed-hero-lede { max-width: 520px; text-wrap: pretty; }
.ed-hero-right { display: block; }

/* Stacked hero: text on top-left, quote card floats right-side mid/upper (keeps faces visible) */
.ed-hero-stack .ed-hero-inner {
  position: relative;
  min-height: clamp(580px, 75vh, 780px);
  padding: 56px 40px 80px;
}
.ed-hero-stack .ed-hero-text {
  max-width: 640px;
  padding-top: 8px;
}
.ed-hero-stack .ed-hero-quote-dock {
  position: absolute;
  right: 40px;
  bottom: 120px;       /* raised well above the hero floor */
  width: clamp(360px, 34vw, 420px);
}
.ed-hero-stack .ed-hero-quote-dock .ed-quote-card {
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.ed-hero-stack .ed-hero-quote-dock .ed-quote-label { font-size: 16px; margin-bottom: 14px; }
.ed-hero-stack .ed-hero-quote-dock .ed-chip { padding: 8px 12px; font-size: 13px; }
/* Fade adjustments for stacked hero — add bottom darkening so quote card sits over a darker base */
.ed-hero-stack .ed-hero-bg::after {
  background:
    linear-gradient(90deg,
      var(--cream-50) 0%,
      var(--cream-50) 22%,
      rgba(250,246,239,0.82) 40%,
      rgba(250,246,239,0.3) 58%,
      rgba(250,246,239,0) 74%),
    linear-gradient(180deg,
      rgba(250,246,239,0.05) 0%,
      rgba(250,246,239,0) 42%,
      rgba(26,17,11,0.22) 100%);
}

.ed-hero-stats {
  display: flex;
  gap: 44px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.ed-stat-n {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--espresso-900);
  line-height: 1;
}
.ed-stat-label {
  font-size: 11px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  font-weight: 600;
}

/* Quote card (dark in hero) */
.ed-quote-card {
  background: var(--espresso-950);
  color: var(--cream-50);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.ed-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ed-quote-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass-400);
}
.ed-quote-step {
  font-size: 12px;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.ed-quote-progress {
  height: 3px;
  background: rgba(244,236,224,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 22px;
}
.ed-quote-progress-fill {
  height: 100%;
  background: var(--brass-400);
  transition: width 300ms cubic-bezier(0.22,1,0.36,1);
  width: 33.33%;
}
.ed-quote-label {
  display: block;
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--cream-50);
  letter-spacing: -0.01em;
}
.ed-quote-label-hint { color: var(--ink-400); font-weight: 400; }

.ed-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-chip {
  background: transparent;
  border: 1px solid var(--line-on-dark);
  color: var(--cream-100);
  padding: 10px 14px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  transition: all 160ms;
}
.ed-chip:hover { border-color: var(--brass-400); color: var(--brass-300); }
.ed-chip.active, .ed-chip[aria-pressed="true"] {
  background: var(--brass-400);
  border-color: var(--brass-400);
  color: var(--espresso-950);
}
.ed-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.ed-chip-grid .ed-chip {
  border-radius: var(--r-md);
  text-align: left;
}

.ed-quote-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--cream-50);
  padding: 10px 0;
  font-size: 17px;
  outline: none;
  font-family: var(--font-body);
  margin-bottom: 4px;
}
.ed-quote-input::placeholder { color: var(--ink-300); }
.ed-quote-input:focus { border-bottom-color: var(--brass-400); }

.ed-btn-primary {
  background: var(--brass-400);
  color: var(--espresso-950);
  border: none;
  padding: 14px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  margin-top: 4px;
  letter-spacing: -0.01em;
  transition: background 160ms;
}
.ed-btn-primary:hover:not(:disabled) { background: var(--brass-300); }
.ed-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.ed-btn-ghost {
  background: transparent;
  color: var(--cream-200);
  border: 1px solid var(--line-on-dark);
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
}
.ed-btn-ghost:hover { color: var(--cream-50); border-color: var(--cream-100); }

.ed-quote-fine {
  font-size: 12px;
  color: var(--ink-300);
  margin: 16px 0 0;
  line-height: 1.5;
}

.ed-quote-success {
  text-align: center;
  padding: 20px 0;
}
.ed-quote-success .ed-quote-badge {
  color: var(--success, #1f6d4a);
  background: rgba(31,109,74,0.2);
  padding: 4px 10px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Logo bar */
.ed-logobar {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ed-logobar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 600;
  white-space: nowrap;
}
.ed-logobar-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.ed-logobar-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-400);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============================================================
   Sections
   ============================================================ */
.ed-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 40px;
}
.ed-section-dark {
  background: var(--espresso-950);
  color: var(--cream-50);
  padding: 120px 0;
  margin-top: 24px;
}
.ed-section-dark .ed-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.ed-section-cream {
  background: var(--cream-100);
  padding: 96px 0;
}
.ed-section-cream .ed-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.ed-section-header { margin-bottom: 48px; max-width: 720px; }
.ed-section-lede {
  font-size: 18px;
  color: var(--ink-700);
  line-height: 1.55;
  margin-top: 22px;
  text-wrap: pretty;
}

/* ============================================================
   Services grid (editorial cards)
   ============================================================ */
.ed-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ed-service-card {
  background: var(--cream-50);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 200ms;
  color: inherit;
  min-height: 260px;
}
.ed-service-card:hover { background: var(--cream-100); }
.ed-service-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--espresso-900);
  color: var(--brass-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
}
.ed-service-name {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--espresso-950);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.ed-service-body {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.ed-service-arrow {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--brass-600);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

/* ============================================================
   Brand showcase (monogram grid)
   ============================================================ */
.ed-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ed-brand-tile {
  background: var(--cream-50);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  transition: background 160ms;
}
.ed-brand-tile:hover { background: var(--cream-100); }
.ed-brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--espresso-900);
  color: var(--brass-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
}
.ed-brand-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 14px;
  object-fit: contain;
  object-position: left center;
}
.ed-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--espresso-950);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.ed-brand-tag {
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* ============================================================
   Metros (service areas) on homepage
   ============================================================ */
.ed-metros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ed-metro-card {
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  transition: transform 160ms, border-color 160ms, box-shadow 160ms;
  display: block;
  color: inherit;
}
.ed-metro-card:hover {
  transform: translateY(-2px);
  border-color: var(--brass-500);
  box-shadow: var(--shadow-md);
}
.ed-metro-name {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--espresso-950);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.ed-metro-cities {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0 0 16px;
}
.ed-metro-link {
  font-size: 13px;
  color: var(--brass-600);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================================
   Big problem (dark) section
   ============================================================ */
.ed-problem-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: start;
}
.ed-big-stat {
  padding: 22px 0;
  border-top: 1px solid var(--line-on-dark);
}
.ed-big-stat:last-child { padding-bottom: 0; }
.ed-big-stat-n {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 500;
  color: var(--brass-400);
  line-height: 0.95;
}
.ed-big-stat-label {
  color: var(--cream-200);
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
}
.ed-btn-outline-dark {
  background: transparent;
  border: 1px solid var(--line-on-dark);
  color: #ffffff;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 32px;
  display: inline-block;
  cursor: pointer;
}
.ed-btn-outline-dark:hover { border-color: var(--brass-400); color: var(--brass-300); }

/* ============================================================
   Testimonial
   ============================================================ */
.ed-testimonial {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
.ed-quote-mark {
  position: absolute;
  top: -40px;
  left: -10px;
  font-family: var(--font-display);
  font-size: 180px;
  color: var(--brass-400);
  line-height: 0.8;
  opacity: 0.35;
  pointer-events: none;
}
.ed-testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--espresso-950);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
  position: relative;
}
.ed-testimonial-text em { font-style: italic; }
.ed-testimonial-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}
.ed-testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--espresso-900);
  color: var(--brass-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-display);
}
.ed-testimonial-name { font-weight: 600; color: var(--ink-900); }
.ed-testimonial-role { color: var(--ink-500); font-size: 13px; }

/* ============================================================
   Final CTA
   ============================================================ */
.ed-final-cta {
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 40px;
}
.ed-h2-final {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
  color: var(--espresso-950);
}
.ed-btn-dark {
  background: var(--forest-600);
  color: #ffffff;
  border: none;
  padding: 16px 28px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-block;
  cursor: pointer;
  transition: background 160ms;
}
.ed-btn-dark:hover { background: var(--forest-700); color: #ffffff; }
.ed-btn-outline {
  background: transparent;
  color: var(--forest-700);
  border: 1px solid var(--forest-600);
  padding: 16px 28px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-block;
  cursor: pointer;
  margin-left: 10px;
  transition: background 160ms, color 160ms;
}
.ed-btn-outline:hover { background: var(--forest-600); color: #ffffff; }

/* ============================================================
   Footer
   ============================================================ */
.ed-footer {
  background: var(--espresso-950);
  color: var(--cream-200);
  padding: 72px 0 40px;
}
.ed-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
}
.ed-footer-about { max-width: 340px; }
.ed-footer-logo {
  display: inline-flex;
  align-items: center;
  color: var(--cream-50);
  margin-bottom: 18px;
}
.ed-footer-logo .ed-logo-mark, .ed-footer-logo .ed-logo-italic { font-size: 24px; }
.ed-footer-about p { font-size: 14px; line-height: 1.6; margin: 0 0 24px; }
.ed-footer-addr { font-size: 14px; line-height: 1.8; color: var(--cream-200); }
.ed-footer-addr strong { color: var(--cream-50); font-weight: 600; }
.ed-footer-col-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--cream-50);
  font-weight: 500;
  margin: 0 0 16px;
}
.ed-footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-footer-col ul a {
  font-size: 14px;
  color: var(--cream-200);
  transition: color 160ms;
}
.ed-footer-col ul a:hover { color: var(--brass-300); }
.ed-footer-bottom {
  max-width: var(--container);
  margin: 56px auto 0;
  padding: 20px 40px 0;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-300);
}
.ed-footer-bottom a { color: var(--ink-300); }
.ed-footer-bottom a:hover { color: var(--cream-100); }
.ed-footer-bottom-links { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .ed-pservices-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-nav-inner { padding: 14px 24px; }
  .ed-nav-links { display: none; }
  .ed-nav-toggle { display: inline-block; }
  .ed-hero-inner { padding: 40px 24px; }
  .ed-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ed-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(250,246,239,0.6) 0%,
      rgba(250,246,239,0.85) 40%,
      rgba(250,246,239,0.9) 100%);
  }
  .ed-quote-card { position: static; }
  /* Revert absolute positioning for mobile — card flows after text.
     Keep position:relative so z-index:1 wins over the absolutely-positioned bg image. */
  .ed-hero-stack .ed-hero-inner { min-height: auto; padding: 40px 24px; position: relative; }
  .ed-hero-stack .ed-hero-quote-dock {
    position: static;
    width: 100%;
    margin-top: 32px;
  }
  .ed-section { padding: 72px 24px; }
  .ed-section-dark, .ed-section-cream { padding: 80px 0; }
  .ed-section-dark .ed-inner, .ed-section-cream .ed-inner { padding: 0 24px; }
  .ed-problem-grid { grid-template-columns: 1fr; gap: 48px; }
  .ed-services-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-brand-grid { grid-template-columns: repeat(3, 1fr); }
  .ed-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding: 0 24px; }
  .ed-final-cta { padding: 80px 24px; }
  .ed-hero-stats { gap: 28px; }
}
@media (max-width: 640px) {
  .ed-topbar-inner { padding: 8px 16px; font-size: 11px; }
  .ed-topbar-contact a { font-size: 13px; font-weight: 700; }
  .ed-nav-inner { padding: 12px 16px; gap: 12px; }
  .ed-nav-right .ed-phone { display: none; }
  .ed-hero-inner { padding: 28px 16px; }
  .ed-hero-stats { gap: 20px; flex-wrap: wrap; }
  .ed-section { padding: 56px 16px; }
  .ed-section-dark, .ed-section-cream { padding: 64px 0; }
  .ed-section-dark .ed-inner, .ed-section-cream .ed-inner { padding: 0 16px; }
  .ed-services-grid, .ed-brand-grid { grid-template-columns: 1fr; }
  .ed-pservices-grid { grid-template-columns: 1fr; gap: 20px; }
  .ed-split { grid-template-columns: 1fr; gap: 36px; }
  .ed-split-reverse { direction: ltr; }
  .ed-blog-grid { grid-template-columns: 1fr; gap: 28px; }
  .ed-truststrip-inner { padding: 0 16px; gap: 20px; }
  .ed-truststrip-logos { gap: 24px; }
  .ed-truststrip-logos img { height: 18px; }
  .ed-testimonial { padding: 0 16px; }
  .ed-quote-mark { font-size: 100px; top: -20px; left: 0; }
  .ed-footer { padding: 56px 0 32px; }
  .ed-footer-inner { grid-template-columns: 1fr; padding: 0 16px; }
  .ed-footer-bottom { padding: 20px 16px 0; }
  .ed-final-cta { padding: 64px 16px; }
  .ed-nav-cta { padding: 8px 14px; font-size: 13px; }
  .ed-chip-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Image bands, photo cards, and media utilities
   ============================================================ */
.ed-image-band {
  width: 100%;
  margin: 24px 0;
  overflow: hidden;
}
.ed-image-band.full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.ed-image-band picture, .ed-image-band img {
  width: 100%;
  height: clamp(280px, 40vw, 520px);
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.ed-image-band.tall picture, .ed-image-band.tall img {
  height: clamp(420px, 55vw, 680px);
}
.ed-image-band.short picture, .ed-image-band.short img {
  height: clamp(200px, 28vw, 340px);
}

/* Editorial split: image + text side-by-side */
.ed-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ed-split-reverse { direction: rtl; }
.ed-split-reverse > * { direction: ltr; }
.ed-split-media {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--cream-200);
}
.ed-split-media picture, .ed-split-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ed-split-body { max-width: 500px; }

/* Photo-led service card */
.ed-pservices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ed-pservice {
  background: var(--cream-50);
  border-radius: var(--r-md);
  overflow: hidden;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
  border: 1px solid var(--line);
}
.ed-pservice:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass-500);
}
.ed-pservice-media {
  aspect-ratio: 4 / 3;
  background: var(--cream-200);
  overflow: hidden;
  position: relative;
}
.ed-pservice-media picture, .ed-pservice-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms;
}
.ed-pservice:hover .ed-pservice-media img { transform: scale(1.03); }
.ed-pservice-mark {
  position: absolute;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--espresso-950);
  color: var(--brass-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.ed-pservice-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-pservice-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--espresso-950);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.ed-pservice-body p {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.55;
  margin: 0;
}
.ed-pservice-arrow {
  font-size: 13px;
  color: var(--brass-600);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Trust strip with actual logos */
.ed-truststrip {
  background: var(--cream-100);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.ed-truststrip-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.ed-truststrip-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 700;
  white-space: nowrap;
}
.ed-truststrip-logos {
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.ed-truststrip-logos img {
  height: 22px;
  width: auto;
  max-width: 200px;
  opacity: 0.55;
  transition: opacity 160ms;
}
.ed-truststrip-logos img:hover { opacity: 0.85; }

/* Real brand SVGs ship with their own colors — don't fade them as hard.
   Circular monograms (P&G) render slightly taller to balance against
   the wordmark logos visually. */
.ed-truststrip-logos img.ed-truststrip-mark {
  height: 24px;
  opacity: 0.85;
}
.ed-truststrip-logos img.ed-truststrip-mark:hover { opacity: 1; }
.ed-truststrip-logos img.ed-truststrip-mark--round { height: 30px; }
@media (max-width: 640px) {
  .ed-truststrip-logos img.ed-truststrip-mark { height: 20px; }
  .ed-truststrip-logos img.ed-truststrip-mark--round { height: 24px; }
}

/* Blog teaser */
.ed-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.ed-blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
}
.ed-blog-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-200);
}
.ed-blog-media picture, .ed-blog-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms;
}
.ed-blog-card:hover .ed-blog-media img { transform: scale(1.03); }
.ed-blog-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 600;
}
.ed-blog-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--espresso-950);
  font-weight: 500;
  margin: 0;
}
.ed-blog-card:hover .ed-blog-title { color: var(--brass-600); }

/* Testimonial with photo background band */
.ed-testimonial-bg {
  position: relative;
  overflow: hidden;
}
.ed-testimonial-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center 35%;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.ed-testimonial-bg .ed-inner { position: relative; z-index: 1; }

/* ============================================================
   Article body (blog posts)
   ============================================================ */
.ed-post-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-900);
}
.ed-post-body p {
  margin: 0 0 20px;
  text-wrap: pretty;
}
.ed-post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--espresso-950);
  margin: 48px 0 16px;
}
.ed-post-body h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--espresso-950);
  margin: 36px 0 12px;
}
.ed-post-body ul,
.ed-post-body ol {
  margin: 0 0 24px;
  padding-left: 28px;
}
.ed-post-body li {
  margin-bottom: 8px;
}
.ed-post-body li::marker {
  color: var(--brass-600);
}
.ed-post-body a {
  color: var(--forest-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms;
}
.ed-post-body a:hover { color: var(--forest-600); }
.ed-post-body strong { font-weight: 600; color: var(--espresso-900); }
.ed-post-body blockquote {
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--brass-500);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--espresso-900);
  line-height: 1.5;
}
.ed-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 28px 0;
}
.ed-post-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* Compact hero for article pages — smaller padding */
.ed-hero-compact .ed-hero-inner {
  padding: 48px 40px 56px;
  min-height: auto;
}

/* Mobile nav overlay */
.ed-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--cream-50);
  z-index: 60;
  padding: 24px 24px 40px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.ed-mobile-nav.open { display: flex; }
.ed-mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.ed-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
}
.ed-mobile-nav-links a {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--espresso-950);
  font-weight: 400;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: block;
  letter-spacing: -0.02em;
}
.ed-mobile-nav-footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   FAQ accordion (used on service + service-areas pages)
   Card-style rows with prominent circular toggle button
   ============================================================ */
.ed-faq {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ed-faq-item {
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.ed-faq-item:hover {
  border-color: var(--brass-500);
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 17, 11, 0.04);
}
.ed-faq-item[open] {
  border-color: var(--brass-500);
  background: #fff;
  box-shadow: 0 4px 16px rgba(26, 17, 11, 0.06);
}

.ed-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 72px 22px 24px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 500;
  color: var(--espresso-950);
  letter-spacing: -0.01em;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ed-faq-item summary::-webkit-details-marker { display: none; }
.ed-faq-item summary::marker { display: none; }

/* Circular brass + button — strongly signals "click me" */
.ed-faq-item summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat,
    var(--cream-100);
  color: var(--espresso-900);
  border: 1px solid var(--line);
  transform: translateY(-50%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 200ms, border-color 200ms;
  flex-shrink: 0;
}
.ed-faq-item:hover summary::after {
  background-color: var(--brass-400);
  border-color: var(--brass-500);
  color: var(--espresso-950);
}
.ed-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--brass-500);
  border-color: var(--brass-600);
  color: var(--cream-50);
}

.ed-faq-item summary:focus-visible {
  outline: 2px solid var(--brass-400);
  outline-offset: -1px;
}

.ed-faq-answer {
  padding: 4px 24px 22px;
  max-width: 720px;
  animation: ed-faq-fade 280ms ease-out;
}
.ed-faq-answer p {
  font-size: 15.5px;
  color: var(--ink-700);
  line-height: 1.7;
  margin: 0;
}
@keyframes ed-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-faq-answer { animation: none; }
  .ed-faq-item summary::after { transition: none; }
}

@media (max-width: 640px) {
  .ed-faq { margin: 28px 0 0; gap: 10px; }
  .ed-faq-item summary { font-size: 16px; padding: 18px 60px 18px 18px; }
  .ed-faq-item summary::after { width: 28px; height: 28px; right: 14px; background-size: 12px 2px, 2px 12px, auto; }
  .ed-faq-answer { padding: 2px 18px 18px; }
  .ed-faq-answer p { font-size: 15px; }
}

/* ============================================================
   Responsive overrides — must follow the grid base rules
   (pservices, blog, split are declared after the earlier @media
   blocks, so their mobile collapses go here)
   ============================================================ */
@media (max-width: 1024px) {
  .ed-pservices-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-split { grid-template-columns: 1fr; gap: 36px; }
  .ed-split-reverse { direction: ltr; }
  .ed-split-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .ed-pservices-grid { grid-template-columns: 1fr; gap: 20px; }
  .ed-blog-grid { grid-template-columns: 1fr; gap: 28px; }
  .ed-brand-grid { grid-template-columns: 1fr; }
  .ed-services-grid { grid-template-columns: 1fr; }
}