/* ============================================
   NORTHRIDGE PHOTO STUDIO — STYLES
   Editorial · warm · minimal · conversion-focused
   ============================================ */

/* -- Tokens -- */
:root {
  --espresso: #2a2520;
  --espresso-deep: #1f1b17;
  --clay: #8a6f5c;
  --clay-soft: #a68a76;
  --sand: #d4c4b0;
  --sand-light: #e6dccb;
  --cream: #f5f0ea;
  --ivory: #fbf8f4;
  --charcoal: #3a342f;
  --muted: #7a716a;
  --hairline: rgba(42, 37, 32, 0.12);
  --hairline-light: rgba(245, 240, 234, 0.18);

  --serif: 'Liberation Serif', 'Tinos', 'Times New Roman', Times, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 1280px;
  --container-narrow: 920px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 160px;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;

  --transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  background: var(--sand-light);
}

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

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

/* -- Typography -- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--espresso);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-5);
}

h1 {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
}

p {
  margin: 0 0 var(--space-4);
  color: var(--charcoal);
}

p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin: 0 0 var(--space-5);
}

.eyebrow--light { color: var(--sand); }

.text-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--espresso);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 4px;
  transition: color var(--transition), border-color var(--transition);
}
.text-link:hover { color: var(--clay); border-color: var(--espresso); }

.text-link--light {
  color: var(--cream);
  border-color: var(--sand);
}
.text-link--light:hover { color: var(--sand); border-color: var(--cream); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--espresso);
  color: var(--cream);
  padding: 12px 16px;
  z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* -- Container -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-7); }
}

/* -- Buttons -- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

.button--primary {
  background: var(--espresso);
  color: var(--cream);
}
.button--primary:hover {
  background: var(--clay);
  color: var(--cream);
}

.button--secondary {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.button--secondary:hover {
  background: var(--espresso);
  color: var(--cream);
}

.button--ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--clay);
}
.button--ghost:hover {
  background: var(--clay);
  color: var(--cream);
  border-color: var(--clay);
}

.button--ghost-light {
  color: var(--cream);
  border-color: var(--sand);
}
.button--ghost-light:hover {
  background: var(--sand);
  color: var(--espresso);
  border-color: var(--sand);
}

/* Light button used on dark espresso section backgrounds
   (Final CTA, Marketing Advantage, Footer Book CTA).
   :link / :visited explicitly set so default browser
   link colors cannot pale the text. font-weight 700
   gives stronger glyph weight at the 14px uppercase
   mobile scale. Hover lifts to ivory (not sand) to
   keep contrast in the high-contrast zone — text
   stays espresso in every interactive state. */
.button--cream,
.button--cream:link,
.button--cream:visited {
  background: var(--cream);
  color: var(--espresso);
  font-weight: 700;
}
.button--cream:hover,
.button--cream:active {
  background: var(--ivory);
  color: var(--espresso);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

/* ============================================
   NAVIGATION
============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .nav-inner { padding: var(--space-5) var(--space-7); }
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* Header logo — compact SVG below 1024px (where the
   hamburger appears), horizontal SVG at 1024px+ where
   the full desktop nav is shown. The <picture> source
   in the HTML controls which file actually loads;
   these rules control rendered height and proportions. */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  /* Override the global `img { background: var(--sand-light) }`
     rule — that rule is a placeholder bg for portfolio /
     content images during load, but transparent PNG logos
     would otherwise show that sand color through their
     transparent areas as a visible box. */
  background: transparent;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .brand-logo {
    height: 40px;
  }
}

.nav-primary {
  display: none;
}
.nav-primary ul {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.nav-primary a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color var(--transition);
}
.nav-primary a:hover { color: var(--clay); }

@media (min-width: 1024px) {
  .nav-primary { display: block; }
}

.nav-cta {
  display: none;
  padding: 12px 22px;
  font-size: 12px;
}

@media (min-width: 1024px) {
  .nav-cta {
    display: inline-flex;
    background: transparent;
    color: var(--espresso);
    border: 1px solid var(--espresso);
  }
}

@media (min-width: 1024px) {
  .nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-7);
  }
  .brand {
    flex-basis: 100%;
  }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--espresso);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-mobile {
  position: fixed;
  inset: 78px 0 0 0;
  background: var(--espresso);
  padding: var(--space-7) var(--space-6);
  z-index: 99;
}
.nav-mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.nav-mobile a {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--cream);
  display: block;
  padding: var(--space-2) 0;
}
.nav-mobile-cta { width: 100%; }

@media (min-width: 1024px) {
  .nav-mobile { display: none !important; }
}

/* ============================================
   1. HERO
============================================ */
.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-11);
  background: var(--cream);
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-9);
    padding-bottom: var(--space-12);
  }
}

/* Tighter transition into the trust strip below the hero.
   Applied on the homepage, service pages, and location pages
   (every page that has a hero followed by a trust strip).
   Hero top padding is unchanged. */
.page-home .hero,
.page-service .hero,
.page-location .hero {
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .page-home .hero,
  .page-service .hero,
  .page-location .hero {
    padding-bottom: var(--space-9);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
  }
}

.hero-content {
  order: 2;
}
@media (min-width: 900px) { .hero-content { order: 1; } }

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--charcoal);
  max-width: 560px;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.location-line {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-6);
  letter-spacing: 0.01em;
  max-width: 540px;
}

.hero-media {
  order: 1;
  position: relative;
}
@media (min-width: 900px) { .hero-media { order: 2; } }

.hero-media img {
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Full-bleed hero variant — homepage only. Other pages keep
   the split .hero-grid layout above. Text treatment reuses
   the same dark-theme colors as .final-cta (var(--espresso)
   background, var(--cream)/var(--sand-light)/var(--clay-soft)
   text) so nothing new/untested is introduced. */
.hero--fullbleed {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--espresso);
}

.hero-fullbleed-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-fullbleed-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fullbleed-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 27, 23, 0.78) 0%, rgba(31, 27, 23, 0.5) 45%, rgba(31, 27, 23, 0.85) 100%);
}

.hero-fullbleed-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding-top: var(--space-11);
  padding-bottom: var(--space-11);
}

@media (min-width: 768px) {
  .hero-fullbleed-content {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

.hero-fullbleed-content h1 { color: var(--cream); }
.hero-fullbleed-content .hero-sub { color: var(--sand-light); }
.hero-fullbleed-content .location-line { color: var(--clay-soft); }

/* ============================================
   2. TRUST STRIP
============================================ */
.trust-strip {
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-5) 0;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

.trust-item {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.trust-item:not(:last-child) {
  position: relative;
  padding-right: var(--space-6);
}
.trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--hairline);
  display: none;
}

@media (min-width: 1024px) {
  .trust-item:not(:last-child)::after { display: block; }
}

.stars {
  color: var(--clay);
  letter-spacing: 0.1em;
  font-size: 14px;
}

/* ============================================
   3. ROUTING (asymmetrical bento)
============================================ */
.routing {
  background: var(--ivory);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .routing { padding: var(--space-11) 0; }
}

.routing-intro {
  max-width: 720px;
  margin-bottom: var(--space-9);
}

.routing-intro p {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--charcoal);
}

.routing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .routing-grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "feature wedding"
      "feature sports";
    gap: var(--space-6);
    min-height: 880px;
  }
}

.routing-card {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition);
}

.routing-card:hover { transform: translateY(-2px); }

.routing-card--feature {
  grid-area: feature;
}

.routing-card:nth-child(2) { grid-area: wedding; }
.routing-card:nth-child(3) { grid-area: sports; }

.routing-card-media {
  overflow: hidden;
  background: var(--sand-light);
}

.routing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  aspect-ratio: 4 / 3;
}

.routing-card--feature .routing-card-media img {
  aspect-ratio: 4 / 5;
}

.routing-card:hover .routing-card-media img { transform: scale(1.03); }

.routing-card-body {
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.routing-card--feature .routing-card-body {
  padding: var(--space-8) var(--space-7);
}

.routing-card-body .eyebrow { margin-bottom: var(--space-3); }

.routing-card-body h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin-bottom: var(--space-4);
}

.routing-card--feature .routing-card-body h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: var(--space-5);
}

.routing-card-body p {
  color: var(--charcoal);
  font-size: 15px;
  margin-bottom: var(--space-5);
}

.mini-services {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-6);
}

.mini-services li {
  font-size: 14px;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}
.mini-services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--clay);
}

.routing-card-body .cta-row {
  margin-top: auto;
  margin-bottom: 0;
}

/* ============================================
   4. FEATURED SERVICES (cascade)
============================================ */
.featured {
  background: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .featured { padding: var(--space-11) 0; }
}

.featured h2 { margin-bottom: var(--space-9); max-width: 720px; }

.feature-row {
  margin-bottom: var(--space-9);
}
.feature-row:last-child { margin-bottom: 0; }

.feature-row--feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .feature-row--feature {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-9);
  }
}

.feature-row-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.feature-row-body h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  margin-bottom: var(--space-5);
}

.feature-row-body p {
  font-size: 1rem;
  margin-bottom: var(--space-6);
  max-width: 480px;
}

.feature-row--two-asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .feature-row--two-asym {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
  }
}

.feature-row--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 700px) {
  .feature-row--two {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-card {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feature-card-media {
  overflow: hidden;
  background: var(--sand-light);
}

.feature-card-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.feature-card:hover .feature-card-media img { transform: scale(1.03); }

/* Homepage service cards: subtle hover/focus polish.
   These selectors are only used on index.html, so the effect is homepage-scoped.
   Preserves the existing routing-card lift and the existing image zoom behavior. */
.routing-card,
.feature-row--feature,
.feature-card {
  transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
  .routing-card:hover,
  .feature-row--feature:hover,
  .feature-card:hover {
    box-shadow:
      0 0 0 1px rgba(138, 111, 92, 0.18),
      0 8px 24px -10px rgba(42, 37, 32, 0.18);
  }
}

.routing-card:focus-within,
.feature-row--feature:focus-within,
.feature-card:focus-within {
  box-shadow:
    0 0 0 1px rgba(138, 111, 92, 0.18),
    0 8px 24px -10px rgba(42, 37, 32, 0.18);
}

.feature-card--large .feature-card-media img {
  aspect-ratio: 4 / 5;
}

.feature-card-body {
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-card--large .feature-card-body {
  padding: var(--space-7) var(--space-7) var(--space-8);
}

.feature-card-body h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.625rem);
  margin-bottom: var(--space-4);
}

.feature-card--large .feature-card-body h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
}

.feature-card-body p {
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: var(--space-5);
}

.feature-card-body .button {
  margin-top: auto;
  align-self: flex-start;
}

/* ============================================
   5. MARKETING ADVANTAGE
============================================ */
.advantage {
  background: var(--espresso);
  color: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .advantage { padding: var(--space-11) 0; }
}

.advantage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

@media (min-width: 900px) {
  .advantage-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-10);
  }
}

/* Modifier for an advantage-grid with no media column,
   so the text fills the full width instead of leaving a gap. */
.advantage-grid--text-only {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .advantage-grid--text-only { grid-template-columns: 1fr; }
}

.advantage-content h2 {
  color: var(--cream);
  margin-bottom: var(--space-6);
}

.advantage-content p {
  color: var(--sand-light);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-bottom: var(--space-5);
}

.advantage-pivot {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important;
  color: var(--sand) !important;
  padding-left: var(--space-5);
  border-left: 2px solid var(--clay);
  margin: var(--space-6) 0 !important;
}

.advantage-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-7) 0;
}

.advantage-list li {
  font-size: 14px;
  color: var(--sand);
  padding-left: 18px;
  position: relative;
  letter-spacing: 0.02em;
}

.advantage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--clay-soft);
}

.advantage-media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

/* ============================================
   6. ENTREPRENEUR BRANDING PACKAGE
============================================ */
.branding-package {
  background: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .branding-package { padding: var(--space-11) 0; }
}

.branding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

@media (min-width: 900px) {
  .branding-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-10);
  }
}

.branding-media {
  order: 1;
}

.branding-media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.branding-content { order: 2; }

.branding-content h2 { margin-bottom: var(--space-6); }
.branding-content > p {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-bottom: var(--space-5);
}

.package-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: var(--space-7);
  /* Asymmetric vertical margin: full breathing room
     above (matches the eyebrow + h2 rhythm), tighter
     below so the card doesn't push the next element
     too far. */
  margin: var(--space-7) 0 var(--space-5);
  position: relative;
}

.package-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin: 0 0 var(--space-5);
}

.package-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
}

@media (min-width: 600px) {
  .package-list { grid-template-columns: 1fr 1fr; }
}

.package-list li {
  font-size: 15px;
  color: var(--charcoal);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.package-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--clay);
}

/* ============================================
   7. PORTFOLIO
============================================ */
.portfolio {
  background: var(--cream);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .portfolio { padding: var(--space-11) 0; }
}

.portfolio-intro {
  max-width: 720px;
  margin-bottom: var(--space-8);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

.portfolio-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-7);
  overflow-x: auto;
  scrollbar-width: none;
}
.portfolio-tabs::-webkit-scrollbar { display: none; }

.portfolio-tab {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.portfolio-tab:hover { color: var(--espresso); }

.portfolio-tab.is-active {
  color: var(--espresso);
  border-color: var(--espresso);
  font-weight: 600;
}

.portfolio-panel { display: none; }
.portfolio-panel.is-active { display: block; }

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.portfolio-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform var(--transition-slow), filter var(--transition);
}

.portfolio-grid img:nth-child(2),
.portfolio-grid img:nth-child(5) {
  aspect-ratio: 4 / 3;
}

.portfolio-grid img:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}

/* Modifiers for galleries with fewer than 6 images, so the
   last row stays full instead of leaving an orphaned item. */
.portfolio-grid--balanced-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .portfolio-grid--balanced-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .portfolio-grid--balanced-4 { grid-template-columns: 1fr 1fr; }
}

.portfolio-grid--balanced-3 {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .portfolio-grid--balanced-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.portfolio-grid--balanced-5 {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .portfolio-grid--balanced-5 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .portfolio-grid--balanced-5 { grid-template-columns: 1fr 1fr; }
}
.portfolio-grid--balanced-5 img:nth-child(5) {
  grid-column: 1 / -1;
}

.portfolio-cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* ============================================
   8. SOCIAL PROOF
============================================ */
.social-proof {
  background: var(--sand);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .social-proof { padding: var(--space-11) 0; }
}

.social-proof h2 { color: var(--espresso); margin-bottom: var(--space-9); }

.pull-quote {
  margin: 0 0 var(--space-9);
  max-width: 880px;
}

.pull-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--espresso);
  margin: 0 0 var(--space-5);
}

.pull-quote cite {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .review-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Modifier for a review grid with only two cards, so they stay
   centered instead of leaving an empty third column. */
.review-grid--balanced-2 {
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .review-grid--balanced-2 { grid-template-columns: 1fr 1fr; }
}

.review-card {
  background: var(--cream);
  padding: var(--space-7);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.review-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
}

.review-card cite {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ============================================
   9. PROCESS
============================================ */
.process {
  background: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .process { padding: var(--space-11) 0; }
}

.process h2 { margin-bottom: var(--space-9); max-width: 600px; }

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

@media (min-width: 700px) {
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-7);
  }
}

@media (min-width: 1024px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.step-number {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--clay);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.process-step h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}

.process-step p {
  font-size: 15px;
  color: var(--charcoal);
}

.process-note {
  background: var(--ivory);
  border-left: 2px solid var(--clay);
  padding: var(--space-5) var(--space-6);
  font-size: 15px;
  color: var(--charcoal);
  max-width: 760px;
  margin: var(--space-9) 0 var(--space-7);
}

.process-cta { margin-top: var(--space-7); }

/* ============================================
   10. AREAS SERVED
============================================ */
.areas {
  background: var(--ivory);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .areas { padding: var(--space-11) 0; }
}

.areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

@media (min-width: 900px) {
  .areas-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
  }
}

.areas-content p {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-bottom: var(--space-7);
}

.areas-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}

.areas-list a {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--espresso);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  display: block;
  transition: color var(--transition), padding var(--transition);
}

.areas-list a:hover {
  color: var(--clay);
  padding-left: var(--space-2);
}

/* ============================================
   11. FAQ
============================================ */
.faq {
  background: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .faq { padding: var(--space-11) 0; }
}

.faq-inner {
  max-width: var(--container-narrow);
}

.faq h2 {
  text-align: center;
  margin-bottom: var(--space-9);
}
.faq .eyebrow { text-align: center; }

.faq-list {
  border-top: 1px solid var(--hairline);
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--espresso);
  transition: color var(--transition);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 28px;
  color: var(--clay);
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after { content: '–'; }

.faq-item summary:hover { color: var(--clay); }

.faq-answer {
  padding: 0 0 var(--space-6);
  max-width: 780px;
}

.faq-answer p {
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.7;
}

/* ============================================
   12. FINAL CTA
============================================ */
.final-cta {
  background: var(--espresso);
  color: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .final-cta { padding: var(--space-11) 0; }
}

.final-inner {
  max-width: 800px;
  text-align: center;
}

.final-cta h2 { color: var(--cream); margin-bottom: var(--space-6); }

.final-cta > .container > p,
.final-cta .final-inner > p {
  color: var(--sand-light);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-bottom: var(--space-7);
}

.final-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-7);
}

.final-location {
  font-size: 13px;
  color: var(--clay-soft);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================
   13. FOOTER
============================================ */
.site-footer {
  background: var(--espresso-deep);
  color: var(--sand-light);
  padding: var(--space-10) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.footer-col--brand { max-width: 360px; }

/* Footer logo — cream PNG variant for the dark
   espresso footer background. Transparent background
   override is required because the global
   `img { background: var(--sand-light) }` rule would
   otherwise show a sand-colored box through the
   logo's transparent areas. */
.footer-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 0 var(--space-3);
  background: transparent;
  object-fit: contain;
}

.footer-tagline {
  font-size: 14px;
  color: var(--sand);
  margin-bottom: var(--space-5);
}

.footer-nap {
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sand);
  margin-bottom: var(--space-4);
}

.footer-nap a { color: var(--sand); border-bottom: 1px solid var(--clay); }
.footer-nap a:hover { color: var(--cream); }

.footer-hours {
  font-size: 12px;
  color: var(--clay-soft);
  margin: 0;
  letter-spacing: 0.02em;
}

.footer-heading {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin: 0 0 var(--space-5);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: 14px;
  color: var(--sand-light);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--cream); }

.footer-cta {
  margin-top: var(--space-6);
  padding: 12px 22px;
  font-size: 12px;
}

.footer-bottom {
  border-top: 1px solid var(--hairline-light);
  padding-top: var(--space-5);
  margin-top: var(--space-8);
}

.footer-bottom p {
  font-size: 12px;
  color: var(--clay-soft);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================
   MOBILE STICKY CTA
============================================ */
.mobile-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--espresso);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 90;
  box-shadow: 0 -1px 0 var(--hairline-light);
  transform: translateY(0);
  transition: transform var(--transition);
}

.mobile-sticky.is-hidden {
  transform: translateY(100%);
}

.mobile-sticky-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 18px;
  border: 1px solid var(--clay);
  border-radius: var(--radius);
}

.mobile-sticky-cta {
  flex: 1;
  padding: 14px 18px;
  font-size: 13px;
}

@media (min-width: 1024px) {
  .mobile-sticky { display: none; }
}

@media (max-width: 1023px) {
  body.has-mobile-sticky { padding-bottom: 76px; }
}

/* ============================================
   CONTACT / BOOKING PAGE
============================================ */

.cta-row--center {
  justify-content: center;
}

/* Hero variant */
.hero--contact {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

@media (min-width: 768px) {
  .hero--contact {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

.contact-hero {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.contact-hero h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
}

.contact-hero .hero-sub {
  margin-left: auto;
  margin-right: auto;
}

.contact-hero .location-line {
  margin-left: auto;
  margin-right: auto;
}

/* Booking section */
.booking {
  background: var(--ivory);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .booking { padding: var(--space-11) 0; }
}

.booking-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-6);
}

.booking-intro h2 { margin-bottom: 0; }
.booking-intro .eyebrow { text-align: center; }

/* Beige outer panel that holds the Sprout form.
   Wider max-width and reduced padding give the
   white Sprout card more room inside, so it no
   longer feels like a small form floating in a
   large empty frame. */
.booking-form-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: var(--cream);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .booking-form-wrap { padding: var(--space-7); }
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field label,
.field .field-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--espresso);
  text-transform: uppercase;
  margin: 0;
}

.field .required {
  color: var(--clay);
  margin-left: 3px;
}

.field .optional {
  font-weight: 400;
  text-transform: none;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-left: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--charcoal);
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  width: 100%;
  line-height: 1.4;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--espresso);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(138, 111, 92, 0.12);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
  font-family: var(--sans);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%238a6f5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* Radios & checkboxes */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-2);
}

.radio,
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  color: var(--charcoal);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

.radio input,
.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--espresso);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.radio span,
.checkbox span {
  line-height: 1.3;
  color: var(--charcoal);
}

.radio:hover span,
.checkbox:hover span { color: var(--espresso); }

/* Conditional fieldset */
.form-conditional {
  border: 0;
  padding: var(--space-7) var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  .form-conditional { padding: var(--space-7); }
}

.form-conditional[hidden] { display: none; }

.form-conditional legend {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--espresso);
  padding: 0 var(--space-3);
  margin-left: -3px;
  background: var(--cream);
  letter-spacing: -0.01em;
}

/* Submit */
.form-submit {
  width: 100%;
  padding: 18px 32px;
  font-size: 13px;
  margin-top: var(--space-3);
}

.form-note {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: var(--space-4) auto 0;
  max-width: 560px;
  line-height: 1.6;
}

/* Error state */
.has-error input,
.has-error select,
.has-error textarea {
  border-color: #b54b3a;
  background: #fcf3f0;
}

.error-message {
  font-size: 12px;
  color: #b54b3a;
  margin: 4px 0 0;
  display: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.has-error .error-message { display: block; }

/* Success */
.form-success {
  background: var(--espresso);
  color: var(--cream);
  padding: var(--space-10) var(--space-7);
  text-align: center;
  border-radius: var(--radius);
}

.form-success h3 {
  color: var(--cream);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  margin-bottom: var(--space-4);
}

.form-success p {
  color: var(--sand-light);
  max-width: 520px;
  margin: 0 auto var(--space-4);
}

.form-success-meta {
  font-size: 13px !important;
  color: var(--clay-soft) !important;
  letter-spacing: 0.02em;
  margin-top: var(--space-5) !important;
}

/* ============================================
   CONTACT INFO SECTION
============================================ */
.contact-info {
  background: var(--cream);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .contact-info { padding: var(--space-11) 0; }
}

.contact-info h2 {
  margin-bottom: var(--space-9);
  max-width: 680px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .contact-info-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.contact-info-card {
  background: var(--ivory);
  padding: var(--space-7);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info-card--cta {
  background: var(--sand-light);
  justify-content: space-between;
}

.contact-info-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin: 0;
}

.contact-info-card address {
  font-style: normal;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--espresso);
}

.contact-info-card address a {
  color: var(--espresso);
  border-bottom: 1px solid var(--clay);
  font-family: var(--sans);
  font-size: 15px;
}

.contact-info-card address a:hover {
  color: var(--clay);
  border-color: var(--espresso);
}

.contact-info-meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0;
}

.contact-info-card--cta p {
  font-size: 15px;
  color: var(--charcoal);
}

.contact-info-card--cta .button {
  align-self: flex-start;
  margin-top: var(--space-3);
}

/* ============================================
   SERVICE HELP
============================================ */
.service-help {
  background: var(--ivory);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .service-help { padding: var(--space-11) 0; }
}

.service-help h2 { margin-bottom: var(--space-5); max-width: 600px; }

.help-intro {
  max-width: 640px;
  margin-bottom: var(--space-9);
  color: var(--charcoal);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

.service-help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .service-help-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .service-help-grid { grid-template-columns: repeat(5, 1fr); }
}

.help-card {
  background: var(--cream);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}

.help-card:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
}

.help-num {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--clay);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.help-card h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}

.help-card p {
  font-size: 13px;
  color: var(--charcoal);
  margin: 0;
  flex: 1;
  line-height: 1.55;
}

.help-card .text-link {
  font-size: 11px;
  margin-top: var(--space-3);
  border-bottom-color: var(--clay);
  align-self: flex-start;
}

/* ============================================
   MOBILE ALIGNMENT FIXES — Routing + Featured cards
   Targets the stacked-card layout below 900px:
   1. Trim oversized section padding-top
   2. Tighten heading-to-card gap
   3. Normalize inner card padding so feature cards
      align with siblings when stacked vertically
   4. Tighten gap between editorial cascade rows
============================================ */
@media (max-width: 899px) {
  .routing,
  .featured {
    padding: var(--space-9) 0;
  }

  .routing-intro {
    margin-bottom: var(--space-7);
  }

  .featured h2 {
    margin-bottom: var(--space-7);
  }

  .routing-card-body,
  .routing-card--feature .routing-card-body {
    padding: var(--space-6);
  }

  .feature-card-body,
  .feature-card--large .feature-card-body {
    padding: var(--space-6);
  }

  .feature-row {
    margin-bottom: var(--space-7);
  }
}

/* ============================================
   MOBILE ROUTING CARD CENTERING FIX

   The desktop bento grid leaks onto mobile because
   the following declarations live at the base
   specificity (NOT inside the desktop @media):

     .routing-card--feature      { grid-area: feature; }
     .routing-card:nth-child(2)  { grid-area: wedding; }
     .routing-card:nth-child(3)  { grid-area: sports; }

   Those named areas only exist inside the
   @media (min-width: 900px) block. When they're
   missing on mobile, iOS Safari falls back to
   implicit named grid lines, which can place
   cards off-center inside the single-column grid.

   This block:
   1. Resets .routing-grid from CSS Grid to a
      centered flex column on mobile, neutralizing
      any leaked grid-template-* and min-height.
   2. Explicitly cancels grid-area / grid-column /
      grid-row on every routing card so the leaked
      desktop placements have no effect.
   3. Caps each card at max-width 420px and
      centers it with auto margins for clean
      proportions on phone and tablet-phone widths.
   4. Forces the card image to fill the card
      edge-to-edge and clears any transform.
   5. Re-asserts identical inner padding on all
      routing cards (feature + siblings) so
      content alignment matches when stacked.
   6. Trims residual whitespace above the first
      card without altering desktop rhythm.
============================================ */
@media (max-width: 899px) {

  /* 1. Reset routing grid container */
  .routing-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-5);
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    min-height: 0;
  }

  /* 2 + 3. Cancel leaked grid-area placements,
     cap card width, center each card */
  .routing-card,
  .routing-card--feature,
  .routing-card:nth-child(2),
  .routing-card:nth-child(3) {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    transform: none;
  }

  /* 4. Image fills card edge-to-edge */
  .routing-card-media,
  .routing-card-media img {
    width: 100%;
  }

  .routing-card-media img {
    height: auto;
    display: block;
  }

  /* 5. Identical inner padding on all routing
     cards — overrides the desktop feature-card
     padding (var(--space-8) var(--space-7)) that
     would otherwise make the feature card look
     visually inset compared to its siblings. */
  .routing-card-body,
  .routing-card--feature .routing-card-body {
    padding: var(--space-6);
    box-sizing: border-box;
    width: 100%;
  }

  /* 6. Trim residual whitespace above first card */
  .routing {
    padding: var(--space-8) 0;
  }

  .routing-intro {
    margin-bottom: var(--space-6);
  }
}

/* ============================================
   SERVICE PAGE — Reusable Components

   Patterns introduced for service pages
   (corporate-headshots-northridge.html and
   future Personal Branding, Wedding, Sports,
   Family pages):

   - .audience-grid / .audience-tag — Who This Is For
   - .comparison-grid / .comparison-card — option vs option
   - .pricing-grid / .pricing-card / .pricing-card--featured
   - .prose-section / .prose-inner — calm centered prose
   - .bullet-list — reusable bullet utility
   - .service-help--cream — bg variant for related-services row
   - aria-current page indicator in primary nav

   These are additive; no homepage / contact rules
   are modified. Section background sequencing on
   service pages alternates ivory ↔ cream to match
   the existing rhythm.
============================================ */

/* Section padding shared across new service-page blocks */
.audience,
.included,
.comparison,
.packages {
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .audience,
  .included,
  .comparison,
  .packages { padding: var(--space-11) 0; }
}

.audience    { background: var(--ivory); }
.included    { background: var(--ivory); }
.comparison  { background: var(--cream); }
.packages    { background: var(--ivory); }

.audience h2,
.included h2,
.comparison h2,
.packages h2 {
  margin-bottom: var(--space-9);
  max-width: 720px;
}

/* AUDIENCE GRID — "Who This Is For" tile list */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .audience-grid { grid-template-columns: repeat(5, 1fr); }
}

.audience-tag {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--espresso);
  text-align: center;
  letter-spacing: -0.005em;
  transition: border-color var(--transition), background var(--transition);
}

.audience-tag:hover {
  border-color: var(--clay);
  background: var(--ivory);
}

.audience-note {
  background: var(--cream);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-7);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--charcoal);
}

/* INCLUDED — content wrapper used to host .package-card / .package-list */
.included-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* COMPARISON — two-card "this or that" pattern */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .comparison-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* Modifier for a comparison grid with a single remaining card,
   so it centers instead of leaving an empty second column. */
.comparison-grid--balanced-1 {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .comparison-grid--balanced-1 {
    grid-template-columns: 1fr;
  }
}

.comparison-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comparison-card .eyebrow { margin: 0 0 var(--space-2); }

.comparison-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

.comparison-card p {
  font-size: 15px;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.65;
}

.comparison-card .button {
  align-self: flex-start;
  margin-top: var(--space-5);
}

/* PRICING TIERS — three-card package grid */
.packages-intro {
  max-width: 720px;
  margin-bottom: var(--space-9);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--charcoal);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
  }
}

.pricing-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}

.pricing-card:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
}

.pricing-card--featured {
  background: var(--ivory);
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay);
}

.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--espresso);
  color: var(--cream);
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  white-space: nowrap;
}

.pricing-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: var(--espresso);
  margin: 0;
  letter-spacing: -0.01em;
}

.pricing-price {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--espresso);
  margin: 0;
  line-height: 1.2;
}

.pricing-price strong {
  font-weight: 700;
  font-size: 32px;
}

.pricing-price small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.pricing-desc {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.6;
  margin: 0;
}

.pricing-ideal {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
  margin: 0;
  line-height: 1.55;
}

.pricing-card .button {
  margin-top: auto;
  align-self: stretch;
}

/* PROSE SECTION — calm centered prose block (Problem/Benefit, Wear Guide) */
.prose-section {
  background: var(--cream);
  padding: var(--space-9) 0;
}

@media (min-width: 768px) {
  .prose-section { padding: var(--space-11) 0; }
}

.prose-section--ivory { background: var(--ivory); }

.prose-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.prose-inner .eyebrow { text-align: center; }

.prose-inner h2 {
  text-align: center;
  margin-bottom: var(--space-7);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.prose-inner > p {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--charcoal);
  line-height: 1.75;
  margin-bottom: var(--space-5);
}

.prose-inner > p:last-of-type { margin-bottom: 0; }

/* LEGAL CONTENT: readable-width, left-aligned long-form text
   page (Terms and Conditions). Reuses .prose-section for the
   same background/padding rhythm as other text pages, but
   stays left-aligned instead of centered like .prose-inner. */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.legal-content h1 {
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  margin-bottom: var(--space-4);
}

.legal-updated {
  font-size: 14px;
  color: var(--clay);
  margin-bottom: var(--space-7);
}

.legal-content h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}

.legal-content > p {
  color: var(--charcoal);
  line-height: 1.75;
}

/* BULLET LIST — reusable list utility */
.bullet-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 720px;
  margin: var(--space-7) auto;
  text-align: left;
  list-style: none;
  padding: 0;
}

.bullet-list li {
  font-size: 1rem;
  color: var(--charcoal);
  padding-left: 24px;
  position: relative;
  line-height: 1.7;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 1px;
  background: var(--clay);
}

/* Service-help cream variant — used on service pages where the
   default ivory bg would create an ivory→ivory adjacency with
   the preceding Local Service Area section. */
.service-help--cream { background: var(--cream); }

/* Current-page indicator in primary nav */
.nav-primary a[aria-current="page"] {
  color: var(--clay);
}

/* MOBILE — match the routing-card centering treatment for service-page sections */
@media (max-width: 899px) {
  .audience,
  .included,
  .comparison,
  .packages,
  .prose-section {
    padding: var(--space-9) 0;
  }

  .audience h2,
  .included h2,
  .comparison h2,
  .packages h2 {
    margin-bottom: var(--space-7);
  }

  .pricing-card,
  .comparison-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card--featured {
    margin-top: var(--space-5);
  }
}

/* ============================================
   SERVICE PAGE — Background variants
   Used to break adjacent same-color sections on
   service pages where section order differs from
   the corporate-headshots page.
============================================ */
.comparison--ivory { background: var(--ivory); }
.included--cream   { background: var(--cream); }

/* ============================================
   .branding-content — context overrides

   The existing .branding-content > p rule
   (font-size: clamp(1rem, 1.3vw, 1.125rem)) wins
   on specificity (0,2,0) over .eyebrow (0,1,0)
   and .pricing-price (0,1,0) when those classes
   sit on direct-child <p> elements. These
   matched-specificity selectors restore intended
   sizing for both. Source order ensures they win
   over the existing rule.
============================================ */
.branding-content > .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin: 0 0 var(--space-5);
}

.branding-content > .pricing-price {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--espresso);
  margin: 0 0 var(--space-5);
  line-height: 1.2;
}

.branding-content > .pricing-price strong {
  font-weight: 700;
  font-size: 32px;
}

/* ============================================
   WEDDING PAGE — grid variants

   Two opt-in modifiers for service pages whose
   item counts don't fit cleanly into the default
   audience-grid (5-col) and process-steps (4-col):

   - .audience-grid--compact: 4-col at desktop,
     used by wedding page (8 audience tags = 2×4).
   - .process-steps--five: 5-col at desktop, used
     by wedding page's 5-step process (default is
     4-col for the 4-step homepage / corp / branding
     processes).

   Higher specificity (.process-steps.process-steps--five
   = 0,2,0) ensures these win over the base
   single-class rules regardless of source order.
============================================ */
@media (min-width: 1024px) {
  .audience-grid.audience-grid--compact {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-steps.process-steps--five {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================
   SPROUT STUDIO LEAD FORM EMBED
   Container + fallback styling for the third-party
   form that replaced the previous custom contact form.
   The Sprout script renders its own form inside
   .sprout-form-embed; min-height reserves layout
   space so the page does not jump as the form loads.
============================================ */
.sprout-form-embed {
  min-height: 220px;
}

.form-fallback {
  margin: var(--space-4) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 560px;
  line-height: 1.6;
}

.form-fallback a {
  color: var(--espresso);
  border-bottom: 1px solid var(--clay);
  transition: color var(--transition), border-color var(--transition);
}

.form-fallback a:hover {
  color: var(--clay);
  border-color: var(--espresso);
}

/* ============================================
   TARGETED SPACING FOLLOW-UPS
   Section-boundary overrides that complement the
   global pass. Each one trims only the bottom of
   the upper section (or the top of the lower one)
   so internal breathing room and heading rhythm
   are preserved.
============================================ */

/* 1. Contact page: booking → studio-info boundary.
   Trim only the boundary padding (booking bottom +
   contact-info top) so each section keeps its full
   internal breathing room on the other side. */
.booking { padding-bottom: var(--space-7); }
.contact-info { padding-top: var(--space-7); }

@media (min-width: 768px) {
  .booking { padding-bottom: var(--space-9); }
  .contact-info { padding-top: var(--space-9); }
}

/* 2. FAQ → Final CTA boundary. Reduce only the
   FAQ's bottom padding so .final-cta retains its
   full top padding and remains an intentional
   closing anchor. */
.faq { padding-bottom: var(--space-7); }

@media (min-width: 768px) {
  .faq { padding-bottom: var(--space-9); }
}

/* 3. Service-page content sections that end with
   cards / package boxes / pricing grids leave too
   much dead space before the next section. Trim
   only padding-bottom on .included and .packages
   so the *top* of each section keeps its full
   heading breathing room. Compounds with the
   .package-card margin-bottom reduction (in the
   base rule above) for cleaner section-to-section
   flow on Corporate, Branding, Wedding, Sports,
   and Family pages. */
.included,
.packages {
  padding-bottom: var(--space-7);
}

@media (min-width: 768px) {
  .included,
  .packages {
    padding-bottom: var(--space-9);
  }
}

/* 4. Final micro-tightening — small reduction of
   padding-bottom only on the remaining normal
   content sections (audience grid, prose blocks,
   comparison, portfolio, process, areas served,
   related-services / service-help, testimonials).
   −16px mobile / −24px desktop per section, only
   on the bottom side; each section's top keeps
   full heading breathing room.

   Intentionally NOT in this list:
   - .hero (kept dramatic)
   - .final-cta (kept as closing anchor)
   - .advantage (mid-page espresso anchor)
   - .branding-package (entrepreneur panel rhythm)
   - .routing, .featured (homepage feature rhythms)
   - .booking, .contact-info, .faq, .included,
     .packages (already trimmed in earlier passes) */
.audience,
.prose-section,
.comparison,
.portfolio,
.process,
.areas,
.service-help,
.social-proof {
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .audience,
  .prose-section,
  .comparison,
  .portfolio,
  .process,
  .areas,
  .service-help,
  .social-proof {
    padding-bottom: var(--space-10);
  }
}

/* ============================================
   LOCATION PAGE — section rhythm

   Location pages stack 5+ short content sections
   in a row (3× prose-section + service-help +
   areas + faq, plus social-proof on Porter Ranch).
   With the default top padding of 80 mobile /
   120 desktop, adjacent section gaps landed at
   ~216px desktop, closer to the pre-fix rhythm
   than to contact.html's tighter cadence.

   This block trims only padding-top on the
   section types used heavily by location pages,
   scoped strictly to .page-location bodies.
   Magnitude (48 / 80) matches the booking ↔
   contact-info top override on contact.html, so
   location-page transitions land at ~176 desktop —
   same ballpark as contact.html's tight boundary.

   Bottom padding is unchanged (already trimmed
   by the prior micro-tightening pass). Hero,
   trust-strip, and final-cta intentionally keep
   full padding. Other pages are unaffected.
============================================ */
.page-location .prose-section,
.page-location .service-help,
.page-location .areas,
.page-location .social-proof,
.page-location .faq {
  padding-top: var(--space-7);
}

@media (min-width: 768px) {
  .page-location .prose-section,
  .page-location .service-help,
  .page-location .areas,
  .page-location .social-proof,
  .page-location .faq {
    padding-top: var(--space-9);
  }
}

/* The .pull-quote has a built-in margin-bottom of
   var(--space-9) for cases where it's followed by
   a .review-grid (homepage social-proof pattern).
   When the pull-quote is the last child of its
   container — e.g. the Porter Ranch placeholder
   review — that margin stacks with the section's
   padding-bottom and creates extra dead space.
   Self-correcting :last-child neutralizes it. */
.social-proof .pull-quote:last-child {
  margin-bottom: 0;
}

/* Two-column bullet list — used by service pages
   with longer add-on / supporting lists where a
   single column would create excessive vertical
   length. Reuses .bullet-list base styling. */
@media (min-width: 600px) {
  .bullet-list.bullet-list--two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Sports page only: tighten the .audience block on
   mobile by ~15%. The default mobile rhythm uses
   --space-9 (80px) section padding + H2 margin and
   stacks 14 audience tags vertically, which read as
   too airy on small screens for this page only.
   Desktop spacing is preserved (this rule is below
   the 768px breakpoint). All other service / location
   pages keep the global rhythm. */
@media (max-width: 767px) {
  .page-sports .audience {
    padding: 68px 0;
  }
  .page-sports .audience h2 {
    margin-bottom: 68px;
  }
  .page-sports .audience-grid {
    gap: 10px;
  }
  .page-sports .audience-tag {
    padding: 20px var(--space-4);
  }
}