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

:root {
  --cream:       #faf8f5;
  --cream-warm:  #f3eee5;   /* Used for emphasis blocks (booking callouts). */
  --warm-white:  #f5f0eb;
  --champagne:   #f0e8dc;
  --blush:       #f2e0d6;
  --rose:        #d4a490;
  --rose-soft:   #e8c4b8;
  --gold:        #9a7550;
  --gold-decor:  #b8956a;
  --gold-light:  #d4b896;
  --gold-pale:   #e8dcc8;
  --charcoal:    #2a2a2e;
  --graphite:    #3d3a40;
  --warm-grey:   #5a5058;
  --soft-grey:   #5a5258;
  --text-body:   #48434d;   /* Body paragraph colour — sits between warm-grey and graphite. WCAG AA on cream. */
  --serif:       'Playfair Display', Georgia, serif;
  --sans:        'Outfit', -apple-system, sans-serif;
  --container:   1320px;    /* Max content width for magazine-layout sections. */

  /* ── SEMANTIC ALIASES ── */
  --fg-1: var(--charcoal);        /* primary text — headings, strong */
  --fg-2: var(--text-body);       /* body paragraphs */
  --fg-3: var(--warm-grey);       /* secondary / meta / placeholders */
  --fg-accent: var(--gold);       /* italic accents, eyebrows, links */
  --fg-inverse: var(--cream);     /* text on dark backgrounds */

  --bg-page: var(--cream);        /* main page background */
  --bg-alt: var(--warm-white);    /* alternate section background */
  --bg-dark: var(--charcoal);     /* dark sections (featured, footer) */
  --bg-card: var(--warm-white);   /* card backgrounds */

  --border-hairline: rgba(184,149,106,.1);
  --border-soft: rgba(184,149,106,.12);
  --border-gold: var(--gold-pale);

  /* ── REUSABLE GRADIENTS ── */
  --grad-placeholder: linear-gradient(145deg, var(--champagne), var(--blush), var(--rose-soft));
  --grad-featured-placeholder: linear-gradient(145deg, rgba(184,149,106,.15), rgba(212,164,144,.1), rgba(90,82,88,.2));
  --grad-hero-fade-x: linear-gradient(to right, rgba(250,248,245,.92) 0%, rgba(250,248,245,.82) 45%, rgba(245,240,235,.6) 100%);
  --grad-hero-fade-y: linear-gradient(to bottom, rgba(250,248,245,.3) 0%, rgba(250,248,245,0) 30%, rgba(250,248,245,.85) 100%);
  --grad-card-darken: linear-gradient(to top, rgba(42,42,46,.7) 0%, transparent 100%);
  --grad-card-darken-heavy: linear-gradient(to top, rgba(42,42,46,.8), transparent);

  /* ── SHADOWS ── */
  --shadow-hover: 0 4px 28px rgba(42,42,46,.05);
  --shadow-card: 0 8px 28px rgba(42,42,46,.06);
  --shadow-card-lg: 0 12px 36px rgba(42,42,46,.10);
  --shadow-drop: 0 12px 40px rgba(42,42,46,.07);
  --shadow-cta: 0 6px 24px rgba(154,117,80,.20);

  /* ── TRANSITIONS ── */
  --ease-out-soft: cubic-bezier(.22,1,.36,1);

  /* ── CHROME HEIGHTS ──
     Contact bar = 36px (height set on .contact-bar-inner). Nav = 72px
     (height set on .nav-inner). These mirror tokens.css, but tokens
     isn't enqueued anywhere, so we redeclare them here so any
     consumer that references the variables (e.g. sticky offsets) gets
     a real value rather than falling back to the initial value. */
  --h-contact-bar: 36px;
  --h-nav:         72px;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: clip (not hidden) — `hidden` creates a scroll
     container, which silently breaks `position: sticky` on every
     descendant. `clip` clips the same way visually but without
     establishing a scroll context, so .booking-grid-photo etc.
     can stick to the viewport while their parents scroll. */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--sans); }

/* ── REVEAL ── */
.rv { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1); }
.rv.vis { opacity: 1; transform: none; }
/* Feature/hero photos must always be visible — the IntersectionObserver
   that adds .vis was unreliable on the homepage Join photo at responsive
   sizes (background-only div, no content for the observer to lock onto),
   leaving the photo invisible. Override .rv defaults on these. */
.join-img.rv, .about-img.rv { opacity: 1; transform: none; transition: none; }
.rv-d1 { transition-delay: .12s; }
.rv-d2 { transition-delay: .24s; }
.rv-d3 { transition-delay: .36s; }

/* ── SHARED ── */
.sec { padding: 5.5rem 5vw; }
.sec-inner { max-width: 1240px; margin: 0 auto; }
.eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-decor); }
.sec-h2 {
  font-family: var(--serif); font-size: clamp(1.9rem,3.8vw,2.8rem);
  font-weight: 400; line-height: 1.18; color: var(--charcoal); margin-bottom: .6rem;
}
.sec-h2 em { font-style: italic; color: var(--gold); }
.sec-sub { font-size: 1rem; font-weight: 300; color: var(--text-body); max-width: 540px; margin-bottom: 2.5rem; }
.btn-gold {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); background: var(--gold-decor); padding: .9rem 2rem; border: none; cursor: pointer;
  transition: background .3s, transform .2s, box-shadow .3s;
}
.btn-gold:hover { background: var(--rose); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(154,117,80,.2); }
.btn-gold svg { transition: transform .3s; }
.btn-gold:hover svg { transform: translateX(3px); }
.btn-outline {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--charcoal); border: 1px solid var(--gold-pale); background: transparent;
  padding: .9rem 2rem; cursor: pointer; transition: border-color .3s, color .3s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-text {
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color .2s;
}
.btn-text:hover { color: var(--rose); }
.divider-sm { width: 48px; height: 1px; background: var(--gold-pale); margin: 1.5rem 0; }

/* ── CONTACT BAR ── */
.contact-bar {
  position: fixed; top: 0; width: 100%; z-index: 101;
  background: var(--gold-pale); padding: 0 5vw;
  transition: transform .4s;
}
.contact-bar.hidden { transform: translateY(-100%); }
.contact-bar-inner {
  max-width: 1400px; margin: 0 auto; height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 2rem;
}
.cb-link {
  font-size: .65rem; font-weight: 400; letter-spacing: .1em; color: var(--text-body);
  display: flex; align-items: center; gap: .45rem; transition: color .2s;
}
.cb-link:hover { color: var(--gold); }
.cb-link svg { opacity: .7; }

/* ── NAV ── */
/* Scoped to #hdr so semantic <header> elements inside <main> (e.g. archive
   and single post heros) don't inherit the fixed-positioning rules. */
#hdr {
  position: fixed; top: 36px; width: 100%; z-index: 100;
  /* Literal #2a2a2e (matches the design-system spec) rather than var(--charcoal)
     because typography-crisp.css redefines --charcoal to #141418 to crispen
     body text. That deeper override is correct for text but reads as near-black
     when used as a background here. Header bg is locked to the spec. */
  background: #2a2a2e;
  border-bottom: 1px solid rgba(184,149,106,.18);
  transition: box-shadow .4s;
}
#hdr.scrolled { box-shadow: 0 4px 28px rgba(0,0,0,.25); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; max-width: 1400px; margin: 0 auto; padding: 0 5vw; }
.logo { font-family: var(--serif); font-size: 2.3rem; font-weight: 600; color: var(--cream); letter-spacing: .03em; }
.logo em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); padding: .4rem 0; position: relative; transition: color .25s;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold-light); transition: width .3s; }
.nav-links a:hover::after { width: 100%; }

/* Mega dropdown */
.dropdown { position: relative; }
.dropdown-panel {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 200; background: var(--cream); border: 1px solid rgba(184,149,106,.12);
  box-shadow: 0 12px 40px rgba(42,42,46,.07); padding: 1.6rem 1.8rem; min-width: 520px;
  opacity: 0; transition: opacity .3s, transform .3s;
}
.dropdown:hover .dropdown-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.4rem; opacity: 1; transform: translateX(-50%) translateY(0); }
.dd-label { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-pale); padding-bottom: .4rem; margin-bottom: .4rem; background: none; border-top: none; border-left: none; border-right: none; cursor: default; font-family: var(--sans); width: auto; text-align: left; }
.dd-label::after { display: none; } /* hide +/- on desktop */
.dd-cities { } /* visible by default on desktop */
.dropdown-panel a { display: block; padding: .25rem 0; font-size: .7rem; letter-spacing: .06em; text-transform: none; color: var(--warm-grey); }
.dropdown-panel a:hover { color: var(--gold); }
.dropdown-panel a::after { display: none; }

.nav-cta {
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--gold-decor); padding: .6rem 1.4rem;
  transition: background .3s;
}
.nav-cta:hover { background: var(--rose); }
.ham { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.ham span { display: block; width: 20px; height: 1.5px; background: var(--cream); margin: 4.5px 0; transition: .3s; }

/* ── HERO ── */
.hero {
  position: relative; min-height: 46vh; display: flex; align-items: center;
  padding: 8rem 5vw 1.5rem; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('../img/hero.jpg') center center / cover no-repeat;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(250,248,245,.92) 0%, rgba(250,248,245,.82) 45%, rgba(245,240,235,.6) 100%);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(250,248,245,.3) 0%, rgba(250,248,245,0) 30%, rgba(250,248,245,.85) 100%);
}
.hero-inner {
  position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: center;
}
.hero-left {}
.hero-eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .8rem;
  opacity: 0; animation: fadeUp .9s .2s forwards;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-decor); }
.hero h1 {
  font-family: var(--serif); font-size: clamp(2.4rem,4.8vw,3.6rem);
  font-weight: 400; line-height: 1.1; color: var(--charcoal);
  opacity: 0; animation: fadeUp .9s .35s forwards;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-right { opacity: 0; animation: fadeUp .9s .5s forwards; padding-top: 2.5rem; }
.hero-intro {
  font-size: .95rem; font-weight: 400; color: var(--text-body); line-height: 1.8; margin-bottom: .5rem;
}
/* Homepage hero — city names highlighted within the overlay lead. */
.hero-cities { color: var(--gold); }
/* Hero overlay variant on the homepage: tighter line-height + bottom space
   before the Read more / collapsed body. */
.hero .hero-overlay { margin-bottom: 1.2rem; line-height: 1.45; }
/* Read more toggle visible on all sizes — last paragraph is collapsible */
.hero-more,
.location-intro-more {
  max-height: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.22,1,.36,1);
}
.hero-more.open { max-height: 560px; }
/* Location intro-extended is longer (~270 words) than the hero (~80),
   so it needs a higher ceiling to fully unfurl. */
.location-intro-more.open { max-height: 1500px; }
.hero-more p { font-size: .95rem; font-weight: 300; color: var(--text-body); line-height: 1.8; margin-bottom: .8rem; }
.hero-signature {
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; font-weight: 400;
  color: var(--gold); margin-top: .8rem; margin-bottom: 0; line-height: 1.2; letter-spacing: .01em;
}
.hero-toggle,
.location-intro-toggle {
  background: none; border: none; cursor: pointer; color: var(--gold);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-family: var(--sans);
  padding: .3rem 0; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 300; font-style: italic; opacity: .75; text-decoration: none;
}
.hero-toggle:hover,
.location-intro-toggle:hover { opacity: 1; }
.hero-toggle .chev,
.location-intro-toggle .chev { transition: transform .3s; display: inline-block; font-size: .8rem; }
.hero-toggle.open .chev,
.location-intro-toggle.open .chev { transform: rotate(180deg); }
/* Location toggle sits below the intro prose — give it room to breathe
   so it doesn't crash into the paragraph above. */
.location-intro-toggle { margin-top: .6rem; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ── GALLERY ── */
.gallery { background: var(--warm-white); padding-top: 3rem; }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: none; border: 1px solid var(--gold-pale);
  padding: .55rem 1.2rem; cursor: pointer; transition: all .25s;
}
.filter-toggle:hover { border-color: var(--gold-decor); }
.filter-toggle .ft-chev { transition: transform .3s; font-size: .7rem; }
.filter-toggle.open .ft-chev { transform: rotate(180deg); }
.filter-active-label { font-size: .7rem; color: var(--warm-grey); margin-left: .8rem; }
.filter-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,1,.36,1), margin .4s cubic-bezier(.22,1,.36,1);
  margin-top: 0; margin-bottom: 0;
}
.filter-panel.open { max-height: 200px; margin-top: 1rem; margin-bottom: 2rem; }
@media (max-width: 768px) {
  /* Chips wrap to many more rows on narrow screens — raise the cap so the
     bottom row isn't clipped by overflow: hidden. */
  .filter-panel.open { max-height: 520px; }
}
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  font-size: .62rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .9rem; border: 1px solid var(--gold-pale); background: transparent;
  color: var(--warm-grey); cursor: pointer; transition: all .25s;
}
.chip:hover { border-color: var(--gold-decor); color: var(--gold); }
.chip.active { background: var(--gold-decor); color: var(--cream); border-color: var(--gold-decor); }
.escort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.escort-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden; display: block;
  background: linear-gradient(145deg, var(--champagne), var(--blush), var(--rose-soft));
  transition: transform .4s, box-shadow .4s;
}
.escort-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(42,42,46,.1); }
.escort-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(to top, rgba(42,42,46,.7) 0%, transparent 100%);
}
.escort-card-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: #fff; }
/* Bigger name on wider viewports — at 1.1rem the name was hard to read
   on tablet/desktop where the card photos are large. Mobile stays at
   1.1rem so it doesn't overflow the narrower 2-col grid. */
@media (min-width: 900px)  { .escort-card-name { font-size: 1.3rem; } }
@media (min-width: 1200px) { .escort-card-name { font-size: 1.5rem; } }
.escort-card-loc { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .15rem; }
.escort-card-badge {
  position: absolute; top: .8rem; left: .8rem;
  font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold-decor); color: var(--cream); padding: .25rem .7rem;
}
.gallery-foot { text-align: center; margin-top: 2.5rem; }

/* ── ABOUT / LISA ── */
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4.5rem; align-items: center; }
.about-img { position: relative; }
.about-img-frame {
  aspect-ratio: 3/4; overflow: hidden; position: relative;
  background: url('../img/about-lisa.jpg') center center / cover no-repeat;
}
.about-img-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(184,149,106,.15); }
.about-img-accent {
  position: absolute; top: -16px; left: -16px; width: 64px; height: 64px;
  border: 1px solid var(--gold-pale); z-index: -1;
}
.about-est {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--charcoal); color: var(--cream); padding: 1rem 1.2rem; text-align: center;
}
.about-est-yr { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.about-est-lbl { font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin-top: .25rem; }
.about-body p { font-size: 1rem; font-weight: 300; line-height: 1.85; color: var(--graphite); margin-bottom: 1.2rem; }
.about-body p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3rem; font-weight: 500;
  float: left; line-height: 1; margin-right: .4rem; margin-top: .08rem; color: var(--gold);
}
.about-sig { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold); margin-top: 1.5rem; }

/* ── FEATURED ── */
.featured { background: var(--charcoal); position: relative; overflow: hidden; }
.featured::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 80% 40%, rgba(184,149,106,.06), transparent),
              radial-gradient(ellipse 40% 50% at 10% 70%, rgba(212,164,144,.04), transparent);
}
.featured .sec-inner { position: relative; z-index: 1; }
.featured .eyebrow { color: var(--gold-light); }
.featured .eyebrow::before { background: var(--gold-light); }
.featured .sec-h2 { color: var(--cream); }
.featured .sec-h2 em { color: var(--gold-light); }
.featured .sec-sub { color: rgba(245,240,235,.55); max-width: none; }
.featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.featured-card {
  position: relative; aspect-ratio: 2/3; overflow: hidden; display: block;
  background: linear-gradient(145deg, rgba(184,149,106,.15), rgba(212,164,144,.1), rgba(90,82,88,.2));
  transition: transform .4s;
}
.featured-card:hover { transform: translateY(-4px); }
.featured-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem;
  background: linear-gradient(to top, rgba(42,42,46,.8), transparent);
}
.featured-card-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: #fff; }
.featured-card-loc { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .2rem; }
.featured-badge {
  position: absolute; top: .8rem; right: .8rem;
  font-size: .55rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold-decor); color: var(--cream); padding: .3rem .8rem;
}

/* ── JOIN / RECRUIT ── */
.join { background: var(--cream); }
.join-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 1.5rem 4.5rem; }
.join-title { grid-column: 2; grid-row: 1; }
.join-img { grid-column: 1; grid-row: 1 / -1; }
.join-body { grid-column: 2; grid-row: 2; }
.join-desc { font-size: .92rem; font-weight: 300; line-height: 1.85; color: var(--text-body); margin-bottom: 1.5rem; }
.join-desc.join-desc--feature {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-body);
  margin-bottom: 1.4rem;
}
.join-desc--feature .join-accent { color: var(--gold); font-style: italic; font-weight: 500; }
.join-img {
  aspect-ratio: 3/4; overflow: hidden; position: relative;
  background: url('../img/recruit.jpg') center top / cover no-repeat;
}
.join-img::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(184,149,106,.12); }
.join-perks { list-style: none; margin-bottom: 2rem; }
.join-perks li {
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: .9rem; font-weight: 300; color: var(--graphite); line-height: 1.6;
  margin-bottom: .7rem;
}
.perk-icon {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-decor); color: var(--cream);
  border-radius: 50%; font-size: .7rem; font-weight: 600;
  margin-top: .1rem;
}
.join-body p { font-size: .92rem; font-weight: 300; line-height: 1.85; color: var(--text-body); margin-bottom: 2rem; }

/* ── FAQ ── */
.faq { background: var(--warm-white); }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.faq-intro { font-size: 1rem; font-weight: 300; color: var(--text-body); line-height: 1.8; margin-bottom: 1rem; }
.faq-item { border-bottom: 1px solid var(--gold-pale); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: 1.2rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: .88rem; font-weight: 400; color: var(--charcoal);
  transition: color .2s;
}
.faq-q:hover { color: var(--gold); }
.faq-icon {
  font-size: 1.2rem; color: var(--gold-decor); transition: transform .3s;
  flex-shrink: 0; width: 1.5rem; text-align: center;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); }
.faq-a.open { max-height: 200px; }
.faq-a p { font-size: .95rem; font-weight: 300; color: var(--text-body); line-height: 1.8; padding-bottom: 1.2rem; }

/* ── TESTIMONIALS ── */
.testi { background: var(--cream); text-align: center; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.testi-card {
  background: var(--warm-white); border: 1px solid rgba(184,149,106,.08);
  border-radius: 4px; padding: 2.5rem 2rem 2rem; text-align: center;
  transition: transform .4s, box-shadow .4s;
}
.testi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(42,42,46,.06); }
.testi-card-photo {
  width: 100px; height: 100px; margin: 0 auto 1.4rem; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gold-pale);
}
.testi-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.testi-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, var(--champagne), var(--blush), var(--rose-soft));
}
.testi-stars { color: var(--gold-decor); font-size: .9rem; letter-spacing: .15rem; margin-bottom: 1rem; }
.testi-text {
  font-family: var(--serif); font-size: .95rem;
  font-weight: 400; font-style: italic; line-height: 1.65; color: var(--graphite);
  margin-bottom: 1.2rem;
}
.testi-author { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ── BLOG ── */
.blog { background: var(--warm-white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-card {
  display: block; background: var(--cream); overflow: hidden;
  border: 1px solid rgba(184,149,106,.08);
  transition: transform .4s, box-shadow .4s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(42,42,46,.06); }
.blog-card-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--champagne), var(--blush));
  background-size: cover;
  background-position: center;
}
.blog-card-body { padding: 1.4rem; }
.blog-card-meta { font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.blog-card-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--charcoal); line-height: 1.35; margin-bottom: .6rem; }
.blog-card-excerpt { font-size: .82rem; color: var(--text-body); line-height: 1.7; }
.blog-foot { text-align: center; margin-top: 2.5rem; }

/* ── FOOTER ── */
footer { background: var(--charcoal); color: rgba(245,240,235,.5); padding: 3.5rem 5vw 2rem; }
.footer-inner { max-width: 1240px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand p { font-size: .8rem; line-height: 1.7; max-width: 300px; margin-top: .8rem; color: rgba(245,240,235,.6); }
.footer-brand .logo { color: var(--cream); }
.footer-brand .logo em { color: var(--gold-light); }
/* min-width: 0 lets the grid column shrink below content size — without
   it, long unbreakable strings (emails, hashed URLs) force the column to
   stretch and push the page wider than the viewport on mobile. */
.footer-col { min-width: 0; }
.footer-col a, .footer-col p { overflow-wrap: anywhere; }
.footer-col h4 { font-size: .65rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .45rem; }
.footer-col a { font-size: .8rem; color: rgba(245,240,235,.65); transition: color .3s; }
.footer-col a:hover { color: var(--gold-light); }
.footer-col p { font-size: .8rem; color: rgba(245,240,235,.65); line-height: 1.7; }
.footer-disclaimer {
  padding: 1.8rem 0; margin-top: 2rem;
  border-top: 1px solid rgba(184,149,106,.08);
}
.footer-disclaimer p {
  font-size: .72rem; color: rgba(245,240,235,.45); line-height: 1.8;
  max-width: 900px;
}
.footer-col .contact-label { font-size: .62rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .2rem; margin-top: .8rem; }
.footer-col .contact-label:first-child { margin-top: 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: .68rem; flex-wrap: wrap; gap: .8rem; }
.footer-bottom a { color: rgba(245,240,235,.35); transition: color .3s; }
.footer-bottom a:hover { color: var(--gold-light); }
.ec-footer-legal { display: inline-flex; align-items: center; gap: .55rem; }
.ec-footer-legal a { text-decoration: none; }
.ec-footer-legal a:hover { text-decoration: underline; }
.ec-footer-legal span { color: rgba(245,240,235,.2); user-select: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .escort-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .about-grid, .join-grid, .faq-layout { grid-template-columns: 1fr; gap: 3rem; }
  /* On mobile, show the text block (Welcome / heading / Lisa's intro) above
     the photo so visitors hit the section's purpose before the portrait. */
  /* width:100% is critical — without it, `margin: 0 auto` on a flex/grid
     item with only background-image content (no children that would
     give it an intrinsic width) collapses the item to 0 width and the
     photo vanishes at narrow viewports. */
  .about-grid > .about-img { order: 2; width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }
  .join-img { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sec { padding: 4rem 6vw; }
  .nav-links, .nav-cta { display: none; }
  .ham { display: block; }

  /* Fix 5: Show contact bar on mobile (compressed) */
  .contact-bar { display: block; padding: .4rem 5vw; }
  .contact-bar-inner { height: 32px; gap: 1.2rem; justify-content: center; }
  .cb-link { font-size: .62rem; }
  #hdr { top: 32px; }
  /* Taller nav row on mobile so the serif logo isn't visually pinned
     to the contact bar above. 72→84 adds ~6px of breathing room top
     and bottom of the logo. Hero padding-top below is bumped to keep
     clearance under the now-larger fixed header (32 + 84 = 116px). */
  .nav-inner { height: 84px; }

  /* Fix 1: Centre hero on mobile */
  .hero h1 { text-align: center; font-size: 2rem; margin-bottom: 1rem; }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow::before { display: none; }
  .hero-right { padding-top: 0; text-align: center; }
  .hero-signature { font-size: 1.25rem; text-align: center; }

  /* Fix 2: Tighten hero spacing.
     Top padding clears the fixed contact-bar (32px) + #hdr (84px now,
     positioned at top:32px) ≈ 116px on mobile. 8.5rem (136px) gives
     ~20px breathing room below the header. */
  .hero { min-height: auto; padding: 8.5rem 5vw 2rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 1rem; }
  .hero-intro { margin-bottom: .7rem; }
  .hero-toggle,
  .location-intro-toggle { margin-bottom: 1.2rem; font-size: .65rem; }
  .hero-more.open { max-height: 560px; }
  /* Bump the location ceiling on mobile — narrower viewport means
     the same 270 words wrap to more lines and need more vertical room. */
  .location-intro-more.open { max-height: 2400px; }

  /* Fix 3: Tighten gallery top padding */
  .gallery { padding-top: 2.5rem; }

  /* Fix 4: Join section mobile reorder */
  .join-layout { display: flex; flex-direction: column; gap: 1.5rem; }
  .join-title { order: 1; }
  .join-img { order: 2; height: 420px; aspect-ratio: auto; background-position: center center; }
  .join-body { order: 3; }

  .escort-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-head { flex-direction: column; align-items: flex-start; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* Mobile nav */
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--cream); padding: 1.5rem 5vw; gap: .8rem;
    border-bottom: 1px solid rgba(184,149,106,.1); box-shadow: 0 12px 40px rgba(42,42,46,.06);
  }
  /* Top-level nav anchors inherit cream from desktop styles, which is invisible
     on the cream mobile-drawer background. Override to charcoal for legibility. */
  .nav-links.open > li > a { color: var(--charcoal); }
  .nav-links.open > li > a:hover { color: var(--gold); }
  /* Mobile "By Area" nested accordion */
  .nav-links.open .dropdown-panel {
    display: none !important; position: static; min-width: 0; width: 100%;
    box-shadow: none; border: none; padding: 0; transform: none; opacity: 1;
  }
  .nav-links.open .dropdown.mob-open .dropdown-panel { display: block !important; }
  .nav-links.open .dd-region { border-top: 1px solid rgba(184,149,106,.12); }
  .nav-links.open .dd-label {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: .95rem 1.2rem; font-family: var(--sans); font-size: .68rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
    cursor: pointer; position: relative;
  }
  .nav-links.open .dd-label::after {
    content: '+'; position: absolute; right: 1.2rem; top: 50%;
    transform: translateY(-50%); font-size: 1.2rem; line-height: 1; transition: transform .25s;
  }
  .nav-links.open .dd-label[aria-expanded="true"]::after { content: '\2212'; }
  .nav-links.open .dd-cities {
    max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 1.2rem;
  }
  .nav-links.open .dd-region.open .dd-cities { max-height: 600px; padding-bottom: .8rem; }
  .nav-links.open .dd-cities a {
    display: block; padding: .6rem 0; font-size: .8rem; letter-spacing: .04em;
    text-transform: none; color: var(--warm-grey);
    border-bottom: 1px solid rgba(184,149,106,.06);
  }
  .nav-links.open .dd-cities a::after { display: none; }
  .nav-links.open .dd-cities a:last-child { border-bottom: none; }
  .nav-links.open .dd-cities a:hover { color: var(--gold); }
}
@media (max-width: 480px) {
  .escort-grid { grid-template-columns: 1fr 1fr; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PHASE 2a — Dynamic escort cards + single-escort profile page
 * ═══════════════════════════════════════════════════════════════════════ */

/* Ensure featured images render within the cards (they're positioned absolute via WP markup otherwise). */
.escort-card img,
.featured-card img,
.escort-card-featured img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* Card tagline — small italic line between name and location on cards. */
.escort-card-tagline {
  font-family: var(--serif); font-style: italic; font-size: .78rem;
  color: var(--gold-light); margin-top: .15rem; letter-spacing: .01em;
}
/* Same upscaling as the name on wider viewports. */
@media (min-width: 900px)  { .escort-card-tagline { font-size: .88rem; } }
@media (min-width: 1200px) { .escort-card-tagline { font-size: .95rem; } }

/* ── Escort card meta — hover-revealed on desktop, always-visible on
   mobile/touch. Short location text. On hover-capable wide viewports
   the location is hidden by default and slides up with fade-in on
   hover. On touch / mobile the location stays visible — there's no
   hover state and small-screen visitors benefit from seeing it
   without interaction. */
@media (hover: hover) and (min-width: 768px) {
  .escort-card-meta {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .35s ease-out;
  }
  .escort-card:hover .escort-card-meta,
  .escort-card:focus-within .escort-card-meta {
    max-height: 3rem; opacity: 1;
  }
}

/* Away state — muted card + away badge. */
.escort-card.escort-away { opacity: .6; }
.escort-card.escort-away:hover { opacity: .75; }
.escort-badge-away {
  background: var(--warm-grey); color: var(--cream);
}

/* Featured-context variant — used in the dark Featured section. Larger aspect. */
.escort-card-featured { aspect-ratio: 2/3; }

/* Empty gallery message fallback. */
.gallery-empty {
  text-align: center; font-style: italic; color: var(--warm-grey);
  padding: 3rem 1rem; font-family: var(--serif);
}

/* ===================================================================
   Elite Courtesans — Magazine profile (APPEND to main.css)
   Replaces the old .single-escort / .escort-* block. Uses the existing
   token vocabulary defined in main.css :root.
   All new rules are .ec-* prefixed to avoid collisions with the old.
   =================================================================== */

/* ===================================================================
   Elite Courtesans — Magazine profile
   Matches the existing token vocabulary (cream/gold/charcoal, Playfair + Outfit).
   Desktop uses a 12-col grid for asymmetric editorial layouts;
   photo rows use CSS grid with align-items:start so unequal-aspect
   portraits line up by their top edge without cropping.
   =================================================================== */

/* ────── TYPOGRAPHIC ATOMS ────── */
.ec-eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: .8rem;
  margin-bottom: 1rem;
}
.ec-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--gold-decor);
}
.ec-eyebrow--center { justify-content: center; }
.ec-eyebrow--center::before { display: none; }

.ec-section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--charcoal); line-height: 1.15;
  margin: 0 0 2rem;
}
/* Carolina: italic Playfair J reads as F on short names like "Jade".
   Drop italic; keep the gold accent and bump weight a touch so the
   name still pops typographically. */
.ec-section-title em { font-style: normal; font-weight: 600; color: var(--gold); }
.ec-section-title--center { text-align: center; margin-left: auto; margin-right: auto; }

.ec-section-subtitle {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.4rem; color: var(--charcoal);
  margin: 0 0 1.2rem;
}

/* ════════════════════════ MASTHEAD ════════════════════════
   Desktop: 12-col grid. Photo spans ~8 cols, caption overlays bottom-left.
   If portrait: photo goes right (5 cols), caption left (7 cols).
*/
.ec-masthead {
  max-width: var(--container); margin: 0 auto;
  padding: 2rem 5vw 0;
  position: relative;
}
.ec-masthead--landscape { padding-top: 2.5rem; }

.ec-masthead-photo {
  width: 100%;
}
.ec-masthead-photo img {
  width: 100%; height: auto; display: block;
}

.ec-masthead-caption {
  margin-top: 1.5rem;
}
/* Desktop: overlay caption on the photo (bottom-left) for landscape hero */
@media (min-width: 900px) {
  .ec-masthead--landscape { position: relative; }
  .ec-masthead--landscape .ec-masthead-caption {
    position: absolute;
    left: calc(5vw + 2.5rem); bottom: 2.5rem;
    margin: 0;
    background: rgba(250, 248, 245, .92);
    padding: 1.8rem 2.2rem 2rem;
    max-width: 42%;
    backdrop-filter: blur(6px);
    border-left: 2px solid var(--gold);
  }
}

.ec-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: .95; margin: 0; color: var(--charcoal);
}
.ec-subtitle {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--gold);
  margin: .6rem 0 .4rem;
}
.ec-subtitle em { font-style: italic; }
.ec-locale {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--warm-grey);
  margin: .6rem 0 0;
}

/* ════════════════════════ STATS STRIP ════════════════════════ */
.ec-stats-strip {
  max-width: var(--container); margin: 2.5rem auto 0;
  padding: 0 5vw;
}
.ec-stats-bar {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
}
.ec-stat {
  flex: 1 1 auto; min-width: 110px;
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--gold-pale);
  display: flex; flex-direction: column; gap: .25rem;
}
.ec-stat:last-child { border-right: none; }
.ec-stat-label {
  font-size: .55rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.ec-stat-value {
  font-family: var(--serif); font-size: 1.05rem;
  font-weight: 500; color: var(--charcoal);
}

/* ════════════════════════ PHOTO ROWS ════════════════════════
   The two invariants Carol asked for:
   (1) No hard cropping — every image is width:100%; height:auto.
   (2) Grid cells are minmax(0, 1fr) so tall/short portraits coexist
       without stretching.
   align-items:start keeps uneven heights top-aligned.
*/
.ec-photos {
  max-width: var(--container); margin: 2rem auto;
  padding: 0 5vw;
}
.ec-photo-group { display: flex; flex-direction: column; gap: 1.25rem; }

.ec-row { display: grid; gap: 1.25rem; align-items: start; }
.ec-row img { width: 100%; height: auto; }

/* 1 landscape — full bleed of container */
.ec-row--banner1 { grid-template-columns: minmax(0, 1fr); }

/* 2 landscapes side-by-side (Carol: "two landscape photos into a single row") */
.ec-row--banner2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 2–4 portraits per row (Carol: "min 2, max 4 portraits") */
.ec-row--p2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; margin: 0 auto; }
.ec-row--p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ec-row--p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Solo (last photo orphan) — capped at 50% not 33%, centered, breathing */
.ec-row--solo { justify-items: center; }
.ec-row--solo img { max-width: 50%; }

/* ════════════════════════ EDITORIAL SPREADS ════════════════════════ */
.ec-spread {
  max-width: var(--container); margin: 4rem auto;
  padding: 0 5vw;
  display: grid; gap: 3rem;
}

/* Bio: 7+5 asymmetric. Main column holds long-form prose, aside sidebar.
   Tighter top margin than other spreads — the photo block above already
   provides visual breathing room, so 4rem felt too airy. */
.ec-spread--bio {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  margin-top: 1.5rem;
}

/* Two-col: even 1fr 1fr for availability+areas, stats+rates */
.ec-spread--two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 900px) {
  .ec-spread,
  .ec-spread--bio,
  .ec-spread--two-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Prose */
.ec-prose p {
  font-size: 1.02rem; font-weight: 300; line-height: 1.85; color: var(--graphite);
  margin: 0 0 1.2rem;
}
.ec-prose p em { font-style: italic; color: var(--gold); font-family: var(--serif); font-weight: 500; }
.ec-prose a { color: var(--gold); border-bottom: 1px solid var(--gold-pale); }
.ec-prose a:hover { border-bottom-color: var(--gold); }
.ec-prose--tight p { font-size: .98rem; line-height: 1.8; }

/* Drop cap only on the bio's first DIRECT-CHILD paragraph — scoped this
   way so a leading <blockquote><p>...</p></blockquote> doesn't also
   acquire its own drop cap (Paloma had two; Mya/Monica/Ava/Emily had
   the same structural risk). */
.ec-spread--bio .ec-prose > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 500;
  font-size: 3.6rem; line-height: 1;
  float: left; margin: .05rem .55rem 0 0;
  color: var(--gold);
}

/* At a glance sidebar */
.ec-card-glance {
  background: var(--warm-white);
  border: 1px solid var(--gold-pale);
  padding: 1.8rem 1.8rem 1.5rem;
}
.ec-card-glance-head {
  font-size: .6rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--gold-pale);
}
.ec-card-glance dl {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1.5rem; row-gap: .65rem;
  margin: 0;
}
.ec-card-glance dt {
  font-size: .62rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--warm-grey);
  align-self: center;
}
.ec-card-glance dd {
  margin: 0;
  font-family: var(--serif); font-size: 1rem; color: var(--charcoal);
  text-align: right;
}

/* Pull-quote (hanging below sidebar card) */
.ec-pullquote {
  margin: 1.8rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--gold-pale);
}
.ec-pullquote p {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.4; color: var(--charcoal);
  margin: 0;
}
.ec-pullquote p em { font-style: italic; color: var(--gold); }

/* ════════════════════════ AREAS ════════════════════════ */
.ec-areas { display: flex; flex-direction: column; gap: .8rem; }
.ec-area-row {
  display: grid; grid-template-columns: 6rem 1fr;
  gap: 1.2rem; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--gold-pale);
}
.ec-area-dur {
  font-size: .6rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.ec-area-list {
  font-size: .92rem; line-height: 1.7; color: var(--graphite);
}
.ec-area-list a { color: var(--gold); border-bottom: 1px solid var(--gold-pale); }
.ec-area-note { font-size: .85rem; font-style: italic; color: var(--warm-grey); margin-top: .6rem; }

/* ════════════════════════ STATS TABLE ════════════════════════ */
.ec-stats-table {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}
.ec-sr {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(184,149,106,.15);
  font-size: .9rem;
}
.ec-sr .l { color: var(--warm-grey); font-weight: 500; letter-spacing: .04em; }
.ec-sr .v { font-family: var(--serif); color: var(--charcoal); }

@media (max-width: 600px) {
  .ec-stats-table { grid-template-columns: 1fr; column-gap: 0; }
}

/* ════════════════════════ RATES ════════════════════════ */
.ec-rates {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--gold-pale);
}
.ec-rate {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 1.5rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--gold-pale);
}
.ec-rate .dur { font-family: var(--serif); font-size: 1rem; color: var(--charcoal); }
.ec-rate .price { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); font-weight: 500; text-align: right; }
.ec-rate .note {
  grid-column: 1 / -1; font-size: .78rem; font-style: italic;
  color: var(--warm-grey); margin-top: .3rem;
}
.ec-rates-footer { font-size: .88rem; font-style: italic; color: var(--warm-grey); margin: 1.2rem 0 0; line-height: 1.6; }

.ec-rules { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.ec-rule {
  font-size: .6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-pale); padding: .45rem .85rem;
}

.ec-inline-cta { margin-top: 1.8rem; }

/* ────── Buttons ────── */
.ec-btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold-decor); color: var(--cream);
  padding: .95rem 1.8rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background .25s, box-shadow .25s, transform .25s;
}
.ec-btn-gold:hover { background: var(--gold); box-shadow: 0 6px 24px rgba(154,117,80,.25); transform: translateY(-1px); }
.ec-btn-gold--lg { padding: 1.15rem 2.4rem; font-size: .78rem; }

/* ════════════════════════ FEEDBACK ════════════════════════ */
.ec-feedback {
  background: var(--warm-white);
  padding: 4rem 5vw;
  margin: 3rem 0;
}
.ec-feedback-inner {
  max-width: var(--container); margin: 0 auto; text-align: center;
}
.ec-feedback-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; margin-top: 3rem; text-align: left;
}
@media (max-width: 900px) { .ec-feedback-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.ec-quote {
  margin: 0;
  background: var(--cream);
  border-left: 2px solid var(--gold);
  padding: 1.8rem 2rem;
}
.ec-quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.02rem; line-height: 1.6; color: var(--charcoal);
}
.ec-quote blockquote em { font-style: italic; color: var(--gold); }
.ec-quote figcaption {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}

/* ════════════════════════ Q&A ════════════════════════ */
.ec-qa { max-width: var(--container); margin: 4rem auto; padding: 0 5vw; }
.ec-qa-inner {}
.ec-qa-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem; row-gap: 1.8rem;
  margin-top: 2rem;
}
@media (max-width: 900px) { .ec-qa-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.ec-qa-item {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--gold-pale);
}
.ec-qa-item--short .ec-a { display: inline; }
.ec-q {
  font-size: .7rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: .6rem;
}
.ec-a {
  font-size: 1rem; line-height: 1.75; color: var(--graphite);
}
.ec-a em { font-style: italic; color: var(--gold); font-family: var(--serif); font-weight: 500; }

/* ════════════════════════ MEETING CTA ════════════════════════ */
.ec-meeting {
  background: var(--warm-white);
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  padding: 4rem 5vw;
  text-align: center;
}
.ec-meeting-inner { max-width: 640px; margin: 0 auto; }
.ec-meeting p { font-size: 1.05rem; color: var(--graphite); margin: 0 0 1.8rem; }
.ec-meeting p a { color: var(--gold); border-bottom: 1px solid var(--gold-pale); }

/* ════════════════════════ FRIENDS ════════════════════════ */
.ec-friends { max-width: var(--container); margin: 4rem auto; padding: 0 5vw 4rem; }
.ec-friends-inner { text-align: center; }
.ec-friends-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem; margin-top: 2.5rem; text-align: left;
}
@media (max-width: 900px) { .ec-friends-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ec-friends-grid { grid-template-columns: 1fr; } }

.ec-friend { display: block; transition: transform .3s; }
.ec-friend:hover { transform: translateY(-2px); }
.ec-friend-photo {
  width: 100%; aspect-ratio: 3/4;
  background-size: cover; background-position: center;
  background-color: var(--champagne);
}
.ec-friend-name {
  font-family: var(--serif); font-size: 1.2rem; color: var(--charcoal);
  margin: .8rem 0 .2rem;
}
.ec-friend-meta {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .ec-masthead { padding-top: 1.5rem; }
  .ec-name { font-size: 2.6rem; }
  .ec-row--p3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-row--p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-row--banner2 { grid-template-columns: 1fr; }
  .ec-row--p2 { max-width: 100%; }
  .ec-row--solo img { max-width: 80%; }
  .ec-feedback, .ec-meeting { padding: 2.5rem 5vw; }
}
@media (max-width: 560px) {
  /* Carolina: on mobile every photo row collapses to one image per row.
     A row of 4 portraits becomes a column of 4. */
  .ec-row--p2,
  .ec-row--p3,
  .ec-row--p4,
  .ec-row--banner2 { grid-template-columns: 1fr; max-width: 100%; }
  .ec-row--solo img { max-width: 100%; }
  .ec-stat { min-width: calc(50% - .5px); border-bottom: 1px solid var(--gold-pale); }
  .ec-stat:nth-last-child(-n+2) { border-bottom: none; }
  .ec-area-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE-ESCORT v3 — hero restructure, sidecar spreads, Q&A contrast,
   testimonial carousel. Appended to main.css so it cascades over the
   v2 magazine rules above.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ─────────────────────────────────────────────────────────
   Three-zone hero: cream head (name + locale) → landscape photo on
   warm slate → cream stats strip. The slate zone behind the photo
   gives the portrait a "framed" editorial cover treatment without
   darkening the page entry. */
/* Hero chrome: bookend the landscape photo with warm-stone bands above
   (head: name / tagline / covering) and below (stats strip). The photo
   sits on slate-deep between them. That three-band sequence visually
   differentiates the hero from the cream nav above it. */
.ec-hero { background: var(--cream); }
.ec-hero-head {
  background: var(--slate-soft);
  /* Asymmetric padding: extra top so the content centres visually
     in the band's visible portion (the fixed header covers the
     top ~108px, so a smaller bottom pad plus bigger top pad
     positions Carla in the visual middle rather than the geometric
     top of the stone band). */
  padding: 9rem 5vw 4rem;
}
.ec-hero-head > .ec-hero-grid {
  max-width: 1040px; margin: 0 auto;
}
.ec-hero-head .ec-eyebrow { color: var(--gold); }
.ec-hero-head .ec-eyebrow::before { background: var(--gold-decor); }

/* 2-col hero head: name + tagline (left) | areas summary (right). */
.ec-hero-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem;
  align-items: center;
}
.ec-hero-left { min-width: 0; text-align: center; }  /* name + tagline sit centred in their column */
.ec-hero-right {
  min-width: 0; padding-bottom: 0.5rem;
  border-left: 1px solid rgba(20, 20, 24, .15);
  padding-left: 2rem;
}
.ec-hero .ec-name {
  font-family: var(--serif); font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 400; color: var(--charcoal); line-height: 1.02;
  margin: 0;
}
.ec-hero-tagline {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-style: italic; color: var(--gold); margin: 2.5rem 0 0;
  font-weight: 400;
}
.ec-hero-tagline em { font-style: italic; }
.ec-hero-areas {
  font-family: var(--sans); font-size: .95rem; font-weight: 400;
  color: var(--text-body); line-height: 1.55; margin: 0.4rem 0 0;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .ec-hero-grid {
    grid-template-columns: 1fr; gap: 1.5rem; align-items: start;
    text-align: center;                    /* centre-align the stacked hero on mobile */
  }
  .ec-hero-left, .ec-hero-right { text-align: center; }
  /* Tighter tagline gap on mobile — 2.5rem felt right next to a large
     desktop H1 but is too much air on a narrow screen. */
  .ec-hero-tagline { margin-top: 1.2rem; }
  /* Eyebrows use flex internally — centre the rule via justify-content
     (text-align alone doesn't centre a flex container's children). */
  .ec-hero-head .ec-eyebrow { justify-content: center; }
  .ec-hero-right {
    border-left: none; padding-left: 0; padding-bottom: 0;
    border-top: 1px solid rgba(20,20,24,.15); padding-top: 1.2rem;
  }
}
.ec-hero-photo {
  /* Literal #2a2a2e to align with #hdr / .featured / footer band — same
     reason as those: typography-crisp.css's --charcoal override is too
     dark for surface use, and slate-accents' --slate-deep (#1a1f26)
     is a different brand colour Carolina has phased out. */
  background: #2a2a2e;
  padding: 2.4rem 5vw;
}
.ec-hero-photo img {
  display: block; width: 100%; height: auto;
  max-width: var(--container); margin: 0 auto;
}
.ec-hero .ec-stats-strip {
  /* Override v2's max-width + top margin so the stone bg bleeds edge
     to edge and the top gap disappears. Even top/bottom padding so
     the stats bar isn't stuck to the photo block beneath. */
  max-width: none;
  margin: 0;
  padding: 2rem 5vw;
  background: var(--slate-soft);   /* matches hero-head — bookends the photo */
}
.ec-hero .ec-stats-bar {
  max-width: 1040px; margin: 0 auto;
  border-top: 1px solid rgba(20, 20, 24, .12);
  border-bottom: 1px solid rgba(20, 20, 24, .12);
  display: flex; flex-wrap: wrap;
}
.ec-hero .ec-stat {
  flex: 1 1 auto; min-width: 100px; padding: .9rem 1.2rem;
  border-right: 1px solid var(--border-hairline);
}
.ec-hero .ec-stat:last-child { border-right: none; }
.ec-hero .ec-stat-label {
  font-size: .55rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); display: block;
  margin-bottom: .25rem;
}
.ec-hero .ec-stat-value {
  font-size: .92rem; font-weight: 500; color: var(--charcoal);
}

@media (max-width: 720px) {
  .ec-hero { padding-top: 2.5rem; }
  .ec-hero-photo { padding: 1.6rem 5vw; }
  .ec-hero .ec-stat { min-width: 50%; border-bottom: 1px solid var(--border-hairline); }
  .ec-hero .ec-stat:nth-child(2n) { border-right: none; }
  .ec-hero .ec-stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── 2. FULL-WIDTH BIO SPREAD ────────────────────────────────────── */
.ec-spread--full {
  display: block !important;   /* override 12-col grid from .ec-spread */
  max-width: 1180px;           /* wider than the 1040 stats strip above for breathing prose */
  margin: 4rem auto;
  padding: 0 5vw;
}
.ec-spread--full .ec-spread-main { grid-column: auto; }

/* Internal headings inside the bio content (when authors write their
   own <h2>/<h3>/<h4>). Keeps them visibly sub-hierarchical to the
   section's own "Meet X" H2 above, and prevents the crowded look
   when the bio opens with its own headings. */
.ec-spread--full .ec-prose h2,
.ec-spread--full .ec-prose h3,
.ec-spread--full .ec-prose h4 {
  font-family: var(--sans);            /* sans for internal subheads — H2 above is already serif */
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2rem 0 .6rem;
  line-height: 1.3;
}
.ec-spread--full .ec-prose h2:first-child,
.ec-spread--full .ec-prose h3:first-child,
.ec-spread--full .ec-prose h4:first-child { margin-top: 0; }

.ec-pullquote-inline {
  margin: 2.5rem 0 0; padding: 1.4rem 1.8rem;
  border-left: 2px solid var(--gold);
  background: var(--slate-soft);
}
.ec-pullquote-inline p {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
  line-height: 1.5; color: var(--charcoal); margin: 0;
}
.ec-pullquote-inline p em { font-style: italic; color: var(--gold); }

/* Photo rows get a very subtle warm tint so they read as their own
   band between text sections (mirrors the alt-band rhythm on the
   homepage). The base .ec-photos rule from v2 applies max-width: var(--container)
   with margin: 2rem auto — we need to undo that so the background
   can bleed edge-to-edge, then re-centre the inner .ec-photo-group. */
.single-escort--magazine .ec-photos {
  max-width: none;
  margin: 0;
  padding: 2.5rem 5vw;
  background: var(--warm-white);
}
.single-escort--magazine .ec-photos .ec-photo-group {
  max-width: var(--container); margin: 0 auto;
}

/* ── 3. SIDECAR SPREADS (text ‖ portrait) ──────────────────────────
   Text carries the column; portrait sidecar uses natural aspect
   ratio. --sidecar-left inverts the order for visual rhythm. */
.ec-spread--sidecar {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem; align-items: start;
  max-width: var(--container); margin: 4rem auto; padding: 0 5vw;
}
.ec-spread--sidecar .ec-col--text { padding-right: 0; }
.ec-spread--sidecar .ec-col--sidecar { width: 100%; }
.ec-spread--sidecar .ec-col--sidecar img {
  width: 100%; height: auto; display: block;
}
.ec-spread--sidecar-left {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

@media (max-width: 840px) {
  .ec-spread--sidecar, .ec-spread--sidecar-left {
    grid-template-columns: 1fr; gap: 2rem;
  }
  .ec-spread--sidecar .ec-col--sidecar { max-width: 520px; margin: 0 auto; }
}

/* Specifics/rates inherit sidecar rules — no extra work needed since
   .ec-spread--specs/.ec-spread--rates were additive classes from v2. */

/* ── 4. Q&A CONTRAST VARIANT ───────────────────────────────────────
   Original .ec-q/.ec-a share a weight. Bumping Q to 600 (bold-ish)
   against A at 400 gives the interview a clearer Q→A rhythm. */
.ec-qa--contrast .ec-q {
  font-weight: 600;
  color: var(--charcoal);
}
.ec-qa--contrast .ec-a {
  font-weight: 400;
  color: var(--text-body);
}

/* ── 5. TESTIMONIAL CAROUSEL ──────────────────────────────────────── */
.ec-testi-carousel {
  background: var(--slate-soft);
  padding: 4.5rem 5vw;
  margin-top: 2rem;
}
/* When the carousel follows a section that has its own background colour,
   the 2rem margin-top above shows the page's cream default as a visible
   strip between the two coloured sections. Sit them flush instead. */
.faq.sec + .ec-testi-carousel { margin-top: 0; }
.ec-testi-inner {
  max-width: 820px; margin: 0 auto; text-align: center;
}
.ec-testi-viewport {
  overflow: hidden; margin-top: 2.5rem;
}
.ec-testi-track {
  display: flex; list-style: none; margin: 0; padding: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.ec-testi-slide {
  flex: 0 0 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
.ec-testi-quote {
  margin: 0 0 1.4rem;
  font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 400; line-height: 1.4; color: var(--charcoal);
  letter-spacing: -.003em;
}
.ec-testi-quote p { margin: 0; }
.ec-testi-cite {
  display: inline-block; font-style: normal;
  font-family: var(--sans); font-weight: 600; font-size: .7rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.ec-testi-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem; margin-top: 2rem;
}
.ec-testi-prev, .ec-testi-next {
  background: none; border: 1px solid rgba(20,20,24,.16);
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; color: var(--charcoal); font-size: 1rem;
  transition: border-color .25s, color .25s;
}
.ec-testi-prev:hover, .ec-testi-next:hover {
  border-color: var(--gold); color: var(--gold);
}
.ec-testi-dots {
  display: flex; gap: .5rem;
}
.ec-testi-dot {
  background: none; border: none; padding: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20,20,24,.22); cursor: pointer;
  transition: background .25s, transform .25s;
}
.ec-testi-dot.is-active {
  background: var(--gold); transform: scale(1.3);
}

@media (max-width: 560px) {
  .ec-testi-carousel { padding: 3rem 5vw; }
  .ec-testi-slide { padding: 0 .2rem; }
}

/* ── 6. DIAL OLD MASTHEAD BACK (legacy v2 rules) ─────────────────
   Old .ec-masthead rules still load from v2. If a profile is somehow
   rendered with masthead markup (shouldn't happen after this rewrite),
   the rules still work. The new .ec-hero is a separate component. */


/* ===================================================================
   Elite Courtesans — Location taxonomy pages
   Used by taxonomy-escort_location.php. Plain editorial prose around
   the existing .escort-grid gallery. Reuses .faq-item / .faq-q / .faq-a
   from the homepage so the accordion JS Just Works.
   =================================================================== */
.loc-hero {
  /* 8rem top clears the fixed contact-bar + #hdr stack (~106px). 5rem was
     too tight on mobile and the eyebrow ducked under the menu. Mirrors the
     homepage .hero top padding. */
  padding: 8rem 5vw 2.5rem;
}
@media (max-width: 768px) {
  /* Mobile fixed-header stack is 116px (contact-bar 32 + #hdr 84). 9.5rem
     (152px) gives ~36px breathing room under the nav so the eyebrow
     doesn't crowd the header on first paint. */
  .loc-hero { padding: 9.5rem 5vw 2rem; }
}
.loc-hero .sec-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.loc-hero .eyebrow {
  justify-content: center;
}
.loc-hero .eyebrow::before,
.loc-hero .eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold-decor);
}
.loc-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
  color: var(--charcoal);
  margin: .4rem 0 .6rem;
}
.loc-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.4;
  color: var(--gold);
  margin: 0 auto 1.4rem;
  max-width: 880px;
}
.loc-hero .divider-sm {
  margin: 1rem auto 1.6rem;
}

/* Body prose — match homepage .about-body p typography (Outfit / 400 /
   1rem / 1.85 / charcoal). The location pages were inheriting Playfair
   which read distinctly different from the rest of the site. Capped to
   a comfortable reading measure narrower than the gallery container. */
.location-prose {
  color: var(--text-body);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.location-prose p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--graphite);
  letter-spacing: 0;
  margin: 0 0 1.2rem;
}
.location-prose p:last-child {
  margin-bottom: 0;
}
.location-prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.location-prose a:hover {
  color: var(--rose);
}
.location-prose strong {
  font-weight: 500;
  color: var(--charcoal);
}
.location-intro,
.location-intro-more {
  text-align: left;
}

/* Tighten the gap between the gallery and the about section.
   Default .sec is padding 5.5rem; loc-gallery is 2rem bottom — that
   stacks to 7.5rem of dead space. Pull the editorial section up. */
.loc-gallery {
  padding-top: 2rem;
  padding-bottom: 1rem;
}
.tax-escort_location .loc-editorial {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.tax-escort_location .loc-editorial .sec-inner,
.tax-escort_location .loc-faq .sec-inner {
  max-width: 960px;
}
.tax-escort_location .loc-faq {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.loc-h3,
.location-prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  line-height: 1.25;
  color: var(--charcoal);
  margin: 2rem 0 1rem;
}
.loc-h3 em,
.location-prose h3 em {
  font-style: italic;
  color: var(--gold);
}
.loc-h3:first-child,
.location-prose h3:first-child {
  margin-top: 0;
}

.loc-faq {
  background: var(--cream);
}
.loc-faq .eyebrow {
  margin-bottom: .6rem;
}
.loc-faq .divider-sm {
  margin-bottom: 1.6rem;
}
.loc-faq-list {
  margin-top: 1rem;
}
.loc-faq .faq-a.open {
  max-height: 600px;
}

/* Bump FAQ type — was 0.88 / 0.95rem on the homepage rule; on a
   dedicated FAQ section we want comfortable desktop reading. */
.loc-faq .faq-q {
  font-size: 1.125rem;
}
.loc-faq .faq-a p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ===== Location · "Are you Ready?" booking card =====
   Drop-in from the Claude Design handoff (location-book-card.md), with
   three Carolina customisations:
   - Eyebrow text: "Ready to book" → "Are you Ready?"
   - No reply-time footer ("Usually a reply within the hour" removed)
   - No grid lines: removed the outer top/bottom hairlines AND the inner
     cell-dividers between the 2×2 fact rows. Cleaner, less boxed.
   The card is wrapped in <aside> at the markup level so Google reads
   it as boilerplate UI, not body prose — that's the SEO point of the
   refactor. */
.lbc2 {
  background: var(--cream-warm);
  padding: 4rem 4rem 3.5rem;
  position: relative;
}
.lbc2-inner {
  max-width: 880px; margin: 0 auto;
}
.lbc2-head { text-align: center; margin-bottom: 2.6rem; }
.lbc2-eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--warm-grey);
  margin-bottom: 1.2rem;
}
.lbc2-eyebrow::before, .lbc2-eyebrow::after {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--gold-decor);
}
.lbc2-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15; color: var(--charcoal); margin: 0;
}
.lbc2-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.lbc2-rule { width: 56px; height: 1px; background: var(--gold-decor); margin: 1.2rem auto 0; }

/* 2×2 icon grid — Carolina-mods:
   · no inner cell dividers
   · removed the asymmetric odd/even padding (was there to clear the
     dividers; without them it pulled columns toward outer edges and
     the grid read as off-centre against the narrower heading + button)
   · max-width 620px on the list so the grid sits visually centred
     against the rest of the card */
.lbc2-list {
  list-style: none; margin: 2.4rem auto 2.6rem; padding: 0;
  max-width: 620px;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
.lbc2-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  column-gap: 1.2rem; align-items: center;
  padding: 1.4rem 0;
}

.lbc2-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold-decor);
  display: inline-grid; place-items: center;
  color: var(--gold); background: var(--cream);
}
.lbc2-icon svg { display: block; }

.lbc2-text { display: flex; flex-direction: column; gap: .15rem; }
.lbc2-label {
  font-size: .64rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.lbc2-value {
  font-size: 1.05rem; font-weight: 300; color: var(--charcoal);
  line-height: 1.45; margin: 0;
}
.lbc2-value strong { font-weight: 500; }
.lbc2-sub {
  font-family: var(--serif); font-style: italic;
  color: var(--warm-grey); font-size: .88rem; line-height: 1.3;
  margin-top: .15rem;
}

.lbc2-cta { text-align: center; }

@media (max-width: 640px) {
  .lbc2 { padding: 3rem 1.6rem 2.5rem; }
  .lbc2-list { grid-template-columns: 1fr; }
  .lbc2-list > .lbc2-row:nth-child(even) { padding-left: 0; }
  .lbc2-list > .lbc2-row:nth-child(odd)  { padding-right: 0; }
  .lbc2-row { grid-template-columns: 44px 1fr; column-gap: 1rem; }
  .lbc2-icon { width: 38px; height: 38px; }
}

/* Curated "Nearby cities" block — replaces old auto-flat list. */
.nearby-cities {
  padding: 4rem 5vw 5rem;
  background: var(--cream);
  border-top: 1px solid rgba(154, 117, 80, 0.15);
}
.nearby-cities .sec-inner {
  text-align: center;
}
.nearby-cities .eyebrow {
  justify-content: center;
  margin-bottom: .5rem;
}
.nearby-cities .sec-h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: .5rem 0 2rem;
  color: var(--charcoal);
}
.nearby-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 2.5rem;
}
.nearby-list li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nearby-list a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: none;
  padding: 0;
  transition: color .18s ease;
}
.nearby-list .city-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: var(--gold);
  opacity: .85;
  transition: opacity .2s ease, transform .25s var(--ease-out-soft, cubic-bezier(.22,1,.36,1));
}
.nearby-list .city-icon-svg {
  width: 100%;
  height: 100%;
}
.nearby-list .city-name {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.nearby-list a:hover,
.nearby-list a:focus {
  color: var(--gold);
}
.nearby-list a:hover .city-icon,
.nearby-list a:focus .city-icon {
  opacity: 1;
  transform: translateY(-2px);
}
.nearby-list a:hover .city-name,
.nearby-list a:focus .city-name {
  border-bottom-color: var(--gold);
}
@media (max-width: 640px) {
  .nearby-cities { padding: 3rem 5vw 3.5rem; }
  .nearby-list { gap: .5rem 1rem; }
  .nearby-list li { font-size: .875rem; }
}

@media (max-width: 700px) {
  /* Mobile fixed-header stack is 116px (contact-bar 32 + #hdr 84). 9.5rem
     (152px) gives ~36px clearance so the eyebrow doesn't crowd the nav.
     Matches the 768px rule above — this narrower override existed to
     trim the bottom padding only. */
  .loc-hero { padding: 9.5rem 5vw 1.5rem; }
}

/* "By Area" mega dropdown — bump dropdown panel link size. The header
   tracked all-caps treatment stays as is; only the inner links change. */
.dropdown-panel a {
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: .35rem 0;
}

/* ===================================================================
   Booking page (page-booking.php) — alternating two-column rows of
   text + portrait photo, with cream/cream-warm zebra-striped sections.
   =================================================================== */

/* Hero — re-uses .hero / .hero-bg / .hero-inner from the homepage.
   Inline style on .hero-bg overrides the default homepage image. */
.hero--booking { min-height: 42vh; }

/* Section frame: alternating cream / cream-warm via the --alt modifier. */
.booking-section {
  padding: 4.5rem 5vw;
  background: var(--cream);
}
.booking-section--alt { background: var(--cream-warm); }
.booking-section .sec-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* Section header — eyebrow + H2 + divider, centred above the grid. */
.booking-section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.booking-section-head .eyebrow { justify-content: center; }
.booking-section-head .sec-h2 { text-align: center; }
.booking-section-head .divider-sm { margin: 0 auto; }

/* Two-column grid: text left, photo right by default. The
   --photo-left modifier swaps source-order via flex order.
   align-items: start so the photo can position: sticky and track
   the viewport while the long prose column scrolls (editorial
   magazine feel). */
.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.booking-grid + .booking-grid { margin-top: 3.5rem; }
.booking-grid-text { min-width: 0; }
.booking-grid-photo {
  min-width: 0;
  /* align-self defends sticky against grid ancestors that might switch
     to align-items: stretch — the photo item must remain its natural
     height so there's room above it for sticky to engage. */
  align-self: start;
}
/* Sticky declared in its own desktop-only @media block with !important
   so nothing in the cascade can demote it back to static. Carolina's
   DevTools showed `position: static` despite the earlier rule, so this
   is the defensive belt-and-braces version. */
/* Sticky activates only at viewport >900px so it stays in sync with
   booking.css's 900px collapse-to-1col breakpoint. */
@media (min-width: 901px) {
  .booking-grid-photo {
    position: sticky !important;
    top: calc(var(--h-contact-bar) + var(--h-nav) + 1.5rem) !important;
  }
}
/* Guard the sticky containing block — any ancestor with `overflow`
   other than `visible` silently breaks sticky on its descendants.
   These three are the chain between body and the sticky photo. */
.booking-section,
.booking-section .sec-inner,
.booking-grid { overflow: visible; }
@media (max-width: 900px) {
  /* Mobile/tablet single-column layout: photo stacks below text, sticky
     is meaningless (it would just pin above the text it belongs to).
     Static keeps the photo flowing in the document. */
  .booking-grid-photo { position: static; top: auto; }
}

/* Editorial photo credit — sits below each photo block, italic-gold
   name + middot + first attached location term. Rendered by
   elite_render_random_photo_block(). */
.photo-credit {
  margin-top: .8rem;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; line-height: 1.4;
}
.photo-credit em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: .02em; text-transform: none;
  font-size: .95rem;
  color: var(--gold);
}
.booking-grid-photo .ec-photo-group { margin: 0; max-width: 100%; }
.booking-grid-photo .ec-row { margin: 0; }
/* Default packing (.ec-row--solo, .ec-row--p1) caps the image at 50% of
   the row — fine on profile pages where the row spans the full container,
   but in our two-column grid that leaves the photo at ~25% of viewport.
   Force the inner img to fill its grid column. */
.booking-grid-photo .ec-row,
.booking-grid-photo .ec-row--solo,
.booking-grid-photo .ec-row--p1 {
  justify-items: stretch;
}
.booking-grid-photo .ec-row img,
.booking-grid-photo .ec-row--solo img,
.booking-grid-photo .ec-row--p1 img {
  max-width: 100%;
  width: 100%;
}
.booking-grid-photo .booking-photo-link {
  display: block;
  overflow: hidden;
}
.booking-grid-photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}
.booking-grid-photo .booking-photo-link:hover img { transform: scale(1.02); }

/* Photo-left variant — visually swap the source-order text-first markup. */
.booking-grid--photo-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.booking-grid--photo-left .booking-grid-text  { order: 2; }
.booking-grid--photo-left .booking-grid-photo { order: 1; }

/* Editorial body wrapper used inside text columns. Fills the grid
   column — readable measure is enforced by the column being roughly
   half of the 1240px container. No artificial max-width here. */
.booking-prose {
  font-family: var(--sans);
  color: var(--text-body);
  max-width: 100%;
}
.booking-prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--charcoal);
  margin: 2.2rem 0 .8rem;
  line-height: 1.3;
}
.booking-prose h3:first-child { margin-top: 0; }
.booking-prose p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin: 0 0 1.1rem;
}
.booking-prose ul {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin: 0 0 1.4rem 0;
  padding-left: 1.4rem;
}
.booking-prose ul li { margin-bottom: .35rem; }
.booking-prose a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.booking-prose a:hover { color: var(--rose); }
.booking-prose strong { color: var(--charcoal); font-weight: 500; }

/* Promoted from pages/booking.css so the same refined long-form
   typography (lighter weight, softer graphite tone, italic gold h3
   and em, dash-bullet lists) applies anywhere .booking-section
   .booking-prose is used — not just the booking page. Without this,
   the join page and home travel section fall back to the heavier
   defaults above and read noticeably less legibly. */
.booking-section .booking-prose h3 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.45rem; color: var(--gold); line-height: 1.3;
  margin: 2.2rem 0 .9rem;
}
.booking-section .booking-prose h3:first-child { margin-top: 0; }
.booking-section .booking-prose p {
  font-family: var(--sans); font-weight: 300;
  font-size: 1rem; line-height: 1.75; color: var(--graphite);
  margin: 0 0 1.1rem;
}
.booking-section .booking-prose strong { color: var(--charcoal); font-weight: 500; }
.booking-section .booking-prose em      { font-family: var(--serif); font-style: italic; color: var(--gold); }
.booking-section .booking-prose ul,
.booking-section .booking-prose ol { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.booking-section .booking-prose ul li,
.booking-section .booking-prose ol li {
  font-family: var(--sans); font-weight: 300;
  font-size: 1rem; line-height: 1.75; color: var(--graphite);
  padding: .55rem 0 .55rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--gold-pale);
}
.booking-section .booking-prose ul li:last-child,
.booking-section .booking-prose ol li:last-child { border-bottom: none; }
.booking-section .booking-prose ul li::before {
  content: ''; position: absolute; left: 0; top: 1.05rem;
  width: 12px; height: 1px; background: var(--gold-decor);
}

/* Inline CTA wrapper — replaces the old <p class="booking-cta-row"> so
   the .btn-gold inline-flex sits cleanly between paragraphs without
   inheriting paragraph margin/leading. */
.booking-cta {
  margin: 1.8rem 0 2.2rem;
  font-size: 0;        /* eliminate inline-baseline gap */
}
/* Neutralise .booking-prose's link rules (underline + gold text) so
   a .btn-gold inside .booking-prose renders as designed — cream text,
   no underline, no colour shift on hover. */
.booking-prose a.btn-gold,
.booking-prose a.btn-gold:hover { color: var(--cream); text-decoration: none; }

.booking-rates-intro {
  font-family: var(--sans);
  color: var(--text-body);
  margin: 0 0 1.6rem;
  line-height: 1.7;
}

/* Protection callout — high-contrast safeguarding block inside the
   etiquette Q&A. Charcoal field with gold rule + cream text gives the
   line about reporting sexual assault the visual weight Carolina asked
   for, without inventing a new colour. */
.ec-callout--warning {
  background: var(--charcoal);
  border-left: 3px solid var(--gold);
  padding: 1.7rem 1.9rem;
  margin: 1.6rem 0 1.8rem;
  border-radius: 0;
}
.booking-section--alt .ec-callout--warning { background: var(--charcoal); }
.ec-callout--warning::before {
  content: 'Zero tolerance';
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .8rem;
}
.ec-callout--warning p {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
}
.ec-callout--warning strong {
  color: #fff;
  font-weight: 600;
}

/* Booking essentials strip — 6 panels (Outcalls / No late meets /
   Bookings / Deposit / ID screening / Minimum booking). Sits between
   §2 and §4 with no padding above/below to keep the rule lines flush. */
.booking-rules-section { padding-top: 0; padding-bottom: 0; }
.booking-rules-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top:    1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  margin: 0 auto;
  max-width: 1240px;
}
.booking-rules-strip .rule {
  padding: 2rem 1rem;
  text-align: center;
  border-right: 1px solid var(--gold-pale);
}
.booking-rules-strip .rule:last-child { border-right: 0; }
.booking-rules-strip .rule-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: .55rem;
}
.booking-rules-strip .rule-value {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal);
  line-height: 1.3;
}

/* Etiquette Q&A — editorial flow, NOT accordion. Lives inside a
   .booking-grid-text column on the booking page. */
.booking-qa { max-width: 100%; }
.booking-qa h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--charcoal);
  margin: 2.2rem 0 .7rem;
}
.booking-qa h3:first-child { margin-top: 0; }
.booking-qa p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin: 0 0 1.1rem;
}
.booking-qa ul {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  padding-left: 1.4rem;
  margin: .5rem 0 1.4rem;
}
.booking-qa ul li { margin-bottom: .35rem; }

/* Sign-off block — "A note from Lisa".
   A cream-warm letter card pinned on a charcoal field. The card has a
   gold border (top + bottom rule, plus a subtle gold-pale frame) and
   a generous cream-warm fill so it reads like a personal letter
   resting on a dark backdrop. The signature is the visual hero. */
.booking-signoff {
  background: var(--charcoal);
  padding: 5.5rem 5vw 6.5rem;
  position: relative;
}
/* Subtle gold radial accent at the top to soften the dark field. */
.booking-signoff::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 900px;
  height: 280px;
  background: radial-gradient(ellipse at top, rgba(184, 149, 106, .12), transparent 70%);
  pointer-events: none;
}

.signoff-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--cream-warm);
  border: 1px solid var(--gold-pale);
  border-top:    3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  padding: 4rem 3.5rem 3.5rem;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

/* Eyebrow with flanking gold rules — sits above the message like a
   chapter mark on a printed letter. */
.signoff-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 2.2rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.signoff-eyebrow-rule {
  flex: 0 0 36px;
  height: 1px;
  background: var(--gold);
}

.signoff-message {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 620px;
  margin: 0 auto 2rem;
}

/* Decorative flourish — six-pointed star glyph in gold, sized
   modestly so it acts as a divider, not a focal point. */
.signoff-flourish {
  font-size: 1.2rem;
  color: var(--gold);
  line-height: 1;
  margin: 0 0 1.5rem;
  letter-spacing: .4em;
}

.signoff-question {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--gold);
  margin: 0 0 2.6rem;
}

/* CTA on the cream card — solid charcoal pill so the call-to-action
   contrasts the warm card and echoes the dark surrounding section. */
.signoff-card .signoff-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--charcoal);
  color: var(--cream);
  padding: 1rem 2.2rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.signoff-card .signoff-cta:hover {
  background: var(--gold);
  color: var(--charcoal);
}

/* Mobile: shrink padding + tighten typography so the card still
   reads gracefully on a phone. */
@media (max-width: 700px) {
  .booking-signoff { padding: 3.5rem 5vw 4rem; }
  .signoff-card { padding: 2.8rem 1.6rem 2.6rem; }
  .signoff-message { font-size: 1.1rem; }
  .signoff-question { font-size: 1.2rem; margin-bottom: 2rem; }
  .signoff-eyebrow { gap: .6rem; font-size: .68rem; }
  .signoff-eyebrow-rule { flex-basis: 22px; }
}

@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; gap: 2rem; }
  .booking-grid--photo-left .booking-grid-text  { order: 0; }
  .booking-grid--photo-left .booking-grid-photo { order: 0; }
  .booking-prose, .booking-qa { max-width: 100%; }
}

/* Tablet: 6 → 3 across. */
@media (max-width: 1024px) {
  .booking-rules-strip { grid-template-columns: repeat(3, 1fr); }
  .booking-rules-strip .rule { border-right: 1px solid var(--gold-pale); border-bottom: 1px solid var(--gold-pale); }
  .booking-rules-strip .rule:nth-child(3n) { border-right: 0; }
  .booking-rules-strip .rule:nth-last-child(-n+3) { border-bottom: 0; }
}

/* Mobile: 3 → 2 across. */
@media (max-width: 768px) {
  .booking-rules-strip { grid-template-columns: repeat(2, 1fr); }
  .booking-rules-strip .rule { border-right: 1px solid var(--gold-pale); border-bottom: 1px solid var(--gold-pale); }
  .booking-rules-strip .rule:nth-child(3n) { border-right: 1px solid var(--gold-pale); }
  .booking-rules-strip .rule:nth-child(2n) { border-right: 0; }
  .booking-rules-strip .rule:nth-last-child(-n+2) { border-bottom: 0; }
  .booking-rules-strip .rule:nth-last-child(-n+3) { border-bottom: 1px solid var(--gold-pale); }
}

@media (max-width: 700px) {
  .booking-section { padding: 3rem 5vw; }
  .ec-callout--warning { padding: 1.4rem 1.4rem; }
}

/* ===================================================================
   Join page (page-join.php) — recruitment funnel.
   Re-uses .hero / .booking-section / .booking-section-head / .faq-item
   from the homepage and booking page; this block adds only the new
   modules: offers strip, email callout, numbered checklist, photo
   guidelines, and the sign-off block.
   =================================================================== */

/* Bottom-anchored hero per Claude Design handoff. Overrides the centered
   homepage hero scaffold: image full-bleed, cream wash fades in from the
   bottom (not the left), and both columns align to the bottom of the
   frame so the H1 and the right-hand overlay sit low against the cream
   edge — the editorial "magazine cover" treatment the design specifies. */
.hero--join {
  min-height: auto;
  height: 460px;
  padding: 0;
  background: var(--cream);
  align-items: stretch;
  display: block;
  overflow: hidden;
}
.hero--join .hero-bg {
  background-position: 50% 28%;
  filter: saturate(.92) brightness(.98);
}
/* Kill the inherited LEFT-side cream wash; let the photo bleed full-width. */
.hero--join .hero-bg::before { content: none; }
/* Strong bottom-fade gradient so the cream edge bleeds upward into the
   image and the bottom-anchored copy reads against the cream wash. */
.hero--join .hero-bg::after {
  background: linear-gradient(to bottom,
    rgba(250,248,245,0)    0%,
    rgba(250,248,245,0)    34%,
    rgba(250,248,245,.45)  52%,
    rgba(250,248,245,.82)  72%,
    rgba(250,248,245,.96)  88%,
    var(--cream)           100%);
}
.hero--join .hero-inner {
  height: 100%;
  padding: 0 5vw 1.6rem;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: end;
}
.hero--join .hero-left { padding-bottom: .2rem; }
.hero--join .hero-right {
  padding-top: 0;
  max-width: 34ch;
  padding-bottom: .15rem;
}
.hero--join h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  text-shadow: 0 1px 0 rgba(250,248,245,.55);
}
.hero--join .hero-overlay {
  text-shadow: 0 1px 0 rgba(250,248,245,.5);
  margin-bottom: .85rem;
}
.hero--join .hero-meta {
  padding-top: .7rem;
  border-top: 1px solid var(--gold-pale);
  max-width: 26ch;
}
@media (max-width: 880px) {
  .hero--join { height: 540px; }
  .hero--join .hero-bg::after {
    background: linear-gradient(to bottom,
      rgba(250,248,245,0)    0%,
      rgba(250,248,245,0)    22%,
      rgba(250,248,245,.55)  44%,
      rgba(250,248,245,.92)  66%,
      var(--cream)           92%);
  }
  /* Mobile: single centered column, copy stacked above the CTA. */
  .hero--join .hero-inner {
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center;
    text-align: center;
    gap: .85rem; padding: 0 6vw 1.6rem;
  }
  .hero--join .hero-left,
  .hero--join .hero-right { width: 100%; max-width: none; text-align: center; }
  .hero--join h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero--join .hero-meta {
    margin-left: auto; margin-right: auto;
  }
  .hero--join .hero-cta-wrap { display: flex; justify-content: center; }
}

/* Shared right-hand hero overlay treatment used by both the Join and
   Booking page heroes: a big italic Playfair tagline above a small
   uppercase gold brand-meta line. */
.hero-overlay {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.hero-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0;
}

/* Hero CTA pill — same gold pill used on the booking hero. */
.hero--join .hero-cta-wrap { margin-top: 2.1rem; }
.hero--join .hero-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.4rem;
  background: var(--gold-decor); color: var(--cream);
  font-family: 'Outfit', sans-serif; font-weight: 500;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold-decor);
  transition: background .25s var(--ease-out-soft, ease),
              color      .25s var(--ease-out-soft, ease),
              border-color .25s var(--ease-out-soft, ease);
}
.hero--join .hero-cta:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
.hero--join .hero-cta svg { width: 14px; height: 14px; }
@media (max-width: 768px) {
  .hero--join .hero-cta-wrap {
    align-self: center; margin-top: 1.8rem; width: 100%;
    display: flex; justify-content: center;
  }
  .hero--join .hero-cta { padding: .85rem 1.6rem; }
}

/* Join-page pull-quote — Playfair italic banded with gold-pale hairlines,
   sits inline within .booking-prose to break long passages with a Lisa
   pull-statement. */
.join-prose .join-feature,
.booking-prose .join-feature {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.45;
  color: var(--charcoal);
  margin: 1.8rem 0 1.4rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  text-align: left;
}
.join-prose .join-feature em,
.booking-prose .join-feature em { color: var(--gold); font-style: italic; }
.join-prose .join-feature strong,
.booking-prose .join-feature strong { color: var(--charcoal); font-weight: 500; }

/* Editorial prose block — mirrors .booking-prose. When .join-prose
   sits standalone (full-width, no grid), it caps at a sensible reading
   width and centres. When it sits inside a .booking-grid-text column
   (the side-by-side text+photo system), it stretches to the full
   column so the photo and text columns balance correctly. */
.join-prose {
  max-width: 760px;
  margin: 0 auto;
}
.booking-grid-text.join-prose {
  max-width: 100%;
  margin: 0;
}
.join-prose p { line-height: 1.8; }

/* "What we offer" 4-panel strip — same DNA as booking-rules-strip. */
.offers-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top:    1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  margin: 2rem 0;
}
.offers-strip .offer {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--gold-pale);
}
.offers-strip .offer:last-child { border-right: 0; }

.offers-strip .offer-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--gold);
  height: 38px;
}
.offers-strip .offer-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.offers-strip .offer-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.offers-strip .offer-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--charcoal);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .offers-strip { grid-template-columns: repeat(2, 1fr); }
  .offers-strip .offer:nth-child(2) { border-right: 0; }
  .offers-strip .offer:nth-child(odd) { border-right: 1px solid var(--gold-pale); }
}

/* Email-application callout — visual centrepiece of "How to Apply". */
.email-callout {
  background: var(--cream-warm, #f3eee5);
  border-top:    1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 2.5rem 2.5rem;
  margin: 2rem 0 2.5rem;
  text-align: center;
}
.email-callout .label {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.email-callout a {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.2rem;
  word-break: break-word;
}
.email-callout a:hover { color: var(--gold); }

/* Numbered application checklist. */
.application-checklist {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
}
.application-checklist > li {
  counter-increment: step;
  position: relative;
  padding: 0.8rem 0 0.8rem 3rem;
  border-bottom: 1px solid rgba(154, 117, 80, 0.15);
  font-family: 'Outfit', sans-serif;
  color: var(--text-body);
  line-height: 1.6;
}
.application-checklist > li:last-child { border-bottom: 0; }
.application-checklist > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
}

/* Photo guidelines — DO / DO NOT lists, side-by-side on desktop. */
.photo-guidelines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 2rem 0;
}
.photo-guidelines .col h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin: 0 0 1rem;
  color: var(--charcoal);
}
.photo-guidelines .col h4.do-heading { color: var(--gold); }
.photo-guidelines .col h4.dont-heading { color: var(--charcoal); }
.photo-guidelines .col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.photo-guidelines .col li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  font-family: 'Outfit', sans-serif;
  color: var(--text-body);
  line-height: 1.5;
  font-size: 0.95rem;
}
.photo-guidelines .col.do li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}
.photo-guidelines .col.dont li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--charcoal);
  font-weight: 600;
}

@media (max-width: 768px) {
  .photo-guidelines { grid-template-columns: 1fr; gap: 2rem; }
}

/* Photo example image. */
.photo-example {
  text-align: center;
  margin: 2.5rem 0;
}
.photo-example img {
  max-width: 560px;
  width: 100%;
  height: auto;
  display: inline-block;
}
.photo-example figcaption {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 0.6rem;
  font-style: italic;
}

/* FAQ within the Join page — re-uses homepage .faq-item / .faq-q / .faq-a
   but with stronger visual contrast between Q and A so they don't blur
   into one another. Question = editorial serif italic; answer = body
   sans inside a cream-warm panel with a gold left rule. */
.join-faq {
  max-width: 820px;
  margin: 0 auto;
}
.join-faq .faq-item {
  border-bottom: 1px solid var(--gold-pale);
}
.join-faq .faq-q {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--charcoal);
  padding: 1.6rem 0;
}
.join-faq .faq-q:hover { color: var(--gold); }
.join-faq .faq-icon {
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
}
/* Answer panel — cream-warm background, gold left rule, sans body,
   sized down so the editorial Q reads as the head and the A as the
   supporting copy. */
.join-faq .faq-a.open { max-height: 800px; }
.join-faq .faq-a > * {
  margin-left: 0;
}
.join-faq .faq-a p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-body);
  background: var(--cream-warm);
  border-left: 2px solid var(--gold);
  padding: 1.1rem 1.4rem;
  margin: 0 0 0.6rem;
}
.join-faq .faq-a p:last-child {
  margin-bottom: 1.4rem;
}

/* Sign-off — champagne band with letter card, mirrors page-booking.php.
   Page-locally overrides the global .signoff-card (which gives booking a
   charcoal-field/cream-letter look) to a flat champagne band with hairlines
   so the recruitment funnel ends on a warmer, lighter note. */
.join-signoff {
  background: var(--champagne, #f0e8dc);
  padding: 6.5rem 5vw;
  position: relative;
  border-top:    1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  text-align: center;
}
.join-signoff::before,
.join-signoff::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px; background: var(--gold-decor); opacity: .8;
}
.join-signoff::before { top: 2.6rem; }
.join-signoff::after  { bottom: 2.6rem; }

.join-signoff .signoff-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.join-signoff .signoff-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  margin: 0 0 2.5rem;
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
}
.join-signoff .signoff-eyebrow-rule {
  flex: 0 0 36px; height: 1px;
  background: var(--gold-decor); opacity: .55;
}
.join-signoff .signoff-eyebrow-text {
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.join-signoff .signoff-message {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 1.8rem;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.join-signoff .signoff-message em { color: var(--gold); }
.join-signoff .signoff-signature {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.25rem; color: var(--gold);
  margin: 0 0 2.4rem; letter-spacing: .04em;
}
.join-signoff .signoff-flourish {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold-decor);
  opacity: .7;
  margin: 0 0 1.6rem;
  line-height: 1;
}
.join-signoff .signoff-cta {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none;
}
@media (max-width: 700px) {
  .join-signoff { padding: 4.5rem 5vw; }
  .join-signoff::before { top: 1.8rem; }
  .join-signoff::after  { bottom: 1.8rem; }
}

/* ──────────────────────────────────────────────────────────────
   BLOG TEMPLATES — archive.php, category.php, single.php
   Extends the existing .blog-card / .blog-grid rules above.
   ────────────────────────────────────────────────────────────── */

/* Empty featured-image placeholder — used when post has no thumbnail */
.blog-card-img--empty {
  background: linear-gradient(135deg, var(--champagne), var(--blush));
}

/* ── Blog hero — shared by archive.php, category.php, single.php ──
   Reuses the .hero / .hero-bg / .hero-inner pattern from front-page,
   booking and join. Archive and category templates inline a
   background-image on .hero-bg (assets/blog-hero.jpg). Single posts
   skip the photo (each post has its own featured image below the hero)
   and fall back to a flat cream. */
.hero--blog { min-height: 36vh; }
.hero--blog.hero--single .hero-bg { background: var(--cream); }
.hero--blog .hero-eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.hero--blog .hero-eyebrow a:hover { color: var(--rose); }
.hero--blog .hero-overlay time { font-style: italic; }

/* Single-post hero — centred 1-column treatment.
   Overrides the .hero-inner 2-col grid and recentres the eyebrow + h1 + read-time. */
.hero--single .hero-inner {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero--single .hero-left {
  max-width: 880px;
  margin: 0 auto;
}
.hero--single .hero-eyebrow {
  justify-content: center;
}
.hero--single .hero-meta {
  margin-top: 1.4rem;
}

.archive-empty {
  text-align: center;
  padding: 4rem 0;
  font-family: var(--sans);
  color: var(--text-body);
}

/* ── Archive grid — overrides default 2rem gap with a more breathable 2.5rem ── */
.archive-grid-section { padding-top: 1.5rem; }
.blog-grid--archive {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 1024px) {
  .blog-grid--archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid--archive { grid-template-columns: 1fr; }
}

/* ── Pagination ── */
.archive-pagination {
  text-align: center;
  padding: 1.5rem 0 2rem;
  font-family: var(--sans);
}
.archive-pagination .page-numbers {
  display: inline-block;
  padding: .55rem .9rem;
  margin: 0 .15rem;
  color: var(--text-body);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: .9rem;
  letter-spacing: .04em;
  transition: color .18s ease, border-color .18s ease;
}
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers:focus {
  color: var(--gold);
  border-color: var(--gold-pale);
}
.archive-pagination .page-numbers.current {
  color: var(--gold);
  border-color: var(--gold);
}
.archive-pagination .page-numbers.dots {
  border-color: transparent;
  cursor: default;
}

/* ── Single post ── */
.single-post-main { padding-top: 0; }

/* Featured image */
.single-featured-img {
  margin: 0 auto 3rem;
  max-width: 1100px;
  padding: 0 5vw;
}
.single-featured-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Article body — long-form reading column */
.single-article {
  padding: 0 5vw 2rem;
}
.single-article-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.single-article-inner > p { margin: 0 0 1.4em; }
.single-article-inner h2 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--charcoal);
  margin: 2.5rem 0 1rem;
  line-height: 1.3;
}
.single-article-inner h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--charcoal);
  margin: 2rem 0 .8rem;
}
.single-article-inner blockquote {
  border-left: 2px solid var(--gold);
  padding: .4rem 0 .4rem 1.5rem;
  margin: 1.8rem 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--charcoal);
  font-size: 1.2rem;
  line-height: 1.55;
}
.single-article-inner blockquote p { margin: 0 0 .5em; }
.single-article-inner blockquote p:last-child { margin-bottom: 0; }
.single-article-inner ul,
.single-article-inner ol {
  padding-left: 1.5rem;
  margin: 1rem 0 1.4em;
}
.single-article-inner li { margin-bottom: .5em; }
.single-article-inner a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: .15em;
  transition: color .2s ease;
}
.single-article-inner a:hover { color: var(--rose); }
.single-article-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
}
.single-article-inner figure { margin: 2rem 0; }
.single-article-inner figcaption {
  font-size: .9rem;
  color: var(--gold);
  text-align: center;
  font-style: italic;
  margin-top: .5rem;
}


/* Drop cap (disabled by default — uncomment to enable) */
.single-article-inner > p:first-of-type::first-letter {
  /* font-family: var(--serif);
  font-size: 4em;
  line-height: .9;
  float: left;
  margin: .05em .1em 0 0;
  color: var(--gold); */
}

/* Related posts */
.single-related {
  background: var(--cream-warm);
  padding: 3.5rem 5vw 4.5rem;
  margin-top: 0;
}
.single-related .eyebrow { justify-content: flex-start; }
.single-related .blog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}
@media (max-width: 1024px) {
  .single-related .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .single-related .blog-grid { grid-template-columns: 1fr; }
}

/* ── Testimonials — per-escort variant (Phase 2f) ── */
.testi--escort { background: var(--cream-warm); }
.testi--escort .sec-h2 em { color: var(--gold); font-style: italic; }

/* ── Testimonials tile layout (Join page) ──
   3 explicit column-stacks. Each .testi-tile-col is its own vertical flex
   column so heights pack tightly within a column. Cards are bucketed
   server-side by the testimonial's tile_column ACF value, with an
   "auto-distribute" mode that fills the least-filled column. */
.testi-grid--tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.testi-tile-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 1024px) {
  /* Collapse straight to single column at all tablet/mobile widths.
     2-col looked disjointed because the manual tile_column sort meant
     col 3 dropped to its own row alone. With 1-col, the 3 .testi-tile-col
     wrappers stack vertically (col 1's testimonials first, then col 2's,
     then col 3's) preserving the editor's manual ordering, and each
     card takes the full row width so the section is shorter and reads
     cleanly. */
  .testi-grid--tiles { grid-template-columns: 1fr; }
}

/* ===================================================================
   Cookie consent banner
   =================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--charcoal);
  color: var(--cream);
  padding: 1rem 1.5rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cookie-banner-text {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  flex: 1;
}
.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.cookie-banner-btn {
  padding: 0.6rem 1.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--cream);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: all 0.18s ease;
}
.cookie-banner-btn--accept {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}
.cookie-banner-btn:hover {
  opacity: 0.85;
}
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; text-align: center; gap: 1rem; }
  .cookie-banner-actions { width: 100%; justify-content: center; }
}