/* ============================================================
   ProHeadshots — Master Stylesheet
   ============================================================
   Single source of truth for the whole site. Combines:
     1. luxury.css           — Design-system base (tokens, fonts,
                                reset, .lux-* prefixed components)
     2. luxury-additions.css — Drop-in additions (buttons,
                                travel/reviews/case-study modules,
                                hero stat chip overrides)
     3. Legacy page styles   — Non-prefixed components still used
                                by the homepage, corporate, contact,
                                pricing and client-stories pages
                                (nav, .hero, .page-hero, footer, etc.)

   Load order: this file alone. Pages must NOT also load
   luxury.css or luxury-additions.css.

   Selector conventions:
     .lux-*   → newer, namespaced components (Exeter v3, future)
     bare/non-prefixed → legacy components, kept for backwards-compat
     .loc-*   → location-page components
     .pp-*    → pricing-page components
     .cs-*    → client-stories components
     .corp-*  → corporate-page components
     .pb-*    → personal-branding components

   Edit notes:
     - Tokens live in :root at the top — change colors/type here.
     - Body font-size is set to 16px (page baseline). Pages built
       around .lux-* components inherit the same baseline.
     - Last-rule-wins ordering: page-specific sections override
       earlier .lux-* components where selectors collide.
   ============================================================ */


/* ============================================================
   1. BASE — luxury.css (design system)
   ============================================================ */

/* ============================================================
   ProHeadshots — Dark Luxury Redesign
   Single-source design system. Loaded by base-luxury.njk only.
   ============================================================ */

/* ── Self-hosted fonts ── */

/* Cormorant Garamond — normal (weights 300–600), latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Cormorant Garamond — italic (weights 300–400), latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Inter — variable font (weights 100–900) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  /* Colour */
  --bg: #080808;
  --surface: #111111;
  --surface-raised: #1A1A1A;
  --text-primary: #EDE9E3;
  --text-secondary: #7A7672;
  --gold: #CC9933;
  --gold-hover: #E8B84B;
  --border: #222222;
  --overlay: rgba(8, 8, 8, 0.75);

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — see strategy/typography-consolidation-plan.md */
  --fs-eyebrow:        0.8rem;                            /* small uppercase gold labels */
  --fs-display:        clamp(3rem, 7vw, 7rem);            /* marketing hero H1 (Home, Corporate, Pricing, PB, About, location pages) */
  --fs-display-form:   clamp(2.5rem, 5vw, 4.5rem);        /* utility/index page H1 (Contact, Blog Index, Client Stories) */
  --fs-h2:             clamp(2rem, 3vw, 3rem);            /* section opener — one size site-wide */
  --fs-h2-band:        clamp(2.25rem, 4vw, 3.75rem);      /* CTA band H2 — the only sanctioned larger variant */
  --fs-lede:           1.0625rem;                         /* hero subhead, section intro paragraph */
  --fs-body:           1rem;                              /* default body */
  --fs-body-sm:        0.875rem;                          /* card copy, captions, notes */
  --fs-card-title:     1.25rem;                           /* content card title (serif) */

  /* Layout */
  --container-max: 1200px;
  --section-pad-y: 7rem;
  --section-pad-x: 3rem;
  --section-inset: max(var(--section-pad-x), calc((100vw - var(--container-max)) / 2));

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-duration: 500ms;
  --hover-duration: 200ms;
  --crossfade-duration: 3.5s;
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; }

button {
  font: inherit;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* ── Typography helpers ── */
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }

.label {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-label {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

/* ── Layout primitives ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

main {
  display: block;
}

section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.section-surface { background: var(--surface); }
.section-bg { background: var(--bg); }

.hairline  { border-top: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }
.overflow-hidden { overflow: hidden; }

/* ── Full-width image helpers ── */
/* img base already sets display:block and max-width:100%.
   .img-full forces width:100% for images that must span their container. */
.img-full { width: 100%; height: auto; }

/* Full-bleed image band — sits between sections, bleeds edge-to-edge */
.img-band { border-top: 1px solid var(--border); overflow: hidden; }

/* ── Container widths ── */
/* .container  = 1200px (already defined above)  */
/* .container-xl = 1100px — wide section inner wrap */
.container-xl { max-width: 1100px; margin: 0 auto; }
/* .container-md = 760px — narrow sections (FAQ, editorial) */
.container-md { max-width: 760px; margin: 0 auto; }

/* ── Text helpers ── */
/* Secondary body copy — slightly smaller, muted colour */
.body-secondary {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Section-label variant: centred (add alongside .section-label) */
.section-label--center { justify-content: center; }

/* Sublabel — uppercase caption below a headline, text-secondary not gold */
.section-sublabel {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 1.25rem;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--reveal-duration) ease-out, transform var(--reveal-duration) ease-out;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ── Hero above-fold: CSS animation, no JS dependency ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-in {
  animation: heroFadeUp 0.6s ease-out 0.2s both;
}
.hero-fade-in--delay {
  animation-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade-in { animation: none; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Buttons & links ── */
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: #080808;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.1rem 2.75rem;
  text-decoration: none;
  transition: background var(--hover-duration) ease;
  border: none;
}
.btn-gold:hover,
.btn-gold:focus-visible { background: var(--gold-hover); }

.link-gold {
  color: var(--gold);
  font-size: 0.9375rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--hover-duration) ease;
}
.link-gold:hover,
.link-gold:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}
.link-gold.with-arrow::after { content: ' →'; }

/* ── Navigation (top, fixed, transparent → blurred on scroll) ── */
.lux-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 3rem;
  transition: background 300ms ease, backdrop-filter 300ms ease;
}
.lux-nav.scrolled {
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lux-nav-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: none;
}
.lux-nav-logo img {
  height: 40px;
  width: auto;
}
.lux-nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.lux-nav-links a {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.lux-nav-links a:hover,
.lux-nav-links a:focus-visible,
.lux-nav-links a[aria-current="page"] { color: var(--text-primary); }
.lux-nav-links .nav-cta {
  color: var(--gold);
}
.lux-nav-links .nav-cta:hover,
.lux-nav-links .nav-cta:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

.lux-nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.lux-nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  transition: all 300ms ease;
}

/* ── Mobile nav overlay ── */
.lux-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.lux-mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}
.lux-mobile-nav-close {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.5rem;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
}
.lux-mobile-nav-links { margin-bottom: 3rem; }
.lux-mobile-nav-links li { border-top: 1px solid var(--border); }
.lux-mobile-nav-links li:last-child { border-bottom: 1px solid var(--border); }
.lux-mobile-nav-links a {
  display: block;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--text-primary);
  text-decoration: none;
  padding: 1rem 0;
  transition: color var(--hover-duration) ease;
}
.lux-mobile-nav-links a:hover,
.lux-mobile-nav-links a:focus-visible { color: var(--gold); }

.lux-mobile-nav-contact {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.lux-mobile-nav-contact a {
  color: var(--text-secondary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
}
.lux-mobile-nav-book {
  margin-top: 2.5rem;
  display: inline-block;
}

/* ── Hero ── */
.lux-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.lux-hero-portraits { position: absolute; inset: 0; }
.lux-hero-portrait {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--crossfade-duration) linear;
  background-size: cover;
  background-position: center top;
}
.lux-hero-portrait.active { opacity: 1; }
.lux-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.lux-hero-content {
  position: absolute;
  top: 5.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 3rem 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}
.lux-hero-text {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lux-hero-label {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.lux-hero-h1 {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.125rem;
}
.lux-hero-h1 em {
  color: var(--gold);
  font-style: italic;
}
@media (min-width: 900px) {
  .lux-hero-h1 { line-height: 0.95; }
}
.lux-hero-sub {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}
.lux-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.lux-hero-cta {
  font-size: 0.9375rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--hover-duration) ease;
}
.lux-hero-cta:hover,
.lux-hero-cta:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}
.lux-hero-cta::after { content: ' →'; }
.lux-hero-cta--down::after { content: ' ↓'; }
.lux-hero-secondary {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 300;
  transition: color var(--hover-duration) ease;
}
.lux-hero-secondary:hover { color: var(--text-primary); }
.lux-hero-secondary--upper {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lux-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
}
.lux-hero-rating {
  text-align: right;
}
.lux-hero-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.lux-hero-rating-text {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0em;
  line-height: 1.6;
  margin-top: 0.3rem;
}

.lux-hero-scroll-hint {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.6;
  padding-bottom: 0.5rem;
}

/* ── Location meta pinned to top of hero ── */
.lux-hero-meta-top {
  position: absolute;
  top: 5.5rem;
  left: 3rem;
  z-index: 2;
}

/* ── Location meta (replaces eyebrow on pages with locationMeta) ── */
.lux-loc-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.375rem;
}
.lux-loc-meta-rule {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.lux-loc-coords {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ── H1 italic gold sub-line ── */
.lux-hero-h1--has-sub {
  margin-bottom: 0.2em;
}
.lux-hero-h1-sub {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.95;
  color: var(--gold);
  margin-bottom: 1.125rem;
}

/* ── Hero stats bar ── */
.lux-hero-stats {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
  margin-top: 0;
}
.lux-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.lux-hero-stat-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 400;
}
.lux-hero-stat-value {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-weight: 300;
}
.lux-hero-sub + .lux-hero-stats {
  margin-top: 0;
}
.lux-hero-stats {
  margin-bottom: 1rem;
}
.lux-hero-stats + .lux-hero-ctas {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.25rem;
  margin-top: 0;
}

/* ── The Work (horizontal drag scroll) ── */
.work-section {
  padding: var(--section-pad-y) 0;
  overflow: hidden;
}
/* Flush variant: home intro runs directly into the work grid */
.work-section--flush { padding-top: 0; padding-bottom: 0; }
.section--tight-bottom { padding-bottom: 3rem; }
.work-heading-wrap { margin-bottom: 1.5rem; }
.work-header {
  padding: 0 var(--section-inset);
  margin-bottom: 3rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.work-header-text { flex: 1; }
.work-heading {
  margin: 0.75rem 0 0.5rem;
}
.work-subheading {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 2rem;
}
.work-scroll-track {
  position: relative;
  display: flex;
  gap: 1px;
  cursor: grab;
  user-select: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;
}
.work-scroll-track::-webkit-scrollbar { display: none; }
.work-scroll-track.grabbing { cursor: grabbing; }
.work-scroll-track::after {
  content: '';
  flex: 0 0 3rem;
  display: block;
}
.work-portrait {
  flex: 0 0 50vw;
  height: 75vh;
  min-height: 400px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.work-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.work-end-text {
  flex: 0 0 40vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4rem;
  gap: 1.5rem;
  flex-shrink: 0;
}
.work-end-quote {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
}
.work-end-link {
  font-size: 0.875rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--hover-duration) ease;
}
.work-end-link:hover,
.work-end-link:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}
.work-end-link::after { content: ' →'; }

/* ── Portrait grid (static, 3-col) ── */
.portrait-grid-section {
  background: var(--bg);
}
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
.portrait-grid-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.portrait-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}
.portrait-grid-item:hover img {
  transform: scale(1.03);
}

.work-drag-hint {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.work-drag-hint.hidden {
  opacity: 0;
}
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.scroll-hint-line {
  width: 40px;
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.scroll-hint-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: slide-hint 2s ease-in-out infinite;
}
@keyframes slide-hint {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: 100%; }
}
.scroll-hint-text {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.scroll-hint-arrow {
  color: var(--gold);
  font-size: 0.875rem;
  animation: nudge-right 2s ease-in-out infinite;
}
@keyframes nudge-right {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* ── Differentiators (asymmetric grid, sticky headline) ── */
.diff-section {
  background: var(--bg);
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.diff-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
.diff-left {
  position: sticky;
  top: 40vh;
  align-self: start;
}
.diff-headline {
  margin: 0 0 1.5rem;
}
.diff-line {
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  transition: color var(--hover-duration) ease;
}
.diff-line:last-child { border-bottom: 1px solid var(--border); }
.diff-line strong {
  display: block;
  color: var(--text-primary);
  font-weight: 400;
  margin-bottom: 0.25rem;
}

/* ── Proof (testimonials with horizontal drag) ── */
.proof-section {
  background: var(--surface);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.proof-header {
  margin-bottom: 5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.proof-header-text { flex: 1; }

/* ── Scroll nav buttons (shared: gallery + testimonials) ── */
.scroll-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-bottom: 0.25rem;
}
.scroll-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
  border-radius: 0;
}
.scroll-nav-btn:hover,
.scroll-nav-btn:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}
.scroll-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.proof-rating {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.star { color: var(--gold); font-size: 1rem; }
.proof-rating-text {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: 0.5rem;
}
.proof-track-wrapper {
  position: relative;
}
.proof-scroll-track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  padding: 0 3rem 2.5rem;
  margin: 0 -3rem;
}
.proof-scroll-track::-webkit-scrollbar { display: none; }
.proof-scroll-track.grabbing { cursor: grabbing; }
.proof-drag-hint {
  position: absolute;
  bottom: 4rem;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.proof-drag-hint.hidden {
  opacity: 0;
}
.proof-attribution {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.proof-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  border: 1px solid var(--gold);
}
.proof-card {
  flex: 0 0 380px;
  background: var(--surface-raised);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.proof-quote-mark {
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 0.5;
  color: var(--gold);
  margin-bottom: 1.5rem;
  font-weight: 300;
  opacity: 0.8;
}
.proof-quote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
  flex: 1;
}
.proof-stars { margin-bottom: 1rem; display: flex; gap: 0.25rem; margin-top: 1.5rem; }
.proof-name {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.proof-more {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.proof-more a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.proof-more a:hover,
.proof-more a:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

/* ── Headshots grid (between testimonials and pricing) ── */
.headshots-grid-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}

.headshots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}

.headshots-grid-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}

.headshots-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 600ms ease;
}

.headshots-grid-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .headshots-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

.headshots-grid-cta {
  padding: 2rem var(--section-pad-x);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* ── Pricing table ── */
.pricing-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.pricing-headline {
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.3;
  max-width: 860px;
  margin: 0 auto 5rem;
  display: block;
}
.pricing-subhead {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 1rem auto 0;
  max-width: 560px;
}
.section-heading {
  margin-bottom: 1.5rem;
}
.section-heading-lg {
  margin-top: 1rem;
  margin-bottom: 0;
}
.pricing-table {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.pricing-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background var(--hover-duration) ease;
}
.pricing-row:hover { background: rgba(255, 255, 255, 0.015); }
.pricing-type {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--text-primary);
}
.pricing-type span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}
.pricing-details {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.pricing-details li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}
.pricing-details li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-secondary);
  opacity: 0.5;
}
.pricing-amount { text-align: right; }
.pricing-amount .price {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-primary);
  display: block;
}
.pricing-amount .price-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.pricing-cta {
  text-align: center;
  margin-top: 2.5rem;
}
.pricing-fineprint {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-top: 3rem;
}

/* ── Invitation (split-screen closer) ── */
.invitation-section {
  padding: 0;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.invitation-image {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  min-height: 500px;
}
.invitation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.invitation-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 5rem;
  background: var(--bg);
}
.invitation-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.invitation-eyebrow a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color var(--hover-duration) ease, border-color var(--hover-duration) ease;
}
.invitation-eyebrow a:hover,
.invitation-eyebrow a:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}
.invitation-headline {
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}
.invitation-body {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 400px;
  line-height: 1.7;
}
.invitation-secondary {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.invitation-secondary a {
  color: var(--text-secondary);
  text-decoration: underline;
  transition: color var(--hover-duration) ease;
}
.invitation-secondary a:hover,
.invitation-secondary a:focus-visible { color: var(--gold); }

/* ── FAQ accordion ── */
.faq-list {
  max-width: 720px;
  margin: 3rem auto 0;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  line-height: 1.4;
  transition: color var(--hover-duration) ease;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: color var(--hover-duration) ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--gold); }
.faq-item p,
.faq-item > p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  padding-bottom: 1.5rem;
  max-width: 620px;
}
.faq-item p a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.faq-item p a:hover,
.faq-item p a:focus-visible { color: var(--gold-hover); text-decoration: underline; }

/* ── Areas I Cover ── */
.areas-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6rem 3rem;
}
.areas-inner {
  max-width: 960px;
  margin: 0 auto;
}
.areas-header {
  margin-bottom: 3rem;
}
.areas-heading {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 1rem;
}
.areas-sub {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.6;
  margin: 0;
}
.areas-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.areas-grid li {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.areas-grid li a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms, background 200ms;
}
.areas-grid li a:hover,
.areas-grid li a:focus-visible {
  color: var(--gold);
  background: rgba(204, 153, 51, 0.05);
}
.areas-more {
  margin: 0;
}
@media (max-width: 640px) {
  .areas-section { padding: 4rem 1.5rem; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Areas county grid (grouped layout) ── */
.areas-county-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
  margin-bottom: 2.5rem;
}
.areas-county-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.75rem;
}
.areas-county ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.areas-county ul li {
  border-bottom: 1px solid var(--border);
}
.areas-county ul li a {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms;
}
.areas-county ul li a:hover,
.areas-county ul li a:focus-visible {
  color: var(--gold);
}
@media (max-width: 768px) {
  .areas-county-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .areas-county-grid { grid-template-columns: 1fr; }
}

/* ── Closing section ── */
.closing-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8rem 3rem;
  text-align: center;
}
.closing-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.closing-heading {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.closing-body {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 640px) {
  .closing-section { padding: 5rem 1.5rem; }
}

/* ── Footer ── */
.lux-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 5rem 4rem 3rem;
}
.lux-footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem 4rem;
  padding-bottom: 3.5rem;
}
/* Brand column */
.lux-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.lux-footer-logo {
  display: inline-block;
  text-decoration: none;
}
.lux-footer-logo img {
  height: 32px;
  width: auto;
  opacity: 0.75;
  transition: opacity var(--hover-duration) ease;
}
.lux-footer-logo:hover img { opacity: 1; }
.lux-footer-tagline {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 22ch;
}
.lux-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.lux-footer-contact a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.lux-footer-contact a:hover { color: var(--gold); }
.lux-footer-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.lux-footer-social a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
  display: inline-flex;
  align-items: center;
}
.lux-footer-social a:hover { color: var(--gold); }
.lux-footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.lux-footer-hsc {
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--hover-duration) ease;
  display: inline-flex;
  align-items: center;
}
.lux-footer-hsc img {
  display: block;
  filter: brightness(0) invert(1);
}
.lux-footer-hsc:hover { opacity: 0.85; }
/* Nav columns */
.lux-footer-col {}
.lux-footer-col-heading {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.6;
  margin: 0 0 1.25rem;
}
.lux-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lux-footer-col ul a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.lux-footer-col ul a:hover,
.lux-footer-col ul a:focus-visible { color: var(--gold); }
/* Bottom bar */
.lux-footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.lux-footer-copy {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
  letter-spacing: 0.04em;
}
.lux-footer-legal {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.lux-footer-legal a {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--hover-duration) ease, opacity var(--hover-duration) ease;
}
.lux-footer-legal a:hover { color: var(--gold); opacity: 1; }
.lux-footer-vat {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ── Sticky mobile bar ── */
.lux-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.875rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 300ms ease, transform 300ms ease;
}
.lux-sticky-bar.visible {
  opacity: 1;
  transform: translateY(0);
}
.lux-sticky-bar-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.lux-sticky-bar-cta {
  font-size: 0.875rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.lux-sticky-bar-cta:hover,
.lux-sticky-bar-cta:focus-visible { color: var(--gold-hover); }

/* ── Skip link (accessibility) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: #080808;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.skip-link:focus {
  left: 1rem;
}

/* ── Story cards (in work scroll) ── */
.story-card {
  flex: 0 0 36vw;
  height: 75vh;
  min-height: 400px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.story-card-image {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.story-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.story-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.story-card-hook {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 0.875rem;
}
.story-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.story-card-name {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.story-card-link {
  font-size: 0.8125rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--hover-duration) ease;
}
.story-card-link::after { content: ' →'; }
.story-card-link:hover,
.story-card-link:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

/* ── Client story grid (2×2 block) ── */
.story-grid-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0;
}
.story-grid-header {
  padding: var(--section-pad-y) var(--section-inset) 3rem;
}
.story-grid-heading {
  margin-bottom: 0.75rem;
}
.story-grid-sub {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}
.story-grid .story-card {
  flex: none;
  width: 100%;
  height: 65vh;
  min-height: 420px;
  text-decoration: none;
}

/* ── How your session works ── */
.how-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.how-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.how-header {
  margin-bottom: 4rem;
}
.how-headline {
  margin-bottom: 1.25rem;
}
.how-intro {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.how-step {
  border-top: 1px solid var(--gold);
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-right: 1px solid var(--border);
}
.how-step:last-child {
  border-right: none;
  padding-right: 0;
}
.how-step:not(:first-child) {
  padding-left: 2.5rem;
}
.how-step-number {
  display: block;
  font-family: var(--serif);
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.how-step-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.how-step-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Corporate callout (in pricing) ── */
.corporate-callout {
  margin: 2.5rem auto 0;
  border: 1px solid rgba(204, 153, 51, 0.3);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 860px;
}
.corporate-callout-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.corporate-callout-body {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.6;
  flex: 1;
}
.corporate-callout-link {
  font-size: 0.875rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: color var(--hover-duration) ease;
}
.corporate-callout-link::after { content: ' →'; }
.corporate-callout-link:hover,
.corporate-callout-link:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

/* ── Callout tip (gold left-border note for editorial pages) ── */
.callout-tip {
  border-left: 2px solid var(--gold);
  padding: 1.5rem 1.75rem;
  background: rgba(204, 153, 51, 0.06);
  margin-top: 3rem;
}
.callout-tip p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}
.callout-tip strong {
  color: var(--text-primary);
  font-weight: 500;
}
.callout-tip a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.callout-tip a:hover,
.callout-tip a:focus-visible { color: var(--gold-hover); text-decoration: underline; }

/* ── Card grids (framed 2-col, floating 3-col with hairline gaps) ── */
.card-grid-2,
.card-grid-3 {
  display: grid;
  gap: 2px;
  margin-top: 3rem;
}
.card-grid-2 {
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
}
.card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  :root {
    --section-pad-y: 5rem;
    --section-pad-x: 1.5rem;
  }

  .lux-nav { padding: 1.25rem 1.5rem; }
  .lux-nav-logo img { height: 32px; }
  .lux-nav-links { display: none; }
  .lux-nav-hamburger { display: flex; }

  .lux-hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .lux-hero-portraits {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    overflow: hidden;
  }
  .lux-hero-portrait {
    position: absolute;
    inset: 0;
  }
  .lux-hero-content {
    position: static;
    background: none;
    padding: 2.5rem 1.5rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .lux-hero-right { align-items: flex-start; }
  .lux-hero-rating { text-align: left; }
  .lux-hero-scroll-hint { display: none; }

  .work-portrait { flex: 0 0 85vw; height: 60vh; }
  .work-end-text { flex: 0 0 80vw; padding: 0 2rem; }
  .work-header { padding: 0 1.5rem; }

  .portrait-grid { grid-template-columns: repeat(2, 1fr); }

  .diff-section { min-height: auto; }
  .diff-inner { grid-template-columns: 1fr; gap: 3rem; }
  .diff-left { position: static; }
  .diff-headline { font-size: 2rem; }

  .proof-card { flex: 0 0 85vw; }
  .proof-scroll-track { padding: 0 1.5rem 2rem; margin: 0 -1.5rem; }

  .pricing-row { grid-template-columns: 1fr; gap: 1rem; }
  .pricing-amount { text-align: left; }

  .invitation-section { grid-template-columns: 1fr; }
  .invitation-image { min-height: 55vw; order: -1; }
  .invitation-content { padding: 4rem 1.5rem; }

  .lux-footer { padding: 3.5rem 1.5rem 2rem; }
  .lux-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
  .lux-footer-brand { grid-column: 1 / -1; }
  .lux-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .lux-footer-legal { gap: 1rem; }

  .lux-sticky-bar { display: flex; }

  .story-card { flex: 0 0 80vw; height: 60vh; }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid .story-card { height: 70vw; min-height: 320px; }

  .how-steps { grid-template-columns: 1fr; }
  .how-step {
    border-right: none;
    padding: 2rem 0;
  }
  .how-step:not(:first-child) { padding-left: 0; }

  .corporate-callout { flex-direction: column; padding: 1.5rem; align-items: flex-start; }

  .card-grid-2,
  .card-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .lux-mobile-nav-links a { font-size: 1.875rem; }
}

@media (max-width: 480px) {
  :root {
    --section-pad-y: 2.5rem;
    --section-pad-x: 1.25rem;
  }
  .lux-hero-content { padding: 1.75rem 1.25rem 0; }
  .invitation-content { padding: 2.5rem 1.25rem; }
  .closing-section { padding: 2.5rem 1.25rem; }
  .areas-section { padding: 2.5rem 1.25rem; }
}

/* =============================================================
   Corporate page components
   Added for /corporate-headshots/ migration to base-luxury.njk
   ============================================================= */

/* ── Large intro paragraph ── */
@media (max-width: 900px) {
  .corp-intro-section { padding-top: 2rem !important; }
}

.lede-block {
  max-width: 860px;
  margin: 0 auto;
}
.lede-block p {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-primary);
}
.lede-block p em {
  font-style: italic;
  color: var(--gold);
}

/* ── What You Get: numbered 4-card grid ── */
.wyg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}
.wyg-card {
  padding: 2.5rem 2rem;
  background: var(--surface);
  border-top: 1px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background var(--hover-duration) ease;
}
.wyg-card:hover { background: var(--surface-raised); }
.wyg-num {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.wyg-title {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.wyg-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Narrower work portraits for portfolio strip ── */
.work-portrait--sm {
  flex: 0 0 26vw;
  height: 36vw;
  max-height: 520px;
  min-height: 280px;
}

/* ── Personal branding photo grid ── */
.pb-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 3rem;
}
.pb-photo-grid-item {
  background: var(--surface);
  overflow: hidden;
}
.pb-photo-grid-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 500px) {
  .pb-photo-grid { grid-template-columns: 1fr; }
}

/* ── Numbered steps (inside .diff-line rows) ── */
.diff-step-wrap {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: start;
}
.diff-step-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}
.diff-step-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}
.diff-step-body {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Consistency grid: 6-column portrait strip ── */
.corp-consistency-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 1.25rem;
}
.corp-consistency-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ── Corporate pricing cards ── */
.corp-pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 4rem;
}
.corp-pricing-card {
  background: var(--surface-raised);
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.corp-pricing-card--featured {
  background: #141208;
  outline: 1px solid var(--gold);
  outline-offset: -1px;
  z-index: 1;
}
.corp-pricing-badge {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  background: var(--gold);
  color: #080808;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
}
.corp-pricing-name {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.corp-pricing-team {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.corp-pricing-price {
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.corp-pricing-vat {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.corp-pricing-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 2rem;
}
.corp-pricing-btn {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-align: center;
  transition: border-color var(--hover-duration) ease, color var(--hover-duration) ease;
}
.corp-pricing-btn:hover,
.corp-pricing-btn:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.corp-pricing-card--featured .corp-pricing-btn {
  background: var(--gold);
  color: #080808;
  border-color: var(--gold);
}
.corp-pricing-card--featured .corp-pricing-btn:hover,
.corp-pricing-card--featured .corp-pricing-btn:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}
.corp-pricing-includes {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 3rem;
  list-style: none;
}
.corp-pricing-includes li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding-left: 1.125rem;
  position: relative;
  line-height: 1.5;
}
.corp-pricing-includes li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.7;
  font-size: 0.75rem;
}

/* ── Add-ons grid ── */
.corp-extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.corp-extras-card {
  background: var(--surface);
  padding: 2.5rem;
}
.corp-extras-name {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.corp-extras-price {
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.corp-extras-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.corp-extras-link {
  font-size: 0.8125rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--hover-duration) ease;
}
.corp-extras-link:hover,
.corp-extras-link:focus-visible { color: var(--gold-hover); }
.corp-extras-link::after { content: ' \2192'; }

/* ── Why it matters: text left / image right split ── */
.corp-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
  border-top: 1px solid var(--border);
}
.corp-why-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-pad-y) 5rem;
  background: var(--surface);
}
.corp-why-content h2 { margin-bottom: 1.5rem; }
.corp-why-content p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.corp-why-image {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  min-height: 500px;
}
.corp-why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.corp-why-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 233, 227, 0.5);
}

/* ── FAQ group labels ── */
.faq-group-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2.5rem 0 0.25rem;
}
.faq-group-label:first-of-type { margin-top: 0; }

/* ── Where I work: 4-col region grid ── */
.corp-where-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}
.corp-where-cell {
  background: var(--surface-raised);
  padding: 1.5rem;
}
.corp-where-region {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.corp-where-towns {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.corp-where-towns a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--hover-duration) ease;
}
.corp-where-towns a:hover { color: var(--text-primary); }

/* ── Corporate page responsive overrides ── */
@media (max-width: 1100px) {
  .wyg-grid { grid-template-columns: repeat(2, 1fr); }
  .corp-pricing-cards { grid-template-columns: repeat(2, 1fr); }
  .corp-where-grid { grid-template-columns: repeat(2, 1fr); }
  .corp-consistency-grid { grid-template-columns: repeat(3, 1fr); }
  .corp-why { grid-template-columns: 1fr; }
  .corp-why-image { min-height: 380px; }
  .corp-why-content { padding: 4rem 3rem; }
}
@media (max-width: 768px) {
  .wyg-grid { grid-template-columns: 1fr; }
  .corp-pricing-cards { grid-template-columns: 1fr; }
  .corp-extras-grid { grid-template-columns: 1fr; }
  .corp-consistency-grid { grid-template-columns: repeat(2, 1fr); }
  .corp-where-grid { grid-template-columns: 1fr 1fr; }
  .corp-pricing-includes { grid-template-columns: 1fr; }
  .work-portrait--sm { flex: 0 0 75vw; height: 90vw; max-height: none; }
  .corp-why-content { padding: 3rem 1.5rem; }
}

/* ═══════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════ */

/* ── Page hero ── */
.contact-hero {
  padding: 14rem 3rem 7rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
.contact-hero .eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact-hero .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.contact-hero h1 {
  font-family: var(--serif);
  font-size: var(--fs-display-form);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}
.contact-hero h1 em {
  font-style: italic;
  color: var(--text-secondary);
}
.contact-hero p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
  max-width: 560px;
}

/* ── Form + sidebar layout ── */
.contact-section {
  padding: 0 3rem 8rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 6rem;
  align-items: start;
}

/* ── Form ── */
.contact-form-heading {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.contact-form-sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.form-group {
  margin-bottom: 1.75rem;
}
.form-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}
.form-input,
.form-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 300;
  padding: 0.875rem 1.125rem;
  outline: none;
  transition: border-color var(--hover-duration) ease;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.form-input:focus,
.form-textarea:focus {
  border-color: var(--gold);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}
.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.form-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  opacity: 0.7;
}
.form-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.form-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 2px;
}
.form-rating-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.contact-submit {
  display: block;
  width: 100%;
  background: var(--gold);
  color: #080808;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: none;
  cursor: pointer;
  transition: background var(--hover-duration) ease;
  text-align: center;
}
.contact-submit:hover,
.contact-submit:focus-visible {
  background: var(--gold-hover);
}
.form-small {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  line-height: 1.6;
  opacity: 0.8;
}
.form-small a {
  color: var(--gold);
  text-decoration: none;
}
.form-small a:hover { text-decoration: underline; }

/* ── People usually ask (pre-form objections) ── */
.form-preempt {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.form-preempt-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}
.form-preempt-q {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  line-height: 1.45;
}
.form-preempt-a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.form-preempt-a:last-of-type {
  margin-bottom: 0;
}

/* ── What happens next ── */
.form-next-steps {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.form-next-steps-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.form-next-steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nextstep;
}
.form-next-steps li {
  position: relative;
  padding: 0 0 0.875rem 2.25rem;
  counter-increment: nextstep;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-next-steps li:last-child { padding-bottom: 0; }
.form-next-steps li::before {
  content: counter(nextstep);
  position: absolute;
  left: 0;
  top: -0.1rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1.4;
}

/* ── Sidebar ── */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-panel {
  background: var(--surface);
  padding: 2rem;
}
.side-panel h3 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.contact-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-item-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.contact-item-value {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.55;
}
.contact-item-value a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.contact-item-value a:hover { color: var(--gold); }
.contact-item-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  opacity: 0.75;
  line-height: 1.5;
}
.btn-whatsapp {
  display: block;
  margin-top: 1.75rem;
  text-align: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color var(--hover-duration) ease, color var(--hover-duration) ease;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-whatsapp::before { content: '↗ '; }

/* ── Mobile-only primary CTA: Call Peter (≤640px). Hidden on desktop ── */
.contact-call-mobile { display: none; }
.contact-call-mobile-note { display: none; }

@media (max-width: 640px) {
  .contact-call-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--gold);
    color: var(--bg);
    padding: 1.125rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 0.625rem;
    transition: background 200ms ease;
  }
  .contact-call-mobile:hover,
  .contact-call-mobile:focus-visible {
    background: var(--gold-hover);
  }
  .contact-call-mobile-label {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    opacity: 0.85;
  }
  .contact-call-mobile-number {
    font-family: var(--serif);
    font-size: 1.625rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .contact-call-mobile-note {
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
    line-height: 1.5;
  }
  .contact-quotes-section { padding: 4rem 1.5rem 4rem; }
}

/* ── Named client quotes strip (contact page). Reuses .pp-quote styles ── */
.contact-quotes-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 5rem 3rem 6rem;
}
.contact-quotes-section .pp-quotes {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.faq-items { display: flex; flex-direction: column; }
.faq-q {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 300;
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}
.faq-q:first-child { margin-top: 0; }
.faq-a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Where I work ── */
.contact-where-section {
  padding: 8rem 3rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
.contact-where-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
}
.contact-where-section > p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
  max-width: 520px;
}
.contact-where-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 2rem;
}
.contact-where-cell {
  background: var(--surface-raised);
  padding: 1.5rem;
}
.contact-where-region {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.contact-where-towns {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.contact-where-towns a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--hover-duration) ease;
}
.contact-where-towns a:hover { color: var(--text-primary); }
.contact-where-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
  white-space: nowrap;
}

/* ── Map + address ── */
.contact-map-section {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 8rem 3rem;
}
.contact-map-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6rem;
  align-items: center;
}
.contact-map-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
}
.contact-map-inner p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.contact-map-address {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  border-left: 1px solid var(--gold);
  padding-left: 1.25rem;
  opacity: 0.8;
}
.contact-map-frame {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  filter: grayscale(0.8) contrast(1.1);
  opacity: 0.75;
}

/* ── Legal strip ── */
.contact-legal {
  padding: 4rem 3rem 5rem;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}
.contact-legal p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.5;
  line-height: 1.8;
}
.contact-legal a {
  color: inherit;
  text-decoration: none;
}
.contact-legal a:hover { color: var(--text-primary); }

/* ── Contact page responsive ── */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
  .contact-map-inner { grid-template-columns: 1fr; gap: 3rem; }
  .contact-where-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
}
@media (max-width: 768px) {
  .contact-hero { padding: 10rem 1.5rem 5rem; }
  .contact-section { padding: 0 1.5rem 5rem; }
  .contact-where-section { padding: 5rem 1.5rem; }
  .contact-map-section { padding: 5rem 1.5rem; }
  .contact-where-grid { grid-template-columns: 1fr 1fr; }
  .contact-sidebar { grid-template-columns: 1fr; }
  .contact-legal { padding: 3rem 1.5rem 4rem; }
}

/* ═══════════════════════════════════════════
   PRICING PAGE  (/pricing-session-info/)
   ═══════════════════════════════════════════ */

/* ── Page hero ── */
.pricing-page-hero {
  padding: 14rem 3rem 7rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-page-hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pricing-page-hero .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.pricing-page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.pricing-page-hero h1 em {
  font-style: italic;
  color: var(--text-secondary);
}
.pricing-page-hero .hero-body {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
  max-width: 560px;
}

/* ── Pricing cards section ── */
.pricing-page-section {
  padding: 0 3rem 8rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-page-header {
  margin-bottom: 3rem;
}
.pricing-page-header h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.pricing-page-header p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* Two-card grid */
.pp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  max-width: 780px;
  margin-bottom: 2rem;
}
.pp-cards--three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
}
.pp-card-tag {
  color: var(--gold);
}
.pp-card {
  background: var(--surface-raised);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.pp-card--featured {
  background: #141208;
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.pp-card-name {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.pp-card-price {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.pp-card-price sup {
  font-size: 1.75rem;
  vertical-align: top;
  padding-top: 0.5rem;
  display: inline-block;
}
.pp-card-vat {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}
.pp-card-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

/* Example note box */
.pp-example-note {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  max-width: 780px;
  margin-bottom: 3rem;
}
.pp-example-note p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.pp-example-note strong { color: var(--text-primary); }

/* Example table */
.pp-example-table {
  max-width: 780px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 6rem;
}
.pp-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.pp-table-head span {
  padding: 0.875rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pp-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.pp-table-row:last-child { border-bottom: none; }
.pp-table-row span {
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.pp-table-row span:last-child {
  color: var(--text-primary);
  font-weight: 500;
}
.pp-table-row--highlight { background: rgba(204,153,51,0.04); }
.pp-table-row--highlight span:last-child { color: var(--gold); }

/* Pull quote */
.pp-pullquote {
  max-width: 780px;
  padding: 0.75rem 0;
  margin-bottom: 4rem;
}
.pp-pullquote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.pp-pullquote footer {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  border: none;
  padding: 0;
  display: block;
  background: none;
}
.pp-pullquote footer span { color: var(--gold); }

/* ── Typical totals: header + note ── */
.pp-totals-header {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
.pp-totals-header .section-label {
  margin-bottom: 0.5rem;
}
.pp-totals-header h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 300;
  color: var(--text-primary);
  margin: 0;
}
.pp-totals-note {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* ── Three-quote testimonial strip (post-pricing) ── */
.pp-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 3.5rem 0 0;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.pp-quote {
  margin: 0;
  padding: 0;
}
.pp-quote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 0.875rem;
}
.pp-quote figcaption {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.pp-quote-stars {
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ── Inline CTA immediately after pricing/testimonials ── */
.pp-inline-cta {
  text-align: center;
  margin: 3rem 0 0;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--border);
}
.pp-inline-cta .btn-gold {
  margin-bottom: 1.25rem;
}
.pp-inline-cta > p {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Caption above relocated headshots grid ── */
.pp-grid-caption {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 3rem 1.5rem 1.5rem;
  margin: 0;
}

/* ── CTA band: tertiary line under the actions ── */
.pp-cta-sub {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.pp-cta-sub a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.pp-cta-sub a:hover,
.pp-cta-sub a:focus-visible {
  color: var(--gold-hover);
}

/* ── Responsive overrides for the new pricing components ── */
@media (max-width: 900px) {
  .pp-quotes { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── What's included: two-column ── */
.pp-includes-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8rem 3rem;
}
.pp-includes-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.pp-includes-col h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.pp-includes-col > p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}
.pp-includes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.pp-includes-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pp-includes-list li:last-child { border-bottom: 1px solid var(--border); }
.pp-includes-list li::before {
  content: '\2014';
  color: var(--gold);
  opacity: 0.7;
  font-size: 0.8rem;
  padding-top: 0.2rem;
}
.pp-includes-list li strong {
  color: var(--text-primary);
  display: block;
  font-weight: 400;
  margin-bottom: 0.15rem;
}

/* ── How it works: numbered steps ── */
.pp-how-section {
  padding: 8rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pp-how-section h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
  max-width: 600px;
}
.pp-how-section > p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 4rem;
}
.pp-steps {
  display: flex;
  flex-direction: column;
  max-width: 780px;
}
.pp-step {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: start;
}
.pp-step:last-child { border-bottom: 1px solid var(--border); }
.pp-step-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  opacity: 0.5;
}
.pp-step-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}
.pp-step-body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── FAQ section (pricing page variant) ── */
.pp-faq-section {
  padding: 8rem 3rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.pp-faq-inner {
  max-width: 760px;
  margin: 0 auto;
}
.pp-faq-inner h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  margin-bottom: 3.5rem;
}
.pp-faq-inner details.faq-item > p a {
  color: var(--gold);
  text-decoration: none;
}
.pp-faq-inner details.faq-item > p a:hover { text-decoration: underline; }

/* ── CTA band ── */
.pp-cta-band {
  padding: 8rem 3rem;
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.pp-cta-band .eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.pp-cta-band h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2-band);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.pp-cta-band h2 em {
  font-style: italic;
  color: var(--text-secondary);
}
.pp-cta-band > p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}
.pp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.pp-cta-ghost {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--hover-duration) ease;
}
.pp-cta-ghost:hover { color: var(--text-primary); }

/* ── Pricing page responsive ── */
@media (max-width: 900px) {
  .pp-includes-inner { grid-template-columns: 1fr; gap: 4rem; }
  .pp-cards { grid-template-columns: 1fr; max-width: 420px; }
  /* Three-card variant keeps 3 columns longer; tighten spacing so they fit. */
  .pp-cards--three .pp-card { padding: 2rem 1.25rem; }
  .pp-cards--three .pp-card-price { font-size: 3rem; }
  .pp-cards--three .pp-card-price sup { font-size: 1.25rem; padding-top: 0.4rem; }
  .pp-cards--three .pp-card-name { margin-bottom: 1rem; }
  .pp-cards--three .pp-card-vat { margin-bottom: 1.25rem; font-size: 0.75rem; }
  .pp-cards--three .pp-includes-list li { font-size: 0.8125rem; }
}
@media (max-width: 700px) {
  .pp-cards--three { grid-template-columns: 1fr; max-width: 420px; }
  .pp-cards--three .pp-card { padding: 3rem 2.5rem; }
  .pp-cards--three .pp-card-price { font-size: 4rem; }
  .pp-cards--three .pp-card-price sup { font-size: 1.75rem; padding-top: 0.5rem; }
  .pp-cards--three .pp-card-name { margin-bottom: 1.5rem; }
  .pp-cards--three .pp-card-vat { margin-bottom: 1.75rem; font-size: 0.8rem; }
  .pp-cards--three .pp-includes-list li { font-size: inherit; }
}
@media (max-width: 768px) {
  .pricing-page-hero { padding: 10rem 1.5rem 5rem; }
  .pricing-page-section { padding: 0 1.5rem 5rem; }
  .pp-includes-section { padding: 5rem 1.5rem; }
  .pp-how-section { padding: 5rem 1.5rem; }
  .pp-faq-section { padding: 5rem 1.5rem; }
  .pp-cta-band { padding: 5rem 1.5rem; }
  .pp-cta-actions { flex-direction: column; gap: 1rem; }
}

/* ═══════════════════════════════════════════
   PERSONAL BRANDING PAGE  (/personal-branding-photography/)
   ═══════════════════════════════════════════ */

/* ── Who it's for: client type grid ── */
.pb-types-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.pb-types-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.pb-types-intro {
  max-width: 660px;
  margin-bottom: 3.5rem;
}
.pb-types-intro h2 { margin-bottom: 1rem; }
.pb-types-intro p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.7;
}
.pb-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.pb-type {
  background: var(--surface);
  padding: 2.5rem;
}
.pb-type-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.pb-type-body {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── What your library covers: 4-item grid ── */
.pb-covers-section {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--border);
}
.pb-covers-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.pb-covers-intro {
  max-width: 660px;
  margin-bottom: 3.5rem;
}
.pb-covers-intro h2 { margin-bottom: 1rem; }
.pb-covers-intro p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.7;
}
.pb-covers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.pb-cover-item {
  padding: 2.5rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.pb-cover-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 1rem;
}
.pb-cover-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.pb-cover-body {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Inline prose links inside personal-branding body copy */
.pb-type-body a,
.pb-cover-body a,
.pb-gallery-caption a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.pb-type-body a:hover,
.pb-type-body a:focus-visible,
.pb-cover-body a:hover,
.pb-cover-body a:focus-visible,
.pb-gallery-caption a:hover,
.pb-gallery-caption a:focus-visible { color: var(--gold-hover); }

/* ── Subscription callout within pricing ── */
.pb-sub-note {
  max-width: 860px;
  margin: 2.5rem auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  padding: 2rem 2.5rem;
}
.pb-sub-note h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.pb-sub-note p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.pb-sub-note a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.pb-sub-note a:hover,
.pb-sub-note a:focus-visible { color: var(--gold-hover); text-decoration: underline; }

/* ── Slim subscription strip (sits beneath the two main pricing cards) ── */
.pp-sub-strip {
  max-width: 780px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pp-sub-strip-text { flex: 1 1 auto; min-width: 0; }
.pp-sub-strip-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.4rem;
}
.pp-sub-strip-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.pp-sub-strip-desc {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.pp-sub-strip-action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  white-space: nowrap;
}
.pp-sub-strip-price {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
}
.pp-sub-strip-price sup {
  font-size: 0.85rem;
  vertical-align: top;
  padding-top: 0.25rem;
  display: inline-block;
}
.pp-sub-strip-per {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-left: 0.4rem;
}
.pp-sub-strip-cta {
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  transition: color 200ms ease;
}
.pp-sub-strip-cta:hover,
.pp-sub-strip-cta:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .pp-sub-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .pp-sub-strip-action {
    align-items: flex-start;
    width: 100%;
  }
}

/* ── Standalone "Full pricing details" link beneath the cards ── */
.pb-pricing-link {
  text-align: center;
  margin-top: 1.25rem;
}
.pb-pricing-link a {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 200ms ease;
}
.pb-pricing-link a::after { content: ' \2192'; }
.pb-pricing-link a:hover,
.pb-pricing-link a:focus-visible { color: var(--gold-hover); text-decoration: underline; }

/* ── Personal branding page responsive ── */
@media (max-width: 900px) {
  .pb-types-grid { grid-template-columns: 1fr; }
  .pb-covers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pb-types-section { padding: 5rem 1.5rem; }
  .pb-covers-section { padding: 5rem 1.5rem; }
  .pb-sub-note { padding: 1.5rem; }
}

/* ═══════════════════════════════════════════
   LEGAL PAGES  (/privacy/  /terms/)
   ═══════════════════════════════════════════ */

/* ── Page hero ── */
.legal-hero {
  padding: 14rem 3rem 6rem;
  max-width: 860px;
  margin: 0 auto;
}
.legal-hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.legal-hero .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.legal-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.legal-hero-meta {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ── Prose body ── */
.legal-body {
  padding: 0 3rem 10rem;
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.legal-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--text-primary);
  margin: 3.5rem 0 1rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-child { margin-top: 3rem; padding-top: 3rem; border-top: none; }
.legal-body h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--text-primary);
  margin: 2rem 0 0.75rem;
}
.legal-body p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.legal-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-body ul li {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  padding-left: 1.5rem;
  position: relative;
}
.legal-body ul li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
  font-size: 0.75rem;
  top: 0.3em;
}
.legal-body ul li strong,
.legal-body p strong {
  color: var(--text-primary);
  font-weight: 500;
}
.legal-body a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.legal-body a:hover,
.legal-body a:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Callout / notice box ── */
.legal-notice {
  margin: 2.5rem 0;
  background: rgba(204, 153, 51, 0.08);
  border: 1px solid rgba(204, 153, 51, 0.35);
  border-left: 2px solid var(--gold);
  padding: 2rem 2.5rem;
}
.legal-notice h2 {
  margin: 0 0 0.75rem !important;
  padding-top: 0 !important;
  border-top: none !important;
  font-size: 1.125rem !important;
}
.legal-notice p {
  margin-bottom: 0;
}

/* ── Legal pages responsive ── */
@media (max-width: 768px) {
  .legal-hero { padding: 10rem 1.5rem 4rem; }
  .legal-body { padding: 0 1.5rem 7rem; }
  .legal-notice { padding: 1.5rem; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-prose {
  padding: 5rem 3rem 4rem;
  max-width: 760px;
  margin: 0 auto;
}
.about-prose p {
  font-size: var(--fs-lede);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.about-prose h2 {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--text-primary);
  margin: 3.5rem 0 1.25rem;
  line-height: 1.3;
  border-top: none;
  padding-top: 0;
}
.about-prose a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}
.about-prose a:hover,
.about-prose a:focus-visible { color: var(--gold-hover); }

.about-pullquote {
  margin: 3rem 0;
  padding: 2rem 2rem 2rem 2.25rem;
  border-left: 2px solid var(--gold);
  background: var(--surface);
}
.about-pullquote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.about-pullquote cite {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-style: normal;
}

.about-logos {
  padding: 5rem 3rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.about-logos .section-label {
  justify-content: center;
  margin-bottom: 3rem;
}
.about-logos img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  opacity: 0.72;
}

@media (max-width: 768px) {
  .about-prose { padding: 3.5rem 1.5rem 3rem; }
  .about-pullquote { padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
  .about-logos { padding: 4rem 1.5rem; }
}

/* ============================================================
   CLIENT STORIES INDEX
   ============================================================ */

/* ── Page hero ── */
.cs-hero {
  padding: 14rem 3rem 6rem;
  max-width: 960px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.cs-hero-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cs-hero-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.cs-hero h1 {
  font-family: var(--serif);
  font-size: var(--fs-display-form);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 2rem;
}
.cs-hero p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0;
}

/* ── Stories grid ── */
.cs-grid-section {
  padding: 6rem 3rem;
  max-width: 1320px;
  margin: 0 auto;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* Featured card — full width, side-by-side */
.cs-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cs-card:first-child .cs-card-image {
  aspect-ratio: auto;
  height: 100%;
  min-height: 520px;
}
.cs-card:first-child .cs-card-body {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-card:first-child .cs-card-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.cs-card {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 200ms ease;
}
.cs-card:hover { background: var(--surface-raised); }
.cs-card:hover .cs-card-image img {
  transform: scale(1.03);
}
.cs-card:hover .cs-card-read {
  color: var(--gold-hover);
}
.cs-card:hover .cs-card-read::after {
  transform: translateX(4px);
}

.cs-card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--surface-raised);
}
.cs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 600ms ease;
}

.cs-card-body {
  padding: 2rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}
.cs-card-role {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.cs-card-title {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}
.cs-card-excerpt {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}
.cs-card-read {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 200ms ease;
}
.cs-card-read::after {
  content: '→';
  transition: transform 200ms ease;
  display: inline-block;
}

/* ── Testimonials band ── */
.cs-testimonials {
  padding: 7rem 3rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cs-testimonials-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.cs-testimonial-mark {
  font-family: var(--serif);
  font-size: 6rem;
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 1.5rem;
  display: block;
  font-weight: 300;
}
.cs-testimonial-text {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 2rem;
  font-style: italic;
}
.cs-testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
  color: var(--gold);
  font-size: 0.875rem;
}
.cs-testimonial-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.cs-testimonial-context {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ── Service links prose ── */
.cs-service-links {
  padding: 7rem 3rem;
  max-width: 960px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.cs-service-links p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cs-service-links p:last-child { margin-bottom: 0; }
.cs-service-links a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(204,153,51,0.25);
  transition: color 200ms ease, border-color 200ms ease;
}
.cs-service-links a:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* ── Closing CTA ── */
.cs-closing-cta {
  padding: 9rem 3rem;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.cs-closing-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}
.cs-closing-cta h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}
.cs-closing-cta p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 3rem;
}
.cs-closing-secondary {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--gold);
  text-decoration: none;
  transition: color 200ms ease;
}
.cs-closing-secondary:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── Client Stories responsive ── */
@media (max-width: 900px) {
  .cs-hero { padding: 10rem 1.5rem 4rem; }
  .cs-grid-section { padding: 4rem 1.5rem; }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-card:first-child {
    grid-column: 1;
    display: flex;
    flex-direction: column;
  }
  .cs-card:first-child .cs-card-image { min-height: 260px; height: auto; }
  .cs-card:first-child .cs-card-body { padding: 2rem 1.5rem 2.25rem; }
  .cs-testimonials { padding: 5rem 1.5rem; }
  .cs-testimonials-inner { grid-template-columns: 1fr; gap: 4rem; }
  .cs-service-links { padding: 5rem 1.5rem; }
  .cs-closing-cta { padding: 6rem 1.5rem; }
}
@media (max-width: 600px) {
  .cs-card:first-child .cs-card-title { font-size: 1.75rem; }
}

/* ============================================================
   CLIENT STORY — INDIVIDUAL PAGE   .csp-*
   ============================================================ */

/* ── Page header ── */
.csp-article-hero {
  padding: 10rem 3rem 0;
  max-width: 1200px;
  margin: 0 auto;
}
.csp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.csp-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease;
}
.csp-breadcrumb a:hover { color: var(--gold); }
.csp-breadcrumb-sep { opacity: 0.4; }

.csp-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.csp-category-tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.csp-meta-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.csp-meta-location {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.csp-title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  max-width: 820px;
}
.csp-standfirst {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
  font-weight: 300;
  margin-bottom: 3rem;
}

/* ── Two-column layout grid ── */
.csp-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  column-gap: 5rem;
  row-gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 3rem 7rem;
  align-items: start;
}

/* ── Hero image (spans both columns) ── */
.csp-hero-image {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 4rem;
}
.csp-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ── Article body ── */
.csp-body {
  grid-column: 1;
  grid-row: 2;
}

/* ── Section blocks (Who / Why / How / Result) ── */
.csp-section {
  margin: 3.5rem 0;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border);
}
.csp-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.csp-section-num {
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.csp-section-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}
.csp-body p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.625rem;
  font-weight: 300;
}
.csp-body a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(204,153,51,0.3);
  transition: color 200ms ease, border-color 200ms ease;
}
.csp-body a:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* ── Pull quote ── */
.csp-pull-quote {
  margin: 2.5rem 0;
  padding: 2rem 0 2rem 2rem;
  border-left: 1px solid var(--gold);
}
.csp-pull-quote p {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.csp-pull-quote cite {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-style: normal;
}

/* ── Sidebar ── */
.csp-sidebar {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-self: start;
  margin-top: 5rem;
  position: sticky;
  top: 7rem;
}
.csp-sidebar-author {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.csp-sidebar-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.csp-sidebar-name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.csp-sidebar-bio {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 1.25rem;
}
.csp-sidebar-link {
  font-size: 0.8125rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.csp-sidebar-link:hover { color: var(--gold-hover); text-decoration: underline; }
.csp-sidebar-link::after { content: ' →'; }

.csp-sidebar-book {
  padding: 1.75rem;
  background: var(--surface);
  border-top: 2px solid var(--gold);
}
.csp-sidebar-book-headline {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.875rem;
}
.csp-sidebar-book-body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  font-weight: 300;
}

/* ── Gallery (full width, outside the layout grid) ── */
.csp-gallery-section {
  border-top: 1px solid var(--border);
  padding: 5rem 3rem 7rem;
  max-width: 1200px;
  margin: 0 auto;
}
.csp-gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}
.csp-gallery-heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.csp-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.csp-gallery-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.csp-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 200ms ease;
}
.csp-gallery-item img:hover { opacity: 0.85; }
.csp-gallery-caption {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Video section ── */
.csp-video-section {
  border-top: 1px solid var(--border);
  padding: 5rem 3rem 7rem;
  max-width: 1200px;
  margin: 0 auto;
}
.csp-video-header {
  margin-bottom: 3rem;
}
.csp-video-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 60ch;
}
.csp-video-wrap {
  max-width: 800px;
}
.csp-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
}

/* ── Article footer nav ── */
.csp-article-footer {
  border-top: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.csp-footer-back {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}
.csp-footer-back:hover { color: var(--gold); }
.csp-footer-back::before { content: '← '; }

/* ── Individual story responsive ── */
@media (max-width: 1024px) {
  .csp-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .csp-hero-image { grid-column: 1; grid-row: 1; }
  .csp-body { grid-column: 1; grid-row: 2; }
  .csp-sidebar {
    grid-column: 1;
    grid-row: 3;
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 0;
  }
}
@media (max-width: 900px) {
  .csp-article-hero { padding: 8rem 1.5rem 0; }
  .csp-layout { padding: 2rem 1.5rem 5rem; }
  .csp-gallery-section { padding: 4rem 1.5rem 5rem; }
  .csp-hero-image { aspect-ratio: 4/3; }
  .csp-sidebar { grid-template-columns: 1fr; }
  .csp-article-footer { padding: 3rem 1.5rem; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .csp-gallery { grid-template-columns: 1fr; }
  .csp-hero-image { aspect-ratio: 1/1; }
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */

.thankyou-section {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14rem 3rem 10rem;
  max-width: 680px;
  margin: 0 auto;
}
.thankyou-section .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.thankyou-section .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.thankyou-section h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.thankyou-body {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .thankyou-section { padding: 11rem 1.5rem 8rem; }
}

/* ============================================================
   404 / ERROR PAGE
   ============================================================ */

.error-hero {
  padding: 14rem 3rem 6rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.error-hero .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.error-hero h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.error-intro {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.error-image-wrap {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.error-image-wrap img {
  display: block;
  width: 100%;
  max-height: 55vh;
  object-fit: cover;
  object-position: center;
}
.error-story {
  max-width: 760px;
}
.error-cta {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .error-hero { padding: 11rem 1.5rem 5rem; }
  .error-image-wrap img { max-height: 40vh; }
}

/* ============================================================
   LOCATION PAGES  (/services/*/  using location-luxury.njk)
   ============================================================ */

/* ── Proof strip — matches mockup proof-strip exactly ── */
.loc-proof-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 3rem;
}
.loc-proof-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.loc-proof-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}
.loc-proof-item:first-child {
  border-left: none;
  padding-left: 0;
}
.loc-proof-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
}
.loc-proof-num--stars { color: var(--gold); }
.loc-proof-plus { color: var(--gold); }
.loc-proof-unit {
  font-size: 0.7em;
  color: var(--text-secondary);
}
.loc-proof-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .loc-proof-strip-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .loc-proof-item:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 720px) {
  .loc-proof-strip { padding: 2rem 1.5rem; overflow-x: auto; scrollbar-width: none; }
  .loc-proof-strip::-webkit-scrollbar { display: none; }
  .loc-proof-strip-inner { min-width: max-content; grid-template-columns: repeat(3, auto); gap: 0; }
  .loc-proof-item,
  .loc-proof-item:nth-child(3) { border-left: 1px solid var(--border); padding-left: 1.5rem; }
  .loc-proof-item:first-child { border-left: none; padding-left: 0; }
}

/* ── Proof strip — 4-column variant (Personal Branding) ── */
.loc-proof-strip--4col .loc-proof-strip-inner {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
  .loc-proof-strip--4col .loc-proof-strip-inner {
    grid-template-columns: repeat(4, auto);
  }
}



/* ── Work section — grid footer (caption + link below grid) ── */
.work-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem var(--section-inset);
  flex-wrap: wrap;
}
.work-grid-footer .work-end-quote {
  margin: 0;
}
@media (max-width: 600px) {
  .work-grid-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ── Breadcrumb ── */
.loc-breadcrumb {
  padding: 0.875rem var(--section-pad-x);
  border-bottom: 1px solid var(--border);
}
.loc-breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}
.loc-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease;
}
.loc-breadcrumb a:hover { color: var(--gold); }

/* ── Intro text ── */
.loc-intro-text p {
  font-size: var(--fs-lede);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.loc-intro-text p:last-child { margin-bottom: 0; }
.loc-intro-text strong { color: var(--text-primary); font-weight: 500; }
.loc-intro-text a { color: var(--gold); text-decoration: none; transition: color 200ms ease; }
.loc-intro-text a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── Intro lead paragraph (large serif opener) ── */
.loc-intro-text .loc-intro-lead {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
}
.loc-intro-text .loc-intro-lead em {
  font-style: italic;
  color: var(--gold);
}

/* ── Intro two-column body text ── */
.loc-intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 860px;
  margin: 2rem auto 0;
}
@media (max-width: 640px) {
  .loc-intro-cols { grid-template-columns: 1fr; gap: 1.5rem; }
}
.loc-intro-links {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.7;
}
.loc-intro-links a { color: var(--gold); text-decoration: none; transition: color 200ms ease; }
.loc-intro-links a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── Image pairs ── */
.loc-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.loc-img-pair picture { display: block; overflow: hidden; }
.loc-img-pair img {
  display: block;
  width: 100%;
  height: 60vw;
  max-height: 540px;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 600px) {
  .loc-img-pair { grid-template-columns: 1fr; }
  .loc-img-pair img { height: 80vw; max-height: 400px; }
}

/* ── Pricing cards (legacy, kept for non-migrated pages) ── */
.loc-pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 560px;
  margin: 0 auto;
}
.loc-pricing-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2rem 1.5rem;
  text-align: center;
}
.loc-pricing-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.loc-pricing-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.loc-pricing-note-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
@media (max-width: 480px) {
  .loc-pricing-cards { grid-template-columns: 1fr; max-width: 260px; }
}

/* ── Pricing table (location pages — mockup style) ── */
.loc-pricing-table {
  border: 1px solid var(--border);
  margin: 2.5rem 0 0;
}
.loc-pricing-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2.5rem;
  padding: 2.25rem 2rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.loc-pricing-row:last-child {
  border-bottom: none;
}
.loc-pricing-row-identity {
  /* left column: category + name */
}
.loc-pricing-row-cat {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.loc-pricing-row-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.15;
}
.loc-pricing-row-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}
.loc-pricing-row-price {
  text-align: right;
}
.loc-pricing-row-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}
.loc-pricing-row-meta {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .loc-pricing-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 1.5rem;
  }
  .loc-pricing-row-price {
    text-align: left;
  }
}
@media (max-width: 480px) {
  .loc-pricing-row {
    padding: 1.75rem 1.25rem;
  }
}

/* ── Credibility: why-choose columns ── */
.loc-why-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
.loc-why-col p {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.loc-why-col p:last-child { margin-bottom: 0; }
.loc-why-col strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 768px) {
  .loc-why-cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Industry lists ── */
.loc-industries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
}
.loc-industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.loc-industry-list li {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
}
.loc-industry-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
  font-size: 0.75rem;
  top: 0.3em;
}
@media (max-width: 640px) {
  .loc-industries { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ── FAQ intro override ── */
.loc-faq-intro p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.loc-faq-intro a { color: var(--gold); text-decoration: none; }
.loc-faq-intro a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── Cross-sell sections ── */
.loc-crosssell {
  max-width: 680px;
}
.loc-crosssell h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.loc-crosssell-body,
.loc-crosssell-body p {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.loc-crosssell-body p:last-child { margin-bottom: 0; }
.loc-crosssell-body strong { color: var(--text-primary); font-weight: 500; }
.loc-crosssell .btn-outline { margin-top: 1.75rem; }

/* ── Areas covered ── */
.loc-areas-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-top: 2rem;
}
.loc-areas-col h3,
.loc-why-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-card-title);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.loc-areas-col p {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.label--col-head { margin-bottom: 1rem; }
.loc-places-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.loc-places-list li {
  font-size: var(--fs-body);
  color: var(--text-primary);
  padding-left: 1.25rem;
  position: relative;
}
.loc-places-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.5;
  font-size: 0.75rem;
  top: 0.3em;
}
@media (max-width: 640px) {
  .loc-areas-cols { grid-template-columns: 1fr; }
}

/* ── Step lists (used in customBody process sections) ── */
.loc-step-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.loc-step-list li {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.65;
  padding-left: 1.25rem;
  position: relative;
}
.loc-step-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
  font-size: 0.75rem;
  top: 0.3em;
}

/* ── Process section: two-column sticky layout ── */
.process-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8rem var(--section-pad-x);
}
.process-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6rem;
  align-items: start;
}
.process-sticky {
  position: sticky;
  top: 8rem;
}
.process-headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 1rem 0;
}
.process-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 0.75rem;
}
.process-step {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  align-items: start;
}
.process-step:last-child { border-bottom: 1px solid var(--border); }
.process-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.8;
  padding-top: 0.25rem;
}
.process-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.process-title small {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: 0.75rem;
}
.process-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .process-inner { grid-template-columns: 1fr; gap: 3rem; }
  .process-sticky { position: static; }
  .process-section { padding: 4rem var(--section-pad-x); }
}

/* ── Nearby locations ── */
.loc-nearby-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.loc-nearby-item {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.5rem;
  transition: border-color 200ms ease;
}
.loc-nearby-item:hover { border-color: var(--gold); }
.loc-nearby-link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 200ms ease;
  display: block;
  margin-bottom: 0.5rem;
}
.loc-nearby-link:hover { color: var(--gold); }
.loc-nearby-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: block;
}


/* ============================================================
   2. ADDITIONS — luxury-additions.css
   ============================================================ */

/* ============================================================
   ProHeadshots Luxury — Additions
   Drop-in companion to luxury.css.
   Load order: luxury.css FIRST, then luxury-additions.css.

   Contents:
     1. Global .btn-outline (was missing — only scoped margin existed)
     2. Location pages — Travel zones grid (.loc-travel-*)
     3. Location pages — Reviews mosaic (.loc-reviews-*)
     4. Location pages — Case study card (.loc-case-*)
     5. Centred section-label modifier (.section-label.center)
     6. Hero — chip-style stats override + remove ruled separators
   ============================================================ */


/* ── 1. Global outline button ───────────────────────────────── */
.btn-outline {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  text-decoration: none;
  transition: border-color var(--hover-duration) ease, color var(--hover-duration) ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
}


/* ── 2. Travel zones (new location-page component) ──────────── */
.loc-travel-section {
  padding: var(--section-pad-y) var(--section-pad-x);
}
.loc-travel-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.loc-travel-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
}
.loc-travel-head p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.loc-travel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  max-width: 1100px;
  margin: 0 auto;
}
.loc-travel-cell {
  background: var(--surface-raised);
  padding: 2rem 1.5rem;
  text-align: center;
}
.loc-travel-zone {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.loc-travel-area {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.loc-travel-fee {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.loc-travel-fee--included { color: var(--gold); }
@media (max-width: 900px) { .loc-travel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .loc-travel-grid { grid-template-columns: 1fr; } }


/* ── 3. Reviews mosaic (static 3-up, location-page variant) ── */
.loc-reviews-section {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.loc-reviews-head {
  max-width: 1280px;
  margin: 0 auto 3.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.loc-reviews-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.875rem);
  font-weight: 300;
  line-height: 1.1;
  max-width: 560px;
}
.loc-reviews-rating {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.loc-reviews-rating strong {
  display: block;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}
.loc-reviews-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}
.loc-review-card {
  background: var(--bg);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
}
.loc-review-mark {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 1.75rem;
  font-weight: 300;
}
.loc-review-text {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-primary);
  flex: 1;
  margin-bottom: 1.75rem;
}
.loc-review-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.55rem;
}
.loc-review-name {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.loc-review-name span { color: rgba(122, 118, 114, 0.55); }
.loc-reviews-cta {
  text-align: center;
  max-width: 1280px;
  margin: 2.5rem auto 0;
}
@media (max-width: 900px) {
  .loc-reviews-head { flex-direction: column; align-items: flex-start; }
  .loc-reviews-rating { text-align: left; }
  .loc-reviews-grid { grid-template-columns: 1fr; }
}


/* ── 4. Case study card (image + body + metric strip) ──────── */
.loc-case-section {
  padding: var(--section-pad-y) var(--section-pad-x);
}
.loc-case-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.loc-case-img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}
.loc-case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-case-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.loc-case-body h2 em {
  font-style: italic;
  color: var(--gold);
}
.loc-case-body p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.loc-case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 2rem 0;
}
.loc-case-meta > div {
  background: var(--bg);
  padding: 1.25rem 1rem;
  text-align: center;
}
.loc-case-meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(122, 118, 114, 0.55);
  margin-bottom: 0.4rem;
}
.loc-case-meta dd {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold);
}
@media (max-width: 900px) {
  .loc-case-inner { grid-template-columns: 1fr; gap: 3rem; }
}


/* ── 5. Centred section-label modifier ─────────────────────── */
.section-label.center {
  justify-content: center;
}
.section-label.center::before { display: none; }


/* ── 6. Hero stats — label / value pairs with hairline borders ──
   Matches v3 mockup: small uppercase label above serif value,
   flanked by top and bottom hairlines on the stats block.
   No chip boxes, no separator above the CTAs. */
.lux-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin-top: 0;
  margin-bottom: 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: 540px;
}
.lux-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  align-items: flex-start;
}
.lux-hero-stat-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4A4744;
  margin: 0;
}
.lux-hero-stat-value {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
}
/* No ruled separator above the CTAs — stats block already has a bottom border */
.lux-hero-stats + .lux-hero-ctas {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

@media (max-width: 900px) {
  .lux-hero-stats { gap: 1.5rem; padding: 1rem 0; max-width: none; }
  .lux-hero-stat-value { font-size: 1rem; }
}


/* ============================================================
   LONDON PAGE — editorial components
   Prefix: .lnd-
   Used only by london-headshot-photographer.njk
   ============================================================ */

/* ── Marquee strip — scrolling London neighbourhoods ── */
.lnd-marquee-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 1.5rem 0;
  position: relative;
}
.lnd-marquee-strip::before,
.lnd-marquee-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.lnd-marquee-strip::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.lnd-marquee-strip::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.lnd-marquee-track {
  display: flex;
  gap: 4rem;
  animation: lndMarquee 50s linear infinite;
  width: max-content;
}
.lnd-marquee-track span {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--text-secondary);
  font-weight: 300;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4rem;
}
.lnd-marquee-track span::after {
  content: '·';
  color: var(--gold);
  font-size: 2rem;
  line-height: 0.5;
}
@keyframes lndMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lnd-marquee-track { animation: none; }
}

/* ── Signature band — 4 benefit stats ── */
.lnd-sig-band {
  padding: 5rem var(--section-pad-x);
  background: linear-gradient(180deg, var(--bg) 0%, #0a0907 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lnd-sig-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.lnd-sig-cell {
  padding: 0 2.5rem;
  border-left: 1px solid var(--border);
}
.lnd-sig-cell:first-child { border-left: none; padding-left: 0; }
.lnd-sig-cell:last-child  { padding-right: 0; }
.lnd-sig-num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.lnd-sig-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .lnd-sig-inner { grid-template-columns: 1fr 1fr; }
  .lnd-sig-cell {
    padding: 2rem 1.5rem;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
  }
  .lnd-sig-cell:nth-child(1),
  .lnd-sig-cell:nth-child(3) { border-left: none; padding-left: 0; }
  .lnd-sig-cell:nth-child(1),
  .lnd-sig-cell:nth-child(2) { border-top: none; }
}
@media (max-width: 480px) {
  .lnd-sig-cell { padding: 1.5rem 1rem; }
}

/* ── Triptych — 1 large left + 2 stacked right ── */
.lnd-triptych {
  padding: var(--section-pad-y) var(--section-pad-x);
}
.lnd-triptych-head {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
}
.lnd-triptych-head h2 em { font-style: italic; color: var(--gold); }
.lnd-triptych-head p {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 460px;
}
.lnd-triptych-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
  height: 88vh;
  min-height: 720px;
}
.lnd-trip-img {
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.lnd-trip-img:nth-child(1) { grid-row: 1 / 3; }
.lnd-trip-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform 800ms ease;
}
.lnd-trip-img:hover img { transform: scale(1.04); }
.lnd-trip-cap {
  position: absolute;
  bottom: 1.25rem; left: 1.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237,233,227,0.65);
  z-index: 2;
}
.lnd-trip-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.55) 0%, transparent 35%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .lnd-triptych-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .lnd-triptych-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    min-height: 0;
    gap: 1rem;
  }
  .lnd-trip-img { aspect-ratio: 4/5; }
  .lnd-trip-img:nth-child(1) { grid-row: auto; }
}

/* ── Argument — "Studio quality. No studio bill." ── */
.lnd-argument {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lnd-argument-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 7rem;
  align-items: center;
}
.lnd-arg-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.lnd-arg-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--gold);
}
.lnd-arg-left h2 { margin-bottom: 2rem; }
.lnd-arg-left h2 em { font-style: italic; color: var(--text-secondary); }
.lnd-arg-left p {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 540px;
}
.lnd-arg-left strong { color: var(--text-primary); font-weight: 400; }
.lnd-arg-quote {
  border-left: 2px solid var(--gold);
  padding: 0.5rem 0 0.5rem 2.5rem;
}
.lnd-arg-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-weight: 300;
}
.lnd-arg-attr {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lnd-arg-attr span { color: rgba(122,118,114,0.55); }
.lnd-arg-cta {
  margin-top: 2rem;
}
.lnd-arg-cta-phone {
  margin-top: 1rem;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.lnd-arg-cta-phone a {
  color: var(--gold);
  text-decoration: none;
}
.lnd-arg-cta-phone a:hover { color: var(--gold-hover); }
@media (max-width: 900px) {
  .lnd-argument-inner { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ── Process — 4-column horizontal ── */
.lnd-process {
  padding: var(--section-pad-y) var(--section-pad-x);
}
.lnd-process-inner { max-width: var(--container-max); margin: 0 auto; }
.lnd-process-head {
  margin-bottom: 4rem;
  max-width: 720px;
}
.lnd-process-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.lnd-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.lnd-process-step {
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-right: 1px solid var(--border);
}
.lnd-process-step:not(:first-child) { padding-left: 2.5rem; }
.lnd-process-step:last-child { border-right: none; padding-right: 0; }
.lnd-step-num {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.lnd-step-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.875rem;
}
.lnd-step-meta {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(122,118,114,0.55);
  margin-bottom: 0.875rem;
}
.lnd-step-body {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .lnd-process-grid { grid-template-columns: 1fr 1fr; border-top: none; }
  .lnd-process-step {
    border-top: 1px solid var(--border);
    border-right: none;
    padding: 2rem 0 !important;
  }
  .lnd-process-step:nth-child(odd) { padding-right: 1.5rem !important; }
}
@media (max-width: 480px) {
  .lnd-process-grid { grid-template-columns: 1fr; }
}

/* ── Pricing section wrapper (London) ── */
.lnd-pricing {
  padding: var(--section-pad-y) var(--section-pad-x);
}
.lnd-pricing-inner { max-width: 1100px; margin: 0 auto; }
.lnd-pricing-head { text-align: center; margin-bottom: 0.5rem; }
.lnd-pricing-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.lnd-pricing-head h2 em { font-style: italic; color: var(--text-secondary); }
.lnd-pricing-head p {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  margin-top: 0.75rem;
}
.lnd-pricing-foot {
  margin-top: 2rem;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.lnd-pricing-foot a { color: var(--gold); text-decoration: none; }
.lnd-pricing-foot a:hover { color: var(--gold-hover); }
.lnd-pricing-cta { text-align: center; margin-top: 2.5rem; }

/* ── Reviews mosaic — feature card + 2 smaller ── */
.lnd-reviews {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lnd-reviews-inner { max-width: var(--container-max); margin: 0 auto; }
.lnd-reviews-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3rem;
}
.lnd-reviews-head h2 em { font-style: italic; color: var(--gold); }
.lnd-reviews-rating { text-align: right; }
.lnd-reviews-rating strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.25rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.lnd-reviews-rating span {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.lnd-reviews-mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.5rem;
}
.lnd-review-card {
  padding: 2.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.lnd-review-card--feature {
  background: linear-gradient(180deg, #14110a 0%, #0d0c08 100%);
  border-color: rgba(204,153,51,0.25);
}
.lnd-review-mark {
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  font-weight: 300;
}
.lnd-review-text {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-primary);
  flex: 1;
  margin-bottom: 1.75rem;
}
.lnd-review-card--feature .lnd-review-text {
  font-size: 1.375rem;
  line-height: 1.5;
}
.lnd-review-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
.lnd-review-name {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lnd-review-name span { color: rgba(122,118,114,0.55); }
.lnd-reviews-cta { text-align: center; margin-top: 2.5rem; }
@media (max-width: 900px) {
  .lnd-reviews-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .lnd-reviews-rating { text-align: left; }
  .lnd-reviews-mosaic { grid-template-columns: 1fr 1fr; }
  .lnd-review-card--feature { grid-column: span 2; }
}
@media (max-width: 600px) {
  .lnd-reviews-mosaic { grid-template-columns: 1fr; }
  .lnd-review-card--feature { grid-column: auto; }
}


/* ============================================================
   3. LEGACY PAGE COMPONENTS
   Non-prefixed selectors used by older page templates.
   Each block is scoped by class names that don't collide
   with .lux-* components (e.g., bare `nav`, `.hero`,
   `.page-hero`, `footer`, `.mobile-nav-overlay`).
   ============================================================ */

/* Body baseline override — pages use 16px (luxury.css default is 18px).
   Keeping 16px to preserve existing layouts. */
body { font-size: 16px; }


/* ──────────────────────────────────────────────────────────────
   Homepage (index.html)
   ────────────────────────────────────────────────────────────── */

/* ===== index.html block 16-1231 ===== */

  

  

  

  

  /* ── NAVIGATION ── */
  .MOCK-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 3rem;
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  .MOCK-nav.scrolled {
    background: rgba(8,8,8,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--sans);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-links .nav-cta {
    color: var(--gold);
    font-size: 0.9375rem;
  }
  .nav-links .nav-cta:hover { color: var(--gold-hover); text-decoration: underline; }

  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gold);
    transition: all 300ms ease;
  }

  /* ── MOBILE NAV OVERLAY ── */
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
  }
  .mobile-nav-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  .mobile-nav-close {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.5rem;
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 300;
  }
  .mobile-nav-links {
    list-style: none;
    margin-bottom: 3rem;
  }
  .mobile-nav-links li { border-top: 1px solid var(--border); }
  .mobile-nav-links li:last-child { border-bottom: 1px solid var(--border); }
  .mobile-nav-links a {
    display: block;
    font-family: var(--serif);
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    padding: 1rem 0;
    transition: color 200ms ease;
  }
  .mobile-nav-links a:hover { color: var(--gold); }
  .mobile-nav-contact {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }
  .mobile-nav-contact a {
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
  }
  .mobile-nav-book {
    margin-top: 2.5rem;
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .mobile-nav-book:hover { background: var(--gold-hover); }

  /* ── HERO ── */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
  }
  .hero-portraits {
    position: absolute;
    inset: 0;
  }
  .hero-portrait {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3.5s linear;
    background-size: cover;
    background-position: center top;
  }
  .hero-portrait.active { opacity: 1; }

  /* Portrait placeholder SVGs - warm tones */
  .hero-portrait:nth-child(1) { background: linear-gradient(165deg, #1a1410 0%, #2a1f14 40%, #1c1610 100%); }
  .hero-portrait:nth-child(2) { background: linear-gradient(165deg, #141518 0%, #1e1c20 40%, #141416 100%); }
  .hero-portrait:nth-child(3) { background: linear-gradient(165deg, #181410 0%, #241a10 40%, #181410 100%); }
  .hero-portrait:nth-child(4) { background: linear-gradient(165deg, #131416 0%, #1c1b1e 40%, #131315 100%); }

  .hero-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 3rem 4rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.3) 60%, transparent 100%);
  }
  .hero-text {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-h1-label {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
  }
  .hero-h1 {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 4.5vw, 4.25rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 1.125rem;
  }
  .hero-sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
  }
  .hero-cta {
    font-size: 0.9375rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 200ms ease;
  }
  .hero-cta:hover { color: var(--gold-hover); text-decoration: underline; }
  .hero-cta::after { content: ' →'; }

  .hero-scroll-hint {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    opacity: 0.6;
    padding-bottom: 0.5rem;
  }

  /* Portrait figure placeholders */
  .portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .portrait-placeholder svg { opacity: 0.18; }

  /* ── SECTION BASE ── */
  section {
    padding: 7rem 3rem;
  }
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 100ms; }
  .reveal-delay-2 { transition-delay: 200ms; }
  .reveal-delay-3 { transition-delay: 300ms; }

  .section-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--gold);
  }

  /* ── WORK INTRO ── */
  .work-intro-section {
    padding: 7rem 3rem 5rem;
    text-align: center;
  }
  .work-intro-heading {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 1rem;
  }
  .work-intro-sub {
    font-family: var(--sans);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  @media (max-width: 768px) {
    .work-intro-section { padding: 5rem 1.5rem 3rem; }
  }

  /* ── THE WORK ── */
  .work-section {
    padding: 7rem 0;
    overflow: hidden;
  }
  .work-header {
    padding: 0 3rem;
    margin-bottom: 3rem;
  }
  .work-scroll-track {
    display: flex;
    gap: 1px;
    cursor: grab;
    user-select: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
  }
  .work-scroll-track::-webkit-scrollbar { display: none; }
  .work-scroll-track.grabbing { cursor: grabbing; }
  .work-portrait {
    flex: 0 0 50vw;
    height: 75vh;
    min-height: 400px;
    background: var(--surface);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .work-portrait-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .work-end-text {
    flex: 0 0 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
    gap: 1.5rem;
  }
  .work-end-quote {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
  }
  .work-end-link {
    font-size: 0.875rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 200ms ease;
  }
  .work-end-link:hover { color: var(--gold-hover); text-decoration: underline; }
  .work-end-link::after { content: ' →'; }

  .work-scroll-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .work-scroll-hint-line {
    width: 40px;
    height: 1px;
    background: var(--border);
    position: relative;
    overflow: hidden;
  }
  .work-scroll-hint-line::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gold);
    animation: slide-hint 2s ease-in-out infinite;
  }
  @keyframes slide-hint {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
  }
  .work-scroll-hint-text {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .work-scroll-hint-arrow {
    color: var(--gold);
    font-size: 0.875rem;
    animation: nudge-right 2s ease-in-out infinite;
  }
  @keyframes nudge-right {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(6px); opacity: 1; }
  }
  /* Show partial card on right to suggest overflow */
  .work-scroll-track::after {
    content: '';
    flex: 0 0 3rem;
    display: block;
  }
  .work-p1 { background: linear-gradient(180deg, #1c1814 0%, #12100e 100%); }
  .work-p2 { background: linear-gradient(180deg, #161618 0%, #101012 100%); }
  .work-p3 { background: linear-gradient(180deg, #1a1714 0%, #111010 100%); }
  .work-p4 { background: linear-gradient(180deg, #141518 0%, #0f0f12 100%); }
  .work-p5 { background: linear-gradient(180deg, #181612 0%, #111010 100%); }
  .work-p6 { background: linear-gradient(180deg, #161618 0%, #101012 100%); }

  /* ── CLIENT STORY CARDS (in work scroll track) ── */
  .story-card {
    flex: 0 0 36vw;
    height: 75vh;
    min-height: 400px;
    background: var(--surface);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  .story-card-image {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  .story-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .story-card-hook {
    font-family: var(--serif);
    font-size: 1.0625rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0.875rem;
  }
  .story-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .story-card-name {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .story-card-link {
    font-size: 0.8125rem;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    transition: color 200ms ease;
    flex-shrink: 0;
  }
  .story-card-link:hover { color: var(--gold-hover); text-decoration: underline; }
  @media (max-width: 900px) {
    .story-card { flex: 0 0 80vw; }
  }

  /* ── HOW IT WORKS ── */
  .how-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 7rem 3rem;
  }
  .how-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .how-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 5rem;
  }
  .how-headline {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .how-intro {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 420px;
  }
  .how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .how-step {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .how-step:last-child { border-right: none; padding-right: 0; }
  .how-step:not(:first-child) { padding-left: 2.5rem; }
  .how-step-number {
    font-family: var(--serif);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--gold);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 1.25rem;
  }
  .how-step-title {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
    line-height: 1.3;
  }
  @media (max-width: 900px) {
    .how-section { padding: 5rem 1.5rem; }
    .how-header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
    .how-steps { grid-template-columns: 1fr; }
    .how-step {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 2rem 0 !important;
    }
    .how-step:last-child { border-bottom: none; }
  }

  /* ── CORPORATE CALLOUT (in pricing) ── */
  .corporate-callout {
    margin-top: 2.5rem;
    border: 1px solid rgba(204,153,51,0.3);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: rgba(204,153,51,0.04);
  }
  .corporate-callout-text {}
  .corporate-callout-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }
  .corporate-callout-headline {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.35;
  }
  .corporate-callout-link {
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.875rem 1.75rem;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
    white-space: nowrap;
  }
  .corporate-callout-link:hover {
    background: var(--gold);
    color: #080808;
  }
  @media (max-width: 720px) {
    .corporate-callout {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
      padding: 1.5rem;
    }
  }



  /* ── DIFFERENTIATORS ── */
  .diff-section {
    background: var(--bg);
    min-height: 80vh;
    display: flex;
    align-items: center;
  }
  .diff-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  .diff-headline {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
  }
  .diff-lines { }
  .diff-line {
    padding: 1.75rem 0;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: color 200ms ease;
  }
  .diff-line:last-child { border-bottom: 1px solid var(--border); }
  .diff-line strong {
    display: block;
    color: var(--text-primary);
    font-weight: 400;
    margin-bottom: 0.25rem;
  }

  /* ── PROOF ── */
  .proof-section {
    background: var(--surface);
    padding: 7rem 3rem;
  }
  .proof-header {
    text-align: center;
    margin-bottom: 5rem;
  }
  .proof-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }
  .star { color: var(--gold); font-size: 1rem; }
  .proof-rating-text {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-left: 0.5rem;
  }
  .proof-scroll-track {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding: 0 3rem 2.5rem;
    margin: 0 -3rem;
  }
  .proof-scroll-track::-webkit-scrollbar { display: none; }
  .proof-scroll-track.grabbing { cursor: grabbing; }
  .proof-card {
    flex: 0 0 380px;
    background: var(--surface-raised);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  @media (max-width: 900px) {
    .proof-card { flex: 0 0 85vw; }
    .proof-scroll-track { padding: 0 1.5rem 2rem; margin: 0 -1.5rem; }
  }
  .proof-quote-mark {
    font-family: var(--serif);
    font-size: 5rem;
    line-height: 0.5;
    color: var(--gold);
    margin-bottom: 1.5rem;
    font-weight: 300;
    opacity: 0.8;
  }
  .proof-quote {
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
  }
  .proof-stars { margin-bottom: 1rem; display: flex; gap: 0.25rem; }
  .proof-attribution {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }
  .proof-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--gold);
    opacity: 0.85;
  }
  .proof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(20%) brightness(0.9);
  }
  .proof-name {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .proof-more {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .proof-more a {
    color: var(--gold);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .proof-more a:hover { color: var(--gold-hover); text-decoration: underline; }

  /* ── PRICING ── */
  .pricing-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 9rem 3rem 5rem;
  }
  .pricing-headline {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    font-style: italic;
    max-width: 640px;
    margin: 0 auto 5rem;
    text-align: center;
    line-height: 1.3;
    display: block;
  }
  .pricing-table {
    max-width: 860px;
    margin: 0 auto;
    border-top: 1px solid var(--border);
  }
  .pricing-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
    transition: background 200ms ease;
  }
  .pricing-row:hover { background: rgba(255,255,255,0.015); }
  .pricing-type {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--text-primary);
  }
  .pricing-type span {
    display: block;
    font-family: var(--sans);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 0.25rem;
  }
  .pricing-details {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  .pricing-details li {
    list-style: none;
    padding-left: 1.25rem;
    position: relative;
  }
  .pricing-details li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    opacity: 0.5;
  }
  .pricing-amount {
    text-align: right;
  }
  .pricing-amount .price {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    display: block;
  }
  .pricing-amount .price-sub {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
  }
  .pricing-cta {
    text-align: center;
    margin-top: 2.5rem;
  }
  .pricing-cta a {
    color: var(--gold);
    font-size: 0.9375rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 200ms ease;
  }
  .pricing-cta a:hover { color: var(--gold-hover); text-decoration: underline; }
  .pricing-cta a::after { content: ' →'; }

  /* ── INVITATION ── */
  .invitation-section {
    padding: 0;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .invitation-image {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    min-height: 500px;
  }
  .invitation-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 5rem;
    background: var(--bg);
  }
  .invitation-headline {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.75rem;
  }
  .btn-gold {
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.1rem 2.75rem;
    text-decoration: none;
    transition: background 200ms ease;
    margin-bottom: 1.25rem;
  }
  .btn-gold:hover { background: var(--gold-hover); }
  .invitation-secondary {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .invitation-secondary a {
    color: var(--text-secondary);
    text-decoration: underline;
    transition: color 200ms ease;
  }
  .invitation-secondary a:hover { color: var(--gold); }

  /* ── FOOTER ── */
  .MOCK-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--text-primary);
  }
  .footer-copy {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .footer-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }
  .footer-links a {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .footer-links a:hover { color: var(--gold); }

  /* ── STICKY MOBILE BAR ── */
  .sticky-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(8,8,8,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 0.875rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .sticky-mobile-bar.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .sticky-mobile-bar-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
  }
  .sticky-mobile-bar-cta {
    font-size: 0.875rem;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 200ms ease;
  }
  .sticky-mobile-bar-cta:hover { color: var(--gold-hover); }

  /* ── AREAS SERVED ── */
  .areas-section {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 7rem 3rem;
  }
  .areas-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6rem;
    align-items: start;
  }
  .areas-left {
    position: sticky;
    top: 30vh;
  }
  .areas-headline {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
  }
  .areas-travel-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 340px;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
  }
  .areas-travel-note strong {
    color: var(--gold);
    font-weight: 400;
  }
  .areas-right {
    position: relative;
  }
  .areas-map-bg {
    position: absolute;
    top: -2rem;
    right: -1rem;
    width: 260px;
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
  }
  .areas-map-svg {
    width: 100%;
    height: auto;
  }
  .areas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
  }
  .areas-item {
    padding: 1.375rem 1.5rem 1.375rem 0;
    border-bottom: 1px solid var(--border);
    transition: background 200ms ease;
  }
  .areas-item:nth-child(even) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
  }
  .areas-item-name {
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.3;
  }
  .areas-item-note {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-transform: uppercase;
  }
  .areas-item--home .areas-item-name {
    color: var(--gold);
  }
  .areas-item--home .areas-item-note {
    color: var(--gold);
    opacity: 0.7;
  }
  .areas-item--beyond .areas-item-name {
    font-style: italic;
    color: var(--text-secondary);
  }
  @media (max-width: 900px) {
    .areas-section { padding: 5rem 1.5rem; }
    .areas-inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .areas-left { position: static; }
    .areas-map-bg { display: none; }
    .areas-travel-note { max-width: none; }
  }
  @media (max-width: 500px) {
    .areas-grid { grid-template-columns: 1fr; }
    .areas-item:nth-child(even) {
      padding-left: 0;
      border-left: none;
    }
  }

  /* ── PORTRAIT PLACEHOLDERS ── */
  .portrait-fig {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .portrait-fig::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.012) 8px,
      rgba(255,255,255,0.012) 9px
    );
  }
  .portrait-fig-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.5;
    text-align: center;
    line-height: 2;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .MOCK-nav { padding: 1.5rem 1.5rem; }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }

    section { padding: 5rem 1.5rem; }

    .hero-content {
      padding: 0 1.5rem 2.5rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
    .hero-scroll-hint { display: none; }

    .work-portrait { flex: 0 0 85vw; height: 60vh; }
    .work-end-text { flex: 0 0 80vw; padding: 0 2rem; }
    .work-header { padding: 0 1.5rem; }

    .diff-section { padding: 5rem 1.5rem; min-height: auto; }
    .diff-inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .diff-headline { position: static; font-size: 2rem; }

    .proof-grid { grid-template-columns: 1fr; gap: 3rem; }
    .proof-section { padding: 5rem 1.5rem; }

    .pricing-row { grid-template-columns: 1fr; gap: 1rem; }
    .pricing-amount { text-align: left; }
    .pricing-section { padding: 5rem 1.5rem; }

    .invitation-section {
      grid-template-columns: 1fr;
    }
    .invitation-image { min-height: 55vw; order: -1; }
    .invitation-content { padding: 4rem 1.5rem; }

    .MOCK-footer { padding: 2rem 1.5rem; flex-direction: column; align-items: flex-start; }
    .footer-links { flex-wrap: wrap; gap: 1rem; }

    .sticky-mobile-bar { display: flex; }
  }


/* ===== index.html block 1732-1747 ===== */

  #image-grid img:hover { transform: scale(1.04); }
  @media (max-width: 900px) {
    #image-grid > div {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    #image-grid div[style*="grid-column:span 2"] {
      grid-column: span 2 !important;
    }
  }
  @media (max-width: 600px) {
    #image-grid > div {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }


/* ===== index.html block 1800-1845 ===== */

  @media (max-width: 900px) {
    #faq { padding: 5rem 1.5rem; }
  }


/* ===== index.html block 1866-1894 ===== */

  .footer-areas {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 1.125rem 3rem;
  }
  .footer-areas-inner {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .footer-areas-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    flex-shrink: 0;
  }
  .footer-areas-list {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  @media (max-width: 900px) {
    .footer-areas { padding: 1rem 1.5rem; }
    .footer-areas-inner { flex-direction: column; gap: 0.5rem; }
  }

/* ──────────────────────────────────────────────────────────────
   Corporate Headshots
   ────────────────────────────────────────────────────────────── */

/* ===== Corporate Headshots.html block 17-864 ===== */

  

  

  

  

  /* ── NAV ── */
  .MOCK-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.75rem 3rem;
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  .MOCK-nav.scrolled {
    background: rgba(8,8,8,0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-logo span { color: var(--gold); }
  .nav-links {
    display: flex; align-items: center; gap: 2.5rem;
    list-style: none;
  }
  .nav-links a {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-cta {
    color: var(--gold) !important;
  }
  .nav-cta:hover { color: var(--gold-hover) !important; text-decoration: underline; }

  /* ── HERO ── */
  .hero {
    position: relative;
    height: 100vh; min-height: 640px;
    overflow: hidden;
    display: flex; align-items: flex-end;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background: #0e0d0b;
  }
  .hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    opacity: 0.75;
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.4) 55%, rgba(8,8,8,0.15) 100%);
  }
  .hero-inner {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 3rem 5rem;
  }
  .hero-left { max-width: 680px; }
  .hero-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .hero-eyebrow::before {
    content: '';
    display: inline-block; width: 28px; height: 1px;
    background: var(--gold);
  }
  .hero-h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
  }
  .hero-h1 em { font-style: italic; color: var(--text-secondary); }
  .hero-sub {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 520px;
  }
  .hero-actions { display: flex; align-items: center; gap: 2rem; }
  .btn-primary {
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .btn-primary:hover { background: var(--gold-hover); }
  .btn-ghost {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 200ms ease;
  }
  .btn-ghost:hover { color: var(--text-primary); }
  .btn-ghost::after { content: ' ↓'; }

  .hero-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
    padding-bottom: 0.25rem;
  }
  .hero-rating {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-align: right;
  }
  .hero-rating strong { color: var(--gold); display: block; font-size: 1.125rem; font-weight: 400; font-family: var(--serif); }
  .hero-scroll {
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 1rem;
  }

  /* ── INTRO ── */
  .intro-section {
    padding: 8rem 3rem 6rem;
    max-width: 880px;
    margin: 0 auto;
  }
  .intro-section p {
    font-family: var(--serif);
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--text-primary);
  }
  .intro-section p em { font-style: italic; color: var(--text-secondary); }

  /* ── WHAT YOU GET ── */
  .wyg-section {
    padding: 0 3rem 8rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .wyg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--border);
  }
  .wyg-card {
    padding: 2.5rem 2rem;
    background: var(--surface);
    display: flex; flex-direction: column; gap: 0.75rem;
  }
  .wyg-card:hover { background: var(--surface-raised); }
  .wyg-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 300;
    color: var(--gold);
    opacity: 0.6;
    line-height: 1;
  }
  .wyg-title {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .wyg-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  /* ── PORTFOLIO STRIP ── */
  .port-section {
    padding: 0 0 0;
    overflow: hidden;
  }
  .port-header {
    padding: 0 3rem;
    margin-bottom: 2.5rem;
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .port-track {
    display: flex; gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    padding-bottom: 0;
  }
  .port-track::-webkit-scrollbar { display: none; }
  .port-track.grabbing { cursor: grabbing; }
  .port-img {
    flex: 0 0 calc(25vw - 2px);
    height: 38vw;
    max-height: 580px;
    min-height: 320px;
    background: var(--surface);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  .port-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    transition: transform 600ms ease;
  }
  .port-img:hover img { transform: scale(1.04); }

  /* ── CONSISTENCY STRIP ── */
  .consistency-section {
    background: var(--bg);
    padding: 8rem 3rem;
  }
  .consistency-inner { max-width: 1100px; margin: 0 auto; }
  .consistency-heading {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .consistency-sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 3.5rem;
    max-width: 520px;
  }
  .consistency-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    margin-bottom: 2.5rem;
  }
  .consistency-cell {
    aspect-ratio: 3/4;
    background: var(--surface);
    overflow: hidden;
    position: relative;
  }
  .consistency-cell img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    transition: transform 500ms ease;
    display: block;
  }
  .consistency-cell:hover img { transform: scale(1.05); }
  .consistency-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    letter-spacing: 0.02em;
  }

  /* ── PRICING ── */
  .pricing-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 8rem 3rem;
  }
  .pricing-inner { max-width: 1100px; margin: 0 auto; }
  .pricing-head { text-align: center; margin-bottom: 5rem; }
  .pricing-head h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .pricing-head p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
  }
  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 5rem;
  }
  .pricing-card {
    background: var(--surface-raised);
    padding: 2.5rem 2rem 2rem;
    display: flex; flex-direction: column;
    position: relative;
  }
  .pricing-card--featured {
    background: #141208;
    outline: 1px solid var(--gold);
    outline-offset: -1px;
    z-index: 1;
  }
  .pricing-badge {
    position: absolute;
    top: -1px; right: 1.5rem;
    background: var(--gold);
    color: #080808;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
  }
  .pricing-name {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
  }
  .pricing-team {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
  }
  .pricing-price {
    font-family: var(--serif);
    font-size: 2.75rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  .pricing-vat {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
  }
  .pricing-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 2rem;
  }
  .pricing-cta {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: border-color 200ms ease, color 200ms ease;
    text-align: center;
  }
  .pricing-cta:hover { border-color: var(--gold); color: var(--gold); }
  .pricing-card--featured .pricing-cta {
    background: var(--gold); color: #080808; border-color: var(--gold);
  }
  .pricing-card--featured .pricing-cta:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .pricing-includes {
    border-top: 1px solid var(--border);
    padding-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 4rem;
  }
  .pricing-includes h3 {
    grid-column: 1 / -1;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }
  .pricing-includes li {
    list-style: none;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 1.125rem;
    position: relative;
    line-height: 1.5;
  }
  .pricing-includes li::before {
    content: '—';
    position: absolute; left: 0;
    color: var(--gold); opacity: 0.7;
    font-size: 0.75rem;
  }

  /* ── EXTRAS ── */
  .extras-section {
    padding: 8rem 3rem;
    border-top: 1px solid var(--border);
  }
  .extras-inner { max-width: 1100px; margin: 0 auto; }
  .extras-inner h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .extras-inner > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
  }
  .extras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  .extras-card {
    background: var(--surface);
    padding: 2.5rem;
  }
  .extras-name {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }
  .extras-price {
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }
  .extras-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
  }
  .extras-link {
    font-size: 0.8125rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 200ms ease;
  }
  .extras-link:hover { color: var(--gold-hover); }
  .extras-link::after { content: ' →'; }

  /* ── WHY ── */
  .why-section {
    padding: 8rem 3rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .why-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center;
  }
  .why-left { }
  .why-left h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 1.5rem;
  }
  .why-left p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  .why-image {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--surface-raised);
    overflow: hidden;
  }
  .why-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .why-image-caption {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(237,233,227,0.5);
  }

  /* ── TESTIMONIALS ── */
  .reviews-section {
    padding: 8rem 3rem;
    overflow: hidden;
  }
  .reviews-header {
    max-width: 1100px; margin: 0 auto 3.5rem;
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .reviews-header h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
  }
  .reviews-header span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
  }
  .reviews-track {
    display: flex; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
    cursor: grab; user-select: none;
    padding: 0 3rem 2rem; margin: 0 -3rem;
  }
  .reviews-track::-webkit-scrollbar { display: none; }
  .reviews-track.grabbing { cursor: grabbing; }
  .review-card {
    flex: 0 0 400px; flex-shrink: 0;
    background: var(--surface);
    padding: 2.5rem;
    display: flex; flex-direction: column;
  }
  .review-mark {
    font-family: var(--serif);
    font-size: 4.5rem;
    line-height: 0.6;
    color: var(--gold);
    opacity: 0.7;
    margin-bottom: 1.5rem;
    font-weight: 300;
  }
  .review-text {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-primary);
    flex: 1;
    margin-bottom: 1.75rem;
  }
  .review-stars {
    display: flex; gap: 3px; margin-bottom: 0.75rem;
    color: var(--gold); font-size: 0.8rem;
  }
  .review-name {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  /* ── FAQ ── */
  .faq-section {
    padding: 8rem 3rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .faq-inner { max-width: 760px; margin: 0 auto; }
  .faq-inner h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 3.5rem;
  }
  .faq-group-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    margin-top: 2.5rem;
  }
  .faq-group-label:first-of-type { margin-top: 0; }
  /* ── CTA BAND ── */
  .cta-band {
    padding: 8rem 3rem;
    text-align: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .cta-band-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
  }
  .cta-band h2 {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }
  .cta-band h2 em { font-style: italic; color: var(--text-secondary); }
  .cta-band p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
  }
  .cta-band-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; }

  /* ── WHERE I WORK ── */
  .where-section {
    padding: 8rem 3rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .where-inner { max-width: 1100px; margin: 0 auto; }
  .where-inner h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .where-inner > p {
    font-size: 0.9375rem; color: var(--text-secondary);
    margin-bottom: 3rem; max-width: 520px;
  }
  .where-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  .where-cell {
    background: var(--surface-raised);
    padding: 1.5rem;
  }
  .where-region {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }
  .where-towns {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .where-towns a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
  .where-towns a:hover { color: var(--text-primary); }

  /* ── FOOTER ── */
  .MOCK-footer {
    padding: 3rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .footer-back {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .footer-back:hover { color: var(--gold); }
  .footer-back::before { content: '← '; }

  /* ── REVEAL ── */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
  .reveal-delay-4 { transition-delay: 320ms; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1100px) {
    .wyg-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-cards { grid-template-columns: repeat(2, 1fr); }
    .where-grid { grid-template-columns: repeat(2, 1fr); }
    .how-inner { grid-template-columns: 1fr; gap: 4rem; }
    .how-sticky { position: static; }
    .why-inner { grid-template-columns: 1fr; gap: 4rem; }
  }
  @media (max-width: 768px) {
    .MOCK-nav { padding: 1.25rem 1.5rem; }
    .nav-links { display: none; }
    section, .hero-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
    .intro-section, .wyg-section, .how-section, .consistency-section,
    .pricing-section, .extras-section, .why-section, .reviews-section,
    .faq-section, .cta-band, .where-section { padding: 5rem 1.5rem; }
    .wyg-grid { grid-template-columns: 1fr; }
    .pricing-cards { grid-template-columns: 1fr; }
    .extras-grid { grid-template-columns: 1fr; }
    .consistency-grid { grid-template-columns: repeat(3, 1fr); }
    .where-grid { grid-template-columns: 1fr 1fr; }
    .pricing-includes { grid-template-columns: 1fr; }
    .hero-right { display: none; }
    .port-img { flex: 0 0 80vw; }
  }

/* ──────────────────────────────────────────────────────────────
   Contact
   ────────────────────────────────────────────────────────────── */

/* ===== Contact.html block 12-471 ===== */

  

  

  

  

  /* ── NAV ── */
  .MOCK-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.75rem 3rem;
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  .MOCK-nav.scrolled {
    background: rgba(8,8,8,0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-logo span { color: var(--gold); }
  .nav-links {
    display: flex; align-items: center; gap: 2.5rem;
    list-style: none;
  }
  .nav-links a {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-cta {
    color: var(--gold) !important;
  }
  .nav-cta:hover { color: var(--gold-hover) !important; text-decoration: underline; }

  /* ── PAGE HERO ── */
  .page-hero {
    padding: 14rem 3rem 7rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .page-hero .eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .page-hero .eyebrow::before {
    content: '';
    display: inline-block; width: 28px; height: 1px;
    background: var(--gold);
  }
  .page-hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 5vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
  }
  .page-hero h1 em { font-style: italic; color: var(--text-secondary); }
  .page-hero p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
  }

  /* ── CONTACT LAYOUT ── */
  .contact-section {
    padding: 0 3rem 8rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 6rem;
    align-items: start;
  }

  /* ── FORM ── */
  .form-heading {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 300;
    margin-bottom: 0.5rem;
  }
  .form-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.6;
  }
  .form-group {
    margin-bottom: 1.75rem;
  }
  .form-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
  }
  .form-input,
  .form-textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 300;
    padding: 0.875rem 1.125rem;
    outline: none;
    transition: border-color 200ms ease;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .form-input:focus,
  .form-textarea:focus {
    border-color: var(--gold);
  }
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
  }
  .form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
  }
  .form-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    opacity: 0.7;
  }
  .form-rating {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
  }
  .form-stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
  .form-rating-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .btn-primary {
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 200ms ease;
    width: 100%;
    text-align: center;
  }
  .btn-primary:hover { background: var(--gold-hover); }
  .form-small {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    line-height: 1.6;
    opacity: 0.8;
  }
  .form-small a { color: var(--gold); text-decoration: none; }
  .form-small a:hover { text-decoration: underline; }

  /* ── SIDEBAR ── */
  .sidebar { display: flex; flex-direction: column; gap: 2px; }

  .side-panel {
    background: var(--surface);
    padding: 2rem;
  }
  .side-panel h3 {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
  }
  .contact-items { display: flex; flex-direction: column; gap: 1.25rem; }
  .contact-item-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
  }
  .contact-item-value {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.55;
  }
  .contact-item-value a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .contact-item-value a:hover { color: var(--gold); }
  .contact-item-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    opacity: 0.75;
    line-height: 1.5;
  }
  .btn-whatsapp {
    display: block;
    margin-top: 1.75rem;
    text-align: center;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
  }
  .btn-whatsapp:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .btn-whatsapp::before { content: '↗ '; }

  .faq-items { display: flex; flex-direction: column; }
  .faq-q {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 300;
    margin-bottom: 0.3rem;
    margin-top: 1rem;
  }
  .faq-q:first-child { margin-top: 0; }
  .faq-a {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  /* ── DIVIDER ── */
  .gold-rule {
    max-width: 1100px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--border);
  }

  /* ── WHERE I WORK ── */
  .where-section {
    padding: 8rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .section-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .section-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--gold); }
  .where-section h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .where-section > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 520px;
  }
  .where-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 2rem;
  }
  .where-cell {
    background: var(--surface-raised);
    padding: 1.5rem;
  }
  .where-region {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }
  .where-towns {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
  }
  .where-towns a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
  .where-towns a:hover { color: var(--text-primary); }
  .where-note {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
  }

  /* ── MAP ── */
  .map-section {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 8rem 3rem;
  }
  .map-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6rem;
    align-items: center;
  }
  .map-inner h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
  }
  .map-inner p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }
  .map-address {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.8;
    border-left: 1px solid var(--gold);
    padding-left: 1.25rem;
    opacity: 0.8;
  }
  .map-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    filter: grayscale(0.8) contrast(1.1);
    opacity: 0.75;
    display: block;
  }

  /* ── FOOTER ── */
  .MOCK-footer {
    padding: 3rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .footer-legal {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.5;
    text-align: center;
    line-height: 1.6;
    max-width: 500px;
  }
  .footer-back {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .footer-back:hover { color: var(--gold); }
  .footer-back::before { content: '← '; }

  /* ── REVEAL ── */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
    .map-inner { grid-template-columns: 1fr; gap: 3rem; }
    .where-grid { grid-template-columns: repeat(2, 1fr); }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  }
  @media (max-width: 768px) {
    .MOCK-nav { padding: 1.25rem 1.5rem; }
    .nav-links { display: none; }
    .page-hero { padding: 10rem 1.5rem 5rem; }
    .contact-section { padding: 0 1.5rem 5rem; }
    .where-section { padding: 5rem 1.5rem; }
    .map-section { padding: 5rem 1.5rem; }
    .where-grid { grid-template-columns: 1fr 1fr; }
    .sidebar { grid-template-columns: 1fr; }
    .MOCK-footer { padding: 2rem 1.5rem; flex-direction: column; gap: 1rem; text-align: center; }
    .footer-legal { display: none; }
  }

/* ──────────────────────────────────────────────────────────────
   Pricing
   ────────────────────────────────────────────────────────────── */

/* ===== Pricing.html block 12-531 ===== */

  

  

  

  

  /* ── NAV ── */
  .MOCK-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.75rem 3rem;
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  .MOCK-nav.scrolled {
    background: rgba(8,8,8,0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-logo span { color: var(--gold); }
  .nav-links {
    display: flex; align-items: center; gap: 2.5rem;
    list-style: none;
  }
  .nav-links a {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-cta {
    color: var(--gold) !important;
  }
  .nav-cta:hover { color: var(--gold-hover) !important; text-decoration: underline; }

  /* ── PAGE HERO ── */
  .page-hero {
    padding: 14rem 3rem 7rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .eyebrow::before {
    content: '';
    display: inline-block; width: 28px; height: 1px;
    background: var(--gold);
  }
  .page-hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 5vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
  }
  .page-hero h1 em { font-style: italic; color: var(--text-secondary); }
  .page-hero p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
  }

  /* ── SECTION LABEL ── */
  .section-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .section-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--gold); }

  /* ── PRICING CARDS ── */
  .pricing-section {
    padding: 0 3rem 8rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .pricing-header {
    margin-bottom: 3rem;
  }
  .pricing-header h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 0.5rem;
  }
  .pricing-header p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
  }

  .pricing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    max-width: 780px;
    margin-bottom: 2rem;
  }
  .pricing-card {
    background: var(--surface-raised);
    padding: 3rem 2.5rem;
    display: flex; flex-direction: column;
  }
  .pricing-card--featured {
    background: #141208;
    outline: 1px solid var(--gold);
    outline-offset: -1px;
  }
  .pricing-name {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
  }
  .pricing-price {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  .pricing-price sup {
    font-size: 1.75rem;
    vertical-align: top;
    padding-top: 0.5rem;
    display: inline-block;
  }
  .pricing-vat {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
  }
  .pricing-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
    flex: 1;
  }

  .pricing-example {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    max-width: 780px;
    margin-bottom: 3rem;
  }
  .pricing-example p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .pricing-example strong { color: var(--text-primary); }

  /* ── EXAMPLE TABLE ── */
  .example-table {
    max-width: 780px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 6rem;
  }
  .example-table-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
  }
  .example-table-head span,
  .example-table-row span {
    padding: 0.875rem 1.25rem;
    font-size: 0.8rem;
  }
  .example-table-head span {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .example-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
  }
  .example-table-row:last-child { border-bottom: none; }
  .example-table-row span { color: var(--text-secondary); font-size: 0.9rem; }
  .example-table-row span:last-child { color: var(--text-primary); font-weight: 500; }
  .example-table-row.highlight { background: rgba(204,153,51,0.04); }
  .example-table-row.highlight span:last-child { color: var(--gold); }

  /* ── BLOCKQUOTE ── */
  .pull-quote {
    max-width: 780px;
    padding: 0.75rem 0;
    margin-bottom: 4rem;
  }
  .pull-quote p {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }
  .pull-quote footer {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border: none; padding: 0; display: block;
  }
  .pull-quote footer span { color: var(--gold); }

  /* ── WHAT'S INCLUDED ── */
  .includes-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8rem 3rem;
  }
  .includes-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }
  .includes-col h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 0.5rem;
  }
  .includes-col > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
  }
  .includes-list {
    list-style: none;
    display: flex; flex-direction: column;
  }
  .includes-list li {
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .includes-list li:last-child { border-bottom: 1px solid var(--border); }
  .includes-list li::before {
    content: '—';
    color: var(--gold);
    opacity: 0.7;
    font-size: 0.8rem;
    padding-top: 0.2rem;
  }
  .includes-list li strong { color: var(--text-primary); display: block; font-weight: 400; margin-bottom: 0.15rem; }

  /* ── HOW IT WORKS ── */
  /* ── FAQ ── */
  .faq-section {
    padding: 8rem 3rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .faq-inner { max-width: 760px; margin: 0 auto; }
  .faq-inner h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 3.5rem;
  }
  /* ── CTA BAND ── */
  .cta-band {
    padding: 8rem 3rem;
    text-align: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .cta-band .eyebrow { justify-content: center; }
  .cta-band .eyebrow::before { display: none; }
  .cta-band h2 {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }
  .cta-band h2 em { font-style: italic; color: var(--text-secondary); }
  .cta-band > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
  }
  .cta-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; }
  .btn-primary {
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 200ms ease;
  }
  .btn-primary:hover { background: var(--gold-hover); }
  .btn-ghost {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 200ms ease;
  }
  .btn-ghost:hover { color: var(--text-primary); }

  /* ── FOOTER ── */
  .MOCK-footer {
    padding: 3rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .footer-legal {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.5;
    text-align: center;
    line-height: 1.6;
    max-width: 500px;
  }
  .footer-back {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .footer-back:hover { color: var(--gold); }
  .footer-back::before { content: '← '; }

  /* ── REVEAL ── */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .includes-inner { grid-template-columns: 1fr; gap: 4rem; }
    .pricing-cards { grid-template-columns: 1fr; max-width: 420px; }
  }
  @media (max-width: 768px) {
    .MOCK-nav { padding: 1.25rem 1.5rem; }
    .nav-links { display: none; }
    .page-hero { padding: 10rem 1.5rem 5rem; }
    .pricing-section { padding: 0 1.5rem 5rem; }
    .includes-section { padding: 5rem 1.5rem; }
    .how-section { padding: 5rem 1.5rem; }
    .faq-section { padding: 5rem 1.5rem; }
    .cta-band { padding: 5rem 1.5rem; }
    .cta-actions { flex-direction: column; gap: 1rem; }
    .MOCK-footer { padding: 2rem 1.5rem; flex-direction: column; gap: 1rem; text-align: center; }
    .footer-legal { display: none; }
  }

/* ──────────────────────────────────────────────────────────────
   Client Stories
   ────────────────────────────────────────────────────────────── */

/* ===== Client Stories.html block 12-545 ===== */

  

  

  

  

  /* ── NAVIGATION ── */
  .MOCK-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 3rem;
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  .MOCK-nav.scrolled {
    background: rgba(8,8,8,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--sans);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-links .nav-cta { color: var(--gold); }
  .nav-links .nav-cta:hover { color: var(--gold-hover); text-decoration: underline; }
  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gold);
  }

  /* ── MOBILE NAV ── */
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
  }
  .mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
  .mobile-nav-close {
    position: absolute;
    top: 1.75rem; right: 2rem;
    background: none; border: none;
    color: var(--gold);
    font-size: 1.5rem;
    cursor: pointer;
  }
  .mobile-nav-links { list-style: none; margin-bottom: 3rem; }
  .mobile-nav-links li { border-top: 1px solid var(--border); }
  .mobile-nav-links li:last-child { border-bottom: 1px solid var(--border); }
  .mobile-nav-links a {
    display: block;
    font-family: var(--serif);
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    padding: 1rem 0;
    transition: color 200ms ease;
  }
  .mobile-nav-links a:hover { color: var(--gold); }
  .mobile-nav-book {
    margin-top: 2.5rem;
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .mobile-nav-book:hover { background: var(--gold-hover); }

  /* ── REVEAL ── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-d1 { transition-delay: 100ms; }
  .reveal-d2 { transition-delay: 200ms; }
  .reveal-d3 { transition-delay: 300ms; }
  .reveal-d4 { transition-delay: 400ms; }

  /* ── PAGE HERO ── */
  .page-hero {
    padding: 14rem 3rem 6rem;
    max-width: 960px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
  }
  .page-hero-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .page-hero-label::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: var(--gold);
  }
  .page-hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 2rem;
  }
  .page-hero p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 560px;
  }

  /* ── STORIES GRID ── */
  .stories-section {
    padding: 6rem 3rem;
    max-width: 1320px;
    margin: 0 auto;
  }

  .stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }

  /* First card — spans full width, featured (client-stories index only) */
  .stories-grid .story-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .stories-grid .story-card:first-child .story-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 520px;
  }
  .stories-grid .story-card:first-child .story-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  .story-card {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background 200ms ease;
  }
  .story-card:hover { background: var(--surface-raised); }
  .story-card:hover .story-image img {
    transform: scale(1.03);
  }
  .story-card:hover .story-read {
    color: var(--gold-hover);
  }
  .story-card:hover .story-read::after {
    transform: translateX(4px);
  }

  .story-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background: var(--surface-raised);
  }
  .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 600ms ease;
  }
  .story-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
      -45deg,
      #111 0px, #111 12px,
      #141414 12px, #141414 24px
    );
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-align: center;
    font-family: var(--sans);
    padding: 1rem;
  }

  .story-role {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .story-title {
    font-family: var(--serif);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }
  .story-excerpt {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.65;
    flex: 1;
  }
  .story-read {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 200ms ease;
  }
  .story-read::after {
    content: '→';
    transition: transform 200ms ease;
    display: inline-block;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-section {
    padding: 7rem 3rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .testimonials-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
  .testimonial-quote-mark {
    font-family: var(--serif);
    font-size: 6rem;
    line-height: 0.8;
    color: var(--gold);
    opacity: 0.6;
    margin-bottom: 1.5rem;
    display: block;
    font-weight: 300;
  }
  .testimonial-text {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-style: italic;
  }
  .testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
    color: var(--gold);
    font-size: 0.875rem;
  }
  .testimonial-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.04em;
  }
  .testimonial-context {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 0.25rem;
  }

  /* ── SERVICE LINKS ── */
  .service-links-section {
    padding: 7rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
  }
  .service-links-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.25rem;
  }
  .service-links-section p:last-child { margin-bottom: 0; }
  .service-links-section a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(204,153,51,0.25);
    transition: color 200ms ease, border-color 200ms ease;
  }
  .service-links-section a:hover {
    color: var(--gold-hover);
    border-color: var(--gold-hover);
  }

  /* ── CLOSING CTA ── */
  .closing-cta {
    padding: 9rem 3rem;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
  }
  .closing-cta-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
  }
  .closing-cta h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
  }
  .closing-cta p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 3rem;
  }
  .btn-primary {
    display: inline-block;
    background: var(--gold);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.125rem 3rem;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .btn-primary:hover { background: var(--gold-hover); }
  .closing-secondary {
    display: block;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--gold);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .closing-secondary:hover { color: var(--gold-hover); text-decoration: underline; }

  /* ── FOOTER ── */
  .MOCK-footer {
    border-top: 1px solid var(--border);
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
  }
  .footer-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
  }
  .footer-cta {
    font-size: 0.875rem;
    color: var(--gold);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .footer-cta:hover { color: var(--gold-hover); text-decoration: underline; }

  /* ── STICKY MOBILE BAR ── */
  .sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(8,8,8,0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    transform: translateY(100%);
    transition: transform 400ms ease;
  }
  .sticky-bar.visible { transform: translateY(0); }
  .sticky-bar-text { font-size: 0.875rem; color: var(--text-secondary); }
  .sticky-bar-cta { color: var(--gold); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .MOCK-nav { padding: 1.5rem 1.5rem; }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }

    .page-hero { padding: 10rem 1.5rem 4rem; }

    .stories-section { padding: 4rem 1.5rem; }
    .stories-grid {
      grid-template-columns: 1fr;
    }
    .stories-grid .story-card:first-child {
      grid-column: 1;
      display: flex;
      flex-direction: column;
    }
    .stories-grid .story-card:first-child .story-image { min-height: 260px; height: auto; }
    .testimonials-section { padding: 5rem 1.5rem; }
    .testimonials-inner { grid-template-columns: 1fr; gap: 4rem; }
    .service-links-section { padding: 5rem 1.5rem; }
    .closing-cta { padding: 6rem 1.5rem; }
    .MOCK-footer { padding: 2rem 1.5rem; }
    .sticky-bar { display: flex; }
  }

  @media (max-width: 600px) {
    .stories-grid .story-card:first-child .story-title { font-size: 1.75rem; }
  }